CodeYourFuture · B3-Bisrat · May 16, 2026 · May 18, 2026 · May 18, 2026 · May 18, 2026
diff --git a/Wireframe/index.html b/Wireframe/index.html
@@ -1,33 +1,71 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Wireframe</title>
+    <title>Developer Learning Basics</title>
     <link rel="stylesheet" href="style.css" />
   </head>
   <body>
     <header>
-      <h1>Wireframe</h1>
+      <h1>Developer Learning Basics</h1>
       <p>
-        This is the default, provided code and no changes have been made yet.
+        Learn the basics of README files, wireframes, and Git branches used in
+        software development.
       </p>
     </header>
     <main>
       <article>
-        <img src="placeholder.svg" alt="" />
-        <h2>Title</h2>
+        <img
+          src="data:image/jpeg;base64,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"
+          alt="README file illustration"
+        />
+        <h2>README Files</h2>
         <p>
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
-          voluptates. Quisquam, voluptates.
+          A README file explains what a project does and helps developers
+          understand how to use it. A README.md is an important document in a
+          repository that introduces the project and explains its purpose,
+          setup, and usage to help users and developers understand and
+          contribute to it.
         </p>
-        <a href="">Read more</a>
+        <a href="https://markdown.land/readme-md">Read more</a>
+      </article>
+      <article>
+        <img
+          src="https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210328203203/Final-Wireframe-in-Software-Design.jpg"
+          alt="Wireframe illustration"
+        />
+        <h2>Wireframes</h2>
+        <p>
+          Wireframes are simple drawings that show how a website or app will
+          look and work.A wireframe is the skeleton of your digital project.
+          Think of it as the foundation for your website, app, or dashboard. It
+          focuses on layout, and content placement—not on colors, fonts, or any
+          visual polish.
+        </p>
+        <a href="https://www.figma.com/resource-library/what-is-wireframing/"
+          >Read more</a
+        >
+      </article>
+      <article>
+        <img
+          src="https://nvie.com/img/centr-decentr@2x.png"
+          alt="Git branches illustration"
+        />
+        <h2>Git Branches</h2>
+        <p>
+          Git branches allow developers to work on different versions of a
+          project simultaneously. In Git, a branch is like a separate workspace
+          where you can make changes and try new ideas without affecting the
+          main project. Think of it as a "parallel universe" for your code.
+        </p>
+        <a href="https://www.w3schools.com/GIT/git_branch.asp?remote=github"
+          >Read more</a
+        >
       </article>
     </main>
     <footer>
-      <p>
-        This is the default, provided code and no changes have been made yet.
-      </p>
+      <p>Completed by Bisrat Tesfay for CYF ITP May 2026 cohort.</p>
     </footer>
   </body>
 </html>
diff --git a/Wireframe/style.css b/Wireframe/style.css
@@ -27,14 +27,35 @@ As well as useful links to learn more */
 /* ====== Base Elements ======
  General rules for basic HTML elements in any context */
 body {
-  background: var(--paper);
+  background: skyblue;
   color: var(--ink);
   font: var(--font);
+  margin: 0;
+}
+header {
+  text-align: center;
+  padding: calc(var(--space) * 2);
 }
 a {
   padding: var(--space);
   border: var(--line);
   max-width: fit-content;
+  text-decoration: none;
+  display: inline-block;
+  margin-top: var(--space);
+  border-radius: 6px;
+  color: black;
+  background-color: white;
+}
+
+article img {
+  height: 500px;
+  object-fit: contain;
+}
+
+a:hover {
+  background-color: skyblue;
+  color: black;
 }
 img,
 svg {
@@ -48,11 +69,15 @@ https://www.w3.org/WAI/tutorials/page-structure/regions/
 main {
   max-width: var(--container);
   margin: 0 auto calc(var(--space) * 4) auto;
+  padding-bottom: 80px;
 }
 footer {
   position: fixed;
   bottom: 0;
+  width: 100%;
   text-align: center;
+  background: var(--paper);
+  padding: var(--space);
 }
 /* ====== Articles Grid Layout ====
 Setting the rules for how articles are placed in the main element.