CodeYourFuture · yonasdesbelegebre · Jun 3, 2026 · Jun 3, 2026 · Jun 3, 2026 · Jun 3, 2026
diff --git a/Wireframe/README.md b/Wireframe/README.md
@@ -13,7 +13,7 @@
 <!--{{</objectives>}}>-->
 
 ## Task
-![Wireframe](./wireframe.png)
+![Wireframe](./images/wireframe.png)
 
 Using the provided wireframe and resources, write a new webpage explaining:
 

diff --git a/Wireframe/images/image_branch.png b/Wireframe/images/image_branch.png
diff --git a/Wireframe/images/image_git.png b/Wireframe/images/image_git.png
diff --git a/Wireframe/images/image_readme.png b/Wireframe/images/image_readme.png
diff --git a/Wireframe/images/image_wireframe.png b/Wireframe/images/image_wireframe.png
diff --git a/Wireframe/wireframe.png → Wireframe/images/wireframe.png b/Wireframe/wireframe.png → Wireframe/images/wireframe.png
diff --git a/Wireframe/index.html b/Wireframe/index.html
@@ -3,30 +3,81 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="This article provides an introduction to the basics of web development, covering key concepts such as Git, README files, and wireframes. It explains the importance of these tools in the development process and how they contribute to effective project management and communication." />
     <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>
+      <h1>Basic of Web Development </h1>
+        <P>
+        Web development is the process of creating and maintaining websites and web applications.<br>
+        Good web developers, they have a strong understanding of Git, README files and wireframes(Design) before the actual development process.<br> 
+        This articles introduce the purpose of  README files,wireframes and how to create branches in Git.
+      </P>
+
     </header>
     <main>
       <article>
-        <img src="placeholder.svg" alt="" />
-        <h2>Title</h2>
+
+        <img src="images/image_readme.png" alt="README file illustration" />
+        <h2>Purpose of README file</h2>
+         <p>
+        README files to communicate important information about a project for users and developers.
+        A README is often the first item a visitor will see when visiting your repository. 
+        From the readme, users can easily understand what your project is about, how to use it.  
+      </p>
+        <p>
+          README files typically include information on:</p>
+          <ul>
+            <li>What the project does a Project description</li>
+            <li>How users can get started with the project Installation instructions</li>
+            <li>Usage guidelines</li>
+            <li>Contributing guidelines</li>
+            <li>License information</li>
+          </ul>
+
+        <a href="pages/purpose_readme.html">Read more</a>
+      </article>
+      <article>
+        <img src="images/image_wireframe.png" alt="Wireframe Example" />
+        <h2>Purpose of a wireframe</h2>
+        <p>
+          Wireframe graphic representation of a website, mobile app, or other digital interface that highlights the overall structure and layout of the design without going into specifics like colors, fonts, or images. A wireframe is a product outline that shows what interface elements will be present on important pages.
+
+          Wireframes are used to:
+          </p>
+          <ul>
+
+            <li>Structural Planning</li>
+            <li>User Flow</li>
+            <li>Communication</li>
+
+          </ul>
+        <a href="pages/purpose_wireframe.html">Read more</a>
+      </article>
+    <article>
+        <img src="images/image_git.png" alt="branch in git" id="branch-image"/>
+        <h2>Branch in Git</h2>
         <p>
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
-          voluptates. Quisquam, voluptates.
+          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="">Read more</a>
+          <p>
+          Common Reasons to Create a Branch:
+          </p>
+          <ul>
+            <li>Developing a new feature</li>
+            <li>Fixing a bug</li>
+            <li>Experimenting with ideas</li>
+          </ul>
+
+        <a href="pages/branch_git.html">Read more</a>
       </article>
     </main>
     <footer>
       <p>
-        This is the default, provided code and no changes have been made yet.
+        Contact: <a href="mailto:[email protected]">[email protected]</a>
+        copyright &copy; 2026 Yonas Gebre. All rights reserved.
       </p>
     </footer>
   </body>

diff --git a/Wireframe/pages/branch_git.html b/Wireframe/pages/branch_git.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="This article explains the concept of branches in Git, their purpose, and how to use them effectively in your development workflow." />
+
+</head>
+<body>
+    <header>
+  <h1>Branch in Git</h1>
+</header>
+</body>
+</html>
diff --git a/Wireframe/pages/purpose_readme.html b/Wireframe/pages/purpose_readme.html
@@ -0,0 +1,15 @@
+<!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="This article explains the purpose of README files in software development projects, highlighting their importance for communication, documentation, and project management. It covers the key components typically included in a README file and how they benefit both users and developers." />
+    <title>Purpose of README file</title>
+    <link rel="stylesheet" href="style.css" />
+  </head>
+  <body>
+<header>
+  <h1>Purpose of README file</h1>
+</header>
+</body>
+</html>
diff --git a/Wireframe/pages/purpose_wireframe.html b/Wireframe/pages/purpose_wireframe.html
@@ -0,0 +1,15 @@
+<!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="This article explains the purpose of wireframes in the design and development process, highlighting their role in visualizing layout, structure, and user flow for websites and applications. It covers the benefits of using wireframes for communication, planning, and iteration in project development." />
+  <title>Purpose of a wireframe</title>
+</head>
+<body>
+  <header>
+    <h1>Purpose of a wireframe</h1>
+  </header>
+  <p>A wireframe is a visual guide that represents the skeletal framework of a website or application. It outlines the layout, structure, and content placement without focusing on the final design elements like colors, images, or typography.</p>
+</body>
+</html>
diff --git a/Wireframe/style.css b/Wireframe/style.css
@@ -21,38 +21,53 @@ As well as useful links to learn more */
   --ink: color-mix(in oklab, var(--color) 5%, black);
   --font: 100%/1.5 system-ui;
   --space: clamp(6px, 6px + 2vw, 15px);
-  --line: 1px solid;
+  --line: 2px solid;
   --container: 1280px;
+  --yellow: oklch(0.8 0.2 90);
+  --footer-color:#4D4D4D;
+  --white:#FFF;
 }
 /* ====== 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;
+  font:var(--yellow);
+  font-weight: bold;
 }
 img,
 svg {
   width: 100%;
-  object-fit: cover;
+  height: 475px;  object-fit: cover;
 }
+
 /* ====== 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;
+header{
+  text-align: center;
 }
+/* sytle for the foooter, which should be at the bottom of the page, and have a different background colour to the main content.
+*/
 footer {
-  position: fixed;
-  bottom: 0;
-  text-align: center;
+    height: 60px;
+    background-color: var(--footer-color);
+    color: var(--white);
+    display: flex;
+    justify-content: center;
+    bottom: 0;
+}
+footer a {
+  color: var(--white);
+  text-decoration: none;
 }
 /* ====== Articles Grid Layout ====
 Setting the rules for how articles are placed in the main element.