CodeYourFuture · MacDonald91 · Jan 16, 2026 · Jan 19, 2026
diff --git a/Form-Controls/README.md b/Form-Controls/README.md
@@ -30,7 +30,7 @@ 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 used HTML only.
+- [X] I have used HTML only.
 - [x] I have not used any CSS or JavaScript.
 
 ### HTML

diff --git a/Form-Controls/index.html b/Form-Controls/index.html
@@ -1,27 +1,80 @@
 <!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-->
-      <h2>By HOMEWORK SOLUTION</h2>
-    </footer>
-  </body>
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>T-shirt Store</title>
+</head>
+
+<body>
+  <main>
+
+    <form action="results.html" method="GET">
+
+      <div>
+        <label for="name">Name</label>
+        <input
+          id="name"
+          name="name"
+          type="text"
+          minlength="2"
+          required
+        >
+      </div>
+
+      <div>
+        <label for="email">Email</label>
+        <input
+          id="email"
+          name="email"
+          type="email"
+          required
+        >
+      </div>
+
+      <div>
+        <h1>Premium Short Sleeve Crew Neck T-Shirt £19</h1>
+      </div>
+
+      <fieldset>
+        <legend>Colour</legend>
+
+        <label>
+          <input type="radio" name="colour" value="White" required>
+          White
+        </label>
+
+        <label>
+          <input type="radio" name="colour" value="Black">
+          Black
+        </label>
+
+        <label>
+          <input type="radio" name="colour" value="Blue">
+          Blue
+        </label>
+      </fieldset>
+
+      <fieldset>
+        <legend>Choose Size</legend>
+
+        <label><input type="radio" name="size" value="XS" required> XS</label>
+        <label><input type="radio" name="size" value="S"> S</label>
+        <label><input type="radio" name="size" value="M"> M</label>
+        <label><input type="radio" name="size" value="L"> L</label>
+        <label><input type="radio" name="size" value="XL"> XL</label>
+        <label><input type="radio" name="size" value="XXL"> XXL</label>
+
+      </fieldset>
+
+      <button type="submit">ADD TO BAG</button>
+
+    </form>
+
+  </main>
+
+  <footer>
+    <h2>Alasdair MacDonald</h2>
+  </footer>
+</body>
 </html>
diff --git a/Form-Controls/results.html b/Form-Controls/results.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Order Results</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+</head>
+
+<body>
+  <main>
+    <h1>Your Order</h1>
+
+    <div id="results"></div>
+
+    <p><a href="index.html">Back to form</a></p>
+  </main>
+
+  <script>
+    const resultsDiv = document.getElementById("results");
+
+    const params = new URLSearchParams(window.location.search);
+
+    params.forEach((value, key) => {
+      const p = document.createElement("p");
+      p.textContent = `${key}: ${value}`;
+      resultsDiv.appendChild(p);
+    });
+  </script>
+</body>
+</html>
diff --git a/Wireframe/README.md b/Wireframe/README.md
@@ -14,22 +14,22 @@ There are some provided HTML and CSS files you can use to get started. You can u
 
 <!--{{<objectives>}}>-->
 
-- [ ] Use semantic HTML tags to structure the webpage
-- [ ] Create three articles, each including a 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
+- [x] Use semantic HTML tags to structure the webpage
+- [x] Create three articles, each including a title, summary, and a link
+- [x] Check a webpage against a wireframe layout
+- [x] Test web code using [Lighthouse](https://programming.codeyourfuture.io/guides/testing/lighthouse)
+- [x] Use version control by committing often and pushing regularly to GitHub
 <!--{{</objectives>}}>-->
 
 ## Acceptance Criteria
 
-- [ ] Semantic HTML tags are used to structure the webpage.
-- [ ] The page scores 100 for Accessibility in the Lighthouse audit.
-- [ ] The page header includes a title and description.
-- [ ] The articles section has three unique articles, each including a title, summary, and a link.
-- [ ] The page footer is fixed to the bottom of the viewport.
-- [ ] The webpage is styled using a linked .css file.
-- [ ] The webpage is properly committed and pushed to a branch on GitHub.
+- [x] Semantic HTML tags are used to structure the webpage.
+- [x] The page scores 100 for Accessibility in the Lighthouse audit.
+- [x] The page header includes a title and description.
+- [x] The articles section has three unique articles, each including a title, summary, and a link.
+- [x] The page footer is fixed to the bottom of the viewport.
+- [x] The webpage is styled using a linked .css file.
+- [x] The webpage is properly committed and pushed to a branch on GitHub.
 
 ## Resources
 

diff --git a/Wireframe/index.html b/Wireframe/index.html
@@ -3,31 +3,64 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Wireframe</title>
+    <title>Wireframe Exercise</title>
     <link rel="stylesheet" href="style.css" />
   </head>
+
   <body>
-    <header>
-      <h1>Wireframe</h1>
-      <p>
-        This is the default, provided code and no changes have been made yet.
-      </p>
-    </header>
     <main>
+      <!-- Header MUST be first child of main for the CSS grid -->
+      <header>
+        <h1>Web Development Basics</h1>
+        <p>
+          This page explains the purpose of a README file, a wireframe, and a Git
+          branch.
+        </p>
+      </header>
+
+      <article>
+        <img src="placeholder.svg" alt="README file illustration" />
+        <h2>Purpose of a README file</h2>
+        <p>
+          A README file explains what a project is, how it works, and how to use
+          it. It helps other developers understand the project quickly.
+        </p>
+        <a
+          href="https://docs.github.com/en/repositories/managing-your-repositorys-settings-and-features/customizing-your-repository/about-readmes"
+        >
+          Read more
+        </a>
+      </article>
+
+      <article>
+        <img src="wireframe.png" alt="Wireframe illustration" />
+        <h2>Purpose of a wireframe</h2>
+        <p>
+          A wireframe is a simple visual plan of a webpage. It shows the layout
+          and structure before colours, images, or styling are added.
+        </p>
+        <a href="https://www.productplan.com/glossary/wireframe/">
+          Read more
+        </a>
+      </article>
+
       <article>
-        <img src="placeholder.svg" alt="" />
-        <h2>Title</h2>
+        <img src="..\code-review-flow.png" alt="Git branch illustration" />
+        <h2>What is a Git branch?</h2>
         <p>
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
-          voluptates. Quisquam, voluptates.
+          A Git branch allows you to work on changes safely without affecting the
+          main code until the work is ready.
         </p>
-        <a href="">Read more</a>
+        <a
+          href="https://git-scm.com/book/en/v2/Git-Branching-Branches-in-a-Nutshell"
+        >
+          Read more
+        </a>
       </article>
     </main>
+
     <footer>
-      <p>
-        This is the default, provided code and no changes have been made yet.
-      </p>
+      <p>© 2026 Web Basics</p>
     </footer>
   </body>
 </html>