From c00430738829a215801e7a69b485d17db9387860 Mon Sep 17 00:00:00 2001 From: Divine Date: Mon, 26 Jan 2026 14:05:58 +0000 Subject: [PATCH 01/33] I changed the header for the body --- Wireframe/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Wireframe/index.html b/Wireframe/index.html index 0e014e535..e636f0563 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -10,7 +10,7 @@

Wireframe

- This is the default, provided code and no changes have been made yet. + This is a webpage developed by Divine.

From 6529e7109edee6e62cfa0a3d8c46b0c89bf88f73 Mon Sep 17 00:00:00 2001 From: Divine Date: Mon, 26 Jan 2026 14:29:20 +0000 Subject: [PATCH 02/33] Finished the content for article 2 and 3 --- Wireframe/index.html | 19 ++++++++++++++----- 1 file changed, 14 insertions(+), 5 deletions(-) diff --git a/Wireframe/index.html b/Wireframe/index.html index e636f0563..16d0a9ae8 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -14,14 +14,23 @@

Wireframe

-
+
+

Article One: The Purpose of a README file

-

Title

- Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, - voluptates. Quisquam, voluptates. + It displays an overview to the repository and provides instructions on how to use.

- Read more + Read more +
+ +
+

Article Three: What are branches in Git?

+

A branch is like a separate workspace where you can make changes and try new ideas without affecting the main project.

+ Read More
From c51d6cc984f0f5fcce989df424a24e362da586ee Mon Sep 17 00:00:00 2001 From: Divine Date: Mon, 26 Jan 2026 14:30:46 +0000 Subject: [PATCH 03/33] Added a hash instead of a link in html --- Wireframe/index.html | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/Wireframe/index.html b/Wireframe/index.html index 16d0a9ae8..e30530720 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -20,17 +20,17 @@

Article One: The Purpose of a README file

It displays an overview to the repository and provides instructions on how to use.

- Read more + Read more

Article Three: What are branches in Git?

A branch is like a separate workspace where you can make changes and try new ideas without affecting the main project.

- Read More + Read More
From 888b0edb49a92d342f919df53deec25138fcbaaa Mon Sep 17 00:00:00 2001 From: Divine Date: Thu, 29 Jan 2026 10:31:07 +0000 Subject: [PATCH 12/33] Created the Input fields and added a submit button. --- 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 db6cbd241..8bd949dbd 100644 --- a/Form-Controls/index.html +++ b/Form-Controls/index.html @@ -21,7 +21,7 @@

Product Pick

- + From f56e156557665cac154336dec3388126b3f0168c Mon Sep 17 00:00:00 2001 From: Divine Date: Thu, 29 Jan 2026 15:23:49 +0000 Subject: [PATCH 15/33] Added checkbox for sizes --- Form-Controls/index.html | 25 ++++++++++++++++++++++++- 1 file changed, 24 insertions(+), 1 deletion(-) diff --git a/Form-Controls/index.html b/Form-Controls/index.html index ad83f3b23..2815c975b 100644 --- a/Form-Controls/index.html +++ b/Form-Controls/index.html @@ -36,11 +36,34 @@

Product Pick

-
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
From f76d6f4a4341f5264325ae30ca6e1ad1b6a5281a Mon Sep 17 00:00:00 2001 From: Divine Date: Thu, 29 Jan 2026 15:25:02 +0000 Subject: [PATCH 16/33] Added placeholders for the other options --- Form-Controls/index.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/Form-Controls/index.html b/Form-Controls/index.html index 2815c975b..34a17a497 100644 --- a/Form-Controls/index.html +++ b/Form-Controls/index.html @@ -19,11 +19,11 @@

Product Pick

- +
- +
From af1845342672b14fa2e9cc613ba65ad39bdfb48f Mon Sep 17 00:00:00 2001 From: Divine Date: Thu, 29 Jan 2026 15:28:01 +0000 Subject: [PATCH 17/33] Changed attribtue type from checkbox to radio to allow for only one selection --- Form-Controls/index.html | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/Form-Controls/index.html b/Form-Controls/index.html index 34a17a497..19a7d2169 100644 --- a/Form-Controls/index.html +++ b/Form-Controls/index.html @@ -25,15 +25,15 @@

Product Pick

- +
- +
- +
@@ -41,27 +41,27 @@

Product Pick

