CodeYourFuture · russom-g · May 21, 2026 · May 21, 2026 · May 21, 2026 · May 23, 2026
diff --git a/Wireframe/README.md b/Wireframe/README.md
@@ -23,7 +23,9 @@ Using the provided wireframe and resources, write a new webpage explaining:
 
 The page layout should closely match the wireframe. Exact replication is the goal, but small differences may be accepted.
 
-There are some provided HTML and CSS files you can use to get started. You can use these files as a starting point or create your own files from scratch. You _must_ modify the HTML and CSS files to meet the acceptance criteria and you must check this criteria yourself before you submit your work.
+There are some provided HTML and CSS files you can use to get started. You can use these files as a starting point or create 
+your own files from scratch. You _must_ modify the HTML and CSS files to meet the acceptance criteria and you must check this 
+criteria yourself before you submit your work.
 
 ## Acceptance Criteria
 

diff --git a/Wireframe/images/README.png b/Wireframe/images/README.png
diff --git a/Wireframe/images/branchGit.png b/Wireframe/images/branchGit.png
diff --git a/Wireframe/images/wireframe.jpg b/Wireframe/images/wireframe.jpg
diff --git a/Wireframe/index.html b/Wireframe/index.html
@@ -1,33 +1,90 @@
-<!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>
     <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>Wireframe to Web Code</h1>
+      <h2>
+        Learn the fundamentals of wireframes, README files, and Git branches in
+        modern web development.
+      </h2>
     </header>
     <main>
       <article>
-        <img src="placeholder.svg" alt="" />
-        <h2>Title</h2>
+        <img
+          src="images/README.png"
+          alt="GitHub README page for the Wireframe project showing learning objectives and project requirements"
+        />
+        <h3>The purpose of a README file</h3>
         <p>
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
-          voluptates. Quisquam, voluptates.
+          A README file, usually written as README.md, is a document that
+          provides information about a project. It is commonly found in the root
+          folder of repositories, especially on platforms like GitHub. A README
+          includes instructions for installing and using the project, along with
+          details about its purpose, features, and contribution guidelines.
+          Since it is often the first thing users see, it should be clear and
+          informative. A good README helps users understand the project and use
+          or contribute to it easily.
         </p>
-        <a href="">Read more</a>
+        <a
+          href="https://docs.github.com/en/repositories/managing-your-repositorys-settings-and-features/customizing-your-repository/about-readmes"
+          target="_blank"
+          >Read more about README files
+        </a>
+      </article>
+      <article>
+        <img
+          src="images/wireframe.jpg"
+          alt="Wireframes website mockup showing a browser window layout with a large hero section, image placeholder, navigation elements, and the text 'Wire Frames'"
+        />
+        <h3>The purpose of a wireframe</h3>
+        <p>
+          A wireframe is a simple diagram that shows the basic structure and
+          layout of a website or application’s user interface (UI). It displays
+          the placement of components and gives an idea of how they will
+          function. Wireframes are used in the early stages of design to plan
+          layouts, navigation, and user interaction before development starts.
+          They help designers and developers understand the interface structure,
+          improve communication, save time, and ensure the final design meets
+          user requirements effectively and clearly.
+        </p>
+        <a
+          href="https://www.experienceux.co.uk/faqs/what-is-wireframing/"
+          target="_blank"
+          >Read more about wireframing
+        </a>
+      </article>
+      <article>
+        <img
+          src="images/branchGit.png"
+          alt="Git Branching graphic featuring the Git logo and the text 'Git Branching' on a dark background"
+        />
+        <h3>The Purpose of Branch in Git</h3>
+        <p>
+          A branch is a sequence of commits that allows developers to work on
+          different versions of a project at the same time. It creates a
+          separate line of development from the main codebase, making it easier
+          to add features, fix bugs, or test changes safely. After the work is
+          completed, the changes can be merged back into the main branch.
+          Branches are important in version control systems because they support
+          teamwork, improve project management, and reduce errors during
+          software development and updates efficiently.
+        </p>
+        <a
+          href="https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/proposing-changes-to-your-work-with-pull-requests/about-branches"
+          target="_blank"
+          >Read more about branches in Git
+        </a>
       </article>
     </main>
     <footer>
