CodeYourFuture · Tobias-Amaechina · May 20, 2026 · May 20, 2026 · May 20, 2026 · May 20, 2026
diff --git a/Form-Controls/index.html b/Form-Controls/index.html
@@ -6,22 +6,136 @@
     <title>My form exercise</title>
     <meta name="description" content="" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <style>
+    body {
+      font-family: system-ui, sans-serif;
+      padding: 1rem;
+      line-height: 1.5;
+    } 
+    form {
+      max-width: 500px;
+      margin:  auto;
+    } 
+    fieldset {
+      border: none;
+      padding: 0;
+      margin: 1.5rem;
+    } 
+     label {
+      display: block;
+      margin-bottom: 0.5rem;
+      font-weight: 600;
+    } 
+     input, select button{
+      width: 100%;
+      padding:12px;
+      font-size: 1rem;
+      min-height: 48px;
+      box-sizing: border-box;
+    } 
+     small {
+      display: block;
+      margin-top: 0.25rem;
+      color: #666;
+    }
+     button {
+      padding: 0.75rem 1.5rem;
+      font-size: 1rem;
+      background-color: #007BFF;
+      color: white;
+      border: none;
+      cursor: pointer;
+    } 
+     button:hover {
+      background-color: #0056b3;
+    }
+     header, footer {
+      text-align: center;
+      margin-bottom: 2rem;
+    }
+     footer p {
+      font-size: 0.875rem;
+      color: #666;
+    }
+
+    </style>
   </head>
   <body>
     <header>
       <h1>Product Pick</h1>
     </header>
     <main>
       <form>
-        <!-- write your html here-->
-        <!-- 
+        <!-- First name-->
+         <fieldset>
+          <label for = "first-name">First Name</label>
+          <input type="text" id="first-name" name="first-name" required pattern=".*\S.*\S.*"
+        aria-describedby="fnameHelp">
+          <small id="fnameHelp">Must be at least 2 characters long</small>
+         </fieldset>
+          <!-- Last name-->
+          <fieldset>
+          <label for = "last-name">Last Name</label>
+          <input type="text" id="last-name" name="last-name" required pattern=".*\S.*\S.*"
+        aria-describedby="lnameHelp">
+          <small id="lnameHelp">Must be at least 2 characters long</small>
+         </fieldset>
+          <!-- Email-->
+          <fieldset>
+          <label for = "email">Email</label>
+          <input type="email" id="email" name="email" required pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$"
+        aria-describedby="emailHelp">
+          <small id="emailHelp">Must be a valid email address</small>
+          </fieldset>
+          <!-- Password-->
+          <fieldset>
+          <label for = "password">Password</label>
+          <input type="password" id="password" name="password" required pattern="^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$"
+        aria-describedby="passwordHelp">
+          <small id="passwordHelp">Must be at least 8 characters long and include at least one uppercase letter, one lowercase letter, one number, and one special character</small>
+          </fieldset>
+          <!--Shirt Color-->
+          <fieldset>
+            <legend>Shirt Color</legend>
+          <label for = "shirt-color">Shirt Color</label>
+          <select id="shirt-color" name="shirt-color" required>
+            <option value="">Select a color</option>
+            <option value="red">Red</option>
+            <option value="blue">Blue</option>
+            <option value="green">Green</option>
+            </select> 
+          </fieldset>
+          <!---Shirt Size-->
+          <fieldset>      
+          <label for = "shirt-size">Shirt Size</label>
+          <select id="shirt-size" name="shirt-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>
+          </fieldset>
+
+          <!--Submit button-->
+          <fieldset>
+            <button type="submit">Submit Form </button>
+           </fieldset>
+
+         <!-- 
+ 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>
       <!-- change to your name-->
-      <p>By HOMEWORK SOLUTION</p>
+      <p>By Tobias Amaechina</p>
     </footer>
   </body>
 </html>
diff --git a/Wireframe/Wireframe.png b/Wireframe/Wireframe.png
diff --git a/Wireframe/git_branch.png b/Wireframe/git_branch.png
diff --git a/Wireframe/index.html b/Wireframe/index.html
@@ -10,24 +10,129 @@
     <header>
       <h1>Wireframe</h1>
       <p>
-        This is the default, provided code and no changes have been made yet.
+        An Article about the purpose of a readme file ,and a wireframe,
+        and also on what a Git branch is and how to use it.
       </p>
     </header>
     <main>
       <article>
-        <img src="placeholder.svg" alt="" />
-        <h2>Title</h2>
+        <img src="readme.png" alt="Readme diagram Image" />
+        <h2>What is the Purpose of a Readme File?</h2>
         <p>
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
-          voluptates. Quisquam, voluptates.
+          The purpose of a readme file is to provide,
+           information about a project,
+            and can be summarized under these headings below.
         </p>
