CodeYourFuture · tomdu3 · May 28, 2026 · May 28, 2026 · May 28, 2026 · May 28, 2026
diff --git a/Wireframe/README.md b/Wireframe/README.md
@@ -53,3 +53,9 @@ They ensure your code is reliable, maintainable, and presents a polished, credib
 - [Semantic HTML](https://www.w3schools.com/html/html5_semantic_elements.asp)
 - [:first-child](https://developer.mozilla.org/en-US/docs/Web/CSS/:first-child)
 - [Format Code and Make Logical Commits in VS Code](../practical_guide.md)
+
+### Images
+
+- [Keeping your README Fresh and Engaging](https://microsoft.github.io/genaiscript/blog/readme-maintenance/)
+- [Starting Guide to Wireframe Design – 7 Steps & 3 Tools](https://www.oursky.com/blogs/starting-guide-to-wireframe-design---7-steps-3-tools/)
+- [Mastering Git Branches: From Creation to Conflict Resolution](https://blog.devgenius.io/mastering-git-branches-from-creation-to-conflict-resolution-bd227ee12339)
diff --git a/Wireframe/assets/git-branch-small.webp b/Wireframe/assets/git-branch-small.webp
diff --git a/Wireframe/assets/git-branch.webp b/Wireframe/assets/git-branch.webp
diff --git a/Wireframe/assets/readme-small.webp b/Wireframe/assets/readme-small.webp
diff --git a/Wireframe/assets/readme.webp b/Wireframe/assets/readme.webp
diff --git a/Wireframe/assets/wireframe_design-small.webp b/Wireframe/assets/wireframe_design-small.webp
diff --git a/Wireframe/assets/wireframe_design.webp b/Wireframe/assets/wireframe_design.webp
diff --git a/Wireframe/index.html b/Wireframe/index.html
@@ -1,32 +1,121 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta
+      name="description"
+      content="A quickstart guide to building, documenting, and maintaining web projects with GitHub. Learn about README files, wireframes, and Git branching."
+    />
     <title>Wireframe</title>
     <link rel="stylesheet" href="style.css" />
   </head>
+
   <body>
     <header>
-      <h1>Wireframe</h1>
+      <h1>GitHub Web Project Essentials</h1>
       <p>
-        This is the default, provided code and no changes have been made yet.
+        A quickstart guide to building, documenting and maintaining web projects
+        with GitHub.
       </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.
+      <article class="card" id="main-article">
+        <img
+          src="./assets/readme.webp"
+          srcset="./assets/readme-small.webp 400w, ./assets/readme.webp 768w"
+          sizes="(max-width: 600px) 400px, 768px"
+          alt="Keeping your README fresh and engaging"
+          class="article-img"
+        />
+        <h2 class="article-title">What Is the Purpose of a README File</h2>
+        <p class="article-text">
+          A good README file serves as a project's "front door," acting as a
+          crucial piece of documentation that explains what an application does,
+          why the specific technologies were chosen, and how it differentiates a
+          high-quality project to both users and potential employers. At a
+          minimum, an effective layout must include the project title, a
+          descriptive overview, clear instructions on installation and usage,
+          collaborator credits, and an appropriate open-source license.
         </p>
-        <a href="">Read more</a>
+        <a
+          href="https://www.freecodecamp.org/news/how-to-write-a-good-readme-file/"
+          class="article-link"
+          target="_blank"
+          aria-label="Read more about README files"
+          >Read more</a
+        >
+      </article>
+      <article class="card">
+        <img
+          src="./assets/wireframe_design.webp"
+          srcset="
+            ./assets/wireframe_design-small.webp 400w,
+            ./assets/wireframe_design.webp       924w
+          "
+          sizes="(max-width: 600px) 400px, (max-width: 1200px) 50vw, 640px"
+          alt="Wireframe design example"
+          class="article-img"
+        />
+        <h2 class="article-title">What Is the Purpose of a Wireframe?</h2>
+        <p class="article-text">
+          A wireframe is a simplified visual guide used in web and app design to
+          outline the structure, layout, and functionality of a digital
+          interface. It focuses on arrangement rather than aesthetics, showing
+          where content, navigation, and interactive elements will be placed.
+          This skeletal structure helps designers and clients visualize the user
+          experience and make decisions about layout and functionality early in
+          the development process, before time and resources are invested in
+          detailed visual design.
+        </p>
+        <a
+          href="https://www.productplan.com/glossary/wireframe/"
+          class="article-link"
+          target="_blank"
+          aria-label="Read more about wireframes"
+          >Read more</a
+        >
+      </article>
+      <article class="card">
+        <img
+          src="./assets/git-branch.webp"
+          srcset="
+            ./assets/git-branch-small.webp 400w,
+            ./assets/git-branch.webp       650w
+          "
+          sizes="(max-width: 600px) 400px, (max-width: 1200px) 50vw, 640px"
+          alt="Git branches visual concept"
+          class="article-img"
+        />
+        <h2 class="article-title">What Is a Branch in Git?</h2>
+        <p class="article-text">
+          In version control systems like Git, a branch is a separate line of
+          development that diverges from the main project timeline. It allows
+          developers to work on new features, bug fixes, or experiments in
+          isolation without affecting the stable, primary version of the
+          codebase. When changes on a branch are complete and tested, they can
+          be merged back into the main line, integrating the updates seamlessly.
+        </p>
+        <a
+          href="https://blog.devgenius.io/mastering-git-branches-from-creation-to-conflict-resolution-bd227ee12339"
+          class="article-link"
+          target="_blank"
+          aria-label="Read more about Git branches"
+          >Read more</a
+        >
       </article>
     </main>
     <footer>
       <p>
-        This is the default, provided code and no changes have been made yet.
+        &copy; 2026
+        <a
+          href="https://codeyourfuture.io/"
+          class="footer-link"
+          target="_blank"
+          aria-label="Code Your Future website"
+          >&lt;<span class="red-text">Code</span>&gt; Your Future</a
+        >
+        &amp; Tomislav Dukez.
       </p>
     </footer>
   </body>

diff --git a/Wireframe/style.css b/Wireframe/style.css
@@ -17,58 +17,116 @@ As well as useful links to learn more */
  https://scrimba.com/learn-css-variables-c026
 ====== Design Palette ====== */
 :root {
-  --paper: oklch(7 0 0);
+  --color: oklch(0.6 0.25 20);
+  --paper: oklch(0.98 0.01 20);
   --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);
 }
+
 a {
   padding: var(--space);
   border: var(--line);
   max-width: fit-content;
 }
+
 img,
 svg {
   width: 100%;
   object-fit: cover;
 }
+
+.article-img {
+  aspect-ratio: 16 / 9;
+}
+
 /* ====== Site Layout ====== 
 Setting the overall rules for page regions
 https://www.w3.org/WAI/tutorials/page-structure/regions/
 */
+header {
+  text-align: center;
+  padding: calc(var(--space) * 2) var(--space);
+}
+
 main {
   max-width: var(--container);
   margin: 0 auto calc(var(--space) * 4) auto;
+  padding-bottom: calc(var(--space) * 8);
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: var(--space);
+
+  > *:first-child {
+    grid-column: span 2;
+  }
 }
+
 footer {
   position: fixed;
   bottom: 0;
+  left: 0;
+  right: 0;
   text-align: center;
+  background: var(--paper);
+  border-top: var(--line);
+  padding: var(--space) 0;
+
+  .red-text {
+    color: #c92a2a;
+  }
+
+  .footer-link {
+    padding: 0;
+    border: none;
+    display: inline;
+    color: inherit;
+    text-decoration: underline;
+    font-weight: bold;
+    text-decoration-color: #c92a2a;
+    transition:
+      color 0.2s ease,
+      text-decoration-color 0.2s ease;
+
+    .red-text {
+      color: #c92a2a;
+      transition: color 0.2s ease;
+    }
+
+    &:hover {
+      color: #c92a2a;
+      text-decoration-color: currentColor;
+
+      .red-text {
+        color: var(--ink);
+      }
+    }
+  }
 }
+
 /* ====== 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;
-  }
+
+.card:not(#main-article) {
+  grid-row: span 4;
+  grid-template-rows: subgrid;
 }
+
 /* ====== 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.
@@ -80,10 +138,37 @@ article {
   text-align: left;
   display: grid;
   grid-template-columns: var(--space) 1fr var(--space);
+  row-gap: var(--space);
+
   > * {
     grid-column: 2/3;
+    margin: 0;
   }
+
   > img {
     grid-column: span 3;
   }
 }
+
+.article-link {
+  text-decoration: none;
+  color: white;
+  background-color: #d9383a;
+  border: 1px solid #d9383a;
+  border-radius: 4px;
+  text-align: center;
+  font-weight: bold;
+  text-transform: uppercase;
+  font-size: 0.85rem;
+  letter-spacing: 0.05em;
+  align-self: start;
+  transition:
+    background-color 0.2s ease,
+    border-color 0.2s ease;
+}
+
+.article-link:hover {
+  background-color: #a61e22;
+  border-color: #a61e22;
+  color: white;
+}