From 2d1b73d0caee26f974e1f61349747ec3aec14658 Mon Sep 17 00:00:00 2001
From: russom <russom.g.meskel@gmail.cpm>
Date: Wed, 2 Sep 2026 22:04:20 +0100
Subject: [PATCH 01/11] Update code from 26-ITP-MAY to 26 ITP-SEP for
 resubmitting

---
 Form-Controls/index.html | 53 ++++++++++++++++++++++++++++++++++++----
 1 file changed, 48 insertions(+), 5 deletions(-)
diff --git a/Form-Controls/index.html b/Form-Controls/index.html
index 74b591ffc..1cf0eed29 100644
--- a/Form-Controls/index.html
+++ b/Form-Controls/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="utf-8" />
@@ -13,15 +13,58 @@ <h1>Product Pick</h1>
     </header>
     <main>
       <form>
-        <!-- write your html here-->
-        <!-- 
-          try writing out the requirements first as comments
+        <div>
+          <label for="name"> Name:</label>
+          <input
+            type="text"
+            id="name"
+            name="name"
+            required
+            pattern="\S{2,}"
+            title="Please enter at least two non-space characters."
+          />
+        </div>
+
+        <div>
+          <label for="email"> Email:</label>
+          <input type="email" id="email" name="email" required />
+        </div>
+        <div>
+          <label for="color"> Colour:</label>
+          <select id="color" name="color" required>
+            <option value="">Please select a colour</option>
+            <option value="red">Red</option>
+            <option value="blue">Blue</option>
+            <option value="green">Green</option>
+          </select>
+        </div>
+        <div>
+          <label for="size"> Size:</label>
+          <select id="size" name="size" required>
+            <option value="">Please select a size</option>
+            <option value="xs">XS</option>
+            <option value="s">S</option>
+            <option value="m">M</option>
+            <option value="l">L</option>
+            <option value="xl">XL</option>
+            <option value="xxl">XXL</option>
+          </select>
+        </div>
+        <div>
+          <button type="submit">Submit</button>
+        </div>
+        <!--
         this will also help you fill in your PR message later-->
+        <!-- 
+        What is the customer's name? I must collect this data and ensure it contains at least two non-space characters.
+        What is the customer's email? I must make sure the email is valid. Email addresses follow a consistent pattern.
+        What colour should this T-shirt be? I must provide 3 options. How will I ensure they do not choose other colours?
+        What size does the customer want? I must provide the following 6 options: XS, S, M, L, XL, XXL -->
       </form>
     </main>
     <footer>
       <!-- change to your name-->
-      <p>By HOMEWORK SOLUTION</p>
+      <p>By Russom G</p>
     </footer>
   </body>
 </html>

From 21df038b00155aa5a46b254a3766a0435660e13f Mon Sep 17 00:00:00 2001
From: russom <russom.g.meskel@gmail.cpm>
Date: Thu, 3 Sep 2026 07:45:01 +0100
Subject: [PATCH 02/11] validate error with w3.org

---
 Form-Controls/index.html | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/Form-Controls/index.html b/Form-Controls/index.html
index 1cf0eed29..67c0ff4a8 100644
--- a/Form-Controls/index.html
+++ b/Form-Controls/index.html
@@ -1,11 +1,11 @@
 <!doctype html>
 <html lang="en">
   <head>
-    <meta charset="utf-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <title>My form exercise</title>
-    <meta name="description" content="" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="description" content="">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
   </head>
   <body>
     <header>
@@ -22,12 +22,12 @@ <h1>Product Pick</h1>
             required
             pattern="\S{2,}"
             title="Please enter at least two non-space characters."
-          />
+          >
         </div>
 
         <div>
           <label for="email"> Email:</label>
-          <input type="email" id="email" name="email" required />
+          <input type="email" id="email" name="email" required>
         </div>
         <div>
           <label for="color"> Colour:</label>

From 2753312ddca7db98213098dc2b15e5f35abbbb91 Mon Sep 17 00:00:00 2001
From: russom <russom.g.meskel@gmail.cpm>
Date: Sat, 16 May 2026 14:02:45 +0100
Subject: [PATCH 03/11] Lables and input and css created

---
 Form-Controls/index.html | 53 ++++------------------------------------
 1 file changed, 5 insertions(+), 48 deletions(-)

