West Midlands | ITP-January-2026 | Jonathan Boahene | Sprint 1 | Wireframe

Wireframe/index.html

@@ -10,23 +10,41 @@
     <header>
       <h1>Wireframe</h1>
       <p>
-        This is the default, provided code and no changes have been made yet.
+        A simple way to explain how a website will look and work before adding all the fancy details.
       </p>
     </header>
     <main>
       <article>
         <img src="placeholder.svg" alt="" />
-        <h2>Title</h2>
+        <h2>README</h2>
         <p>
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
-          voluptates. Quisquam, voluptates.
+          README is a guidebook for a project. Imagine you get a new toy, and it comes with a small booklet that explains what the toy is, how to use it, and how to take care of it.
+          A README file does the same for a project, it tells people what the project is about, how to use it, and any important details they need to know.
         </p>
-        <a href="">Read more</a>
+        <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="placeholder.svg" alt="" />
+        <h2>Wireframe</h2>
+        <p>
+          A Wireframe is like a blueprint for a website. Imagine you're drawing a plan for a house before building it. You sketch where the rooms, doors, and windows will go, but you don't add colors,
+          furniture, or decorations yet. <br/> A <em>Wireframe</em> does the same for a website, it shows where pictures, buttons, and texts will go, all the while doesn't worry about making it look pretty yet. 
+        </p>
+        <a href="https://www.coursera.org/gb/articles/wireframe">Read more</a>
+      </article>
+      <article>
+        <img src="placeholder.svg" alt="" />
+        <h2>Git</h2>
+        <p>
+          Git is like a magic notebook for your project. It's similar to when you're drawing a picture, and every time you make a change, the notebook saves a copy of your work. If you make a mistake, you can go back to an earlier
+          version and fix it. <br/> <em>Git</em> does the same for your code, it keeps track of all the changes you make so you can go back if something goes wrong.
+        </p>
+        <a href="https://git-scm.com/book/en/v2/Getting-Started-What-is-Git%3F">Read more</a>
       </article>
     </main>
     <footer>
       <p>
-        This is the default, provided code and no changes have been made yet.
+        © 2025 Abayie
       </p>
     </footer>
   </body>

Wireframe/style.css

@@ -26,7 +26,15 @@ As well as useful links to learn more */
 }
 /* ====== Base Elements ======
  General rules for basic HTML elements in any context */
+html, body {
+  height: 100%;
+  margin: 0;
+
+}
 body {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
   background: var(--paper);
   color: var(--ink);
   font: var(--font);
@@ -46,21 +54,33 @@ Setting the overall rules for page regions
 https://www.w3.org/WAI/tutorials/page-structure/regions/
 */
 main {
+  flex: 1;
   max-width: var(--container);
   margin: 0 auto calc(var(--space) * 4) auto;
+  padding-bottom: 80px;
 }
+
 footer {
   position: fixed;
+  left: 0;
+  right: 0;
   bottom: 0;
+  background: #f5f5f5;
   text-align: center;
+  padding: 10px;
+  border-top: 1px solid #ccc;
 }
+
+
 /* ====== 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;
@@ -69,11 +89,13 @@ main {
     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);
@@ -87,3 +109,7 @@ article {
     grid-column: span 3;
   }
 }
+
+header {
+  text-align: center;
+}