CodeYourFuture · d-odumosu · May 13, 2026 · May 13, 2026 · May 16, 2026 · May 23, 2026
diff --git a/Form-Controls/index.html b/Form-Controls/index.html
@@ -1,27 +1,27 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+<head>
+    <meta charset="utf-8"/>
+    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
     <title>My form exercise</title>
-    <meta name="description" content="" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-  </head>
-  <body>
-    <header>
-      <h1>Product Pick</h1>
-    </header>
-    <main>
-      <form>
+    <meta name="description" content=""/>
+    <meta name="viewport" content="width=device-width, initial-scale=1"/>
+</head>
+<body>
+<header>
+    <h1>Product Pick</h1>
+</header>
+<main>
+    <form>
         <!-- write your html here-->
-        <!-- 
+        <!--
           try writing out the requirements first as comments
         this will also help you fill in your PR message later-->
-      </form>
-    </main>
-    <footer>
-      <!-- change to your name-->
-      <p>By HOMEWORK SOLUTION</p>
-    </footer>
-  </body>
-</html>
+    </form>
+</main>
+<footer>
+    <!-- change to your name-->
+    <p>By HOMEWORK SOLUTION</p>
+</footer>
+</body>
+</html>
diff --git a/Wireframe/README.md b/Wireframe/README.md
@@ -4,12 +4,12 @@
 
 <!--{{<objectives>}}>-->
 
-- [ ] Use semantic HTML tags to structure the webpage
-- [ ] Create three articles, each including an image, title, summary, and a link
-- [ ] Check a webpage against a wireframe layout
-- [ ] Test web code using [Lighthouse](https://programming.codeyourfuture.io/guides/testing/lighthouse)
-- [ ] Use version control by committing often and pushing regularly to GitHub
-- [ ] Develop the habit of writing clean, well-structured, and error-free code
+- [] Use semantic HTML tags to structure the webpage
+- [] Create three articles, each including an image, title, summary, and a link
+- [] Check a webpage against a wireframe layout
+- [] Test web code using [Lighthouse](https://programming.codeyourfuture.io/guides/testing/lighthouse)
+- [] Use version control by committing often and pushing regularly to GitHub
+- [] Develop the habit of writing clean, well-structured, and error-free code
 <!--{{</objectives>}}>-->
 
 ## Task

diff --git a/Wireframe/images/branch.webp b/Wireframe/images/branch.webp
diff --git a/Wireframe/images/md.png b/Wireframe/images/md.png
diff --git a/Wireframe/images/wireframes-01.png.webp b/Wireframe/images/wireframes-01.png.webp
diff --git a/Wireframe/index.html b/Wireframe/index.html
@@ -1,33 +1,95 @@
 <!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."/>
+    <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="style.css"/>
+</head>
+
+<body>
+
+<header class="site-header">
+
+    <div class="container header-content">
+
+        <div class="branding">
+            <h1 class="site-title">The Blog</h1>
+            <p class="site-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/md.png" alt="illustration of a readme.md file">
+            <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-read-more" 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/wireframes-01.png.webp" alt="illustration of a man showing a wireframe">
+                <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-read-more" href="#"
+                   aria-label="read more about the purpose of a wireframe">Wireframes</a>
+            </article>
+
+            <article class="article-sec">
+                <img src="./images/branch.webp" alt="illustration of a git tree branching out">
+                <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-read-more" 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>
-</html>
+</div>
+
+<footer class="site-footer index-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
@@ -1,89 +1,78 @@
-/* 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 
-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 
- 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
- Click on the colour swatches to see what is happening
- I've put some useful CSS you won't have learned yet
- For you to explore and play with if you are interested
- https://web.dev/articles/min-max-clamp
- 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 */
 body {
-  background: var(--paper);
-  color: var(--ink);
-  font: var(--font);
+    margin: 0;
+    box-sizing: border-box;
+    line-height: 1.5;
+    font-family: "Cantarell", sans-serif;
+    font-weight: 400;
+}
+
+.container {
+    width: 80%;
+    max-width: 1200px;
+    margin: 0 auto;
+}
+article {
+    border: 1px solid #fb8500;
+}
+
+.article-feature-text {
+    padding: 0 0 2em 2em;
+}
+
+.article-secondary-flex {
+    display: flex;
+    justify-content: space-between;
+}
+
+.article-sec {
+    margin-top: 1.5em;
+    padding: 1.5em;
+    width: 44%
 }
-a {
-  padding: var(--space);
-  border: var(--line);
-  max-width: fit-content;
+img{
+    width: 100%;
 }
-img,
-svg {
-  width: 100%;
-  object-fit: cover;
+
+h1 {
+    font-weight: 900;
+    font-style: italic;
+    color: #c1121f;
+    margin-bottom:0;
 }
-/* ====== 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;
+
+.site-tagline {
+    color: #780000;
+    margin-top: 0;
+    font-size: 18px;
+    font-weight: 700;
+}
+
+/* ====== Header ====== */
+header {
+    text-align: center;
+    margin: 0;
+    padding: 20px;
 }
+
 footer {
-  position: fixed;
-  bottom: 0;
-  text-align: center;
+    text-align: center;
 }
-/* ====== 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;
-  }
+
+/* ====== Navigation ====== */
+.article-read-more {
+    text-decoration: none;
+    border: 1px solid #03045e;
+    padding: .7em 1.2em;
+    color: #fff;
+    background: #e76f51;
+    border-radius: 2px;
 }
-/* ====== 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-read-more:hover,
+.article-read-more:focus {
+    background: #ffc300;
+    color: black;
+    font-size: 20px;
 }
+