CodeYourFuture · JohnnyBoyV · Jan 15, 2026 · Jan 15, 2026 · Jan 15, 2026 · Jan 15, 2026
diff --git a/Wireframe/image-git.webp b/Wireframe/image-git.webp
diff --git a/Wireframe/image-readme.png b/Wireframe/image-readme.png
diff --git a/Wireframe/wireframe.png → Wireframe/image-wireframe.png b/Wireframe/wireframe.png → Wireframe/image-wireframe.png
diff --git a/Wireframe/index.html b/Wireframe/index.html
@@ -8,25 +8,40 @@
   </head>
   <body>
     <header>
-      <h1>Wireframe</h1>
+      <h1>Onboarding Concepts</h1>
       <p>
-        This is the default, provided code and no changes have been made yet.
+        A brief overview of essential tools and practices for starting with web development and version control.
       </p>
     </header>
     <main>
       <article>
-        <img src="placeholder.svg" alt="" />
-        <h2>Title</h2>
+        <img src="image-readme.png" alt="An image of a README icon." />
+        <h2>The Purpose of a README File</h2>
         <p>
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
-          voluptates. Quisquam, voluptates.
+          A README file is an important document in any project. It is the first point of contact for users and contributors, providing an overview of the project's purpose, installation instructions, usage guidelines, and contribution details. It helps ensure the project is accessible and maintainable.
         </p>
-        <a href="">Read more</a>
+        <a href="https://www.makeareadme.com/">Read more</a>
+      </article>
+      <article>
+        <img src="image-wireframe.png" alt="An image of a website wireframe." />
+        <h2>The Purpose of a Wireframe</h2>
+        <p>
+          A wireframe is a basic blueprint for a website. It outlines the basic structure, layout, and functionality without focusing on colors, fonts, or detailed design. Wireframes help in planning user experience & identifying issues early.
+        </p>
+        <a href="https://www.productplan.com/glossary/wireframe/">Read more</a>
+      </article>
+      <article>
+        <img src="image-git.webp" alt="An image of an example of a branch in git." />
+        <h2>What is a Branch in Git?</h2>
+        <p>
+          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://git-scm.com/book/en/v2/Git-Branching-Branches-in-a-Nutshell">Read more</a>
       </article>
     </main>
     <footer>
       <p>
-        This is the default, provided code and no changes have been made yet.
+        2026 - Johnny Vargas - Code Your Future
       </p>
     </footer>
   </body>

diff --git a/Wireframe/placeholder.svg b/Wireframe/placeholder.svg
diff --git a/Wireframe/style.css b/Wireframe/style.css
@@ -30,6 +30,7 @@ body {
   background: var(--paper);
   color: var(--ink);
   font: var(--font);
+  text-align: center;
 }
 a {
   padding: var(--space);
@@ -53,6 +54,10 @@ footer {
   position: fixed;
   bottom: 0;
   text-align: center;
+  width: 100%;
+  border-style: solid;
+  border-color: black;
+  background-color: white;
 }
 /* ====== Articles Grid Layout ====
 Setting the rules for how articles are placed in the main element.
@@ -85,5 +90,8 @@ article {
   }
   > img {
     grid-column: span 3;
+    max-width: fit-content;
+    height: 200px;
+    margin: auto;
   }
 }