From a8f1b7735d0a1cba313465f874924b07218eeba4 Mon Sep 17 00:00:00 2001 From: Oussama Mouggal Date: Thu, 15 Jan 2026 22:08:37 +0000 Subject: [PATCH 01/16] I add titles --- Wireframe/index.html | 25 ++++++++++++++++++++++--- 1 file changed, 22 insertions(+), 3 deletions(-) diff --git a/Wireframe/index.html b/Wireframe/index.html index 0e014e535..f07628ec3 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -10,13 +10,32 @@

Wireframe

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

+ This is an article explaining README file, wireframe, and Git branches.
-

Title

+

What is the purpose of a README file?

+

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

+ Read more +
+
+ +

What is the purpose of a wireframe? +

+

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

+ Read more +
+
+ +

What is a branch in Git? +

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, voluptates. Quisquam, voluptates. From 58e9b353cda4773086920211f0c13522cf39650e Mon Sep 17 00:00:00 2001 From: Oussama Mouggal Date: Thu, 15 Jan 2026 22:13:49 +0000 Subject: [PATCH 02/16] I added the definitions --- Wireframe/index.html | 9 +++------ 1 file changed, 3 insertions(+), 6 deletions(-) diff --git a/Wireframe/index.html b/Wireframe/index.html index f07628ec3..0b0ce2349 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -17,8 +17,7 @@

Wireframe

What is the purpose of a README file?

- Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, - voluptates. Quisquam, voluptates. + The purpose of a README file is to provide essential information about a project, including how to install, use, and contribute to it.

Read more
@@ -27,8 +26,7 @@

What is the purpose of a README file?

What is the purpose of a wireframe?

- Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, - voluptates. Quisquam, voluptates. + The purpose of a wireframe is to provide a visual guide that represents the skeletal framework of a website or application, helping to plan layout and functionality.

Read more @@ -37,8 +35,7 @@

What is the purpose of a wireframe?

What is a branch in Git?

- Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, - voluptates. Quisquam, voluptates. + A branch in Git is a separate line of development that allows multiple people to work on different features or fixes simultaneously without affecting the main codebase.

Read more From 731c575650249f19ccce159ee1a1642f64cc3897 Mon Sep 17 00:00:00 2001 From: Oussama Mouggal Date: Thu, 15 Jan 2026 22:17:52 +0000 Subject: [PATCH 03/16] I added pictures using urls --- Wireframe/index.html | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/Wireframe/index.html b/Wireframe/index.html index 0b0ce2349..14cb25152 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -14,7 +14,7 @@

Wireframe

- +

What is the purpose of a README file?

The purpose of a README file is to provide essential information about a project, including how to install, use, and contribute to it. @@ -22,7 +22,7 @@

What is the purpose of a README file?

Read more
- +

What is the purpose of a wireframe?

@@ -31,7 +31,7 @@

What is the purpose of a wireframe? Read more

- +

What is a branch in Git?

From 0be1fa59bbb521440e48ab2aafa794e22e87ab97 Mon Sep 17 00:00:00 2001 From: Oussama Mouggal Date: Thu, 15 Jan 2026 22:22:45 +0000 Subject: [PATCH 04/16] I fixed the footer using css --- Wireframe/index.html | 2 +- Wireframe/style.css | 4 ++++ 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/Wireframe/index.html b/Wireframe/index.html index 14cb25152..66ede6bfe 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -42,7 +42,7 @@

What is a branch in Git?

- This is the default, provided code and no changes have been made yet. + Codeyourfuture 2026 Wireframe Assignment

