CodeYourFuture · Rashaad-Ebrahim · May 27, 2025 · May 27, 2025 · May 28, 2025 · May 28, 2025
diff --git a/Wireframe/img/git.jpg b/Wireframe/img/git.jpg
diff --git a/Wireframe/img/readme.png b/Wireframe/img/readme.png
diff --git a/Wireframe/img/wireframe.jpg b/Wireframe/img/wireframe.jpg
diff --git a/Wireframe/index.html b/Wireframe/index.html
@@ -3,30 +3,119 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="Thhis is a page outling some essential developer tools.">
     <title>Wireframe</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap"
+      rel="stylesheet"
+    />
     <link rel="stylesheet" href="style.css" />
   </head>
   <body>
     <header>
-      <h1>Wireframe</h1>
-      <p>
-        This is the default, provided code and no changes have been made yet.
+      <h1>Development Essentials</h1>
+      <p class="header_description">
+        READMEs, Wireframes & Git Branches Explained
       </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>
+        <img
+          src="img/readme.png"
+          alt="Readme logo with open book icon"
+          width="200"
+          height="400"
+        />
+        <h2>What is the purpose of a README file?</h2>
+        <div class="article-text">
+          <p>
+            A README file is a key document that introduces and explains a
+            software project. It provides an overview of what the project does,
+            how to install and use it, and what technologies or dependencies it
+            requires.
+          </p>
+          <p>
+            It helps new users and developers quickly understand the purpose and
+            structure of the project, making it easier to get started or
+            contribute.
+          </p>
+        </div>
+        <div class="link-container">
+          <a
+            href="https://docs.github.com/en/repositories/managing-your-repositorys-settings-and-features/customizing-your-repository/about-readmes"
+            target="_blank"
+            aria-label="Read more about README files (opens in new tab)"
+            >Read more</a
+          >
+        </div>
+      </article>
+
+      <article>
+        <img
+          src="img/wireframe.jpg"
+          alt="Wireframe example showing a website layout sketch"
+          width="200"
+          height="200"
+          loading="lazy"
+        />
+        <h2>What is the purpose of a wireframe?</h2>
+        <div class="article-text">
+          <p>
+            A wireframe is a basic visual guide used to plan the layout and
+            structure of a web page or application.
+          </p>
+          <p>
+            The main purpose of a wireframe is to help developers and designers
+            organize content, define functionality, and ensure a clear user flow
+            before development begins.
+          </p>
+        </div>
+        <div class="link-container">
+          <a
+            href="https://balsamiq.com/learn/articles/what-are-wireframes/"
+            target="_blank"
+            aria-label="Read more about wireframes (opens in new tab)"
+            >Read more</a
+          >
+        </div>
+      </article>
+
+      <article>
+        <img
+          src="img/git.jpg"
+          alt="Git branch diagram showing version control workflow"
+          width="200"
+          height="200"
+          loading="lazy"
+        />
+        <h2>What is a branch in Git?</h2>
+        <div class="article-text">
+          <p>
+            A branch in Git is a separate version of the codebase that allows
+            developers to work on changes independently from the main project.
+          </p>
+          <p>
+            Branching makes it easier for teams to collaborate and manage
+            different parts of a project in parallel.
+          </p>
+        </div>
+        <div class="link-container">
+          <a
+            href="https://www.w3schools.com/git/git_branch.asp"
+            target="_blank"
+            aria-label="Read more about Git branches (opens in new tab)"
+            >Read more</a
+          >
+        </div>
       </article>
     </main>
+
     <footer>
-      <p>
-        This is the default, provided code and no changes have been made yet.
+      <p class="footer-text">
+        Rashaad Ebrahim &copy; <time datetime="2025">2025</time>
       </p>
     </footer>
   </body>

diff --git a/Wireframe/style.css b/Wireframe/style.css
@@ -17,42 +17,102 @@ As well as useful links to learn more */
  https://scrimba.com/learn-css-variables-c026
 ====== Design Palette ====== */
 :root {
-  --paper: oklch(7 0 0);
-  --ink: color-mix(in oklab, var(--color) 5%, black);
-  --font: 100%/1.5 system-ui;
-  --space: clamp(6px, 6px + 2vw, 15px);
-  --line: 1px solid;
+  --paper: #90a1b9;
+  --paper2: #78909c;
+  --paper3: #546e7a;
+  --brand: #118cfd;
+  --accent: #d7ccc8;
+  --accent2: #bcaaa4;
+  --ink: #333;
+  --font: 100%/1.5 "Roboto", sans-serif, system-ui;
+  --space: clamp(12px, 12px + 4vw, 45px);
   --container: 1280px;
 }
+
+/* CSS Reset */
+* {
+  box-sizing: border-box;
+}
+
 /* ====== Base Elements ======
  General rules for basic HTML elements in any context */
+
+*:focus {
+  outline: 2px solid var(--brand);
+  outline-offset: 2px;
+}
+
 body {
   background: var(--paper);
-  color: var(--ink);
+  /* color: var(--ink); */
+  color: #222;
   font: var(--font);
+  margin: 0;
 }
+
 a {
-  padding: var(--space);
-  border: var(--line);
+  font-size: 16px;
+  font-weight: 600;
+  padding: 12px 24px;
   max-width: fit-content;
+  border-radius: 6px;
+  text-decoration: none;
+  background-color: var(--accent);
+  color: var(--ink);
+}
+
+a:link,
+a:visited {
+  background-color: var(--accent);
+  transition: all 0.3s;
+}
+
+a:hover,
+a:active {
+  background-color: var(--accent2);
 }
-img,
-svg {
+
+img {
   width: 100%;
   object-fit: cover;
+  background-color: var(--paper3);
+  overflow: hidden;
+
+  border-radius: 16px 16px 0px 0px;
 }
+
 /* ====== 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;
 }
+
+header {
+  text-align: center;
+  padding: 24px 0;
+  margin: 0;
+  margin-bottom: var(--space);
+  background-color: var(--ink);
+  color: var(--accent);
+  box-shadow: 0 0 24px rgba(0, 0, 0, 0.5);
+}
+
 footer {
+  padding: 12px;
+  background-color: var(--ink);
   position: fixed;
   bottom: 0;
+  width: 100%;
+}
+
+.footer-text {
   text-align: center;
+  font-size: 16px;
+  color: #d7ccc8;
 }
 /* ====== Articles Grid Layout ====
 Setting the rules for how articles are placed in the main element.
@@ -75,7 +135,10 @@ 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 {
-  border: var(--line);
+  background: var(--paper2);
+  border-radius: 16px;
+  box-shadow: 0 0 24px rgba(0, 0, 0, 0.5);
+
   padding-bottom: var(--space);
   text-align: left;
   display: grid;
@@ -87,3 +150,18 @@ article {
     grid-column: span 3;
   }
 }
+
+h1 {
+  font-size: 60px;
+  font-weight: 900;
+}
+
+.header_description {
+  font-size: 18px;
+
+  /* color: #ccc; */
+}
+
+.link-container {
+  margin-top: 20px;
+}