CodeYourFuture · Alex-Jamshidi · May 10, 2026 · May 10, 2026 · May 10, 2026 · May 10, 2026
diff --git a/Wireframe/README.md b/Wireframe/README.md
@@ -4,12 +4,12 @@
 
 <!--{{<objectives>}}>-->
 
-- [ ] Use semantic HTML tags to structure the webpage
-- [ ] Create three articles, each including an image, title, summary, and a link
-- [ ] Check a webpage against a wireframe layout
-- [ ] Test web code using [Lighthouse](https://programming.codeyourfuture.io/guides/testing/lighthouse)
-- [ ] Use version control by committing often and pushing regularly to GitHub
-- [ ] Develop the habit of writing clean, well-structured, and error-free code
+- [x] Use semantic HTML tags to structure the webpage
+- [x] Create three articles, each including an image, title, summary, and a link
+- [x] Check a webpage against a wireframe layout
+- [x] Test web code using [Lighthouse](https://programming.codeyourfuture.io/guides/testing/lighthouse)
+- [x] Use version control by committing often and pushing regularly to GitHub
+- [x] Develop the habit of writing clean, well-structured, and error-free code
 <!--{{</objectives>}}>-->
 
 ## Task
@@ -27,13 +27,13 @@ There are some provided HTML and CSS files you can use to get started. You can u
 
 ## Acceptance Criteria
 
-- [ ] Semantic HTML tags are used to structure the webpage.
-- [ ] The page scores 100 for Accessibility in the Lighthouse audit.
-- [ ] The webpage is styled using a linked .css file.
-- [ ] The webpage is properly committed and pushed to a branch on GitHub.
-- [ ] The articles section contains three distinct articles, each with its own unique image, title, summary, and link.
-- [ ] The page footer is fixed to the bottom of the viewport.
-- [ ] The page layout closely match the wireframe.
+- [x] Semantic HTML tags are used to structure the webpage.
+- [x] The page scores 100 for Accessibility in the Lighthouse audit.
+- [x] The webpage is styled using a linked .css file.
+- [x] The webpage is properly committed and pushed to a branch on GitHub.
+- [x] The articles section contains three distinct articles, each with its own unique image, title, summary, and link.
+- [x] The page footer is fixed to the bottom of the viewport.
+- [x] The page layout closely match the wireframe.
 
 ### Developers must adhere to professional standards.
 
@@ -42,10 +42,10 @@ There are some provided HTML and CSS files you can use to get started. You can u
 These practices reflect the level of quality expected in professional work.
 They ensure your code is reliable, maintainable, and presents a polished, credible experience to users.
 
-- [ ] My HTML code has no errors or warnings when validated using https://validator.w3.org/
-- [ ] My code is consistently formatted
-- [ ] My page content is free of typos and grammatical mistakes
-- [ ] I commit often and push regularly to GitHub
+- [x] My HTML code has no errors or warnings when validated using https://validator.w3.org/
+- [x] My code is consistently formatted
+- [x] My page content is free of typos and grammatical mistakes
+- [x] I commit often and push regularly to GitHub
 
 ## Resources
 

diff --git a/Wireframe/img1.jpg b/Wireframe/img1.jpg
diff --git a/Wireframe/img2.jpg b/Wireframe/img2.jpg
diff --git a/Wireframe/img3.jpg b/Wireframe/img3.jpg
diff --git a/Wireframe/index.html b/Wireframe/index.html
@@ -8,25 +8,42 @@
   </head>
   <body>
     <header>
-      <h1>Wireframe</h1>
+      <h1>TECH NEWS</h1>
       <p>
-        This is the default, provided code and no changes have been made yet.
+        Articles from the web
       </p>
     </header>
+    <br>
     <main>
       <article>
-        <img src="placeholder.svg" alt="" />
-        <h2>Title</h2>
+        <img src="img1.jpg" alt="" />
+        <h2>What is the purpose of a README file?</h2>
         <p>
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
-          voluptates. Quisquam, voluptates.
+          We'll explore how a README acts as the primary introduction and guide to a project.
         </p>
-        <a href="">Read more</a>
+        <a href="https://docs.github.com/en/repositories/managing-your-repositorys-settings-and-features/customizing-your-repository/about-readmes">Read more</a>
       </article>
+      <article>
+        <img src="img2.jpg" alt="" />
+        <h2>What is the purpose of a Wireframe?</h2>
+        <p>
+          Learn how a wireframe acts as a blueprint to help map out the struture and functionality of a project.
+        </p>
+        <a href="https://en.wikipedia.org/wiki/Website_wireframe">Read more</a>
+      </article>
+      <article>
+        <img src="img3.jpg" alt="" />
+        <h2>What is a branch in Git?</h2>
+        <p>
+          You'll learn how a git branch is a parallel workspace that allows for changes and commits without affecting the main branch.
+        </p>
+        <a href="https://www.w3schools.com/git/git_branch.asp">Read more</a>
+      </article>
+      <p></p>
     </main>
     <footer>
       <p>
-        This is the default, provided code and no changes have been made yet.
+        This webpage was created by Alex Jamshidi
       </p>
     </footer>
   </body>

diff --git a/Wireframe/style.css b/Wireframe/style.css
@@ -20,9 +20,9 @@ As well as useful links to learn more */
   --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);
+  --space: clamp(6px, 6px + 2vw, 8px);
   --line: 1px solid;
-  --container: 1280px;
+  --container: min(75%, 1280px);
 }
 /* ====== Base Elements ======
  General rules for basic HTML elements in any context */
@@ -35,9 +35,14 @@ a {
   padding: var(--space);
   border: var(--line);
   max-width: fit-content;
+  text-decoration: none;
+}
+h2 {
+  margin-bottom: 0;
 }
 img,
 svg {
+  height: 300px;
   width: 100%;
   object-fit: cover;
 }
@@ -49,10 +54,17 @@ main {
   max-width: var(--container);
   margin: 0 auto calc(var(--space) * 4) auto;
 }
+header {
+  text-align: center;
+}
 footer {
   position: fixed;
   bottom: 0;
-  text-align: center;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  background-color: white;
+  border: var(--line);
 }
 /* ====== Articles Grid Layout ====
 Setting the rules for how articles are placed in the main element.
@@ -77,6 +89,7 @@ Keeping things orderly and separate is the key to good, simple CSS.
 article {
   border: var(--line);
   padding-bottom: var(--space);
+  margin: var(--space);
   text-align: left;
   display: grid;
   grid-template-columns: var(--space) 1fr var(--space);