London | 26-ITP-May | Shahriar Ahmed | Sprint 2 | Wireframe

Wireframe/README.md

@@ -4,12 +4,12 @@
 
 <!--{{<objectives>}}>-->
 
-- [ ] Use semantic HTML tags to structure the webpage
+- [x] 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] 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.
+- [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.
 - [ ] 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] 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
 

Wireframe/index.html

@@ -10,23 +10,39 @@
     <header>
       <h1>Wireframe</h1>
       <p>
-        This is the default, provided code and no changes have been made yet.
+        What is a readme file for or what is the purpose of a wireframe and what is a git branch?<br>
+        Read below to find out!
       </p>
     </header>
     <main>
       <article>
-        <img src="placeholder.svg" alt="" />
-        <h2>Title</h2>
+        <img src="readme.png" alt="" />
+        <h2>What is a readme file?</h2>
         <p>
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
-          voluptates. Quisquam, voluptates.
+          A readme file informs anyone looking at your repository what your project is about. It lets them know how to install it (if its an application) and how to use it.
         </p>
-        <a href="">Read more</a>
+        <a href="https://github.com/hedge-dev/UnleashedRecomp">Read more</a>
       </article>
+    <article>
+      <img src="wireframe.png" alt="">
+      <h2>What is the purpose of a Wireframe?</h2>
+      <p>
+        The purpose of a wireframe is to provide visual understanding for a web page layout. In other words, it shows the layout of webpage so clients can sign off on the layout before any extra creative work goes into it. 
+      </p>
+      <a href="https://www.figma.com/resource-library/what-is-wireframing/">Read more</a>     
+    </article>
+    <article>
+      <img src="images.png" alt="">
+      <h2>What is a branch in Git?</h2>
+      <p>
+        A branch in Git is like a seperate workspace that is contained within the project where any changes made won't affect the main repository. 
+      </p>
+      <a href="https://git-scm.com/book/en/v2/Git-Branching-Branches-in-a-Nutshell#:~:text=A%20branch%20in%20Git%20is,Note">Read more</a>
+    </article>
     </main>
     <footer>
-      <p>
-        This is the default, provided code and no changes have been made yet.
+      <p class="footer__p">
+        Shahriar Ahmed's sprint 2 wireframe backlog.
       </p>
     </footer>
   </body>

Wireframe/style.css

@@ -30,6 +30,8 @@ body {
   background: var(--paper);
   color: var(--ink);
   font: var(--font);
+  box-sizing: border-box;
+  margin: 0; 
 }
 a {
   padding: var(--space);
@@ -39,20 +41,28 @@ a {
 img,
 svg {
   width: 100%;
-  object-fit: cover;
 }
 /* ====== Site Layout ====== 
 Setting the overall rules for page regions
 https://www.w3.org/WAI/tutorials/page-structure/regions/
 */
+
+header {
+  text-align: center;
+}
+
 main {
   max-width: var(--container);
   margin: 0 auto calc(var(--space) * 4) auto;
+  justify-content: center;
 }
+
 footer {
   position: fixed;
   bottom: 0;
-  text-align: center;
+  width: 100%;
+  box-sizing: border-box;
+  border: 1px, solid, black;
 }
 /* ====== Articles Grid Layout ====
 Setting the rules for how articles are placed in the main element.
@@ -69,6 +79,7 @@ main {
     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.
@@ -85,5 +96,10 @@ article {
   }
   > img {
     grid-column: span 3;
+    aspect-ratio: 16/9;
   }
 }
+
+.footer__p {
+  text-align: center;
+}