Align layout with wireframe: centered header and 2-column articles

Richiealx · Richiealx · commit 78d455936409 · 2026-01-23T00:38:36.000Z
diff --git a/Wireframe/index.html b/Wireframe/index.html
@@ -8,17 +8,17 @@
   </head>
 
   <body>
-    <header>
+    <header class="page-header">
       <h1>Wireframe to Web Code</h1>
       <p>
         A simple webpage built from a wireframe using semantic HTML and CSS.
       </p>
     </header>
 
     <main>
-      <section aria-label="Articles">
-        <article>
-          <img src="placeholder.svg" alt="" />
+      <section class="articles" aria-label="Articles">
+        <article class="article article-featured">
+          <img src="placeholder.svg" alt="" aria-hidden="true" />
           <h2>What is the purpose of a README file?</h2>
           <p>
             A README is the first place someone looks when they open a project.
@@ -35,8 +35,8 @@ <h2>What is the purpose of a README file?</h2>
           </a>
         </article>
 
-        <article>
-          <img src="placeholder.svg" alt="" />
+        <article class="article">
+          <img src="placeholder.svg" alt="" aria-hidden="true" />
           <h2>What is the purpose of a wireframe?</h2>
           <p>
             A wireframe is a simple layout sketch that shows where key parts of
@@ -53,8 +53,8 @@ <h2>What is the purpose of a wireframe?</h2>
           </a>
         </article>
 
-        <article>
-          <img src="placeholder.svg" alt="" />
+        <article class="article">
+          <img src="placeholder.svg" alt="" aria-hidden="true" />
           <h2>What is a branch in Git?</h2>
           <p>
             A branch is an independent line of work in a Git repository. It lets
diff --git a/Wireframe/style.css b/Wireframe/style.css
@@ -76,6 +76,11 @@ main {
   padding: calc(var(--space) * 2);
 }
 
+/* Center the PAGE TITLE and the SUBTITLE (matches wireframe + reviewer feedback) */
+.page-header {
+  text-align: center;
+}
+
 main {
   /* Prevent overlap with fixed footer and give the layout breathing room */
   padding-bottom: calc(var(--footer-height) + (var(--space) * 2));
@@ -106,14 +111,14 @@ Play with the options that come up.
 https://developer.chrome.com/docs/devtools/css/grid
 https://gridbyexample.com/learn/
 */
-main {
+.articles {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: calc(var(--space) * 2);
 }
 
 /* Make the first article span both columns (wireframe layout) */
-main > *:first-child {
+.articles > *:first-child {
   grid-column: 1 / -1;
 }
 
@@ -122,6 +127,7 @@ 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.
 */
+.article,
 article {
   border: var(--line);
   padding-bottom: var(--space);
@@ -130,29 +136,34 @@ article {
   grid-template-columns: var(--space) 1fr var(--space);
 }
 
+.article > *,
 article > * {
   grid-column: 2/3;
 }
 
+.article > img,
 article > img {
   grid-column: 1 / -1;
 }
 
 /* Optional: improve spacing/readability while keeping the wireframe feel */
+.article h2,
 article h2 {
   margin: calc(var(--space) * 1.5) 0 var(--space);
 }
 
+.article p,
 article p {
   margin: 0 0 calc(var(--space) * 1.5);
 }
 
+/* Keep layout readable on small screens */
 @media (max-width: 700px) {
-  main {
+  .articles {
     grid-template-columns: 1fr;
   }
 
-  main > *:first-child {
+  .articles > *:first-child {
     grid-column: auto;
   }
 }
