CodeYourFuture · serveyano · May 22, 2026 · May 25, 2026 · Jun 1, 2026 · Jun 1, 2026
diff --git a/Form-Controls/README.md b/Form-Controls/README.md
@@ -34,18 +34,18 @@ Do not write a form action for this project.
 
 Let's write out our testable criteria. Check each one off as you complete it.
 
-- [ ] I have only used HTML and CSS.
-- [ ] I have not used any JavaScript.
+- [✓] I have only used HTML and CSS.
+- [✓] I have not used any JavaScript.
 
 ### HTML
 
-- [ ] My form is semantic HTML.
-- [ ] All inputs have associated labels.
-- [ ] My Lighthouse Accessibility score is 100.
-- [ ] I require a valid name. 
-- [ ] I require a valid email.
-- [ ] I require one colour from a defined set of 3 colours.
-- [ ] I require one size from a defined set of 6 sizes.
+- [✓] My form is semantic HTML.
+- [✓] All inputs have associated labels.
+- [✓] My Lighthouse Accessibility score is 100.
+- [✓] I require a valid name. 
+- [✓] I require a valid email.
+- [✓] I require one colour from a defined set of 3 colours.
+- [✓] I require one size from a defined set of 6 sizes.
 
 ### Developers must adhere to professional standards.
 
@@ -54,10 +54,10 @@ Let's write out our testable criteria. Check each one off as you complete it.
 These practices reflect the level of quality expected in professional work.
 They ensure your code is reliable, maintainable, and presents a polished, credible experience to users.
 