- +
- +
- +
- +
- +
- +
From 1ac8d59a39cb9513cf2e5c10fe39c8ddd6245ec1 Mon Sep 17 00:00:00 2001 From: Divine Date: Thu, 29 Jan 2026 15:30:38 +0000 Subject: [PATCH 18/33] Corrected mistake with radio types --- Form-Controls/index.html | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/Form-Controls/index.html b/Form-Controls/index.html index 19a7d2169..8878f6716 100644 --- a/Form-Controls/index.html +++ b/Form-Controls/index.html @@ -25,15 +25,15 @@

Product Pick

- +
- +
- +
@@ -41,27 +41,27 @@

Product Pick

- +
- +
- +
- +
- +
- +
From 0037049b9238d5ae244363865d2682157b8d7728 Mon Sep 17 00:00:00 2001 From: Divine Date: Thu, 29 Jan 2026 15:39:13 +0000 Subject: [PATCH 19/33] Fixed mistake with two inputs for one prompt --- Form-Controls/index.html | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/Form-Controls/index.html b/Form-Controls/index.html index 8878f6716..d14ddd672 100644 --- a/Form-Controls/index.html +++ b/Form-Controls/index.html @@ -21,9 +21,9 @@

Product Pick

+
- - + T-Shirt Color
@@ -37,15 +37,16 @@

Product Pick

+
+
- - + T-Shirt Sizes: XS, S, M, L, XL, XXL
- +
@@ -65,6 +66,7 @@

Product Pick

+
- +
- -

Divine

+

Divine

From d1711be2a2a0398a077b3c7acb62d21d0d01c5ca Mon Sep 17 00:00:00 2001 From: Divine Date: Thu, 29 Jan 2026 19:34:44 +0000 Subject: [PATCH 23/33] Collaborated and updated code to get good scores on lighthouse --- Form-Controls/index.html | 78 ++++++++++++++++------------------------ 1 file changed, 30 insertions(+), 48 deletions(-) diff --git a/Form-Controls/index.html b/Form-Controls/index.html index 38ec76bc8..ec368e618 100644 --- a/Form-Controls/index.html +++ b/Form-Controls/index.html @@ -2,8 +2,9 @@ + My form exercise - + @@ -13,78 +14,59 @@

Product Pick

-

Order Form

- -
+
- +
- - + +
- T-Shirt Color + Choose a Colour
- +
- +
- +
-
- T-Shirt Size - -
- - -
- -
- - -
- -
- - -
- -
- - -
- -
- - -
- -
- - -
-
+
+ + +
+
- -
-

Divine

-
From 73cf8501da5fcfcdba08c42ec08e742c7cb3d9f8 Mon Sep 17 00:00:00 2001 From: Divine Date: Thu, 29 Jan 2026 20:34:37 +0000 Subject: [PATCH 24/33] reverted code back to dummy --- Form-Controls/index.html | 96 +++++++++++----------------------------- 1 file changed, 27 insertions(+), 69 deletions(-) diff --git a/Form-Controls/index.html b/Form-Controls/index.html index ec368e618..59e775db1 100644 --- a/Form-Controls/index.html +++ b/Form-Controls/index.html @@ -1,72 +1,30 @@ - - - - My form exercise - - - - -
-

Product Pick

-
- -
-
-
- - -
- -
- - -
- -
- Choose a Colour - -
- - -
- -
- - -
- -
- - -
-
- -
- - -
- - - -
-
- - + + + + My form exercise + + + + + +
+

Product Pick

+
+
+
+ + +
+
+
+ +

By HOMEWORK SOLUTION

+
+ + + \ No newline at end of file From 75f42728b52e82986acbfa9f54308f3a61b5ac1b Mon Sep 17 00:00:00 2001 From: Divine Date: Thu, 29 Jan 2026 20:59:26 +0000 Subject: [PATCH 25/33] Final changes --- Form-Controls/index.html | 51 ++++++++++++++++++++++++++++++++++++---- 1 file changed, 46 insertions(+), 5 deletions(-) diff --git a/Form-Controls/index.html b/Form-Controls/index.html index 59e775db1..f0101166c 100644 --- a/Form-Controls/index.html +++ b/Form-Controls/index.html @@ -15,15 +15,56 @@

Product Pick

- - +
+ + +
+ +
+ + +
+ +
+ Choose a Colour +
+ + +
+ +
+ + +
+ +
+ + +
+
+ + + +
+ + +
+ + +
-

