From 86cdaba35bb037056830d86774fabb038d09901c Mon Sep 17 00:00:00 2001 From: Chibuikem Okwu <101254316+chibu0070@users.noreply.github.com> Date: Fri, 10 Oct 2025 23:57:24 +0100 Subject: [PATCH 01/10] Feature/Wireframe: adjust padding and contrast based on DevTools and Lighthouse feedback --- Wireframe/index.html | 70 +++++++++++++++++++++++++++++++++++++------- Wireframe/style.css | 5 ++-- 2 files changed, 62 insertions(+), 13 deletions(-) diff --git a/Wireframe/index.html b/Wireframe/index.html index 0e014e535..31773f56d 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -3,31 +3,79 @@ - Wireframe + Wireframe. +
-

Wireframe

+

Wireframe Web Project

- This is the default, provided code and no changes have been made yet. + Learn about key tools every developer uses: README files, wireframes, + and Git branches.

+
-

Title

+

What is the purpose of a README file?

+

+ A README file introduces a project, explaining what it does, how + to install it, and how to use it. It helps others understand your + project quickly. +

+ Learn more about README files
+
+
+
+ +
+ +
+

What is the purpose of a wireframe?

- Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, - voluptates. Quisquam, voluptates. + A wireframe is a visual guide that outlines a webpage’s structure. + Designers and developers use it to plan layouts before adding + content or styling.

- Read more -
+ Learn more about wireframes + +
+ + +
+ +
+

What is a branch in Git?

+

+ A Git branch allows developers to work on new features or fixes + separately from the main code. This keeps the main project stable + while updates are tested. +

+ Learn more about Git branches < +
+
+
+
+ diff --git a/Wireframe/style.css b/Wireframe/style.css index be835b6c7..3a1a9dd15 100644 --- a/Wireframe/style.css +++ b/Wireframe/style.css @@ -50,9 +50,10 @@ main { margin: 0 auto calc(var(--space) * 4) auto; } footer { - position: fixed; - bottom: 0; + background-color: #333; + color: white; text-align: center; + padding: 1em; } /* ====== Articles Grid Layout ==== Setting the rules for how articles are placed in the main element. From 0a860ad75ed3c089e9700b754060038ba753a3c0 Mon Sep 17 00:00:00 2001 From: Chibuikem Okwu <101254316+chibu0070@users.noreply.github.com> Date: Sat, 11 Oct 2025 00:02:02 +0100 Subject: [PATCH 02/10] adjusted CSS styl according to leon's comment's From 08d1ccf6df9df966f66b3b3135eff39e0306054c Mon Sep 17 00:00:00 2001 From: Chibuikem Okwu <101254316+chibu0070@users.noreply.github.com> Date: Sat, 11 Oct 2025 00:16:26 +0100 Subject: [PATCH 03/10] Feature/FormControls: add semantic HTML form to collect name, email, colour and size for a T-shirt order. --- Form-Controls/index.html | 33 +++++++++++++++++++++------------ 1 file changed, 21 insertions(+), 12 deletions(-) diff --git a/Form-Controls/index.html b/Form-Controls/index.html index 65a866cdb..8cb12d586 100644 --- a/Form-Controls/index.html +++ b/Form-Controls/index.html @@ -1,23 +1,32 @@ - - - My form exercise - - + + + T-Shirt Order Form
-

Product Pick

+

T-Shirt Sales form

+

Please confirm your details and choose your preferred colour and size.

-
- - -
+
+
+ +
+ + +
+