CodeYourFuture · valentpron · Jun 5, 2025 · Jun 5, 2025
diff --git a/Wireframe/README.md b/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 a 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 a 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 a 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 a 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
 

diff --git a/Wireframe/index.html b/Wireframe/index.html
@@ -2,32 +2,131 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Wireframe</title>
-    <link rel="stylesheet" href="style.css" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta
+      name="description"
+      content="Learn the purpose of README files, wireframes, and Git branches with clear examples."
+    />
+    <link rel="stylesheet" href="/Wireframe/style.css" />
+    <title>Development Essentials: README, Wireframes & Git Branches</title>
   </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="description">
+        Understanding README files, wireframes, and Git branches.
       </p>
     </header>
     <main>
+      <section aria-label="Articles about development tools"></section>
       <article>
-        <img src="placeholder.svg" alt="" />
-        <h2>Title</h2>
+        <img
+          src="placeholder.svg"
+          alt="random image"
+          class="desaturated-image"
+        />
+        <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 is basically a quick guide to your project. It&#39;s
+          usually the first thing people see when they visit your repository or
+          open your folder. The main point of it is to explain what your project
+          is about, how to use it, and anything important someone should know if
+          they want to try it or help work on it.
+        </p>
+        <h3>It might include things like:</h3>
+        <ul>
+          <li>
+            <p>What the project does</p>
+          </li>
+          <li>
+            <p>How to set it up or install it</p>
+          </li>
+          <li>
+            <p>Any special instructions or requirements</p>
+          </li>
+          <li>
+            <p>Who made it or how to contact the creator</p>
+          </li>
+          <li>
+            <p>A license or permission for how others can use it</p>
+          </li>
+        </ul>
+        <p>
+          So in short, a README is there to make your project easy to understand
+          and use—for both users and developers.
+        </p>
+        <p>
+          <a
+            href="https://www.makeareadme.com/"
+            target="_blank"
+            rel="noopener noreferrer"
+            >Read more about README</a
+          >
+        </p>
+      </article>
+      <article>
+        <img
+          src="placeholder.svg"
+          alt="random image"
+          class="desaturated-image"
+        />
+        <h2>What is the purpose of a wireframe?</h2>
+        <p>
+          A wireframe is basically a simple visual plan of a website or app. It
+          shows where things like buttons, text, images, and menus will go—kind
+          of like a rough draft before you start designing or building
+          anything.<br />
+          The main point of a wireframe is to figure out the layout and how
+          users will move through the site. It helps everyone involved
+          (designers, developers, clients) get on the same page about the
+          structure and flow before putting in a lot of time and effort.<br />
+          Think of it like sketching a floor plan before building a house—it's
+          not about the colors or decoration yet, just where everything should
+          be.
+        </p>
+        <p>
+          <a
+            href="https://www.adobe.com/creativecloud/design/discover/wireframe.html"
+            target="_blank"
+            rel="noopener noreferrer"
+            >Discover wireframing basics</a
+          >
+        </p>
+      </article>
+
+      <article>
+        <img
+          src="placeholder.svg"
+          alt="random image"
+          class="desaturated-image"
+        />
+        <h2>What is a branch in Git?</h2>
+        <p>
+          A branch in Git is like a separate copy of your project where you can
+          safely make changes without messing up the main version.<br />
+          Let&#39;s say you're adding a new feature or fixing something—rather
+          than changing the main code right away, you create a branch, do your
+          work there, and once you're happy with it, you can merge it back into
+          the main project.<br />
+          It helps keep things clear and makes it easier for teams to work on
+          different things at the same time without getting in each other&#39;s
+          way.<br />
+          There are some provided HTML and CSS files you can use to get started.
+          You can use these files as a starting point or create your own files
+          from scratch.
+        </p>
+        <p>
+          <a
+            href="https://git-scm.com/book/en/v2/Git-Branching-Branches-in-a-Nutshell"
+            target="_blank"
+            rel="noopener noreferrer"
+            >Read more about Git branches</a
+          >
         </p>
-        <a href="">Read more</a>
       </article>
     </main>
     <footer>
-      <p>
-        This is the default, provided code and no changes have been made yet.
-      </p>
+      <p>Made by Valentyn Pronchenko</p>
     </footer>
   </body>
 </html>
diff --git a/Wireframe/style.css b/Wireframe/style.css
@@ -87,3 +87,25 @@ article {
     grid-column: span 3;
   }
 }
+/* My own changes */
+footer {
+  position: fixed; /* Fixes the footer relative to the viewport */
+  bottom: 0; /* Positions it at the very bottom */
+  left: 0; /* Stretch from left */
+  width: 100%; /* Full width */
+  background-color: #eee; /* Background color for visibility */
+  text-align: center;
+  padding: 1rem 0;
+  box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1); /* Optional subtle shadow */
+  z-index: 1000; /* Make sure it stays on top */
+}
+.desaturated-image {
+  display: block; /* Makes sure image starts on a new line */
+  margin-top: 0.5rem; /* Small gap between text and image */
+
+  /* Reduce saturation to 50% to make it less colorful */
+  filter: saturate(0.5);
+
+  max-width: 100%; /* Responsive image width */
+  height: auto;
+}