diff --git a/Form-Controls/index.html b/Form-Controls/index.html
index 67c0ff4a8..ceb80b3c3 100644
--- a/Form-Controls/index.html
+++ b/Form-Controls/index.html
@@ -4,8 +4,8 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <title>My form exercise</title>
-    <meta name="description" content="">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="description" content="" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
   </head>
   <body>
     <header>
@@ -13,53 +13,10 @@ <h1>Product Pick</h1>
     </header>
     <main>
       <form>
-        <div>
-          <label for="name"> Name:</label>
-          <input
-            type="text"
-            id="name"
-            name="name"
-            required
-            pattern="\S{2,}"
-            title="Please enter at least two non-space characters."
-          >
-        </div>
-
-        <div>
-          <label for="email"> Email:</label>
-          <input type="email" id="email" name="email" required>
-        </div>
-        <div>
-          <label for="color"> Colour:</label>
-          <select id="color" name="color" required>
-            <option value="">Please select a colour</option>
-            <option value="red">Red</option>
-            <option value="blue">Blue</option>
-            <option value="green">Green</option>
-          </select>
-        </div>
-        <div>
-          <label for="size"> Size:</label>
-          <select id="size" name="size" required>
-            <option value="">Please select a size</option>
-            <option value="xs">XS</option>
-            <option value="s">S</option>
-            <option value="m">M</option>
-            <option value="l">L</option>
-            <option value="xl">XL</option>
-            <option value="xxl">XXL</option>
-          </select>
-        </div>
-        <div>
-          <button type="submit">Submit</button>
-        </div>
-        <!--
-        this will also help you fill in your PR message later-->
+        <!-- write your html here-->
         <!-- 
-        What is the customer's name? I must collect this data and ensure it contains at least two non-space characters.
-        What is the customer's email? I must make sure the email is valid. Email addresses follow a consistent pattern.
-        What colour should this T-shirt be? I must provide 3 options. How will I ensure they do not choose other colours?
-        What size does the customer want? I must provide the following 6 options: XS, S, M, L, XL, XXL -->
+          try writing out the requirements first as comments
+        this will also help you fill in your PR message later-->
       </form>
     </main>
     <footer>

From 56c0cf54a702466ea84d811d246045c73dd29697 Mon Sep 17 00:00:00 2001
From: russom <russom.g.meskel@gmail.cpm>
Date: Sat, 30 May 2026 16:10:54 +0100
Subject: [PATCH 04/11] Style seprated from html and contained in its own file.

---
 Form-Controls/index.html | 44 +++++++++++++++++++++++++++++++++++++---
 Form-Controls/style.css  | 38 ++++++++++++++++++++++++++++++++++
 2 files changed, 79 insertions(+), 3 deletions(-)
 create mode 100644 Form-Controls/style.css

diff --git a/Form-Controls/index.html b/Form-Controls/index.html
index ceb80b3c3..d5836b4be 100644
--- a/Form-Controls/index.html
+++ b/Form-Controls/index.html
@@ -13,10 +13,48 @@ <h1>Product Pick</h1>
     </header>
     <main>
       <form>
-        <!-- write your html here-->
-        <!-- 
-          try writing out the requirements first as comments
+        
+        <div>
+          
+          <label for="name"> Name:</label>
+          <input type="text" id="name" name="name" required pattern="\S{2,}" title="Please enter at least two non-space characters.">
+        </div>
+
+        <div>
+          <label for="email"> Email:</label>
+          <input type="email" id="email" name="email" required>
+        </div>
+        <div>
+          <label for="color"> Colour:</label>
+          <select id="color" name="color" required>
+            <option value="">Please select a colour</option>
+            <option value="red">Red</option>
+            <option value="blue">Blue</option>
+            <option value="green">Green</option>
+          </select>
+        </div>
+        <div>
+          <label for="size"> Size:</label>
+          <select id="size" name="size" required>
+            <option value="">Please select a size</option>
+            <option value="xs">XS</option>
+            <option value="s">S</option>
+            <option value="m">M</option>
+            <option value="l">L</option>
+            <option value="xl">XL</option>
+            <option value="xxl">XXL</option>
+          </select>
+        </div>
+        <div>
+          <button type="submit">Submit</button>
+        </div>
+        <!--
         this will also help you fill in your PR message later-->
