Use elements with better semantic meaning

craigshoemaker · craigshoemaker · commit 721b8db116d4 · 2020-01-28T08:51:12.000-05:00
diff --git a/contact.html b/contact.html
@@ -17,17 +17,15 @@
       </ul>
     </nav>
   </header>
-  <main>
-    <div class="layout-container">
-      <div class="branding"><img src="images/logo.png" alt="Bethany's Pie Shop"></div>
-      <div class="content">
+  <main class="columns-desktop">
+      <aside><img src="images/logo.png" alt="Bethany's Pie Shop"></aside>
+      <article>
         <h1>Contact</h1>
         <p>We are always glad to hear from you!</p>
         <p><a href="mailto:example@bethanyspieshop.com?subject=Interested%20in%20pies">Send us an email</a>
           and let us know how we can help make your occasion special.
         </p>
-      </div>
-    </div>
+      </article>
   </main>
   <footer>
     <nav>
diff --git a/index.html b/index.html
@@ -6,7 +6,11 @@
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>Bethany's Pie Shop</title>
   <link rel="stylesheet" href="site.css" type="text/css">
-
+  <style>
+    .banner {
+      max-width: 100%;
+    }
+  </style>
 </head>
 <body>
   <header>
@@ -18,14 +22,12 @@
       </ul>
     </nav>
   </header>
-  <main>
-    <div class="layout-container">
-      <div class="branding"><img src="images/logo.png" alt="Bethany's Pie Shop"></div>
-      <div class="content">
-        <img src="images/banner.png" alt="Bethany's Pie Shop">
-        <h1>Bethany's Pie Shop</h1>
-      </div>
-    </div>
+  <main class="columns-desktop">
+    <aside><img src="images/logo.png" alt="Bethany's Pie Shop"></aside>
+    <article>
+      <img src="images/banner.png" class="banner" alt="Bethany's Pie Shop">
+      <h1>Bethany's Pie Shop</h1>
+    </article>
   </main>
   <footer>
     <nav>
