refactor: enhance HTML structure with semantic classes and improve image alt attributes

Author: chefmatthaus-hub

Wireframe/index.html

@@ -7,23 +7,54 @@
     <link rel="stylesheet" href="style.css" />
   </head>
   <body>
-    <header>
+    <header class="page-header">
       <h1>Wireframe</h1>
       <p>
         This is the default, provided code and no changes have been made yet.
       </p>
     </header>
-    <main>
+
+    <main class="content-grid">
+
+      <article class="article-card featured">
+        <img src="placeholder.svg" alt="Placeholder Image" />
+        <div>
+          <h2>Title</h2>
+          <p>
+            Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
+            voluptates. Quisquam, voluptates.
+          </p>
+          <a href="">Read more</a>
+        </div>   
+
+      </article>
+
+      <article class="article-card">
+        <img src="placeholder.svg" alt="Placeholder Image" /> 
+        <div>
+          <h2>Title</h2>
+          <p>
+            Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
+            voluptates. Quisquam, voluptates.
+          </p>
+          <a href="">Read more</a>
+        </div>
+      </article>
+
       <article>
-        <img src="placeholder.svg" alt="" />
+        <img src="placeholder.svg" alt="Placeholder Image" />
+        <div>
         <h2>Title</h2>
         <p>
           Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
           voluptates. Quisquam, voluptates.
         </p>
         <a href="">Read more</a>
+        </div>
       </article>
+
     </main>
+    
     <footer>
       <p>
         This is the default, provided code and no changes have been made yet.