diff --git a/Form-Controls/index.html b/Form-Controls/index.html
index 65a866cdb..017e9886a 100644
--- a/Form-Controls/index.html
+++ b/Form-Controls/index.html
@@ -1,27 +1,109 @@
 <!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">
+  <title>Product Pick Form Controls</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <meta name="description" content="Confirm your identity and choose your t-shirt colour and size. All fields required.">
+</head>
+<body>
+  <header>
+    <h1>Product Pick</h1>
+  </header>
+
+  <main>
+    <form name="tshirt-form" aria-describedby="form-instructions">
+      <p id="form-instructions">All fields are required. Please fill out your details and choose your t-shirt colour and size.</p>
+
+      <fieldset>
+        <legend>Confirm Your Details</legend>
+
+        <p>
+          <label for="name">Name:</label><br>
+          <input
+            id="name"
+            name="name"
+            type="text"
+            required
+            minlength="2"
+            pattern=".*\S.*"
+            title="Name must be at least 2 characters and not just spaces"
+            aria-required="true"
+            placeholder="Enter your full name"
+          >
+        </p>
+
+        <p>
+          <label for="email">Email:</label><br>
+          <input
+            id="email"
+            name="email"
+            type="email"
+            required
+            aria-required="true"
+            placeholder="example@example.com"
+            title="Please enter a valid email address"
+          >
+        </p>
+      </fieldset>
+
+      <fieldset>
+        <legend>Choose a colour:</legend>
+
+        <p>
+          <label>
+            <input
+              type="radio"
+              name="colour"
+              value="red"
+              required
+              aria-required="true"
+            > Red
+          </label>
+        </p>
+
+        <p>
+          <label>
+            <input
+              type="radio"
+              name="colour"
+              value="blue"
+            > Blue
+          </label>
+        </p>
+
+        <p>
+          <label>
+            <input
+              type="radio"
+              name="colour"
+              value="green"
+            > Green
+          </label>
+        </p>
+      </fieldset>
+
+      <p>
+        <label for="size">Size:</label><br>
+        <select id="size" name="size" required aria-required="true" title="Select your t-shirt size">
+          <option value="" disabled selected>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>
+      </p>
+
+      <p>
+        <button type="submit" aria-label="Submit your t-shirt selection">Submit</button>
+      </p>
+    </form>
+  </main>
+
+  <footer>
+    <p>Indira - HOMEWORK SOLUTION</p>
+  </footer>
+</body>
 </html>
diff --git a/Wireframe/README.md b/Wireframe/README.md
index 0ae0216d1..d691d5dcb 100644
--- a/Wireframe/README.md
+++ b/Wireframe/README.md
@@ -32,6 +32,7 @@ There are some provided HTML and CSS files you can use to get started. You can u
 - [ ] The webpage is properly committed and pushed to a branch on GitHub.
 
 ## Resources
