CodeYourFuture · Jay99-prog · Jun 7, 2026 · Jun 7, 2026 · Jun 8, 2026
diff --git a/Wireframe/git-branch.png b/Wireframe/git-branch.png
diff --git a/Wireframe/index.html b/Wireframe/index.html
@@ -1,33 +1,107 @@
 <!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>
-      </article>
-    </main>
-    <footer>
-      <p>
-        This is the default, provided code and no changes have been made yet.
-      </p>
-    </footer>
-  </body>
-</html>
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Understanding README Files, Wireframes and Git Branches</title>
+  <link rel="stylesheet" href="style.css">
+</head>
+
+<body>
+  <header>
+    <h1>Understanding README Files, Wireframes and Git Branches</h1>
+
+    <p>
+      This article explores three important concepts used in software
+      development: README files, Wireframes and Git branches.
+    </p>
+
+    <p>
+      Code adapted and changed by Juanita.
+    </p>
+  </header>
+
+  <main>
+  <article>
+    <img src="readme.png" alt="README file example">
+
+    <h2>What is a README File?</h2>
+
+    <p>
+      A README file is usually the first document people see when they visit a
+      project. It provides an overview of the project, explains its purpose,
+      gives installation instructions and helps users understand how to use
+      the software.
+    </p>
+
+    <p>
+      A well-written README makes it easier for developers and contributors
+      to understand and work with a project.
+    </p>
+
+    <a
+      href="https://www.freecodecamp.org/news/how-to-write-a-good-readme-file/"
+      target="_blank"
+      rel="noopener noreferrer"
+    >
+      Learn more about README files
+    </a>
+  </article>
+
+  <article>
+    <img src="wireframe.png" alt="Website wireframe example">
+
+    <h2>What is a Wireframe?</h2>
+
+    <p>
+      A wireframe is a simple visual representation of a webpage or
+      application. It focuses on structure and layout rather than colours,
+      images or final design elements.
+    </p>
+
+    <p>
+      Fun fact: designers also use wireframes to plan where content, navigation
+      and key features will appear before development begins.
+    </p>
+
+    <a
+      href="https://balsamiq.com/blog/what-are-wireframes/"
+      target="_blank"
+      rel="noopener noreferrer"
+    >
+      Learn more about wireframes
+    </a>
+  </article>
+
+  <article>
+    <img src="git-branch.png" alt="Git branch diagram">
+
+    <h2>What is a Git Branch?</h2>
+
+    <p>
+      A Git branch is an independent line of development within a Git
+      repository. It allows developers to work on new features, bug fixes
+      or experiments without affecting the main version of the project.
+    </p>
+
+    <p>
+      Once the work is complete and tested, the branch can be merged back
+      into the main codebase.
+    </p>
+
+    <a
+      href="https://www.atlassian.com/git/tutorials/using-branches"
+      target="_blank"
+      rel="noopener noreferrer"
+    >
+      Learn more about Git branches
+    </a>
+  </article>
+</main>
+
+  <footer>
+    <p>Created for CYF Wireframe assessment by Juanita Nwachukwu.</p>
+  </footer>
+
+</body>
+</html>
diff --git a/Wireframe/readme.png b/Wireframe/readme.png
diff --git a/Wireframe/style.css b/Wireframe/style.css
@@ -18,72 +18,95 @@ 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: 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 */
+
 body {
   background: var(--paper);
   color: var(--ink);
   font: var(--font);
+  padding-bottom: 60px;
 }
+
 a {
   padding: var(--space);
   border: var(--line);
   max-width: fit-content;
 }
+
 img,
 svg {
   width: 100%;
   object-fit: cover;
 }
+
 /* ====== 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;
 }
+
+/* (kept but fixed indentation only) */
+header {
+  text-align: center;
+}
+
 footer {
   position: fixed;
   bottom: 0;
+  left: 0;
+  width: 100%;
   text-align: center;
+  background: var(--paper);
 }
+
 /* ====== 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;
-  }
 }
+
+main > *: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;
-  }
 }
+
+article > * {
+  grid-column: 2/3;
+}
+
+article  > img {
+    grid-column: span 3;
+}