From 91e7a074aabcda579b576e5bc2d6255ec205e2f0 Mon Sep 17 00:00:00 2001 From: Maher Abou-Albourgol Date: Thu, 18 Sep 2025 10:42:14 +0100 Subject: [PATCH 01/10] add header with title and description --- Wireframe/index.html | 64 ++++++++++++--------- Wireframe/style.css | 132 +++++++++++++++++-------------------------- 2 files changed, 88 insertions(+), 108 deletions(-) diff --git a/Wireframe/index.html b/Wireframe/index.html index 0e014e535..178312d1f 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -1,33 +1,41 @@ - - - - Wireframe - - - -
-

Wireframe

-

- This is the default, provided code and no changes have been made yet. -

-
-
+ + + + Wireframe Project + + + +
+

Wireframe Project

+

A simple webpage following the wireframe layout

+
+ +
+
- -

Title

-

- Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, - voluptates. Quisquam, voluptates. -

- Read more +

What is the purpose of a README file?

+

A README explains what the project is, how to install it, and how to use it.

+ Learn more
-
-
-

- This is the default, provided code and no changes have been made yet. -

-
- + +
+

What is the purpose of a wireframe?

+

A wireframe shows the basic structure of a webpage before coding starts.

+ Learn more +
+ +
+

What is a branch in Git?

+

A branch in Git lets you work on new features or fixes separately from the main code.