-- [ ] My HTML code has no errors or warnings when validated using https://validator.w3.org/
-- [ ] My code is consistently formatted
-- [ ] My page content is free of typos and grammatical mistakes
-- [ ] I commit often and push regularly to GitHub
+- [✓] My HTML code has no errors or warnings when validated using https://validator.w3.org/
+- [✓] My code is consistently formatted
+- [✓] My page content is free of typos and grammatical mistakes
+- [✓] I commit often and push regularly to GitHub
 
 ## Resources
 - [MDN: Form controls](https://developer.mozilla.org/en-US/docs/Learn/Forms)

diff --git a/Form-Controls/index.html b/Form-Controls/index.html
@@ -1,27 +1,72 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <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" />
-  </head>
-  <body>
-    <header>
-      <h1>Product Pick</h1>
-    </header>
-    <main>
-      <form>
-        <!-- write your html here-->
-        <!-- 
-          try writing out the requirements first as comments
-        this will also help you fill in your PR message later-->
-      </form>
-    </main>
-    <footer>
-      <!-- change to your name-->
-      <p>By HOMEWORK SOLUTION</p>
-    </footer>
-  </body>
-</html>
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+  <title>T-Shirt Order Form</title>
+
+  <meta name="description" content="Order a T-shirt by entering your details and selecting a colour and size.">
+  <meta name="robots" content="index, follow">
+
+  <link rel="stylesheet" href="style.css">
+</head>
+
+<body>
+
+  <main>
+    <form>
+      <h1>T-Shirt Order Form</h1>
+
+      <div class="form-group">
+        <label for="name">Full Name</label>
+        <input
+          type="text"
+          id="name"
+          name="name"
+          required
+          minlength="2"
+          pattern=".*\S.*"
+        >
+      </div>
+
+      <div class="form-group">
+        <label for="email">Email Address</label>
+        <input
+          type="email"
+          id="email"
+          name="email"
+          required
+        >
+      </div>
+
+      <div class="form-group">
+        <label for="colour">Choose a Colour</label>
+        <select id="colour" name="colour" required>
+          <option value="">Select a colour</option>
+          <option value="black">Black</option>
+          <option value="white">White</option>
+          <option value="blue">Blue</option>
+        </select>
+      </div>
+
+      <div class="form-group">
+        <label for="size">Choose a Size</label>
+        <select id="size" name="size" required>
+          <option value="">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>
+
+      <button type="submit">Submit Order</button>
+
+    </form>
+  </main>
+
+</body>
+</html>
diff --git a/Form-Controls/style.css b/Form-Controls/style.css
@@ -0,0 +1,55 @@
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  font-family: Arial, sans-serif;
+  background-color: #f4f4f4;
+  min-height: 100vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+form {
+  background-color: white;
+  padding: 30px;
+  border-radius: 10px;
+  width: 350px;
+}
+
+h1 {
+  text-align: center;
+  margin-bottom: 20px;
+}
+
+.form-group {
+  margin-bottom: 15px;
+}
+
+label {
+  display: block;
+  margin-bottom: 5px;
+  font-weight: bold;
+}
+
+input,
+select {
+  width: 100%;
+  padding: 10px;
+}
+
+button {
+  width: 100%;
+  padding: 10px;
+  border: none;
+  background-color: black;
+  color: white;
+  cursor: pointer;
+}
+
+button:hover {
+  background-color: #333;
+}
diff --git a/Wireframe/README.md b/Wireframe/README.md
@@ -4,12 +4,12 @@
 
 <!--{{<objectives>}}>-->
 
-- [ ] Use semantic HTML tags to structure the webpage
-- [ ] Create three articles, each including an image, title, summary, and a link
-- [ ] Check a webpage against a wireframe layout
-- [ ] Test web code using [Lighthouse](https://programming.codeyourfuture.io/guides/testing/lighthouse)
-- [ ] Use version control by committing often and pushing regularly to GitHub
-- [ ] Develop the habit of writing clean, well-structured, and error-free code
+- [✓] Use semantic HTML tags to structure the webpage
+- [✓] Create three articles, each including an image, title, summary, and a link
+- [✓] Check a webpage against a wireframe layout
+- [✓] Test web code using [Lighthouse](https://programming.codeyourfuture.io/guides/testing/lighthouse)
+- [✓] Use version control by committing often and pushing regularly to GitHub
+- [✓] Develop the habit of writing clean, well-structured, and error-free code
 <!--{{</objectives>}}>-->
 
 ## Task
@@ -27,13 +27,13 @@ There are some provided HTML and CSS files you can use to get started. You can u
 
 ## Acceptance Criteria
 
-- [ ] Semantic HTML tags are used to structure the webpage.
-- [ ] The page scores 100 for Accessibility in the Lighthouse audit.
-- [ ] The webpage is styled using a linked .css file.
-- [ ] The webpage is properly committed and pushed to a branch on GitHub.
-- [ ] The articles section contains three distinct articles, each with its own unique image, title, summary, and link.
-- [ ] The page footer is fixed to the bottom of the viewport.
-- [ ] The page layout closely match the wireframe.
+- [✓] Semantic HTML tags are used to structure the webpage.
+- [✓] The page scores 100 for Accessibility in the Lighthouse audit.
+- [✓] The webpage is styled using a linked .css file.
+- [✓] The webpage is properly committed and pushed to a branch on GitHub.
+- [✓] The articles section contains three distinct articles, each with its own unique image, title, summary, and link.
+- [✓] The page footer is fixed to the bottom of the viewport.
+- [✓] The page layout closely match the wireframe.
 
 ### Developers must adhere to professional standards.
 
@@ -42,10 +42,10 @@ There are some provided HTML and CSS files you can use to get started. You can u
 These practices reflect the level of quality expected in professional work.
 They ensure your code is reliable, maintainable, and presents a polished, credible experience to users.
 
-- [ ] My HTML code has no errors or warnings when validated using https://validator.w3.org/
-- [ ] My code is consistently formatted
-- [ ] My page content is free of typos and grammatical mistakes
-- [ ] I commit often and push regularly to GitHub
+- [✓] My HTML code has no errors or warnings when validated using https://validator.w3.org/
+- [✓] My code is consistently formatted
+- [✓] My page content is free of typos and grammatical mistakes
+- [✓] I commit often and push regularly to GitHub
 
 ## Resources