-      <p>
-        This is the default, provided code and no changes have been made yet.
-      </p>
+      <p>Russom Gebremeskel | Wireframe | ITP May 2026</p>
     </footer>
   </body>
 </html>
diff --git a/Wireframe/placeholder.svg b/Wireframe/placeholder.svg
diff --git a/practical_guide.md → Wireframe/practical_guide.md b/practical_guide.md → Wireframe/practical_guide.md
@@ -11,6 +11,7 @@
 - More details: https://code.visualstudio.com/docs/editing/codebasics#_formatting
 
 ---
+
 ### 2. Enabling automatic formatting
 
 - Open your VS Code settings (user or workspace settings).
@@ -27,6 +28,7 @@ This ensures your code stays clean without needing manual formatting each time.
 Creating small, focused commits improves both your workflow and team collaboration.
 
 Why this matters:
+
 - **Clarity**: Each commit tells a clear story (one feature, one fix, one change).
 - **Debugging**: Easy to find and undo the commit that caused a bug.
 - **Collaboration**: Teammates can review and understand changes faster.
@@ -42,15 +44,17 @@ Why this matters:
 #### Approach 2: Using Git commands
 
 1. Stage a changed file (`git add`)
-  
+
 e.g.: To stage a modified file named `index.html`
+
 ```
 git add index.html
 ```
 
 2. Commit the staged changes: (`git commit`)
 
 e.g.: To commit the staged changes with a short commit message
+
 ```
 git commit -m "Fix syntax error"
 ```

diff --git a/Wireframe/style.css b/Wireframe/style.css
@@ -26,33 +26,49 @@ As well as useful links to learn more */
 }
 /* ====== Base Elements ======
  General rules for basic HTML elements in any context */
+
+h1 {
+  text-align: center;
+  padding: var(--space);
+}
+h2 {
+  text-align: center;
+  font-size: 1.25em;
+}
+h3 {
+  font-size: 1.25em;
+  margin-top: 0;
+  margin-bottom: 0px;
+}
+p {
+  margin-top: 0;
+  margin-bottom: 0;
+}
 body {
   background: var(--paper);
   color: var(--ink);
   font: var(--font);
+  padding-bottom: 5px; /* Make space for the fixed footer according to the wireframe requirements */
 }
 a {
   padding: var(--space);
   border: var(--line);
   max-width: fit-content;
 }
-img,
-svg {
-  width: 100%;
-  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;
-}
 footer {
   position: fixed;
   bottom: 0;
+  left: 0;
+  padding: 10px;
+  border-top: 1px solid black;
   text-align: center;
+  width: 100%; /* Make the footer span the entire width of the viewport */
+  background: var(--paper); /* Optional: Add a background color to the footer */
 }
 /* ====== Articles Grid Layout ====
 Setting the rules for how articles are placed in the main element.
@@ -62,6 +78,8 @@ https://developer.chrome.com/docs/devtools/css/grid
 https://gridbyexample.com/learn/
 */
 main {
+  max-width: var(--container);
+  margin: 0 auto calc(var(--space) * 4) auto;
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: var(--space);
@@ -82,8 +100,16 @@ article {
   grid-template-columns: var(--space) 1fr var(--space);
   > * {
     grid-column: 2/3;
+    grid-template-rows: auto auto 1fr auto;
+    overflow: hidden;
+    padding-bottom: 15px;
   }
+  /* The below added lines fixed the image layout which was uneven*/
   > img {
     grid-column: span 3;
+    width: 100%;
+    height: 250px;
+    object-fit: cover;
+    display: block;
   }
 }
diff --git a/Wireframe/wireframe.png b/Wireframe/wireframe.png