CodeYourFuture · risikatpopoola · May 30, 2026 · May 30, 2026 · May 30, 2026 · May 30, 2026
diff --git a/Wireframe/image1.png b/Wireframe/image1.png
diff --git a/Wireframe/image2.png b/Wireframe/image2.png
diff --git a/Wireframe/image3.png b/Wireframe/image3.png
diff --git a/Wireframe/index.html b/Wireframe/index.html
@@ -1,33 +1,88 @@
 <!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>
+
+<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>SOFTWARE DEVELOPMENT LIFECYCLE TOOLS(SDLC)</h1>
+    <p id="basic">
+      SDLC tools are software applications that help development teams plan, design, build, test, and deploy software
+      systematically. SDLC tools are software applications that help development teams plan, design, build, test, and
+      deploy software systematically.
+    </p>
+  </header>
+  <main>
+    <article>
+      <div>
+        <img src="image1.png" alt="an image of a readme.md" />
+      </div>
+      <h2>README FILE</h2>
       <p>
-        This is the default, provided code and no changes have been made yet.
+        Just like the name implies, you should read a README file as it is the foundational documentation for a
+        software, dataset, or coding project. It serves as a project's "front door," designed to help users quickly
+        understand what the project does, how to install and use it, and how to contribute. It also contains
+        clear examples or tutorials demonstrating the project's features in action.
       </p>
-    </header>
-    <main>
-      <article>
-        <img src="placeholder.svg" alt="" />
-        <h2>Title</h2>
-        <p>
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
-          voluptates. Quisquam, voluptates.
-        </p>
-        <a href="">Read more</a>
-      </article>
-    </main>
-    <footer>
+      <a
+        href="https://docs.github.com/en/repositories/managing-your-repositorys-settings-and-features/customizing-your-repository/about-readmes">Read
+        more</a>
+    </article>
+    <article>
+      <div>
+        <img src="image3.png" alt="an image of a wireframe template" />
+      </div>
+      <h2>WIREFRAMES</h2>
+      <p>Wireframes are basic blueprints that help teams align on requirements, keeping UX design conversations focused
+        and constructive.
+        Think of your wireframe as the skeleton of your app, website, or other final product. Starting with a clean,
+        spare wireframe design also gives UI/UX designers room to iterate. They can collect early feedback from user
+        testing on core UX/UI elements, without distracting users with visual design details.
+        Your wireframe shows the design team and stakeholders the bare-bones outlines of essential webpages, components,
+        and features, including:
+      </p>
+      <ul>
+        <li>Screen layouts</li>
+        <li>Navigation bars</li>
+        <li>Components of UX and UI design</li>
+        <li>Interactive elements</li>
+      </ul>
+      <a href="https://www.figma.com/resource-library/what-is-wireframing/">Read more</a>
+    </article>
+    <article>
+      <div>
+        <img src="image2.png" alt="an image of a git branch and its operations" />
+      </div>
+      <h2>GIT BRANCH</h2>
       <p>
-        This is the default, provided code and no changes have been made yet.
+        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.
+        Branches let you work on different parts of a project, like new features or bug fixes, without interfering with
+        the main branch. Branches allow you to work on different parts of a project without impacting the main branch.
+        When the work is complete, a branch can be merged with the main project. You can even switch between branches
+        and work on different projects without them interfering with each other. Branching in Git is very lightweight
+        and fast! Common reasons to create a branch includes:
       </p>
-    </footer>
-  </body>
-</html>
+      <ul>
+        <li>Developing a new feature</li>
+        <li>Fixing a bug</li>
+        <li>Experimenting with ideas</li>
+      </ul>
+      <a
+        href="https://i0.wp.com/digitalvarys.com/wp-content/uploads/2019/06/GIT-Branchand-its-Operations.png?fit=1921%2C1057&ssl=1">Read
+        more</a>
+    </article>
+  </main>
+  <footer>
+    <p>
+      ALL RIGHTS RESERVED. RIZQAH POPOOLA 2026
+    </p>
+  </footer>
+</body>
+
+</html>
diff --git a/Wireframe/style.css b/Wireframe/style.css
@@ -24,51 +24,73 @@ As well as useful links to learn more */
   --line: 1px solid;
   --container: 1280px;
 }
+
 /* ====== Base Elements ======
  General rules for basic HTML elements in any context */
+h1 {
+  text-align: center;
+  color: palevioletred;
+}
+
+h2 {
+  color: palevioletred;
+}
+
 body {
   background: var(--paper);
   color: var(--ink);
   font: var(--font);
 }
+
 a {
   padding: var(--space);
   border: var(--line);
   max-width: fit-content;
 }
+
 img,
 svg {
   width: 100%;
   object-fit: cover;
 }
+
+#basic {
+  text-align: center;
+}
+
 /* ====== 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;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: var(--space);
+
+  >*:first-child {
+    grid-column: span 2;
+  }
 }
+
 footer {
   position: fixed;
+  left: 0;
   bottom: 0;
+  width: 100%;
+  background-color: rgb(231, 163, 200);
+  color: black;
   text-align: center;
 }
+
 /* ====== Articles Grid Layout ====
 Setting the rules for how articles are placed in the main element.
 Inspect this in Devtools and click the "grid" button in the Elements view
 Play with the options that come up.
 https://developer.chrome.com/docs/devtools/css/grid
 https://gridbyexample.com/learn/
 */
-main {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: var(--space);
-  > *:first-child {
-    grid-column: span 2;
-  }
-}
 /* ====== Article Layout ====== 
 Setting the rules for how elements are placed in the article. 
 Now laying out just the INSIDE of the repeated card/article design.
@@ -80,10 +102,12 @@ article {
   text-align: left;
   display: grid;
   grid-template-columns: var(--space) 1fr var(--space);
-  > * {
+
+  >* {
     grid-column: 2/3;
   }
-  > img {
+
+  >img {
     grid-column: span 3;
   }
-}
+}