+## Checking
 
 - [Wireframe](https://www.productplan.com/glossary/wireframe/)
 - [Semantic HTML](https://www.w3schools.com/html/html5_semantic_elements.asp)
diff --git a/Wireframe/index.html b/Wireframe/index.html
index 0e014e535..056459140 100644
--- a/Wireframe/index.html
+++ b/Wireframe/index.html
@@ -1,33 +1,45 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Wireframe</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>
-      <article>
-        <img src="placeholder.svg" alt="" />
-        <h2>Title</h2>
-        <p>
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
-          voluptates. Quisquam, voluptates.
-        </p>
-        <a href="">Read more</a>
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <meta name="description" content="Understand key web development concepts including README files, wireframes, and Git branches." />
+  <title>Understanding Key Web Concepts</title>
+  <link rel="stylesheet" href="style.css" />
+</head>
+<body>
+  <header role="banner">
+    <h1>Understanding Key Web Concepts</h1>
+    <p>A guide to README files, wireframes, and Git branches.</p>
+  </header>
+
+  <main id="main-content" role="main">
+    <section class="articles" aria-label="Web Development Concepts">
+      <article class="card">
+        <img src="placeholder.svg" alt="Illustration showing a README file on a computer screen" />
+        <h2>What is the purpose of a README file?</h2>
+        <p>The README file introduces and explains a project. It includes setup instructions, usage information, and other helpful context for contributors.</p>
+        <a href="https://www.makeareadme.com/" target="_blank" rel="noopener noreferrer">Learn More <span class="sr-only">about README files</span></a>
       </article>
-    </main>
-    <footer>
-      <p>
-        This is the default, provided code and no changes have been made yet.
-      </p>
-    </footer>
-  </body>
+
+      <article class="card">
+        <img src="placeholder.svg" alt="Wireframe sketch of a web page layout" />
+        <h2>What is the purpose of a wireframe?</h2>
+        <p>A wireframe is a visual guide for laying out a web page or app. It helps plan the structure and user interface before design and development begin.</p>
+        <a href="https://www.productplan.com/glossary/wireframe/" target="_blank" rel="noopener noreferrer">Explore Wireframes <span class="sr-only">for web design</span></a>
+      </article>
+
+      <article class="card">
+        <img src="placeholder.svg" alt="Diagram showing Git branches and merges" />
+        <h2>What is a branch in Git?</h2>
+        <p>A Git branch allows you to work on features or fixes independently. It keeps your main codebase safe while you make changes or add new functionality.</p>
+        <a href="https://www.atlassian.com/git/tutorials/using-branches" target="_blank" rel="noopener noreferrer">Understand Git Branches <span class="sr-only">with Atlassian guide</span></a>
+      </article>
+    </section>
+  </main>
+
+  <footer role="contentinfo">
+    <p>&copy; 2025 <a href="https://codeyourfuture.io" target="_blank" rel="noopener noreferrer">CodeYourFuture</a> Student</p>
+  </footer>
+</body>
 </html>
diff --git a/Wireframe/style.css b/Wireframe/style.css
index be835b6c7..cd281212b 100644
--- a/Wireframe/style.css
+++ b/Wireframe/style.css
@@ -1,89 +1,118 @@
-/* Here are some starter styles
-You can edit these or replace them entirely 
-It's showing you a common way to organise CSS 
-And includes solutions to common problems 
-As well as useful links to learn more */
+/* Base Reset */
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+/* Screen Reader Utility */
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
+}
 
-/* ====== Design Palette ======
- This is our "design palette".
- It sets out the colours, fonts, styles etc to be used in this design 
- At work, a designer will give these to you based on the corporate brand, but while you are learning
- You can design it yourself if you like
- Inspect the starter design with Devtools
- Click on the colour swatches to see what is happening
- I've put some useful CSS you won't have learned yet
- For you to explore and play with if you are interested
- https://web.dev/articles/min-max-clamp
- https://scrimba.com/learn-css-variables-c026
-====== Design Palette ====== */
-:root {
-  --paper: oklch(7 0 0);
-  --ink: color-mix(in oklab, var(--color) 5%, black);
-  --font: 100%/1.5 system-ui;
-  --space: clamp(6px, 6px + 2vw, 15px);
-  --line: 1px solid;
-  --container: 1280px;
-}
-/* ====== Base Elements ======
- General rules for basic HTML elements in any context */
+/* Typography and Layout */
 body {
-  background: var(--paper);
-  color: var(--ink);
-  font: var(--font);
+  font-family: Arial, sans-serif;
+  line-height: 1.6;
+  background-color: #f4f4f4;
+  color: #1a1a1a;
+  padding-bottom: 60px;
+}
+
+header {
+  background: #004080;
+  color: #fff;
+  padding: 2rem;
+  text-align: center;
 }
-a {
-  padding: var(--space);
-  border: var(--line);
-  max-width: fit-content;
+
+header h1 {
+  font-size: 2rem;
+  margin-bottom: 0.5rem;
 }
-img,
-svg {
-  width: 100%;
-  object-fit: cover;
+
+header p {
+  font-size: 1rem;
 }
-/* ====== Site Layout ====== 
-Setting the overall rules for page regions
-https://www.w3.org/WAI/tutorials/page-structure/regions/
-*/
+
 main {
-  max-width: var(--container);
-  margin: 0 auto calc(var(--space) * 4) auto;
+  padding: 2rem;
+}
+
+.articles {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1.5rem;
+  justify-content: center;
 }
+
+.card {
+  background: white;
+  border-radius: 8px;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+  padding: 1rem;
+  max-width: 300px;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.card img {
+  width: 100%;
+  max-width: 200px;
+  height: auto;
+  margin-bottom: 1rem;
+}
+
+.card h2 {
+  font-size: 1.2rem;
+  margin: 1rem 0 0.5rem;
+  text-align: center;
+}
+
+.card p {
+  font-size: 0.95rem;
+  margin-bottom: 1rem;
+  text-align: center;
+}
+
+.card a {
+  text-decoration: none;
+  color: #fff;
+  background-color: #0073e6;
+  padding: 0.5rem 1rem;
+  border-radius: 4px;
+  transition: background 0.3s ease;
+}
+
+.card a:hover,
+.card a:focus {
+  background-color: #005bb5;
+  outline: 2px solid #000;
+  outline-offset: 2px;
+}
+
+/* Footer */
 footer {
   position: fixed;
   bottom: 0;
+  width: 100%;
+  background: #222;
+  color: white;
   text-align: center;
+  padding: 0.75rem;
+  font-size: 0.9rem;
 }
-/* ====== Articles Grid Layout ====
-Setting the rules for how articles are placed in the main element.
-Inspect this in Devtools and click the "grid" button in the Elements view
-Play with the options that come up.
-https://developer.chrome.com/docs/devtools/css/grid
-https://gridbyexample.com/learn/
-*/
-main {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: var(--space);
-  > *:first-child {
-    grid-column: span 2;
-  }
-}
-/* ====== Article Layout ====== 
-Setting the rules for how elements are placed in the article. 
-Now laying out just the INSIDE of the repeated card/article design.
-Keeping things orderly and separate is the key to good, simple CSS.
-*/
-article {
-  border: var(--line);
-  padding-bottom: var(--space);
-  text-align: left;
-  display: grid;
-  grid-template-columns: var(--space) 1fr var(--space);
-  > * {
-    grid-column: 2/3;
-  }
-  > img {
-    grid-column: span 3;
-  }
+
+footer a {
+  color: #80d4ff;
+  text-decoration: underline;
 }
