CodeYourFuture · d-odumosu · Jun 3, 2026 · Jun 3, 2026 · Jun 6, 2026 · Jun 6, 2026
diff --git a/Wireframe/Styles/style.css b/Wireframe/Styles/style.css
@@ -0,0 +1,97 @@
+/* ====== Base ====== */
+body {
+  margin: 0;
+  box-sizing: border-box;
+  line-height: 1.5;
+  font-family: "Cantarell", sans-serif;
+  font-weight: 400;
+  color: #222;
+}
+
+img {
+  width: 100%;
+  display: block;
+}
+
+/* ====== Layout ====== */
+.container {
+  width: 70%;
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+/* ====== Header ====== */
+.header__content {
+  text-align: center;
+  padding: 20px;
+}
+
+.header__title {
+  font-weight: 900;
+  font-style: italic;
+  color: #c1121f;
+  margin-bottom: 0;
+}
+
+.header__tagline {
+  color: #780000;
+  margin-top: 0;
+  font-size: 18px;
+  font-weight: 700;
+}
+
+/* ====== Articles ====== */
+article {
+  border: 1px solid #ced4da;
+}
+
+.article-feature-text {
+  padding: 0 0 2em 2em;
+}
+
+.article-secondary-flex {
+  display: flex;
+  justify-content: space-between;
+  gap: 1rem;
+}
+
+.article-sec {
+  margin-top: 1.5em;
+  padding: 1.5em;
+  width: 44%;
+}
+
+/* ====== Buttons / Links ====== */
+.article__link {
+  text-decoration: none;
+  border: 1px solid #ced4da;
+  padding: 0.7em 1.2em;
+  color: #fff;
+  background: #e76f51;
+  border-radius: 2px;
+  display: inline-block;
+}
+
+.article__link:hover,
+.article__link:focus {
+  background: #ffc300;
+  color: black;
+}
+
+/* ====== Footer ====== */
+.site-footer {
+  text-align: center;
+  padding: 20px 0;
+}
+
+/* ====== Responsive ====== */
+@media (max-width: 750px) {
+  .article-secondary-flex {
+    flex-direction: column;
+  }
+
+  .article-sec{
+    width: 90%;
+  }
+
+}
diff --git a/Wireframe/images/git.webp b/Wireframe/images/git.webp
diff --git a/Wireframe/images/readme.png b/Wireframe/images/readme.png
diff --git a/Wireframe/images/wireframe-hero.png b/Wireframe/images/wireframe-hero.png
diff --git a/Wireframe/index.html b/Wireframe/index.html
@@ -1,33 +1,97 @@
 <!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>
+<head>
+    <meta charset="UTF-8"/>
+    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+    <meta name="description"
+          content="A beginner-friendly blog about README files, wireframes, and Git branches for learning web development."/>
+    <meta name="keywords" content="HTML, CSS, Git, README, wireframes, programming blog">
+    <meta name="author" content="The Blog">
+    <title>The Blog | Learning Programming Basics</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Bitcount+Grid+Single:wght@100..900&family=Cantarell:ital,wght@0,400;0,700;1,400;1,700&display=swap"
+          rel="stylesheet">
+    <link rel="stylesheet" href="Styles/style.css"/>
+</head>
+
+<body>
+
+<header class="header">
+    <div class="container header__content">
+        <div class="header__branding">
+            <h1 class="header__title">The Blog</h1>
+            <p class="header__tagline">A blog on learning programming</p>
+        </div>
+
+    </div>
+</header>
+
+<div class="container">
     <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>
+        <article class="article-feature">
+            <img src="./images/readme.png" alt="illustration of a README.md file" loading="lazy" decoding="async">
+            <div class="article-feature-text">
+                <h2>What is the purpose of a README file</h2>
+                <p>
+                    according to GitHub Docs, a README file serves as the primary source of information about a project
+                    and
+                    helps users understand how to install, use, and contribute to it <em>(GitHub Docs, n.d.).</em>
+                </p>
+                <p>
+                    A README file is one of the most important documents within a software
+                    project. It is usually the first file that users, developers, recruiters,
+                    or potential employers look at when they visit a project's repository.
+                    The name "README" comes from the idea that it should be the file people
+                    read before doing anything else with the project.
+                </p>
+                <a class="article__link" href="#"
+                   aria-label="read more about what the purpose of a read me file does">README file ...</a>
+            </div>
+        </article>
+
+        <div class="article-secondary-flex">
+            <article class="article-sec">
+                <img src="./images/wireframe-hero.png" alt="illustration of a man showing a wireframe" loading="lazy"
+                     decoding="async">
+                <h2>What is the purpose of a wireframe</h2>
+                <p>
+                    A wireframe is a simple visual representation of a website or application's layout. It acts as a
+                    blueprint.
+                </p>
+                <p>Figma describes a wireframe as a low-fidelity representation of a user interface that focuses on
+                    layout,
+                    structure, and functionality before visual design decisions are made <em>(Figma, n.d.).</em></p>
+                <a class="article__link" href="#"
+                   aria-label="read more about the purpose of a wireframe">Wireframes</a>
+            </article>
+
+            <article class="article-sec">
+                <img src="./images/git.webp" alt="illustration of a git tree branching out" loading="lazy"
+                     decoding="async">
+                <h2>What is a branch in Git?</h2>
+                <p>Git documentation explains that branches allow developers to diverge from the main line of
+                    development
+                    and work independently on features before merging their changes back into the project
+                    <em>(Git SCM, n.d.).</em></p>
+                <p>
+                <p>
+                    A branch in Git is a separate line of development that allows developers to
+                    work on changes independently without affecting the main project.
+                </p>
+                <a class="article__link" href="#" aria-label="read more about branches on git">Git
+                    branching</a>
+            </article>
+        </div>
     </main>
-    <footer>
-      <p>
-        This is the default, provided code and no changes have been made yet.
-      </p>
-    </footer>
-  </body>
+</div>
+
+<footer class="site-footer">
+    <div class="container">
+        <p>&copy; 2026 The Blog. All rights reserved.</p>
+    </div>
+</footer>
+</body>
 </html>
+
diff --git a/Wireframe/style.css b/Wireframe/style.css