+ Learn more +
+ +
+ + + diff --git a/Wireframe/style.css b/Wireframe/style.css index be835b6c7..f3d629a51 100644 --- a/Wireframe/style.css +++ b/Wireframe/style.css @@ -1,89 +1,61 @@ -/* Here are some starter styles -You can edit these or replace them entirely -It's showing you a common way to organise CSS -And includes solutions to common problems -As well as useful links to learn more */ - -/* ====== Design Palette ====== - This is our "design palette". - It sets out the colours, fonts, styles etc to be used in this design - At work, a designer will give these to you based on the corporate brand, but while you are learning - You can design it yourself if you like - Inspect the starter design with Devtools - Click on the colour swatches to see what is happening - I've put some useful CSS you won't have learned yet - For you to explore and play with if you are interested - https://web.dev/articles/min-max-clamp - https://scrimba.com/learn-css-variables-c026 -====== Design Palette ====== */ -:root { - --paper: oklch(7 0 0); - --ink: color-mix(in oklab, var(--color) 5%, black); - --font: 100%/1.5 system-ui; - --space: clamp(6px, 6px + 2vw, 15px); - --line: 1px solid; - --container: 1280px; +* { + margin: 0; + padding: 0; + box-sizing: border-box; } -/* ====== Base Elements ====== - General rules for basic HTML elements in any context */ + body { - background: var(--paper); - color: var(--ink); - font: var(--font); -} -a { - padding: var(--space); - border: var(--line); - max-width: fit-content; -} -img, -svg { - width: 100%; - object-fit: cover; -} -/* ====== Site Layout ====== -Setting the overall rules for page regions -https://www.w3.org/WAI/tutorials/page-structure/regions/ -*/ -main { - max-width: var(--container); - margin: 0 auto calc(var(--space) * 4) auto; + font-family: Arial, sans-serif; + min-height: 100vh; + display: flex; + flex-direction: column; } -footer { - position: fixed; - bottom: 0; + +header { + background: #333; + color: white; text-align: center; + padding: 1rem; + border-radius: 50px; + margin: 1rem; } -/* ====== Articles Grid Layout ==== -Setting the rules for how articles are placed in the main element. -Inspect this in Devtools and click the "grid" button in the Elements view -Play with the options that come up. -https://developer.chrome.com/docs/devtools/css/grid -https://gridbyexample.com/learn/ -*/ + + main { - display: grid; - grid-template-columns: 1fr 1fr; - gap: var(--space); - > *:first-child { - grid-column: span 2; - } + flex: 1; + display: flex; + justify-content: center; + align-items: flex-start; + padding: 2rem; } -/* ====== Article Layout ====== -Setting the rules for how elements are placed in the article. -Now laying out just the INSIDE of the repeated card/article design. -Keeping things orderly and separate is the key to good, simple CSS. -*/ + +.articles { + display: flex; + gap: 1rem; +} + article { - border: var(--line); - padding-bottom: var(--space); - text-align: left; - display: grid; - grid-template-columns: var(--space) 1fr var(--space); - > * { - grid-column: 2/3; - } - > img { - grid-column: span 3; - } + background: #f4f4f4; + padding: 1rem; + border-radius: 8px; + width: 250px; +} + +article h2 { + margin-bottom: 0.5rem; } + +article p { + margin-bottom: 0.5rem; +} + + +footer { + background: #333; + color: white; + text-align: center; + padding: 1rem; + position: fixed; + bottom: 0; + width: 100%; +} \ No newline at end of file From d6eb349751dd61110c944b637ca7f3b9498ecbd7 Mon Sep 17 00:00:00 2001 From: Maher Abou-Albourgol Date: Thu, 18 Sep 2025 10:45:35 +0100 Subject: [PATCH 02/10] test: add title and paragraph --- Wireframe/index.html | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/Wireframe/index.html b/Wireframe/index.html index 178312d1f..2d33ea3f2 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -3,13 +3,13 @@ - Wireframe Project + My Wireframe Project
-

Wireframe Project

-

A simple webpage following the wireframe layout

+

My Wireframe Project

+

A normal webpage following the wireframe layout

From 2ea8a6fbfb8ebb32a8340a8951263b69d2a1bb91 Mon Sep 17 00:00:00 2001 From: Maher Abou-Albourgol Date: Thu, 18 Sep 2025 11:06:17 +0100 Subject: [PATCH 03/10] add header, 3 articles, and footer; style layout in CSS --- Wireframe/index.html | 6 +++--- Wireframe/style.css | 4 ++-- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/Wireframe/index.html b/Wireframe/index.html index 2d33ea3f2..63a3b4565 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -8,7 +8,7 @@
-

My Wireframe Project

+

My First Wireframe Project

A normal webpage following the wireframe layout

@@ -28,14 +28,14 @@

What is the purpose of a wireframe?

What is a branch in Git?

-

A branch in Git lets you work on new features or fixes separately from the main code.

+

A branch in Git allows you work on new features or fixes separately from the general code.

Learn more
-

© 2025 My Wireframe Project

+
diff --git a/Wireframe/style.css b/Wireframe/style.css index f3d629a51..4589d6938 100644 --- a/Wireframe/style.css +++ b/Wireframe/style.css @@ -12,7 +12,7 @@ body { } header { - background: #333; + background: #737373; color: white; text-align: center; padding: 1rem; @@ -51,7 +51,7 @@ article p { footer { - background: #333; + background: #737373; color: white; text-align: center; padding: 1rem; From 1a19b22e08eca36703a813ca4ed327cf99f22602 Mon Sep 17 00:00:00 2001 From: Maher Abou-Albourgol Date: Wed, 1 Oct 2025 20:29:31 +0100 Subject: [PATCH 04/10] Complete Form Controls homework --- Form-Controls/index.html | 90 +++++++++++++++++++++++++++++++++------- 1 file changed, 75 insertions(+), 15 deletions(-) diff --git a/Form-Controls/index.html b/Form-Controls/index.html index 65a866cdb..ddf4d3d89 100644 --- a/Form-Controls/index.html +++ b/Form-Controls/index.html @@ -8,20 +8,80 @@ -
-

Product Pick

-
-
-
- - -
-
-
- -

By HOMEWORK SOLUTION

-
+
+
+

Product Pick

+
+ +
+
+
+ Customer Information + + + +

+ + + +

+ +
+ + + +
+ + +
+ + +

+ + +

+ +
+
+
+ +
+

By Maher Abou Albourgol - 2025 September Cohort - London

+
+
From cc5c054b82f7796403236a8d2f255a4a04a82597 Mon Sep 17 00:00:00 2001 From: Maher Abou-Albourgol Date: Wed, 1 Oct 2025 20:52:11 +0100 Subject: [PATCH 05/10] Fix label 'for' attribute and validation issues --- Form-Controls/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Form-Controls/index.html b/Form-Controls/index.html index ddf4d3d89..3f1280374 100644 --- a/Form-Controls/index.html +++ b/Form-Controls/index.html @@ -33,7 +33,7 @@

Product Pick



- +
Date: Sat, 11 Oct 2025 22:14:47 +0100 Subject: [PATCH 06/10] Total changes to the page according to the volunteer advice --- Wireframe/index.html | 49 +++++++++++++++++++++++ Wireframe/style.css | 95 ++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 144 insertions(+) diff --git a/Wireframe/index.html b/Wireframe/index.html index 63a3b4565..7007df9b2 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -38,4 +38,53 @@

What is a branch in Git?

+ + + + My Wireframe + + + +
+

Wireframe

+

+ This page contains 3 articles using grid property in css. +

+
+
+
+ img +

What is the purpose of a README file?

+

+ A README explains what the project is, how to install it, and how to use it. +

+ Read more +
+ +
+ + img +

What is the purpose of a wireframe?

+

+ A wireframe shows the basic structure of a webpage before coding starts. +

+ Read more +
+
+ + img +

What is a branch in Git?

+

+ A branch in Git allows you work on new features or fixes separately from the general code. +

+ Read more +
+ +
+
+

+ Maher Abou Albourgol - London - September 2025 Cohort +

+
+ diff --git a/Wireframe/style.css b/Wireframe/style.css index 4589d6938..bb473a2d7 100644 --- a/Wireframe/style.css +++ b/Wireframe/style.css @@ -3,6 +3,14 @@ padding: 0; box-sizing: border-box; } +:root { + --paper: oklch(7 0 0); + --ink: color-mix(in oklab, var(--color) 5%, black); + --font: 100%/1.5 system-ui; + --space: clamp(6px, 6px + 2vw, 15px); + --line: 1px solid; + --container: 820px; +} body { font-family: Arial, sans-serif; @@ -19,6 +27,67 @@ header { border-radius: 50px; margin: 1rem; } +body{ + background: var(--paper); + color: var(--ink); + font: var(--font); + margin: 0; + padding: 0; + box-sizing: border-box; +} +header { + position: static; + top: 0; + left: 0; + right: 0; + width: 100%; + margin: 0; + padding: 0; + text-align: center; + background: gray; + z-index: auto; + height: 70px; +} + +header h1 { + margin: 0; + padding: 12px; +} +a { + padding: 0.3em 0.6em; + border: var(--line); + max-width: fit-content; +} + +img, +svg { + width: 100%; + height: auto; + object-fit: cover; + + +} + +main { + max-width: var(--container); + margin: 0 auto calc(var(--space) * 4) auto; + padding-top: 70px; + display: grid; + grid-template-columns: 1fr 1fr; + gap: var(--space); +} +footer { + position: relative; + text-align: center; + background: gray; + width: 100vw; + margin: 0; + left: 0; + right: 0; + bottom: 0; + padding: 10px 0; + box-sizing: border-box; +} main { @@ -58,4 +127,30 @@ footer { position: fixed; bottom: 0; width: 100%; +} + +article { + border: var(--line); + text-align: left; + display: grid; + gap: calc(var(--space) / 2); +} + + + +article > img { + grid-column: 1 / -1; +} + +article > :not(img) { + padding-left: var(--space); + padding-right: var(--space); + padding-bottom: var(--space); +} + +article > a { + margin-bottom: var(--space); + margin-left: var(--space); + margin-right: var(--space); + align-self: start; } \ No newline at end of file From 8712a7524f452da7fc9b07535d0c87856ddedbea Mon Sep 17 00:00:00 2001 From: Maher Abou-Albourgol Date: Sun, 12 Oct 2025 00:07:00 +0100 Subject: [PATCH 07/10] Fix accessibility: add fieldset and legend for T-Shirt color radios --- Form-Controls/index.html | 94 +++++++++++++++++++++++++++++++++------- 1 file changed, 78 insertions(+), 16 deletions(-) diff --git a/Form-Controls/index.html b/Form-Controls/index.html index 65a866cdb..54c49aab7 100644 --- a/Form-Controls/index.html +++ b/Form-Controls/index.html @@ -8,20 +8,82 @@ -
-

Product Pick

-
-
-
- - -
-
-
- -

By HOMEWORK SOLUTION

-
+
+
+

Product Pick

+
+ +
+
+
+ Customer Information + + + +

+ + + +

+
+ T-Shirt Colour: +
+ + + +
+ + +
+ + +
+

+ + +

+ +
+
+
+ +
+

By Maher Abou Albourgol - 2025 September Cohort - London

+
+
- + \ No newline at end of file From cbe186f00b112cae67f9cdf40ba702d358b2af34 Mon Sep 17 00:00:00 2001 From: Maher Abou-Albourgol Date: Sun, 12 Oct 2025 00:17:35 +0100 Subject: [PATCH 08/10] Fix accessibility: add fieldset and legend for T-Shirt color radios --- Form-Controls/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Form-Controls/index.html b/Form-Controls/index.html index 54c49aab7..71e281f07 100644 --- a/Form-Controls/index.html +++ b/Form-Controls/index.html @@ -3,7 +3,7 @@ - My form exercise + My Form From cd4438f4e382811220deb274c60d3714ba6706c0 Mon Sep 17 00:00:00 2001 From: Maher-A-B <84132313+Maher-A-B@users.noreply.github.com> Date: Sun, 12 Oct 2025 00:38:13 +0100 Subject: [PATCH 09/10] Delete Wireframe/index.html Wrong path --- Wireframe/index.html | 90 -------------------------------------------- 1 file changed, 90 deletions(-) delete mode 100644 Wireframe/index.html diff --git a/Wireframe/index.html b/Wireframe/index.html deleted file mode 100644 index 7007df9b2..000000000 --- a/Wireframe/index.html +++ /dev/null @@ -1,90 +0,0 @@ - - - - - - My Wireframe Project - - - -
-

My First Wireframe Project

-

A normal webpage following the wireframe layout

-
- -
-
-
-

What is the purpose of a README file?

-

A README explains what the project is, how to install it, and how to use it.

- Learn more -
- -
-

What is the purpose of a wireframe?

-

A wireframe shows the basic structure of a webpage before coding starts.

- Learn more -
- -
-

What is a branch in Git?

-

A branch in Git allows you work on new features or fixes separately from the general code.

- Learn more -
-
-
- -
- -
- - - - - My Wireframe - - - -
-

Wireframe

-

- This page contains 3 articles using grid property in css. -

-
-
-
- img -

What is the purpose of a README file?

-

- A README explains what the project is, how to install it, and how to use it. -

- Read more -
- -
- - img -

What is the purpose of a wireframe?

-

- A wireframe shows the basic structure of a webpage before coding starts. -

- Read more -
-
- - img -

What is a branch in Git?

-

- A branch in Git allows you work on new features or fixes separately from the general code. -

- Read more -
- -
- - - From 9d45d3d0b164ef81aae6a4137e7f58c3432624cc Mon Sep 17 00:00:00 2001 From: Maher-A-B <84132313+Maher-A-B@users.noreply.github.com> Date: Sun, 12 Oct 2025 00:38:54 +0100 Subject: [PATCH 10/10] Delete Wireframe/style.css Wrong path --- Wireframe/style.css | 156 -------------------------------------------- 1 file changed, 156 deletions(-) delete mode 100644 Wireframe/style.css diff --git a/Wireframe/style.css b/Wireframe/style.css deleted file mode 100644 index bb473a2d7..000000000 --- a/Wireframe/style.css +++ /dev/null @@ -1,156 +0,0 @@ -* { - margin: 0; - padding: 0; - box-sizing: border-box; -} -:root { - --paper: oklch(7 0 0); - --ink: color-mix(in oklab, var(--color) 5%, black); - --font: 100%/1.5 system-ui; - --space: clamp(6px, 6px + 2vw, 15px); - --line: 1px solid; - --container: 820px; -} - -body { - font-family: Arial, sans-serif; - min-height: 100vh; - display: flex; - flex-direction: column; -} - -header { - background: #737373; - color: white; - text-align: center; - padding: 1rem; - border-radius: 50px; - margin: 1rem; -} -body{ - background: var(--paper); - color: var(--ink); - font: var(--font); - margin: 0; - padding: 0; - box-sizing: border-box; -} -header { - position: static; - top: 0; - left: 0; - right: 0; - width: 100%; - margin: 0; - padding: 0; - text-align: center; - background: gray; - z-index: auto; - height: 70px; -} - -header h1 { - margin: 0; - padding: 12px; -} -a { - padding: 0.3em 0.6em; - border: var(--line); - max-width: fit-content; -} - -img, -svg { - width: 100%; - height: auto; - object-fit: cover; - - -} - -main { - max-width: var(--container); - margin: 0 auto calc(var(--space) * 4) auto; - padding-top: 70px; - display: grid; - grid-template-columns: 1fr 1fr; - gap: var(--space); -} -footer { - position: relative; - text-align: center; - background: gray; - width: 100vw; - margin: 0; - left: 0; - right: 0; - bottom: 0; - padding: 10px 0; - box-sizing: border-box; -} - - -main { - flex: 1; - display: flex; - justify-content: center; - align-items: flex-start; - padding: 2rem; -} - -.articles { - display: flex; - gap: 1rem; -} - -article { - background: #f4f4f4; - padding: 1rem; - border-radius: 8px; - width: 250px; -} - -article h2 { - margin-bottom: 0.5rem; -} - -article p { - margin-bottom: 0.5rem; -} - - -footer { - background: #737373; - color: white; - text-align: center; - padding: 1rem; - position: fixed; - bottom: 0; - width: 100%; -} - -article { - border: var(--line); - text-align: left; - display: grid; - gap: calc(var(--space) / 2); -} - - - -article > img { - grid-column: 1 / -1; -} - -article > :not(img) { - padding-left: var(--space); - padding-right: var(--space); - padding-bottom: var(--space); -} - -article > a { - margin-bottom: var(--space); - margin-left: var(--space); - margin-right: var(--space); - align-self: start; -} \ No newline at end of file