CodeYourFuture · Richiealx · Jan 21, 2026 · Jan 21, 2026 · Jan 21, 2026 · Jan 21, 2026
diff --git a/Wireframe/index.html b/Wireframe/index.html
@@ -3,30 +3,80 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Wireframe</title>
+    <title>Wireframe to Web Code</title>
     <link rel="stylesheet" href="style.css" />
   </head>
+
   <body>
-    <header>
-      <h1>Wireframe</h1>
+    <header class="page-header">
+      <h1>Wireframe to Web Code</h1>
       <p>
-        This is the default, provided code and no changes have been made yet.
+        A simple webpage built from a wireframe using semantic HTML and CSS.
       </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>
-      </article>
+      <section class="articles" aria-label="Articles">
+        <article class="article article-featured">
+          <img src="placeholder.svg" alt="" aria-hidden="true" />
+          <h2>What is the purpose of a README file?</h2>
+          <p>
+            A README is the first place someone looks when they open a project.
+            It explains what the project does, how to run it, and how to
+            contribute. A clear README reduces confusion and makes collaboration
+            easier.
+          </p>
+          <a
+            href="https://docs.github.com/en/repositories/managing-your-repositorys-settings-and-features/customizing-your-repository/about-readmes"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            Read more about README files
+          </a>
+        </article>
+
+        <article class="article">
+          <img src="placeholder.svg" alt="" aria-hidden="true" />
+          <h2>What is the purpose of a wireframe?</h2>
+          <p>
+            A wireframe is a simple layout sketch that shows where key parts of
+            a page will go before design details are added. It helps you plan
+            structure, spacing, and components so you can build the layout
+            correctly first.
+          </p>
+          <a
+            href="https://www.nngroup.com/articles/wireframes/"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            Read more about wireframes
+          </a>
+        </article>
+
+        <article class="article">
+          <img src="placeholder.svg" alt="" aria-hidden="true" />
+          <h2>What is a branch in Git?</h2>
+          <p>
+            A branch is an independent line of work in a Git repository. It lets
+            you make changes safely without affecting the main version. When
+            your work is ready, it can be reviewed and merged back through a
+            pull request.
+          </p>
+          <a
+            href="https://git-scm.com/book/en/v2/Git-Branching-Branches-in-a-Nutshell"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            Read more about Git branches
+          </a>
+        </article>
+      </section>
     </main>
+
     <footer>
       <p>
-        This is the default, provided code and no changes have been made yet.
+        Footers usually contain contact links and general information about the
+        website.
       </p>
     </footer>
   </body>

diff --git a/Wireframe/style.css b/Wireframe/style.css
@@ -1,12 +1,12 @@
 /* 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 
+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 */
 
 /* ====== Design Palette ======
  This is our "design palette".
- It sets out the colours, fonts, styles etc to be used in this design 
+ 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
@@ -18,72 +18,152 @@ As well as useful links to learn more */
 ====== Design Palette ====== */
 :root {
   --paper: oklch(7 0 0);
-  --ink: color-mix(in oklab, var(--color) 5%, black);
+  --ink: color-mix(in oklab, var(--paper) 5%, black);
   --font: 100%/1.5 system-ui;
   --space: clamp(6px, 6px + 2vw, 15px);
   --line: 1px solid;
   --container: 1280px;
+
+  /* Used to keep content visible above the fixed footer */
+  --footer-height: calc(var(--space) * 4);
 }
+
 /* ====== Base Elements ======
  General rules for basic HTML elements in any context */
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
 body {
+  margin: 0;
   background: var(--paper);
   color: var(--ink);
   font: var(--font);
 }
+
 a {
+  display: inline-block;
   padding: var(--space);
   border: var(--line);
   max-width: fit-content;
+  color: inherit;
 }
+
+/* Clear focus style for keyboard accessibility */
+a:focus-visible {
+  outline: 3px solid currentColor;
+  outline-offset: 3px;
+}
+
 img,
 svg {
   width: 100%;
+  height: auto;
+  display: block;
   object-fit: cover;
 }
-/* ====== Site Layout ====== 
+
+/* ====== Site Layout ======
 Setting the overall rules for page regions
 https://www.w3.org/WAI/tutorials/page-structure/regions/
 */
+header,
 main {
   max-width: var(--container);
-  margin: 0 auto calc(var(--space) * 4) auto;
+  margin: 0 auto;
+  padding: calc(var(--space) * 2);
 }
+
+/* Center the PAGE TITLE and the SUBTITLE (matches wireframe + reviewer feedback) */
+.page-header {
+  text-align: center;
+}
+
+main {
+  /* Prevent overlap with fixed footer and give the layout breathing room */
+  padding-bottom: calc(var(--footer-height) + (var(--space) * 2));
+}
+
+/* Footer fixed to bottom of viewport (full width) */
 footer {
   position: fixed;
   bottom: 0;
+  left: 0;
+  right: 0;
+
+  border-top: var(--line);
+  background: var(--paper);
+  padding: var(--space);
   text-align: center;
+  min-height: var(--footer-height);
 }
+
+footer p {
+  margin: 0;
+}
+
 /* ====== 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 {
+.articles {
   display: grid;
   grid-template-columns: 1fr 1fr;
-  gap: var(--space);
-  > *:first-child {
-    grid-column: span 2;
-  }
+  gap: calc(var(--space) * 2);
 }
-/* ====== Article Layout ====== 
-Setting the rules for how elements are placed in the article. 
+
+/* Make the first article span both columns (wireframe layout) */
+.articles > *:first-child {
+  grid-column: 1 / -1;
+}
+
+/* ====== 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,
 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;
+}
+
+.article > *,
+article > * {
+  grid-column: 2/3;
+}
+
+.article > img,
+article > img {
+  grid-column: 1 / -1;
+}
+
+/* Optional: improve spacing/readability while keeping the wireframe feel */
+.article h2,
+article h2 {
+  margin: calc(var(--space) * 1.5) 0 var(--space);
+}
+
+.article p,
+article p {
+  margin: 0 0 calc(var(--space) * 1.5);
+}
+
+/* Keep layout readable on small screens */
+@media (max-width: 700px) {
+  .articles {
+    grid-template-columns: 1fr;
   }
-  > img {
-    grid-column: span 3;
+
+  .articles > *:first-child {
+    grid-column: auto;
   }
 }