CodeYourFuture · codebyra · Jun 8, 2026 · Jun 8, 2026 · Jun 8, 2026 · Jun 8, 2026
diff --git a/Form-Controls/README.md b/Form-Controls/README.md
diff --git a/Form-Controls/index.html b/Form-Controls/index.html
diff --git a/GitHomeworkFixErrors b/GitHomeworkFixErrors
diff --git a/Wireframe/code-review-flow.png b/Wireframe/code-review-flow.png
diff --git a/Wireframe/index.html b/Wireframe/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
@@ -8,26 +8,48 @@
   </head>
   <body>
     <header>
-      <h1>Wireframe</h1>
-      <p>
-        This is the default, provided code and no changes have been made yet.
-      </p>
+      <h1>Understanding Developer Tools</h1>
+      <p>A simple guide to README files, wireframes, and Git branches.</p>
     </header>
+
     <main>
       <article>
-        <img src="placeholder.svg" alt="" />
-        <h2>Title</h2>
+        <img src="readme.png" alt="README file illustration" />
+        <h2>What is the purpose of a README file?</h2>
         <p>
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
-          voluptates. Quisquam, voluptates.
+          A README explains what a project does, how to install it, and how to
+          use it.
         </p>
-        <a href="">Read more</a>
+        <a href="https://www.makeareadme.com">Learn more</a>
+      </article>
+
+      <article>
+        <img src="wireframe.png" alt="Wireframe sketch" />
+        <h2>What is the purpose of a wireframe?</h2>
+        <p>
+          A wireframe shows the layout of a webpage before coding begins. It
+          helps developers plan structure and content.
+        </p>
+        <a href="https://www.figma.com/resource-library/what-is-a-wireframe"
+          >Learn more</a
+        >
+      </article>
+
+      <article>
+        <img src="code-review-flow.png" alt="Git branch diagram" />
+        <h2>What is a branch in Git?</h2>
+        <p>
+          A branch allows you to work on new features without affecting the main
+          codebase.
+        </p>
+        <a href="https://www.atlassian.com/git/tutorials/using-branches"
+          >Learn more</a
+        >
       </article>
     </main>
+
     <footer>
-      <p>
-        This is the default, provided code and no changes have been made yet.
-      </p>
+      <p>Contact | About | Privacy</p>
     </footer>
   </body>
 </html>
diff --git a/Wireframe/readme.png b/Wireframe/readme.png
diff --git a/Wireframe/style.css b/Wireframe/style.css
@@ -52,7 +52,11 @@ main {
 footer {
   position: fixed;
   bottom: 0;
+  width: 100%;
+  background: #333;
+  color: white;
   text-align: center;
+  padding: 10px;
 }
 /* ====== Articles Grid Layout ====
 Setting the rules for how articles are placed in the main element.
@@ -87,3 +91,8 @@ article {
     grid-column: span 3;
   }
 }
+header {
+  text-align: center;
+  margin: 2rem auto;
+  max-width: 800px;
+}
diff --git a/code-review-flow.png b/code-review-flow.png
diff --git a/index.html b/index.html
diff --git a/readme.md b/readme.md