CodeYourFuture · chibu0070 · Oct 10, 2025 · Oct 10, 2025 · Oct 10, 2025 · Oct 10, 2025
diff --git a/Wireframe/branch-in-git.jpg b/Wireframe/branch-in-git.jpg
diff --git a/Wireframe/index.html b/Wireframe/index.html
@@ -1,33 +1,82 @@
 <!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" />
+    <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>
+      <h1>Wireframe Web Project </h1>
       <p>
-        This is the default, provided code and no changes have been made yet.
+        Learn about key tools every developer uses: README files, wireframes,
+        and Git branches.
       </p>
     </header>
     <main>
       <article>
-        <img src="placeholder.svg" alt="" />
-        <h2>Title</h2>
+        <div>
+        <img src="readme.jpg" alt="Screenshot of a README file example showing project documentation" class="full-size" >
+        <h2>What is the purpose of a README file?</h2>
+          <p>
+          A README file introduces a project, explaining what it does, how
+          to install it, and how to use it. It helps others understand your
+          project quickly.
+        </p>
+        <a
+          href="https://www.makeareadme.com/"
+          target="_blank"
+          rel="noopener noreferrer"
+          >Read more</a
+        ><br>
+      </div>
+      <br>
+     </article>
+
+     <article>
+        <img src="wireframed1.jpg" alt="Example of a website wireframe showing layout structure" class="uniform-spacing">
+         <div>
+        <h2>What is the purpose of a wireframe?</h2>
+        <p>
+          A wireframe is a visual guide that outlines a webpages structure.
+          Designers and developers use it to plan layouts before adding
+          content or styling.
+        </p>
+        <a
+          href="https://careerfoundry.com/en/blog/ux-design/what-is-a-wireframe/"
+          target="_blank"
+          rel="noopener noreferrer"
+          >Read more</a
+        >
+      </div>
+      <br>
+     </article>
+
+     <article>
+        <img src="branch-in-git.jpg" alt="Diagram showing Git branches and their relationships" class="uniform-spacing">
+        <div>
+        <h2>What is a branch in Git?
+
+        </h2>
         <p>
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
-          voluptates. Quisquam, voluptates.
+          A Git branch allows developers to work on new features or fixes
+          separately from the main code. This keeps the main project stable
+          while updates are tested.
         </p>
-        <a href="">Read more</a>
-      </article>
+        <a
+          href="https://www.atlassian.com/git/tutorials/using-branches"
+          target="_blank"
+          rel="noopener noreferrer"
+          > Read more </a>
+      </div>
+      <br>
+     </article>
+
     </main>
+
     <footer>
-      <p>
-        This is the default, provided code and no changes have been made yet.
-      </p>
+      <p>&copy; 2025 CodeYourFuture Chibuikem Okwu</p>
     </footer>
   </body>
 </html>
diff --git a/Wireframe/readme.jpg b/Wireframe/readme.jpg
diff --git a/Wireframe/style.css b/Wireframe/style.css
@@ -45,14 +45,23 @@ svg {
 Setting the overall rules for page regions
 https://www.w3.org/WAI/tutorials/page-structure/regions/
 */
+header{
+  text-align: center ;
+}
 main {
   max-width: var(--container);
   margin: 0 auto calc(var(--space) * 4) auto;
+  padding-bottom: 3em;
 }
 footer {
+  background-color: #333;
+  color: white;
+  text-align: center;
+  padding: 1em;
   position: fixed;
   bottom: 0;
-  text-align: center;
+  width: 100%;
+
 }
 /* ====== Articles Grid Layout ====
 Setting the rules for how articles are placed in the main element.
@@ -74,16 +83,49 @@ 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 {
+article  {
   border: var(--line);
   padding-bottom: var(--space);
-  text-align: left;
+   text-align: center;
   display: grid;
   grid-template-columns: var(--space) 1fr var(--space);
   > * {
     grid-column: 2/3;
   }
   > img {
-    grid-column: span 3;
+    grid-column: 2/3;
+  } 
+  padding-top: 1em;
+}
+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: 2/3;
   }
 }
+article  > div {
+  display: grid;
+  grid-template-columns: 1fr ;
+  align-items: center;
+  gap: var(--space);
+  margin-top: var(--space);
+}
+.uniform-size {
+  width: 300px;
+  height: 150px;
+  object-fit: cover;
+}
+.parent {
+  text-align: ;  /* aligns contents to the right */
+}
+.parent .child {
+  display: inline-block;  /* allows the child to be sized and aligned */
+  text-align: bottom;  /* aligns text inside the child to the left */
+}
diff --git a/Wireframe/wireframed1.jpg b/Wireframe/wireframed1.jpg