CodeYourFuture · shafiekwalker7861 · May 3, 2026 · May 3, 2026 · May 4, 2026 · May 4, 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/Wireframe/Form Control Lighthouse score.jpg b/Wireframe/Form Control Lighthouse score.jpg
diff --git a/Wireframe/images/img_1.png b/Wireframe/images/img_1.png
diff --git a/Wireframe/images/img_2.png b/Wireframe/images/img_2.png
diff --git a/Wireframe/images/img_3.png b/Wireframe/images/img_3.png
diff --git a/Wireframe/index.html b/Wireframe/index.html
@@ -3,30 +3,49 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Wireframe</title>
+    <title>Developer Fundamentals</title>
     <link rel="stylesheet" href="style.css" />
   </head>
   <body>
     <header>
-      <h1>Wireframe</h1>
+      <h1>Developer Fundamentals</h1>
       <p>
-        This is the default, provided code and no changes have been made yet.
+        Learn the essentials of building and managing projects in tech — from wireframes for planning designs, to Git branches for version control, and README files for clear project documentation.
       </p>
     </header>
     <main>
       <article>
-        <img src="placeholder.svg" alt="" />
-        <h2>Title</h2>
+        <img src="images/img_1.png" alt="" />
+        <h2>What is a Wireframe?</h2>
         <p>
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
-          voluptates. Quisquam, voluptates.
+          A wireframe is a simple visual guide used to plan the layout of a webpage or app. It focuses on structure rather than design, showing where elements like headers, navigation, content, and images will be placed. Wireframes help developers and designers understand how a page will work before adding colors, images, or styling.
         </p>
-        <a href="">Read more</a>
+        <a class="button" href="https://www.w3schools.com/css/css_website_layout.asp" target="_blank" rel="noreferrer">Read more</a>
+      </article>
+
+      <article>
+        <img src="images/img_2.png" alt="" />
+        <h2>What is a Readme.md file</h2>
+        <p>
+          A README.md file is the main documentation file in a project. It explains what the project is about, how it works, and how to use it. Written in Markdown, it helps developers and users quickly understand the purpose of the project and how to get started.
+        </p>
+
+        <a class="button" href="https://www.geeksforgeeks.org/git/what-is-readme-md-file/" target="_blank" rel="noreferrer">Read more</a>
+
+      </article>
+
+      <article>
+        <img src="images/img_3.png" alt="" />
+        <h2>What is a branch in GIT?</h2>
+        <p>
+          A branch in Git is a separate version of your code that allows you to work on new features or fixes without affecting the main project. It helps developers collaborate safely by keeping changes isolated until they are ready to be merged into the main branch.
+        </p>
+        <a class="button" href="https://www.w3schools.com/git/git_branch.asp" target="_blank" rel="noreferrer">Read more</a>
       </article>
     </main>
     <footer>
       <p>
-        This is the default, provided code and no changes have been made yet.
+        Shafiek Walker | ITP MAY 2026
       </p>
     </footer>
   </body>

diff --git a/Wireframe/style.css b/Wireframe/style.css
@@ -30,6 +30,7 @@ body {
   background: var(--paper);
   color: var(--ink);
   font: var(--font);
+
 }
 a {
   padding: var(--space);
@@ -45,14 +46,20 @@ svg {
 Setting the overall rules for page regions
 https://www.w3.org/WAI/tutorials/page-structure/regions/
 */
+
+header {
+  text-align: center;
+  max-width: var(--container);
+  margin: 0 auto calc(var(--space) * 4) auto;
+}
 main {
   max-width: var(--container);
   margin: 0 auto calc(var(--space) * 4) auto;
 }
 footer {
-  position: fixed;
-  bottom: 0;
-  text-align: center;
+  display: flex;
+  justify-content: center; /* Centers horizontally */
+  align-items: center;
 }
 /* ====== Articles Grid Layout ====
 Setting the rules for how articles are placed in the main element.
@@ -87,3 +94,21 @@ article {
     grid-column: span 3;
   }
 }
+
+button,
+.button {
+  display: inline-block;
+  background-color: rgb(247, 247, 247);
+  color: rgb(0, 0, 0);
+  padding: 10px 20px;
+
+  cursor: pointer;
+  text-decoration: none;
+  transition: 0.3s;
+}
+
+button:hover,
+.button:hover {
+  background-color: rgb(163, 163, 179);
+  transform: scale(1.05);
+}