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/11] 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/11] 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/11] 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/11] 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/11] 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/11] 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/11] 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/11] 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 e5ed222aa8a29604d300cad3f1b87d39141d8197 Mon Sep 17 00:00:00 2001 From: Maher Abou-Albourgol Date: Sun, 12 Oct 2025 18:09:27 +0100 Subject: [PATCH 09/11] Wireframe corrected --- Wireframe/index.html | 38 --------------- Wireframe/style.css | 107 ++++++++++++------------------------------- 2 files changed, 29 insertions(+), 116 deletions(-) diff --git a/Wireframe/index.html b/Wireframe/index.html index 7007df9b2..a5eaa6ef1 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -1,43 +1,5 @@ - - - - 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 -
-
-
- -
- -
- diff --git a/Wireframe/style.css b/Wireframe/style.css index bb473a2d7..dbc19d83a 100644 --- a/Wireframe/style.css +++ b/Wireframe/style.css @@ -1,8 +1,5 @@ -* { - margin: 0; - padding: 0; - box-sizing: border-box; -} +/* 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); @@ -12,22 +9,8 @@ --container: 820px; } +/* ====== Base Elements ====== General rules for basic HTML elements in any context */ 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); @@ -35,8 +18,10 @@ body{ padding: 0; box-sizing: border-box; } + header { - position: static; + position: static; + /* default — it scrolls away normally */ top: 0; left: 0; right: 0; @@ -45,7 +30,8 @@ header { padding: 0; text-align: center; background: gray; - z-index: auto; + z-index: auto; + /* no need to stack it */ height: 70px; } @@ -53,8 +39,9 @@ header h1 { margin: 0; padding: 12px; } + a { - padding: 0.3em 0.6em; + padding: 0.3em 0.6em; border: var(--line); max-width: fit-content; } @@ -64,10 +51,9 @@ svg { width: 100%; height: auto; 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; @@ -76,6 +62,7 @@ main { grid-template-columns: 1fr 1fr; gap: var(--space); } + footer { position: relative; text-align: center; @@ -89,68 +76,32 @@ footer { box-sizing: border-box; } - +/* ====== 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 { - 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; -} + display: grid; + grid-template-columns: 1fr 1fr; + gap: var(--space); -article p { - margin-bottom: 0.5rem; -} - - -footer { - background: #737373; - color: white; - text-align: center; - padding: 1rem; - position: fixed; - bottom: 0; - width: 100%; + >*:first-child { + grid-column: span 2; + } } +/* ====== 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. */ article { border: var(--line); + padding-bottom: var(--space); text-align: left; display: grid; gap: calc(var(--space) / 2); -} - + justify-content: space-between; + ; + >* { + grid-column: 2/3; + } -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; + >img { + grid-column: span 2; + } } \ No newline at end of file From 3984668e66ffa768b08ef1d98f81cb118e6e0693 Mon Sep 17 00:00:00 2001 From: Maher-A-B <84132313+Maher-A-B@users.noreply.github.com> Date: Sun, 12 Oct 2025 18:17:36 +0100 Subject: [PATCH 10/11] Delete Form-Controls/index.html Wrong path --- Form-Controls/index.html | 90 ---------------------------------------- 1 file changed, 90 deletions(-) delete mode 100644 Form-Controls/index.html diff --git a/Form-Controls/index.html b/Form-Controls/index.html deleted file mode 100644 index 07003c266..000000000 --- a/Form-Controls/index.html +++ /dev/null @@ -1,90 +0,0 @@ - - - - - - My Form - - - - -
-
-

Product Pick

-
- -
-
-
- Customer Information - - - -

- - - -

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

- - -

- -
-
-
- -
-

By Maher Abou Albourgol - 2025 September Cohort - London

-
-
- - \ No newline at end of file From 5f89a8c8f12ae7a3678a2e3546ceb92d28ac9ba0 Mon Sep 17 00:00:00 2001 From: Maher Abou-Albourgol Date: Mon, 13 Oct 2025 19:39:09 +0100 Subject: [PATCH 11/11] Fix footer and the main articl's title and description --- Wireframe/index.html | 3 ++- Wireframe/style.css | 29 ++++++++++++++++++++--------- 2 files changed, 22 insertions(+), 10 deletions(-) diff --git a/Wireframe/index.html b/Wireframe/index.html index a5eaa6ef1..851dfa960 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -13,7 +13,7 @@

Wireframe

This page contains 3 articles using grid property in css.

-
+
img

What is the purpose of a README file?

@@ -43,6 +43,7 @@

What is a branch in Git?

+