diff --git a/order.html b/order.html
@@ -10,7 +10,7 @@
   <style>
     
     @media only screen and (min-width: 768px) {
-      .content {
+      article {
         width: 350px;
       }
     }
@@ -62,15 +62,15 @@
       </ul>
     </nav>
   </header>
-  <main>
-    <div class="layout-container">
-      <div class="branding"><img src="images/logo.png" alt="Bethany's Pie Shop"></div>
-      <div class="content">
+  <main class="columns-desktop">
+
+      <aside><img src="images/logo.png" alt="Bethany's Pie Shop"></aside>
+      <article>
         <h1>Order</h1>
 
         <div class="pie">
           <img src="">
-          <div class="layout-container">
+          <div class="columns-desktop">
             <div class="title">Apple Pie</div c>
             <div class="price">$12.95</div>
           </div>
@@ -167,8 +167,7 @@ <h1>Order</h1>
           <input type="submit" value="Order">
           
         </form>
-      </div>
-    </div>
+      </article>
   </main>
   <footer>
     <nav>
@@ -186,16 +185,16 @@ <h1>Order</h1>
       const order = JSON.parse(localStorage.getItem('order'));
 
       if (order) {
-        const container = document.querySelector('.pie');
-        const title = container.querySelector('.title');
-        const price = container.querySelector('.price');
-        const desc = container.querySelector('.desc');
+        const pie = document.querySelector('.pie');
+        const title = pie.querySelector('.title');
+        const price = pie.querySelector('.price');
+        const desc = pie.querySelector('.desc');
 
         title.innerText = order.title;
         price.innerText = order.price;
         desc.innerText = order.desc;
 
-        const img = container.querySelector('img');
+        const img = pie.querySelector('img');
         img.setAttribute('src', `images/${ order.id }.png`);
         img.setAttribute('alt', order.title);
       }
diff --git a/pies.html b/pies.html
@@ -17,36 +17,41 @@
         </ul>
       </nav>
     </header>
-    <main>
-      <div class="layout-container">
-        <div class="branding">
+    <main class="columns-desktop">
+
+        <aside>
           <img src="images/logo.png" alt="Bethany's Pie Shop" />
-        </div>
-        <div class="content">
+        </aside>
+
+        <article>
           <h1>Pies</h1>
-          <article class="layout-container">
+
+          <section class="columns-desktop">
+
             <div class="pie">
               <img src="images/apple-pie.png" alt="Apple Pie" />
-              <div class="layout-container">
+              <div class="columns-desktop">
                 <div class="title">Apple Pie</div>
                 <div class="price">$12.95</div>
               </div>
               <p class="desc">Our famous apple pie</p>
               <button data-order="apple-pie">Order</button>
             </div>
+
             <div class="pie">
               <img src="images/cherry-pie.png" alt="Chery Pie" />
-              <div class="layout-container">
+              <div class="columns-desktop">
                 <div class="title">Cherry Pie</div>
                 <div class="price">$15.95</div>
               </div>
               <p class="desc">A summer classic!</p>
               <button data-order="cherry-pie">Order</button>
             </div>
-          </article>
-        </div>
-      </div>
+
+          </section>
+        </article>
     </main>
+
     <footer>
       <nav>
         <ul>
@@ -56,14 +61,15 @@ <h1>Pies</h1>
         </ul>
       </nav>
     </footer>
+
   </body>
   <script>
-    window.addEventListener(
-      "DOMContentLoaded",
-      function(e) {
+    window.addEventListener("DOMContentLoaded", function(e) {
+
         const orderButtons = document.querySelectorAll("button[data-order]");
 
         [].forEach.call(orderButtons, function(button) {
+
           button.addEventListener("click", function(e) {
             const button = e.currentTarget;
             const id = button.getAttribute("data-order");
@@ -85,8 +91,7 @@ <h1>Pies</h1>
             window.location.href = url;
           });
         });
-      },
-      false
-    );
+      }, false);
+
   </script>
 </html>
diff --git a/site.css b/site.css
@@ -54,25 +54,25 @@ footer {
   padding: 15px;
 }
 
-.layout-container {
+.columns-desktop {
   display: block;
 }
 
-.branding,
-.content {
+aside,
+article {
   padding: 2em;
 }
 
-.content {
+article {
   width: 75%;
 }
 
 @media only screen and (min-width: 768px) {
-  .layout-container {
+  .columns-desktop {
     display: flex;
   }
 
-  .branding {
+  aside {
     margin-left: 2%;
   }
 }
@@ -99,11 +99,11 @@ footer {
   text-align: right;
 }
 
-.pie .layout-container {
+.pie .columns-desktop {
   width: 100%;
 }
 
-.pie .layout-container div {
+.pie .columns-desktop div {
   width: 50%;
 }
 
@@ -114,4 +114,3 @@ footer {
   border-radius: 3px;
   color: #fff;
 }
-/* /Pie */

Original file line number	Diff line number	Diff line change
`@@ -54,25 +54,25 @@ footer {`
`54`	`54`	`padding: 15px;`
`55`	`55`	`}`
`56`	`56`
`57`		`-.layout-container {`
	`57`	`+.columns-desktop {`
`58`	`58`	`display: block;`
`59`	`59`	`}`
`60`	`60`
`61`		`-.branding,`
`62`		`-.content {`
	`61`	`+aside,`
	`62`	`+article {`
`63`	`63`	`padding: 2em;`
`64`	`64`	`}`
`65`	`65`
`66`		`-.content {`
	`66`	`+article {`
`67`	`67`	`width: 75%;`
`68`	`68`	`}`
`69`	`69`
`70`	`70`	`@media only screen and (min-width: 768px) {`
`71`		`- .layout-container {`
	`71`	`+ .columns-desktop {`
`72`	`72`	`display: flex;`
`73`	`73`	`}`
`74`	`74`
`75`		`- .branding {`
	`75`	`+ aside {`
`76`	`76`	`margin-left: 2%;`
`77`	`77`	`}`
`78`	`78`	`}`
`@@ -99,11 +99,11 @@ footer {`
`99`	`99`	`text-align: right;`
`100`	`100`	`}`
`101`	`101`
`102`		`-.pie .layout-container {`
	`102`	`+.pie .columns-desktop {`
`103`	`103`	`width: 100%;`
`104`	`104`	`}`
`105`	`105`
`106`		`-.pie .layout-container div {`
	`106`	`+.pie .columns-desktop div {`
`107`	`107`	`width: 50%;`
`108`	`108`	`}`
`109`	`109`
`@@ -114,4 +114,3 @@ footer {`
`114`	`114`	`border-radius: 3px;`
`115`	`115`	`color: #fff;`
`116`	`116`	`}`
`117`		`-/* /Pie */`