CodeYourFuture · Nataliia74 · May 6, 2025 · May 6, 2025 · May 6, 2025 · May 6, 2025
diff --git a/Wireframe/20200819-README_0.webp b/Wireframe/20200819-README_0.webp
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/branch.webp b/Wireframe/branch.webp
diff --git a/Wireframe/index.html b/Wireframe/index.html
@@ -1,32 +1,62 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <meta charset="UTF-8" />
+    <meta charset="UTF-8" name="description" content="WEbpage contain 3 articles about essential tools for beginers in webdevelopment. They are README file, wireframes, branching in Git." />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Wireframe</title>
     <link rel="stylesheet" href="style.css" />
   </head>
   <body>
     <header>
-      <h1>Wireframe</h1>
+      <h1>One of the essential start-points for developers beginners</h1>
       <p>
-        This is the default, provided code and no changes have been made yet.
+        This webpage is for enthusiastic developers who are just starting their journey in web development. We often start with an idea for a website or application and aim to build it from scratch, but how do we create a plan for our project? One important step is to create a wireframe that outlines the structure and layout. Another approach is to use a ready-made template available on GitHub. However, it is important to understand its purpose and how it works by reviewing the included to repo README file. To effectively build a project, we usually need a team that can work collaboratively and productively. This is where branching comes in handy — it allows multiple team members to work on different features or fixes without interfering with each other’s code. So, let’s take a closer look at these aspects.
       </p>
     </header>
     <main>
-      <article>
-        <img src="placeholder.svg" alt="" />
-        <h2>Title</h2>
+
+      <article id="README file article">
+        <figure>
+          <img src="20200819-README_0.webp" alt="README file picture" />
+          <figcaption>datamanagement.hms.harvard.edu</figcaption>
+        </figure>
+        <h2>What is the purpose of a README file?</h2>
         <p>
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
-          voluptates. Quisquam, voluptates.
+          README file is a first point of documentation on your project or repo on GitHub.
+          It include instructions or links to instructions. README file is a text file with extention md.
+          It is typically the first file that users and developers encounter when they access a project.
+          It explains what the project is, how to set it up, and how to use it. This is crucial for effective collaboration and user engagement.
         </p>
-        <a href="">Read more</a>
+        <a href="https://www.mygreatlearning.com/blog/readme-file/#:~:tegxt=GitHub%20has%20become%20the%20platform,asks%20you%20to%20fix%20it" target="_blank" rel="noopener">Read more about READMEfile</a>
+      </article>
+      <article id="Wireframe article">
+        <figure>
+          <img src="wireframe2.webp" alt="Wireframe example" />
+          <figcaption>Miro app</figcaption>
+        </figure>
+        <h2>What is the purpose of a wireframe?</h2>
+        <p>
+          Wireframe is a blueprint for your digital project. It helps plan and visualise the sceleton of your app or website before runing actual design.
+          It shows how elements relate to each other and how they’re structured.
+        </p>
+        <a href="https://www.orbitmedia.com/blog/7-reasons-to-wireframe/" target="_blank" rel="noopener">Read more about wireframes</a>
+      </article>
+      <article id="Branching on Git article">
+        <figure>
+          <img src="branch.webp" alt="Branching oh Git example" />
+          <figcaption>Linkedin.com</figcaption>
+        </figure>
+        <h2>What is a branch in Git?</h2>
+        <p>
+          Branching on the Git means simply create a new or separate version of the main repository.
+          Branches allow to develop features, fix bugs, or safely experiment with new ideas.
+        </p>
+        <a href="https://www.w3schools.com/git/git_branch.asp" target="_blank" rel="noopener">Read more about branching</a>
       </article>
     </main>
-    <footer>
+    <footer id="Contact details">
       <p>
-        This is the default, provided code and no changes have been made yet.
+        &copy; 2014 SpaceBears Inc
       </p>
     </footer>
   </body>

diff --git a/Wireframe/style.css b/Wireframe/style.css
@@ -16,13 +16,18 @@ As well as useful links to learn more */
  https://web.dev/articles/min-max-clamp
  https://scrimba.com/learn-css-variables-c026
 ====== Design Palette ====== */
+
+
 :root {
-  --paper: oklch(7 0 0);
-  --ink: color-mix(in oklab, var(--color) 5%, black);
-  --font: 100%/1.5 system-ui;
-  --space: clamp(6px, 6px + 2vw, 15px);
-  --line: 1px solid;
+  --color: rgb(255, 251, 238);
+  --paper: rgb(92, 93, 99);
+  --ink: var(--color);
+  --font: 110%/1.5 Modern;
+  --space: clamp(1px, 2px + 2vw, 5px);
+  --line: 3px solid;
   --container: 1280px;
+  --color_h1_border: rgb(0, 0, 20);
+  --color_a: rgb(245, 245, 156);
 }
 /* ====== Base Elements ======
  General rules for basic HTML elements in any context */
@@ -31,15 +36,24 @@ body {
   color: var(--ink);
   font: var(--font);
 }
+h1, h2 {
+  color: var(--color_h1_border);
+}
 a {
   padding: var(--space);
   border: var(--line);
+  border-radius: 2%;
+  border-color: var(--color_h1_border);
+  color: var(--color_a);
   max-width: fit-content;
 }
 img,
 svg {
   width: 100%;
   object-fit: cover;
+  border: var(--line);
+  border-color: var(--color_h1_border);
+  border-radius: 2%;
 }
 /* ====== Site Layout ====== 
 Setting the overall rules for page regions
@@ -52,7 +66,7 @@ main {
 footer {
   position: fixed;
   bottom: 0;
-  text-align: center;
+  text-align: left;
 }
 /* ====== Articles Grid Layout ====
 Setting the rules for how articles are placed in the main element.
@@ -76,14 +90,15 @@ Keeping things orderly and separate is the key to good, simple CSS.
 */
 article {
   border: var(--line);
+  border-color: var(--color_h1_border);
   padding-bottom: var(--space);
-  text-align: left;
+  text-align: justify;
   display: grid;
   grid-template-columns: var(--space) 1fr var(--space);
   > * {
     grid-column: 2/3;
   }
   > img {
     grid-column: span 3;
-  }
+    }
 }
diff --git a/Wireframe/wireframe2.webp b/Wireframe/wireframe2.webp