CodeYourFuture · Vitalii-code · May 16, 2026 · May 16, 2026 · May 16, 2026 · May 16, 2026
diff --git a/Wireframe/README.md b/Wireframe/README.md
@@ -4,15 +4,16 @@
 
 <!--{{<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
+
 ![Wireframe](./wireframe.png)
 
 Using the provided wireframe and resources, write a new webpage explaining:
@@ -27,13 +28,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 +43,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/index.html b/Wireframe/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
@@ -8,26 +8,59 @@
   </head>
   <body>
     <header>
-      <h1>Wireframe</h1>
+      <h1>Userful things to know as a software developer</h1>
       <p>
-        This is the default, provided code and no changes have been made yet.
+        This page explains a few things such as what is a README, the purpose of
+        a wireframe and how branches work in git.
       </p>
     </header>
     <main>
       <article>
-        <img src="placeholder.svg" alt="" />
-        <h2>Title</h2>
+        <img
+          src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Falexwlchan.net%2Fimages%2F2021%2Freadmes-for-open-science%2Fslide6.png&f=1&nofb=1&ipt=8d1b781a7151a84e0a93ee0ccf6b730ab844953d13f7201b453c4f13c9ce251e"
+          alt=""
+        />
+        <h2>What is a README?</h2>
         <p>
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
-          voluptates. Quisquam, voluptates.
+          A README is a file that describes things about a project on github.
+          And is usually the first thing that you have to read when contributing
+          to a new project.
         </p>
-        <a href="">Read more</a>
+        <a href="https://en.wikipedia.org/wiki/README">Read more</a>
+      </article>
+      <article>
+        <img
+          src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fmiro.medium.com%2Fmax%2F1800%2F0*FVLOt7Tx7P3zPI7T.jpg&f=1&nofb=1&ipt=22e2fa20d0152f16524491be50411071460aa35aa7a53970aaebe0ad7da702db"
+          alt=""
+        />
+        <h2>What's the purpose of a wireframe?</h2>
+        <p>
+          Wireframes can be used to sketch a website. UX designers use them to
+          communicate their ideas about how the UI should be designed.
+        </p>
+        <a href="https://www.figma.com/resource-library/what-is-wireframing/"
+          >Read more</a
+        >
+      </article>
+      <article>
+        <img
+          src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fwww.atatus.com%2Fblog%2Fcontent%2Fimages%2Fsize%2Fw1920%2F2021%2F06%2Fwhat-is-branch-in-git.jpeg&f=1&nofb=1&ipt=7b3c5edc73dc13d7ad8d60389bda81866d17d80f5c02af759033bfa1f20d8b63"
+          alt=""
+        />
+        <h2>What is a branch in Git?</h2>
+        <p>
+          A branch is a separate workspace that allows you to work on a feature
+          without touching the main projects code and then merge it to the main
+          branch once the feature is mature enough.
+        </p>
+        <a
+          href="https://git-scm.com/book/en/v2/Git-Branching-Branches-in-a-Nutshell"
+          >Read more</a
+        >
       </article>
     </main>
     <footer>
-      <p>
-        This is the default, provided code and no changes have been made yet.
-      </p>
+      <p>Made by Vitalii Kmit</p>
     </footer>
   </body>
 </html>
diff --git a/Wireframe/style.css b/Wireframe/style.css
@@ -49,8 +49,15 @@ main {
   max-width: var(--container);
   margin: 0 auto calc(var(--space) * 4) auto;
 }
+
+header {
+  text-align: center;
+}
+
 footer {
-  position: fixed;
+  background-color: var(--paper);
+  border: var(--line);
+  position: sticky;
   bottom: 0;
   text-align: center;
 }