diff --git a/Wireframe/style.css b/Wireframe/style.css index be835b6c7..8aa18e645 100644 --- a/Wireframe/style.css +++ b/Wireframe/style.css @@ -51,7 +51,11 @@ main { } footer { position: fixed; + left: 0; bottom: 0; + width: 100%; + background-color: #333; + color: white; text-align: center; } /* ====== Articles Grid Layout ==== From 8a68c7c52dc7772370e7dc38fdbbd07be8338e5f Mon Sep 17 00:00:00 2001 From: Oussama Mouggal Date: Thu, 15 Jan 2026 22:39:15 +0000 Subject: [PATCH 05/16] add alt description --- Wireframe/index.html | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/Wireframe/index.html b/Wireframe/index.html index 66ede6bfe..e007d4000 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -14,7 +14,7 @@

Wireframe

- + README file picture

What is the purpose of a README file?

The purpose of a README file is to provide essential information about a project, including how to install, use, and contribute to it. @@ -22,7 +22,7 @@

What is the purpose of a README file?

Read more
- + Wireframe picture

What is the purpose of a wireframe?

@@ -31,7 +31,7 @@

What is the purpose of a wireframe? Read more

- + Git logo

What is a branch in Git?

From 485d24c02f63070c8b39d2372c6f246d8385e07a Mon Sep 17 00:00:00 2001 From: Oussama Mouggal Date: Fri, 16 Jan 2026 20:53:08 +0000 Subject: [PATCH 06/16] i added name and email labels --- Form-Controls/index.html | 16 +++++++++++++--- 1 file changed, 13 insertions(+), 3 deletions(-) diff --git a/Form-Controls/index.html b/Form-Controls/index.html index 65a866cdb..3ed90eb35 100644 --- a/Form-Controls/index.html +++ b/Form-Controls/index.html @@ -13,10 +13,20 @@

Product Pick

- + + +

+ + +
+
+

Select a colour:

+ What is the customer's name? I must collect this data, and validate it. + But what is a valid name? I must decide something. + What is the customer's email? I must make sure the email is valid. Email addresses have a consistent pattern. + What colour should this t-shirt be? I must give 3 options. How will I make sure they don't pick other colours? + What size does the customer want? I must give the following 6 options: XS, S, M, L, XL, XXL-->
From 96235400b6185bb7e45413989e7b61c293f9b669 Mon Sep 17 00:00:00 2001 From: Oussama Mouggal Date: Fri, 16 Jan 2026 20:58:48 +0000 Subject: [PATCH 07/16] I added black colour radio button --- Form-Controls/index.html | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/Form-Controls/index.html b/Form-Controls/index.html index 3ed90eb35..dc3cb74eb 100644 --- a/Form-Controls/index.html +++ b/Form-Controls/index.html @@ -20,7 +20,10 @@

Product Pick



-

Select a colour:

+

Please select a colour:

+ + + -

By HOMEWORK SOLUTION

+

By Oussama Mouggal sponsored by CODEYOURFUTURE

From 2edc6490632146c58cdeef20ae746c981aede5cb Mon Sep 17 00:00:00 2001 From: Oussama Mouggal Date: Sat, 17 Jan 2026 12:17:08 +0000 Subject: [PATCH 12/16] fix: label to better redability --- Form-Controls/index.html | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/Form-Controls/index.html b/Form-Controls/index.html index 9abd12548..82c01f6a1 100644 --- a/Form-Controls/index.html +++ b/Form-Controls/index.html @@ -20,21 +20,22 @@

Product Pick

/>

- - + +

+

Please select a color:

- +

- +

- +

@@ -57,7 +58,7 @@

Product Pick

-

By Oussama Mouggal sponsored by CODEYOURFUTURE

+

By Oussama Mouggal sponsored by Codeyourfuture

From ed7b38b7f9efffd4f6b7d7895409b8f1ea2e57d7 Mon Sep 17 00:00:00 2001 From: Oussama Mouggal Date: Sat, 17 Jan 2026 14:33:26 +0000 Subject: [PATCH 13/16] cleaning code --- Wireframe/index.html | 32 ++++++++---------------------- Wireframe/style.css | 6 +----- index.html | 46 -------------------------------------------- 3 files changed, 9 insertions(+), 75 deletions(-) delete mode 100644 index.html diff --git a/Wireframe/index.html b/Wireframe/index.html index e007d4000..c6c59b8e2 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -10,40 +10,24 @@

Wireframe

- This is an article explaining README file, wireframe, and Git branches. + This is the default, provided code and no changes have been made yet. +

- README file picture -

What is the purpose of a README file?

-

- The purpose of a README file is to provide essential information about a project, including how to install, use, and contribute to it. -

- Read more -
-
- Wireframe picture -

What is the purpose of a wireframe? -

-

- The purpose of a wireframe is to provide a visual guide that represents the skeletal framework of a website or application, helping to plan layout and functionality. -

- Read more -
-
- Git logo -

What is a branch in Git? -

+ +

Title

- A branch in Git is a separate line of development that allows multiple people to work on different features or fixes simultaneously without affecting the main codebase. + Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, + voluptates. Quisquam, voluptates.

Read more

- Codeyourfuture 2026 Wireframe Assignment + This is the default, provided code and no changes have been made yet.

- + \ No newline at end of file diff --git a/Wireframe/style.css b/Wireframe/style.css index 8aa18e645..1585c4ab4 100644 --- a/Wireframe/style.css +++ b/Wireframe/style.css @@ -51,11 +51,7 @@ main { } footer { position: fixed; - left: 0; bottom: 0; - width: 100%; - background-color: #333; - color: white; text-align: center; } /* ====== Articles Grid Layout ==== @@ -90,4 +86,4 @@ article { > img { grid-column: span 3; } -} +} \ No newline at end of file diff --git a/index.html b/index.html deleted file mode 100644 index 80aa49666..000000000 --- a/index.html +++ /dev/null @@ -1,46 +0,0 @@ - - - - - - Coursework - - - -

🧐 CYF Coursework Disposable Branch Previews

-
-
    -
  1. -

    Project 1: Wireframe

    -

    - Mentors: - open the assignment in a tab -

    -
    2. -
  2. -

    Project 2: Form Controls

    -

    - Mentors: - open the assignment in a tab -

    -
    3. -
-
- - - From 89b79e0bba5bfa346df9bd2414d80ae0c3bf6a26 Mon Sep 17 00:00:00 2001 From: Oussama-Mouggal Date: Sat, 17 Jan 2026 15:51:13 +0000 Subject: [PATCH 14/16] Update Form-Controls/index.html Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> --- 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 82c01f6a1..610bbe235 100644 --- a/Form-Controls/index.html +++ b/Form-Controls/index.html @@ -15,8 +15,8 @@

Product Pick



From 7a8807b112962e6d9c465db567c2c69342e5843e Mon Sep 17 00:00:00 2001 From: Oussama-Mouggal Date: Sat, 17 Jan 2026 15:51:31 +0000 Subject: [PATCH 15/16] Update Form-Controls/index.html Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> --- 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 610bbe235..0868b2cdd 100644 --- a/Form-Controls/index.html +++ b/Form-Controls/index.html @@ -20,7 +20,7 @@

Product Pick

/>

- +


From 0e5a82b0529ea12cf1f899a18c3af8ee15b5cddd Mon Sep 17 00:00:00 2001 From: Oussama-Mouggal Date: Sat, 17 Jan 2026 15:52:03 +0000 Subject: [PATCH 16/16] Update Form-Controls/index.html Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> --- Form-Controls/index.html | 28 +++++++++++++++------------- 1 file changed, 15 insertions(+), 13 deletions(-) diff --git a/Form-Controls/index.html b/Form-Controls/index.html index 0868b2cdd..bee01b9f6 100644 --- a/Form-Controls/index.html +++ b/Form-Controls/index.html @@ -25,19 +25,21 @@

Product Pick



-

Please select a color:

- - -
-
- - -
-
- - -
-
+
+ Please select a color: + + +
+
+ + +
+
+ + +
+
+