CodeYourFuture
diff --git a/‎Wireframe/index.html‎
Lines changed: 11 additions & 3 deletions b/‎Wireframe/index.html‎
Lines changed: 11 additions & 3 deletions
@@ -4,6 +4,8 @@
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <meta name="description"
+    content="A quickstart guide to building, documenting, and maintaining web projects with GitHub. Learn about README files, wireframes, and Git branching." />
   <title>Wireframe</title>
   <link rel="stylesheet" href="style.css" />
 </head>
@@ -15,7 +17,8 @@ <h1>GitHub Web Project Essentials</h1>
   </header>
   <main>
     <article class="card" id="main-article">
-      <img src="./assets/readme.png" alt="" class="article-img" />
+      <img src="./assets/readme.webp" srcset="./assets/readme-small.webp 400w, ./assets/readme.webp 768w"
+        sizes="(max-width: 600px) 400px, 768px" alt="Keeping your README fresh and engaging" class="article-img" />
       <h2 class="article-title">What Is the Purpose of a README File</h2>
       <p class="article-text">
         A good README file serves as a project's "front door," acting as a crucial piece of documentation that explains
@@ -28,7 +31,10 @@ <h2 class="article-title">What Is the Purpose of a README File</h2>
         aria-label="Read more about README files">Read more</a>
     </article>
     <article class="card">
-      <img src="./assets/wireframe_design.jpeg" alt="Wireframe design" class="article-img" />
+      <img src="./assets/wireframe_design.webp"
+        srcset="./assets/wireframe_design-small.webp 400w, ./assets/wireframe_design.webp 924w"
+        sizes="(max-width: 600px) 400px, (max-width: 1200px) 50vw, 640px" alt="Wireframe design example"
+        class="article-img" />
       <h2 class="article-title">What Is the Purpose of a Wireframe?</h2>
       <p class="article-text">
         A wireframe is a simplified visual guide used in web and app design to outline the structure, layout, and
@@ -42,7 +48,9 @@ <h2 class="article-title">What Is the Purpose of a Wireframe?</h2>
         aria-label="Read more about wireframes">Read more</a>
     </article>
     <article class="card">
-      <img src="./assets/git-branch.webp" alt="Git Basic Terms" class="article-img" />
+      <img src="./assets/git-branch.webp" srcset="./assets/git-branch-small.webp 400w, ./assets/git-branch.webp 650w"
+        sizes="(max-width: 600px) 400px, (max-width: 1200px) 50vw, 640px" alt="Git branches visual concept"
+        class="article-img" />
       <h2 class="article-title">What Is a Branch in Git?</h2>
       <p class="article-text">
         In version control systems like Git, a branch is a separate line of development that diverges from the main