By HOMEWORK SOLUTION

+

Divine

From 9cbf78a91d9d57726d89880c5aaf14934b3f15a0 Mon Sep 17 00:00:00 2001 From: Divine Date: Fri, 30 Jan 2026 11:26:45 +0000 Subject: [PATCH 26/33] final edit --- Form-Controls/index.html | 48 +++++++++++++++++++++------------------- 1 file changed, 25 insertions(+), 23 deletions(-) diff --git a/Form-Controls/index.html b/Form-Controls/index.html index f0101166c..380085ae7 100644 --- a/Form-Controls/index.html +++ b/Form-Controls/index.html @@ -1,20 +1,22 @@ - - - - - My form exercise - - - - - -
-

Product Pick

-
-
-
+ + + + My form exercise + + + + +
+

Product Pick

+
+
+ + +
@@ -60,12 +62,12 @@

Product Pick

- -
-
- -

Divine

-
- + +
+
+ +

Divine

+
+ + - \ No newline at end of file From a818f57e13c993594bbcd0336a74faba5c0c37d1 Mon Sep 17 00:00:00 2001 From: Divine Date: Fri, 30 Jan 2026 11:58:36 +0000 Subject: [PATCH 27/33] Reverted wireframe to original --- Wireframe/index.html | 26 +++++++++----------------- 1 file changed, 9 insertions(+), 17 deletions(-) diff --git a/Wireframe/index.html b/Wireframe/index.html index 848d0314b..c6c59b8e2 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -10,32 +10,24 @@

Wireframe

- This is a webpage developed by Divine. + This is the default, provided code and no changes have been made yet.

-
-

Article One: The Purpose of a README file

+
+ +

Title

- It displays an overview to the repository and provides instructions on how to use. + Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, + voluptates. Quisquam, voluptates.

- Read more -
-
-

Article Two: The Purpose of a Wireframe

-

The wireframe gives the structural layout of a page - it defines where elements (buttons, images, etc.) go

- Read more -
-
-

Article Three: What are branches in Git?

-

A branch is like a separate workspace where you can make changes and try new ideas without affecting the main project.

- Read More + Read more

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

- + \ No newline at end of file From fe591a8a0a39f236e92f2db848593744f9e4cb93 Mon Sep 17 00:00:00 2001 From: Divine Date: Fri, 30 Jan 2026 12:08:32 +0000 Subject: [PATCH 28/33] adddeed space --- Wireframe/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Wireframe/index.html b/Wireframe/index.html index c6c59b8e2..0e014e535 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -30,4 +30,4 @@

Title

