CodeYourFuture · Faatima-Bah · Oct 9, 2025 · Oct 9, 2025 · Oct 9, 2025 · Oct 9, 2025
diff --git a/Wireframe/git-branch.png b/Wireframe/git-branch.png
diff --git a/Wireframe/index.html b/Wireframe/index.html
@@ -4,30 +4,56 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Wireframe</title>
+    <meta name="description" content="Short explanations: what a README file is, what a wireframe is, and what a Git branch is." />
     <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.
+    <header class="site-header">
+      <div class="container">
+        <h1>A Quick Guide For README, Wireframes & Git Branches</h1>
+        <p>A short explanations: what a README file is, what a wireframe is, and what a Git branch is.  .
         </p>
-        <a href="">Read more</a>
-      </article>
+      </div>
+    </header>
+
+    <main id="main" class="container" aria-labelledby="main-heading">
+      <h2 id="main-heading" class="visually-hidden">Explanations</h2>
+
+      <section class="articles" aria-label="Resources and explanations">
+        <article class="article feature" aria-labelledby="readme-title">
+          <img src="readme-image.png" alt="Screenshot of a README file displayed in a code editor" />
+          <h3 id="readme-title">What is the purpose of a README file?</h3>
+          <p class="summary">
+            A README explains what a project does and how to use it. It is the first file that we see in the git hub repo, it gives us information about the project, the purpose and how to get started about the project.
+          </p>
+          <a href="https://www.makeareadme.com/" class="read-more" target="_blank">Read more about README files</a>
+        </article>
+
+        <article class="article" aria-labelledby="wireframe-title">
+          <img src="wireframe.png" alt="Simple wireframe sketch showing header, columns and footer blocks" />
+          <h3 id="wireframe-title">What is the purpose of a wireframe?</h3>
+          <p class="summary">
+            A wireframe is a structure that shows the layout of content of a page. It focuses on structure and hierarchy (not visual design), so teams can iterate on layout and user flows early.
+          </p>
+          <a href="https://www.productplan.com/glossary/wireframe/" class="read-more" target="_blank">Read more about wireframes</a>
+        </article>
+
+        <article class="article" aria-labelledby="branch-title">
+          <img src="git-branch.png" alt="Diagram of Git commits on multiple branches" />
+          <h3 id="branch-title">What is a branch in Git?</h3>
+          <p class="summary">
+            A branch is a separate line of development. It lets you build features or fixes in isolation from the main codebase and merge them back when ready, so the main branch stays stable.
+          </p>
+          <a href="https://git-scm.com/book/en/v2/Git-Branching-Branches-in-a-Nutshell" class="read-more" target="_blank">Read more about Git branches</a>
+        </article>
+      </section>
     </main>
-    <footer>
-      <p>
-        This is the default, provided code and no changes have been made yet.
-      </p>
+
+    <footer class="site-footer">
+      <div class="container">
+        <p>Created for the onboarding assignment: semantic, accessible, responsive.</p>
+      </div>
     </footer>
   </body>
 </html>
diff --git a/Wireframe/readme-image.png b/Wireframe/readme-image.png
diff --git a/Wireframe/style.css b/Wireframe/style.css
@@ -17,73 +17,138 @@ As well as useful links to learn more */
  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 */
+  --bg-color: #ffffff;
+  --text-color: #222222;
+  --accent-color: #0055cc;
+  --border-color: #cccccc;
+  --font: 100%/1.6 system-ui, sans-serif;
+  --space: clamp(8px, 2vw, 20px);
+  --container-width: 1100px;
+}
+
+/* ====== BASE STYLES ====== */
+* {
+  box-sizing: border-box;
+}
+
 body {
-  background: var(--paper);
-  color: var(--ink);
+  margin: 0;
+  background: var(--bg-color);
+  color: var(--text-color);
   font: var(--font);
+  line-height: 1.6;
 }
+
+img {
+  width: 100%;
+  height: auto;
+  display: block;
+}
+
 a {
+  color: var(--accent-color);
+  text-decoration: none;
+  font-weight: 600;
+}
+a:hover,
+a:focus {
+  text-decoration: underline;
+}
+
+/* ====== HEADER ====== */
+header {
+  background-color: var(--accent-color);
+  color: #fff;
   padding: var(--space);
-  border: var(--line);
-  max-width: fit-content;
+  text-align: center;
 }
-img,
-svg {
-  width: 100%;
-  object-fit: cover;
+
+header h1 {
+  margin: 0;
+  font-size: 1.8rem;
 }
-/* ====== Site Layout ====== 
-Setting the overall rules for page regions
-https://www.w3.org/WAI/tutorials/page-structure/regions/
-*/
+
+header p {
+  margin: 0.5rem 0 0;
+}
+
+/* ====== MAIN CONTENT ====== */
 main {
-  max-width: var(--container);
-  margin: 0 auto calc(var(--space) * 4) auto;
+  max-width: var(--container-width);
+  margin: var(--space) auto calc(var(--space) * 5);
+  padding: 0 var(--space);
+}
+
+.articles {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr); /* 2 columns for bottom row */
+  grid-template-rows: auto; /* rows adjust based on content */
+  gap: calc(var(--space) * 2);
+}
+
+
+/* ====== ARTICLE CARDS ====== */
+article {
+  border: 1px solid var(--border-color);
+  border-radius: 8px;
+  padding-bottom: var(--space);
+  background-color: #fafafa;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+
+.feature {
+  grid-column: 1 / 3; /* spans both columns */
+}
+
+
+article img {
+  border-bottom: 1px solid var(--border-color);
+}
+
+article h3 {
+  margin: var(--space);
+  font-size: 1.2rem;
+}
+
+article p {
+  margin: 0 var(--space) var(--space);
+}
+
+article a {
+  align-self: flex-start;
+  margin: 0 var(--space);
+  background-color: var(--accent-color);
+  color: white;
+  padding: 0.4rem 0.8rem;
+  border-radius: 4px;
 }
+article a:hover,
+article a:focus {
+  background-color: #003b99;
+}
+/* ====== FOOTER ====== */
 footer {
   position: fixed;
   bottom: 0;
+  width: 100%;
+  background: #f1f1f1;
   text-align: center;
+  padding: 10px;
+  font-size: 0.9rem;
+  color: #555;
+  border-top: 1px solid var(--border-color);
 }
-/* ====== 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;
-  }
-}
+/* ====== ACCESSIBILITY HELPERS ====== */
+.visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  border: 0;
+  clip: rect(0 0 0 0);
+  overflow: hidden;
+}