CodeYourFuture · Alex-Os-Dev-Lab · Jan 29, 2026 · Jan 29, 2026 · Jan 29, 2026 · Jan 30, 2026
diff --git a/Form-Controls/index.html b/Form-Controls/index.html
@@ -12,16 +12,102 @@
       <h1>Product Pick</h1>
     </header>
     <main>
+      <!-- Requirements:
+  - Collect a valid customer name (min 2 characters, max 100 characters)
+  - Collect a valid customer email (must be a valid email address)
+  - Collect a t-shirt colour (must be one of: Red, Blue, Green)
+  - Collect a t-shirt size (must be one of: XS, S, M, L, XL, XXL)
+  - All fields are required
+  - HTML only (no CSS / JavaScript)
+  - Do not write a form action for this project. -->
       <form>
-        <!-- write your html here-->
-        <!-- 
-          try writing out the requirements first as comments
-        this will also help you fill in your PR message later-->
+
+        <!-- Instructions for users -->
+        <p>Please fill out the form below to select your preferred t-shirt: 
+          <br><br> * Indicates a required field</p>
+
+        <section>
+          <h2> Customer Information:</h2>
+
+          <!-- 
+          - Customer name collection:
+          - min 2 characters, max 100 characters for validation
+          - field is required
+          - placeholder text example provided
+          -->
+          <div>
+            <label for="CustomerFullName">*Customer's Full Name:</label>
+            <input type="text" id="CustomerFullName" name="CustomerFullName" placeholder="e.g. John Smith" required minlength="2" maxlength="100">
+          </div>
+
+          <br>
+
+          <!-- 
+          Customer email collection:
+          - type = "email" for validation
+          - field is required
+          - placeholder text example provided
+          -->
+          <div>
+            <label for="CustomerEmail">*Customer's Email:</label>
+            <input type="email" id="CustomerEmail" name="CustomerEmail" placeholder="e.g. john@example.com" required>
+          </div>
+        </section>
+
+
+        <section>
+          <h2> T-Shirt Selection:</h2>
+          <p>Select your preferred T-shirt colour and size: </p>
+
+          <!-- T-Shirt Colour Selection:
+          - type = "radio" for selection mandatory one choice
+          - field is required  
+          -->
+
+          <div>
+              <fieldset>
+                <legend>*T-Shirt Colour:</legend>
+                  <label for="ColourRed">Red</label>
+                  <input type="radio" id="ColourRed" name="T-ShirtColourSelection" value="Red" required>
+                  <label for="ColourBlue">Blue</label>  
+                  <input type="radio" id="ColourBlue" name="T-ShirtColourSelection" value="Blue" required>
+                  <label for="ColourGreen">Green</label>
+                  <input type="radio" id="ColourGreen" name="T-ShirtColourSelection" value="Green" required>
+              </fieldset>
+          </div>
+          <!-- T-Shirt Size Selection:
+          - dropdown select for size options
+          - field is required  
+          -->
+          <br>
+
+          <div>
+              <fieldset>
+                <legend>*T-Shirt Size:</legend>
+                <label for="TShirtSize">Select Size:</label>
+                <select id="TShirtSize" name="TShirtSize" required>
+                  <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>
+              </fieldset> 
+          </div>
+
+        <br><br>
+        </section>
+        <!-- Submit Button -->
+        <div>
+          <button type="submit">ADD TO BASKET</button> 
+        </div>
       </form>
+
+        <br><br>
     </main>
     <footer>
-      <!-- change to your name-->
-      <h2>By HOMEWORK SOLUTION</h2>
+     <p> By Alex Okorefe</p> 
     </footer>
   </body>
 </html>
diff --git a/Wireframe/Git-branches image.png b/Wireframe/Git-branches image.png
diff --git a/Wireframe/README image.png b/Wireframe/README image.png
diff --git a/Wireframe/Wireframe image.png b/Wireframe/Wireframe image.png
diff --git a/Wireframe/index.html b/Wireframe/index.html
@@ -3,30 +3,88 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Wireframe</title>
+    <meta name="description" content="Master 3 essential tools every developer needs 
+    for documentation and design before writing production code. 
+    Stop guessing and start building with confidence.">
+    <title>Developer Tools: Documentation & Design | The Dev Survival Kit </title>
     <link rel="stylesheet" href="style.css" />
+
+    <!--  
+    Using the provided wireframe and resources, write a new webpage explaining:
+
+      1. What is the purpose of a README file?
+      2. What is the purpose of a wireframe?
+      3. What is a branch in Git?
+    -->
   </head>
   <body>
     <header>
-      <h1>Wireframe</h1>
+      <h1>Essential Documentation & Design Tools for Developers</h1>
       <p>
-        This is the default, provided code and no changes have been made yet.
+        Master 3 essential tools every developer needs 
+        for documentation and design before writing production code.
       </p>
     </header>
     <main>
       <article>
-        <img src="placeholder.svg" alt="" />
-        <h2>Title</h2>
+
+        <figure>
+          <img src="README image.png" alt="README file illustration" />
+          <figcaption>README file illustration for the README.md: 
+            Preventing "What Does This Button Do?" Since 1970 Article</figcaption>
+        </figure>
+
+        <h2>README.md: Preventing "What Does This Button Do?" Since 1970</h2>
         <p>
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
-          voluptates. Quisquam, voluptates.
+          Think of a README file as the front door to your project. It is a simple text document that tells other humans 
+          (and future, sleep-deprived versions of yourself) what your code does, how to install it, and why it exists. 
+          Without a README, your project is just a mysterious pile of files; with one, it’s a professional tool. 
         </p>
         <a href="">Read more</a>
       </article>
+
+      <article>
+
+        <figure>
+          <img src="wireframe image.png" alt="Wireframe illustration" />
+          <figcaption>A low-fidelity wireframe illustrating page structure</figcaption>
+        </figure>
+
+        <h2>Wireframes: Because Changing a Drawing is Cheaper Than Changing Code</h2>
+        <p>
+          A wireframe is a two-dimensional, low-fidelity outline of your interface. 
+          It focuses on functionality and hierarchy rather than colors and fonts. 
+          By "gray-boxing" your ideas first, you can catch logic flaws and user-flow issues 
+          before a single pixel is polished or a single &#60div> is styled. 
+          It’s the architectural blueprint that keeps the "walls" of your app from falling down.
+        </p>
+        <a href="">Read more</a>
+      </article>
+
+      <article>
+
+        <figure>
+          <img src="Git-branches image.png" alt="Branch in Git illustration" />
+          <figcaption>Branch in Git illustration showing parallel development</figcaption>
+        </figure>
+
+        <h2>Git Branches: How to Experiment Without Blowing the App UP!</h2>
+
+        <p>
+          In Git, a branch is a lightweight, moveable pointer to a specific commit. 
+          Think of it as a parallel dimension where you can build a new feature or fix a bug 
+          without touching the "Main" timeline of your project. If the experiment works, you merge it back; 
+          if it fails, you can delete that timeline and pretend it never happened. 
+          It is the ultimate "undo" button for collaborative development.
+        </p>
+
+        <a href="">Read more</a>
+      </article>
+
     </main>
     <footer>
       <p>
-        This is the default, provided code and no changes have been made yet.
+        By Alex Okorefe
       </p>
     </footer>
   </body>