+         <!-- 
+        What is the customer's name? I must collect this data and ensure it contains at least two non-space characters.
+        What is the customer's email? I must make sure the email is valid. Email addresses follow a consistent pattern.
+        What colour should this T-shirt be? I must provide 3 options. How will I ensure they do not choose other colours?
+        What size does the customer want? I must provide the following 6 options: XS, S, M, L, XL, XXL -->
       </form>
     </main>
     <footer>
diff --git a/Form-Controls/style.css b/Form-Controls/style.css
new file mode 100644
index 000000000..d1faa7735
--- /dev/null
+++ b/Form-Controls/style.css
@@ -0,0 +1,38 @@
+body {
+  font-family: Arial, sans-serif;
+  margin: 0;
+  padding: 0;
+}
+header {
+  color: black;
+  padding: 1rem;
+  text-align: center;
+  margin-bottom: 20px;
+}
+main {
+  padding: 1rem;
+}
+form {
+  max-width: 400px;
+  margin: 0 auto;
+}
+div {
+  margin-bottom: 1rem;
+}
+label {
+  display: block;
+  margin-bottom: 0.5rem;
+}
+input,
+select {
+  width: 100%;
+  padding: 0.5rem;
+  box-sizing: border-box;
+}
+button {
+  padding: 0.5rem 1rem;
+  background-color: #333;
+  color: white;
+  border: none;
+  cursor: pointer;
+}

From 148a95addcce9eaf5c0b1e1209e8f189d89cfe39 Mon Sep 17 00:00:00 2001
From: russom <russom.g.meskel@gmail.cpm>
Date: Mon, 7 Sep 2026 14:01:13 +0100
Subject: [PATCH 05/11] add regex to name label

---
 Form-Controls/index.html | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/Form-Controls/index.html b/Form-Controls/index.html
index d5836b4be..0b2f9b1e6 100644
--- a/Form-Controls/index.html
+++ b/Form-Controls/index.html
@@ -17,7 +17,14 @@ <h1>Product Pick</h1>
         <div>
           
           <label for="name"> Name:</label>
-          <input type="text" id="name" name="name" required pattern="\S{2,}" title="Please enter at least two non-space characters.">
+          <input
+            type="text"
+            id="name"
+            name="name"
+            required
+            pattern="\S{2,}"
+            title="Please enter at least two non-space characters."
+          />
         </div>
 
         <div>

From 406e215bf5e79114ca0691a9cf61a5c572f10915 Mon Sep 17 00:00:00 2001
From: russom <russom.g.meskel@gmail.cpm>
Date: Mon, 7 Sep 2026 14:07:14 +0100
Subject: [PATCH 06/11] update name

---
 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 0b2f9b1e6..b3497920b 100644
--- a/Form-Controls/index.html
+++ b/Form-Controls/index.html
@@ -66,7 +66,7 @@ <h1>Product Pick</h1>
     </main>
     <footer>
       <!-- change to your name-->
-      <p>By Russom G</p>
+      <p>By Russom Gebremeskel</p>
     </footer>
   </body>
 </html>

From b9b3c994d7504308cacd097f3fe5394ae0af3828 Mon Sep 17 00:00:00 2001
From: russom <russom.g.meskel@gmail.cpm>
Date: Mon, 7 Sep 2026 14:22:16 +0100
Subject: [PATCH 07/11] update align author name centre

---
 Form-Controls/styles.css | 43 ++++++++++++++++++++++++++++++++++++++++
 1 file changed, 43 insertions(+)
 create mode 100644 Form-Controls/styles.css

diff --git a/Form-Controls/styles.css b/Form-Controls/styles.css
new file mode 100644
index 000000000..ec2ce91e7
--- /dev/null
+++ b/Form-Controls/styles.css
@@ -0,0 +1,43 @@
+body {
+  font-family: Arial, sans-serif;
+  margin: 0;
+  padding: 0;
+}
+header {
+  color: black;
+  padding: 1rem;
+  text-align: center;
+  margin-bottom: 20px;
+}
+
+main {
+  padding: 1rem;
+}
+form {
+  max-width: 400px;
+  margin: 0 auto;
+}
+div {
+  margin-bottom: 1rem;
+}
+label {
+  display: block;
+  margin-bottom: 0.5rem;
+}
+input,
+select {
+  width: 100%;
+  padding: 0.5rem;
+  box-sizing: border-box;
+}
+button {
+  padding: 0.5rem 1rem;
+  background-color: #333;
+  color: white;
+  border: none;
+  cursor: pointer;
+}
+
+p {
+  text-align: center;
+}
\ No newline at end of file

