Cape Town | 26-ITP-May | Shafiek Walker | Sprint 1 | Wireframe

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 have defined a valid name as a text string of two characters or more.
+- [✅] 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.
 

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="style.css">
     <meta name="description" content="" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
   </head>
@@ -13,15 +14,102 @@ <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-->
+
+        <!--
+T-SHIRT ORDER FORM REQUIREMENTS
+
+- Only HTML and CSS (no JavaScript)
+- Semantic HTML structure
+- All inputs must have associated labels
+- Accessibility should be high (Lighthouse target: 100)
+
+DATA TO COLLECT:
+
+1. Customer Name
+   - Required
+   - Must be at least 2 characters
+
+2. Customer Email
+   - Required
+   - Must be a valid email format
+
+3. T-shirt Colour
+   - Required
+   - Must choose ONE from 3 options:
+     • Black
+     • White
+     • Blue
+
+4. T-shirt Size
+   - Required
+   - Must choose ONE from 6 options:
+     • XS
+     • S
+     • M
+     • L
+     • XL
+     • XXL
+
+NOTES:
+- Do NOT include a form action
+- All fields must be required
+-->
+<!-- Name -->
+    <label for="name">Name:</label>
+    <input 
+      type="text" 
+      id="name" 
+      name="name" 
+      minlength="2" 
+      required
+    >
+
+    <br><br>
+
+    <!-- Email -->
+    <label for="email">Email:</label>
+    <input 
+      type="email" 
+      id="email" 
+      name="email" 
+      required
+    >
+
+    <br><br>
+
+    <!-- Colour -->
+    <label for="colour">Choose Colour:</label>
+    <select id="colour" name="colour" required>
+      <option value="">Select Colour</option>
+      <option value="black">Black</option>
+      <option value="white">White</option>
+      <option value="blue">Blue</option>
+    </select>
+
+    <br><br>
+
+    <!-- Size -->
+    <label for="size">Choose Size:</label>
+    <select id="size" name="size" required>
+      <option value="">Select 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>
+
+    <br><br>
+
+    <button type="submit">Submit Order</button>
+
+
       </form>
     </main>
     <footer>
       <!-- change to your name-->
-      <p>By HOMEWORK SOLUTION</p>
+      <p>By SHAFIEK WALKER</p>
     </footer>
   </body>
 </html>

Form-Controls/style.css

@@ -0,0 +1,40 @@
+body {
+  font-family: Arial, sans-serif;
+  background-color: #f4f4f4;
+  padding: 40px;
+}
+
+h1 {
+  text-align: center;
+}
+
+p {
+  text-align: center;
+}
+
+form {
+  background-color: white;
+  max-width: 400px;
+  margin: 0 auto;
+  padding: 24px;
+  border-radius: 12px;
+  box-shadow: inset 0 0 0 2px #ccc;
+}
+
+label {
+  font-weight: bold;
+}
+
+input,
+select,
+button {
+  width: 100%;
+  padding: 10px;
+  margin-top: 6px;
+  margin-bottom: 16px;
+  box-sizing: border-box;
+}
+
+button {
+  cursor: pointer;
+}

Wireframe/README.md

@@ -27,25 +27,15 @@ 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 page header includes a title and description.
+- [✅] The articles section has three unique articles, each including an image, 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.
 
-### Developers must adhere to professional standards.
 
-> Before you say you're done: Is your code readable? Does it run correctly? Does it look professional?
-
-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
 
 ## Resources
 

Wireframe/index.html

@@ -3,30 +3,49 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Wireframe</title>
+    <title>Developer Fundamentals</title>
     <link rel="stylesheet" href="style.css" />
   </head>
   <body>
     <header>
-      <h1>Wireframe</h1>
+      <h1>Developer Fundamentals</h1>
       <p>
-        This is the default, provided code and no changes have been made yet.
+        Learn the essentials of building and managing projects in tech — from wireframes for planning designs, to Git branches for version control, and README files for clear project documentation.
       </p>
     </header>
     <main>
       <article>
-        <img src="placeholder.svg" alt="" />
-        <h2>Title</h2>
+        <img src="images/img_1.png" alt="" />
+        <h2>What is a Wireframe?</h2>
         <p>
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
-          voluptates. Quisquam, voluptates.
+          A wireframe is a simple visual guide used to plan the layout of a webpage or app. It focuses on structure rather than design, showing where elements like headers, navigation, content, and images will be placed. Wireframes help developers and designers understand how a page will work before adding colors, images, or styling.
         </p>
-        <a href="">Read more</a>
+        <a class="button" href="https://www.w3schools.com/css/css_website_layout.asp" target="_blank" rel="noreferrer">Read more</a>
+      </article>
+
+      <article>
+        <img src="images/img_2.png" alt="" />
+        <h2>What is a Readme.md file</h2>
+        <p>
+          A README.md file is the main documentation file in a project. It explains what the project is about, how it works, and how to use it. Written in Markdown, it helps developers and users quickly understand the purpose of the project and how to get started.
+        </p>
+
+        <a class="button" href="https://www.geeksforgeeks.org/git/what-is-readme-md-file/" target="_blank" rel="noreferrer">Read more</a>
+
+      </article>
+
+      <article>
+        <img src="images/img_3.png" alt="" />
+        <h2>What is a branch in GIT?</h2>
+        <p>
+          A branch in Git is a separate version of your code that allows you to work on new features or fixes without affecting the main project. It helps developers collaborate safely by keeping changes isolated until they are ready to be merged into the main branch.
+        </p>
+        <a class="button" href="https://www.w3schools.com/git/git_branch.asp" target="_blank" rel="noreferrer">Read more</a>
       </article>
     </main>
     <footer>
       <p>
-        This is the default, provided code and no changes have been made yet.
+        Shafiek Walker | ITP MAY 2026
       </p>
     </footer>
   </body>

Wireframe/style.css

@@ -30,6 +30,7 @@ body {
   background: var(--paper);
   color: var(--ink);
   font: var(--font);
+
 }
 a {
   padding: var(--space);
@@ -45,14 +46,20 @@ svg {
 Setting the overall rules for page regions
 https://www.w3.org/WAI/tutorials/page-structure/regions/
 */
+
+header {
+  text-align: center;
+  max-width: var(--container);
+  margin: 0 auto calc(var(--space) * 4) auto;
+}
 main {
   max-width: var(--container);
   margin: 0 auto calc(var(--space) * 4) auto;
 }
 footer {
-  position: fixed;
-  bottom: 0;
-  text-align: center;
+  display: flex;
+  justify-content: center; /* Centers horizontally */
+  align-items: center;
 }
 /* ====== Articles Grid Layout ====
 Setting the rules for how articles are placed in the main element.
@@ -87,3 +94,21 @@ article {
     grid-column: span 3;
   }
 }
+
+button,
+.button {
+  display: inline-block;
+  background-color: rgb(247, 247, 247);
+  color: rgb(0, 0, 0);
+  padding: 10px 20px;
+
+  cursor: pointer;
+  text-decoration: none;
+  transition: 0.3s;
+}
+
+button:hover,
+.button:hover {
+  background-color: rgb(163, 163, 179);
+  transform: scale(1.05);
+}