London | 26-ITP-JAN | Kayanat Suleman | Sprint 1 | Wireframe

Wireframe/README.md

@@ -14,22 +14,22 @@ There are some provided HTML and CSS files you can use to get started. You can u
 
 <!--{{<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
+- [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
 <!--{{</objectives>}}>-->
 
 ## Acceptance Criteria
 
-- [ ] Semantic HTML tags are used to structure the webpage.
-- [ ] The page scores 100 for Accessibility in the Lighthouse audit.
-- [ ] The page header includes a title and description.
-- [ ] The articles section has three unique articles, each including an image, title, summary, and a link.
-- [ ] The page footer is fixed to the bottom of the viewport.
-- [ ] The webpage is styled using a linked .css file.
-- [ ] The webpage is properly committed and pushed to a branch on GitHub.
+- [x] Semantic HTML tags are used to structure the webpage.
+- [x] The page scores 100 for Accessibility in the Lighthouse audit.
+- [x] The page header includes a title and description.
+- [x] The articles section has three unique articles, each including an image, title, summary, and a link.
+- [x] The page footer is fixed to the bottom of the viewport.
+- [x] The webpage is styled using a linked .css file.
+- [x] The webpage is properly committed and pushed to a branch on GitHub.
 
 ## Resources
 

Wireframe/index.html

@@ -10,24 +10,65 @@
     <header>
       <h1>Wireframe</h1>
       <p>
-        This is the default, provided code and no changes have been made yet.
+        This page explains key concepts used in web development, including README
+        files, wireframes, and Git branches.
       </p>
     </header>
+
     <main>
+      <!-- First article spans full width -->
       <article>
         <img src="placeholder.svg" alt="" />
-        <h2>Title</h2>
+        <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 file explains what a project is, how to set it up, and how to
+          use it.
         </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"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          Learn more about READMEs
+        </a>
+      </article>
+
+      <!-- These two sit side by side -->
+      <article>
+        <img src="placeholder.svg" alt="" />
+        <h2>What is the purpose of a wireframe?</h2>
+        <p>
+          A wireframe is a simple visual guide that shows the layout and structure
+          of a webpage before it is built.
+        </p>
+        <a
+          href="https://balsamiq.com/blog/what-are-wireframes/"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          Learn more about wireframes
+        </a>
+      </article>
+
+      <article>
+        <img src="placeholder.svg" alt="" />
+        <h2>What is a branch in Git?</h2>
+        <p>
+          A Git branch allows developers to work on new features or fixes
+          independently without affecting the main codebase.
+        </p>
+        <a
+          href="https://git-scm.com/book/en/v2/Git-Branching-Branches-in-a-Nutshell"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          Learn more about Git branching
+        </a>
       </article>
     </main>
+
     <footer>
-      <p>
-        This is the default, provided code and no changes have been made yet.
-      </p>
+      <p>This was produced for CodeYourFuture</p>
     </footer>
   </body>
 </html>

Wireframe/style.css

@@ -51,7 +51,12 @@ main {
 }
 footer {
   position: fixed;
+  left: 0;
+  right: 0;
   bottom: 0;
+  padding: var(--space);
+  background: var(--paper);
+  border-top: var(--line);
   text-align: center;
 }
 /* ====== Articles Grid Layout ====