From a2f9b70f564d9f4668a964b7e37d061230cb09f1 Mon Sep 17 00:00:00 2001
From: russom <russom.g.meskel@gmail.cpm>
Date: Mon, 7 Sep 2026 14:22:50 +0100
Subject: [PATCH 08/11] link css file

---
 Form-Controls/index.html | 1 +
 1 file changed, 1 insertion(+)

diff --git a/Form-Controls/index.html b/Form-Controls/index.html
index b3497920b..4b943ba21 100644
--- a/Form-Controls/index.html
+++ b/Form-Controls/index.html
@@ -4,6 +4,7 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <title>My form exercise</title>
+     <link rel="stylesheet" href="styles.css" />
     <meta name="description" content="" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
   </head>

From 06cd821cc991c1bcd4119afc397617b5a7835f7f Mon Sep 17 00:00:00 2001
From: russom <russom.g.meskel@gmail.cpm>
Date: Mon, 7 Sep 2026 14:23:13 +0100
Subject: [PATCH 09/11] remove duplicate css file

---
 Form-Controls/style.css | 38 --------------------------------------
 1 file changed, 38 deletions(-)
 delete mode 100644 Form-Controls/style.css

diff --git a/Form-Controls/style.css b/Form-Controls/style.css
deleted file mode 100644
index d1faa7735..000000000
--- a/Form-Controls/style.css
+++ /dev/null
@@ -1,38 +0,0 @@
-body {
-  font-family: Arial, sans-serif;
-  margin: 0;
-  padding: 0;
-}
-header {
-  color: black;
-  padding: 1rem;
-  text-align: center;
-  margin-bottom: 20px;
-}
-main {
-  padding: 1rem;
-}
-form {
-  max-width: 400px;
-  margin: 0 auto;
-}
-div {
-  margin-bottom: 1rem;
-}
-label {
-  display: block;
-  margin-bottom: 0.5rem;
-}
-input,
-select {
-  width: 100%;
-  padding: 0.5rem;
-  box-sizing: border-box;
-}
-button {
-  padding: 0.5rem 1rem;
-  background-color: #333;
-  color: white;
-  border: none;
-  cursor: pointer;
-}

From 05ec57a98ed6b500d71acf3b052565b0a583f702 Mon Sep 17 00:00:00 2001
From: russom <russom.g.meskel@gmail.cpm>
Date: Mon, 7 Sep 2026 17:58:58 +0100
Subject: [PATCH 10/11] Centre submit button

---
 Form-Controls/styles.css | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/Form-Controls/styles.css b/Form-Controls/styles.css
index ec2ce91e7..aa8cad78b 100644
--- a/Form-Controls/styles.css
+++ b/Form-Controls/styles.css
@@ -36,6 +36,8 @@ button {
   color: white;
   border: none;
   cursor: pointer;
+  display: block;
+  margin: 0 auto;
 }
 
 p {

From a6af01cf9b05c63a00a5ae77b502054ebc7d3cc0 Mon Sep 17 00:00:00 2001
From: russom <russom.g.meskel@gmail.cpm>
Date: Mon, 7 Sep 2026 18:15:10 +0100
Subject: [PATCH 11/11] Add css validation icon display

---
 Form-Controls/index.html | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/Form-Controls/index.html b/Form-Controls/index.html
index 4b943ba21..17261e0e7 100644
--- a/Form-Controls/index.html
+++ b/Form-Controls/index.html
@@ -4,7 +4,7 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <title>My form exercise</title>
-     <link rel="stylesheet" href="styles.css" />
+    <link rel="stylesheet" href="styles.css" />
     <meta name="description" content="" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
   </head>
@@ -68,6 +68,15 @@ <h1>Product Pick</h1>
     <footer>
       <!-- change to your name-->
       <p>By Russom Gebremeskel</p>
+      <p>
+        <a href="https://jigsaw.w3.org/css-validator/check/referer">
+          <img
+            style="border: 0; width: 88px; height: 31px"
+            src="https://jigsaw.w3.org/css-validator/images/vcss-blue"
+            alt="Valid CSS!"
+          />
+        </a>
+      </p>
     </footer>
   </body>
 </html>
