CodeYourFuture · Giontr · May 11, 2026 · May 11, 2026 · May 11, 2026 · May 11, 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/Readme.png b/Wireframe/Readme.png
diff --git a/Wireframe/Wireframe1.png b/Wireframe/Wireframe1.png
diff --git a/Wireframe/git-branch.png b/Wireframe/git-branch.png
diff --git a/Wireframe/index.html b/Wireframe/index.html
@@ -1,33 +1,80 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Wireframe</title>
+    <title>Software development UNI</title>
     <link rel="stylesheet" href="style.css" />
   </head>
   <body>
     <header>
-      <h1>Wireframe</h1>
+      <h1>Code Hub</h1>
       <p>
-        This is the default, provided code and no changes have been made yet.
+        Learn to code with hands-on projects and expert guidance. Join our
+        community of developers
       </p>
     </header>
     <main>
       <article>
-        <img src="placeholder.svg" alt="" />
-        <h2>Title</h2>
-        <p>
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
-          voluptates. Quisquam, voluptates.
+        <img src="Readme.png" alt="README file illustration" />
+        <h2>What is a README file?</h2>
+        <p class="intro">
+          A README is the front door of any software project — the first
+          document a visitor reads when they encounter your code.
         </p>
-        <a href="">Read more</a>
+        <p class="content">
+          Typically named README.md and written in Markdown, it lives at the
+          root of a repository and renders automatically on platforms like
+          GitHub. Its core purpose is to answer three questions immediately:
+          what does this project do, how do I get it running, and how do I use
+          it?<br />A well-crafted README...
+        </p>
+        <a href="https://en.wikipedia.org/wiki/README" target="_blank"
+          >Read more</a
+        >
+      </article>
+      <article>
+        <img src="Wireframe1.png" alt="Wireframe illustration" />
+        <h2>What is a WIREFRAME?</h2>
+        <p class="intro">
+          A wireframe is a skeletal blueprint of a digital interface — a
+          low-fidelity sketch that maps out layout and structure before any
+          visual design begins.
+        </p>
+        <p class="content">
+          Think of it as the floor plan of a building: it shows where the rooms
+          are, how they connect, and how large each space is — but says nothing
+          about paint colours or furniture. In UI/UX design, wireframes...
+        </p>
+        <a
+          href="https://en.wikipedia.org/wiki/Website_wireframe"
+          target="_blank"
+          >Read more</a
+        >
+      </article>
+      <article>
+        <img src="git-branch.png" alt="Git branch illustration" />
+        <h2>What is a BRANCH in Git?</h2>
+        <p class="intro">
+          A branch in Git is an independent line of development — a lightweight
+          pointer that lets you work on changes in isolation without affecting
+          the main codebase.
+        </p>
+        <p class="content">
+          Imagine a river that splits into a side channel. Work can proceed
+          along the side channel independently; later, the two streams can be
+          merged back together. In Git, this is exactly what a branch does: it
+          diverges from a point in the commit history so
+        </p>
+        <a
+          href="https://en.wikipedia.org/wiki/Branching_(version_control)"
+          target="_blank"
+          >Read more</a
+        >
       </article>
     </main>
     <footer>
-      <p>
-        This is the default, provided code and no changes have been made yet.
-      </p>
+      <p>&copy; Giorgi Natriashvili. All rights reserved.</p>
     </footer>
   </body>
 </html>
diff --git a/Wireframe/style.css b/Wireframe/style.css
@@ -1,12 +1,7 @@
-/* Here are some starter styles
-You can edit these or replace them entirely 
-It's showing you a common way to organise CSS 
-And includes solutions to common problems 
-As well as useful links to learn more */
 
 /* ====== Design Palette ======
  This is our "design palette".
- It sets out the colours, fonts, styles etc to be used in this design 
+ It sets out the colours, fonts, styles etc to be used in this design
  At work, a designer will give these to you based on the corporate brand, but while you are learning
  You can design it yourself if you like
  Inspect the starter design with Devtools
@@ -30,6 +25,12 @@ body {
   background: var(--paper);
   color: var(--ink);
   font: var(--font);
+  height: 100%;
+  margin: 0;
+}
+header {
+  text-align: center;
+  padding: var(--space);
 }
 a {
   padding: var(--space);
@@ -41,18 +42,24 @@ svg {
   width: 100%;
   object-fit: cover;
 }
-/* ====== Site Layout ====== 
+/* ====== Site Layout ======
 Setting the overall rules for page regions
 https://www.w3.org/WAI/tutorials/page-structure/regions/
 */
 main {
   max-width: var(--container);
   margin: 0 auto calc(var(--space) * 4) auto;
+  flex: 1;
+  padding-bottom: 100px;
 }
 footer {
   position: fixed;
   bottom: 0;
+  left: 0;
+  width: 100%;
   text-align: center;
+  padding: 20px;
+  background: var(--paper);
 }
 /* ====== Articles Grid Layout ====
 Setting the rules for how articles are placed in the main element.
@@ -69,8 +76,8 @@ main {
     grid-column: span 2;
   }
 }
-/* ====== Article Layout ====== 
-Setting the rules for how elements are placed in the article. 
+/* ====== 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.
 Keeping things orderly and separate is the key to good, simple CSS.
 */
@@ -86,4 +93,14 @@ article {
   > img {
     grid-column: span 3;
   }
+
+  .intro {
+    font-size: 1em;
+    font-weight: bold;
+  }
+
+    .content {
+      font-size: 0.9em;
+      opacity: 0.8;
+    }
 }