Build the page structure

Annotate your design first

1. Screenshot your desktop home page from Figma and label each area with the element you will use: header, nav, main, section.intro, article.topic-card, footer.

   Planning the structure on paper first makes the code much easier to write.

Read the structure

The browser reads HTML top to bottom, so elements appear in the code in the same order they appear on the page. An element written inside another element sits inside it on the page.

1. Find the <body> in index.html. The starter file already has this structure:

   site/index.htmlCopy

   <body>
     <!-- HEADER: logotype + navigation -->
     <header class="site-header">
       <div class="container">
         <a href="index.html" class="logo">
           <img src="images/logo.svg" alt="Theme Name home">
         </a>
         <nav aria-label="Main">
           <ul>
             <li><a href="topic-1.html">Topic 1</a></li>
             <li><a href="topic-2.html">Topic 2</a></li>
             <li><a href="topic-3.html">Topic 3</a></li>
           </ul>
         </nav>
       </div>
     </header>
   
     <!-- MAIN CONTENT -->
     <main class="container">
       <section class="intro">
         <h1>Theme Name</h1>
         <p>Your theme introduction (75–120 words) goes here.</p>
       </section>
   
       <section class="topics" aria-label="Topics">
         <article class="topic-card topic-1">
           <a href="topic-1.html">
             <img src="images/thumbs/topic-1-01-sm.jpg" alt="Describe this image">
             <h2>Topic 1</h2>
             <p>One or two sentences that make visitors want to see this gallery.</p>
           </a>
         </article>
         <article class="topic-card topic-2">
           <a href="topic-2.html">
             <img src="images/thumbs/topic-2-01-sm.jpg" alt="Describe this image">
             <h2>Topic 2</h2>
             <p>One or two sentences that make visitors want to see this gallery.</p>
           </a>
         </article>
         <article class="topic-card topic-3">
           <a href="topic-3.html">
             <img src="images/thumbs/topic-3-01-sm.jpg" alt="Describe this image">
             <h2>Topic 3</h2>
             <p>One or two sentences that make visitors want to see this gallery.</p>
           </a>
         </article>
       </section>
     </main>
   
     <!-- FOOTER -->
     <footer class="site-footer">
       <div class="container">
         <p>Designed by Your Name for GRPH 325 Interaction Design, Marietta College.</p>
         <p>Image credits: see each gallery page.</p>
       </div>
     </footer>
   </body>

2. Trace each opening tag to its closing tag. Notice how <nav> closes before </header>, and all three cards close before </section>. Indenting the code shows these levels.

3. Rename the links topic-1.html, topic-2.html and topic-3.html to your topic file names, for example red.html. Change them in both the navigation and the cards.

4. Save and preview. The page will look plain until you add CSS. Images and the gallery links will show as broken until you add your files in later steps; that is expected.

© Created by Sara Rosenstock, Marietta College Graphic Design.