add srcset and sizes attributes for imgs

Author: tomdu3

Wireframe/index.html

@@ -18,7 +18,8 @@ <h1>GitHub Web Project Essentials</h1>
   </header>
   <main>
     <article class="card" id="main-article">
-      <img src="./assets/readme.webp" 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
@@ -31,7 +32,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.webp" 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
@@ -45,7 +49,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