-        <a href="">Read more</a>
+        <ol>
+              <li>Project Overview</li>
+
+              <li>Installation Instructions</li>  
+
+              <li>Usage Guidelines</li>
+
+              <li>Usage Examples</li>
+
+              <li>Contributing Guidelines</li>
+
+            </ol>
+            <p> It gives a clear overview of what the project does and why it exists. 
+                This helps users immediately understand the purpose.</p>
+                <p> It provides step-by-step instructions on how to install and set up the project, 
+                making it easier for users to get started.</p>
+                <p> It offers guidance on how to use the project effectively, 
+                including examples and best practices.</p>
+                <p> It provides practical examples 
+                of how to use the project in real-world scenarios.</p>
+                <p> It outlines the process for 
+                contributing to the project,
+                 including code style guidelines 
+                 and pull request procedures.</p>
+        <a href="https://en.wikipedia.org/wiki/README">Read more</a>
       </article>
+
+
+      <article>
+        <img src="Wireframe.png" alt="A Wireframe diagram" />
+        <h2> What is the Purpose of a Wireframe?</h2>
+        <p>
+          <strong>In short</strong>, a wireframe’s purpose is to visualize the skeleton of a digital product,
+          helping teams plan, test, and communicate ideas efficiently before moving to detailed design.
+        The can be summarized under these headings below.</p>
+        <ol>
+              <li>Clarify Structure and Layout</li>
+
+              <li>Focus on Functionality, Not Aesthetics</li>  
+
+              <li>Facilitate Communication</li>
+
+              <li>Test User Flow Early</li>
+
+              <li>Save Time and Cost</li>
+
+            <li>Serve as a Blueprint for Design and Development</li>
+
+            </ol>
+            <p> It defines where elements like headers, buttons, 
+              forms, and navigation will appear, 
+              ensuring logical flow and usability.</p>
+              <p> Wireframes strip away colors and 
+                  visuals so teams can concentrate on user experience
+                   (UX) and interaction design first.</p>
+                   <p> They help designers, 
+                  developers, and 
+                  stakeholders align on what the product will do 
+                  — reducing misunderstandings late</p>
+                  <p> Wireframes allow quick validation of navigation paths 
+                  and task completion before investing in full design or development..</p>
+                <p> By catching usability issues early, 
+                  wireframes prevent expensive redesigns later in the project.</p>
+                  <p> BThey act as a reference point for UI designers and developers, 
+                    ensuring consistency and clarity throughout the build.</p>
+        <a href="https://www.interaction-design.org/literature/topics/wireframing">Read more</a>
+      </article>
+
+
+        <article>
+
+          <img src="git_branch.png" alt="A Git branch diagram" />
+          <h2> What Is a Git Branch?</h2>
+          <p>
+            In Git, a <em>branch</em> is like a separate workspace 
+            where you can make changes and try new ideas without affecting the main project. 
+            Think of it as a "parallel universe" for your code.The purpose of a Git branch is as highlisted below.</p>
+             <ol>
+              <li>Isolate Work.</li>
+
+              <li>Enable Collaboration.</li>  
+
+              <li>Experiment Safely.</li>
+
+              <li>Simplify Version Control.</li>
+              <li>Facilitate Code Reviews.</li>
+
+            </ol>
+            <p> Branches let you work on new features or 
+              fixes without affecting the stable version of your project.</p>
+                <p> Multiple developers can work on different branches at the same time —
+                   Git merges their work later,
+                   ensuring smooth teamwork.</p>
+                <p>You can test ideas or refactor code in a branch. 
+                  If it doesn’t work, you can delete the branch without harming the main project </p>
+                <p> Branches make it easy to manage releases, hotfixes, 
+                  and long-term development lines..</p>
+                  <p> They allow for code reviews and discussions before merging changes into the main branch, 
+                    improving code quality.</p>
+                    <a href="https://www.w3schools.com/git/git_branch.asp?remote=github">Read more</a>
+        </article>
     </main>
     <footer>
+      <small>Copyright &copy; 2026 </small>
       <p>
-        This is the default, provided code and no changes have been made yet.
+        Written by Tobias Amaechina.
       </p>
+      <address>
+        <a href="mailto:tobias.amaechina@gmail.com">Contact me</a>
+      </address>
     </footer>
   </body>
 </html>
diff --git a/Wireframe/readme.png b/Wireframe/readme.png
diff --git a/Wireframe/style.css b/Wireframe/style.css
@@ -86,4 +86,4 @@ article {
   > img {
     grid-column: span 3;
   }
-}
+}
diff --git a/Wireframe/wireframe.png b/Wireframe/wireframe.png
-Original file line number
+Diff line change
@@ Expand Up / @@ -86,4 +86,4 @@ article { @@
       > img {
         grid-column: span 3;
       }
-    }
+    }