- \ No newline at end of file + From 2d0cd5e39d2e80971edb000e57e9773411b622f6 Mon Sep 17 00:00:00 2001 From: Divine Date: Fri, 30 Jan 2026 12:11:47 +0000 Subject: [PATCH 29/33] removed spaces --- Wireframe/style.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/Wireframe/style.css b/Wireframe/style.css index c56f53288..8d4356b82 100644 --- a/Wireframe/style.css +++ b/Wireframe/style.css @@ -101,12 +101,12 @@ article::before { background: rgba(0, 0, 0, 0.6); } -article > * { +article>* { grid-column: 2 / 3; position: relative; } -article > img { +article>img { grid-column: span 3; } From 10569725fb7f0bdcde740cf61a1610d35da568a1 Mon Sep 17 00:00:00 2001 From: Divine Date: Fri, 30 Jan 2026 12:17:48 +0000 Subject: [PATCH 30/33] reverted css --- Wireframe/style.css | 49 +++++++-------------------------------------- 1 file changed, 7 insertions(+), 42 deletions(-) diff --git a/Wireframe/style.css b/Wireframe/style.css index 8d4356b82..1585c4ab4 100644 --- a/Wireframe/style.css +++ b/Wireframe/style.css @@ -24,7 +24,6 @@ As well as useful links to learn more */ --line: 1px solid; --container: 1280px; } - /* ====== Base Elements ====== General rules for basic HTML elements in any context */ body { @@ -32,19 +31,16 @@ body { 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/ @@ -53,13 +49,11 @@ main { max-width: var(--container); margin: 0 auto calc(var(--space) * 4) auto; } - footer { position: fixed; bottom: 0; text-align: center; } - /* ====== 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 @@ -71,12 +65,10 @@ main { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space); - - >*:first-child { + > *: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. @@ -88,37 +80,10 @@ article { text-align: left; display: grid; grid-template-columns: var(--space) 1fr var(--space); - color: white; - background-size: cover; - background-position: center; - position: relative; -} - -article::before { - content: ""; - position: absolute; - inset: 0; - background: rgba(0, 0, 0, 0.6); -} - -article>* { - grid-column: 2 / 3; - position: relative; -} - -article>img { - grid-column: span 3; -} - - -.Article-One { - background-image: url("https://images.unsplash.com/photo-1555066931-4365d14bab8c?q=80&w=870&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"); -} - -.Article-Two { - background-image: url("https://images.unsplash.com/photo-1607706189992-eae578626c86?q=80&w=870&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"); -} - -.Article-Three { - background-image: url("https://images.unsplash.com/photo-1518773553398-650c184e0bb3?q=80&w=870&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"); + > * { + grid-column: 2/3; + } + > img { + grid-column: span 3; + } } \ No newline at end of file From 27413047f4a40d028e81faad230bd79a2193b1e1 Mon Sep 17 00:00:00 2001 From: Divine Date: Fri, 30 Jan 2026 12:18:47 +0000 Subject: [PATCH 31/33] extra space --- Wireframe/style.css | 16 +++++++++++++--- 1 file changed, 13 insertions(+), 3 deletions(-) diff --git a/Wireframe/style.css b/Wireframe/style.css index 1585c4ab4..16846431c 100644 --- a/Wireframe/style.css +++ b/Wireframe/style.css @@ -24,6 +24,7 @@ As well as useful links to learn more */ --line: 1px solid; --container: 1280px; } + /* ====== Base Elements ====== General rules for basic HTML elements in any context */ body { @@ -31,16 +32,19 @@ body { 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/ @@ -49,11 +53,13 @@ main { max-width: var(--container); margin: 0 auto calc(var(--space) * 4) auto; } + footer { position: fixed; bottom: 0; text-align: center; } + /* ====== 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 @@ -65,10 +71,12 @@ main { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space); - > *:first-child { + + >*: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. @@ -80,10 +88,12 @@ article { text-align: left; display: grid; grid-template-columns: var(--space) 1fr var(--space); - > * { + + >* { grid-column: 2/3; } - > img { + + >img { grid-column: span 3; } } \ No newline at end of file From be480723cbd6203f3f5c6a2444aea563e9215042 Mon Sep 17 00:00:00 2001 From: Divine Date: Fri, 30 Jan 2026 12:23:53 +0000 Subject: [PATCH 32/33] removed spaces --- Wireframe/style.css | 13 ++----------- 1 file changed, 2 insertions(+), 11 deletions(-) diff --git a/Wireframe/style.css b/Wireframe/style.css index 16846431c..9fb612200 100644 --- a/Wireframe/style.css +++ b/Wireframe/style.css @@ -24,7 +24,6 @@ As well as useful links to learn more */ --line: 1px solid; --container: 1280px; } - /* ====== Base Elements ====== General rules for basic HTML elements in any context */ body { @@ -32,19 +31,16 @@ body { 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/ @@ -53,13 +49,11 @@ main { max-width: var(--container); margin: 0 auto calc(var(--space) * 4) auto; } - footer { position: fixed; bottom: 0; text-align: center; } - /* ====== 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 @@ -72,11 +66,10 @@ main { grid-template-columns: 1fr 1fr; gap: var(--space); - >*:first-child { + > *: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. @@ -88,11 +81,9 @@ article { text-align: left; display: grid; grid-template-columns: var(--space) 1fr var(--space); - - >* { + > * { grid-column: 2/3; } - >img { grid-column: span 3; } From 7de9d485e0e580c603a010194b024134674763ed Mon Sep 17 00:00:00 2001 From: Divine Date: Fri, 30 Jan 2026 12:25:07 +0000 Subject: [PATCH 33/33] removed extra --- Wireframe/style.css | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/Wireframe/style.css b/Wireframe/style.css index 9fb612200..be835b6c7 100644 --- a/Wireframe/style.css +++ b/Wireframe/style.css @@ -65,7 +65,6 @@ main { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space); - > *:first-child { grid-column: span 2; } @@ -84,7 +83,7 @@ article { > * { grid-column: 2/3; } - >img { + > img { grid-column: span 3; } -} \ No newline at end of file +}