diff --git a/Wireframe/index.html b/Wireframe/index.html
index 0e014e535..8bdee727e 100644
--- a/Wireframe/index.html
+++ b/Wireframe/index.html
@@ -3,31 +3,73 @@
   <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="Illustration representing a README file"
+        />
+        <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="Illustration showing a wireframe layout"
+        />
+        <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="placeholder.svg"
+          alt="Illustration representing a Git branch"
+        />
+        <h2>What is a Git branch?</h2>
         <p>
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
-          voluptates. Quisquam, voluptates.
+          A Git branch allows developers 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>
