Add text, lists and links

Type or copy each code block, then read the table under it so you know what every tag does. The words alone are also in the content kit. In each code sample, the comment line shows which section you are working in.

1. Fill the hero section with a heading, a paragraph and a button link.

   index.html (inside <section class="hero">)Copy

       <section class="hero">
         <h2>Every dog deserves a good home.</h2>
         <p>Dogs have lived alongside people for thousands of years. Today there are more than 300 breeds, from tiny Chihuahuas to giant Great Danes, and every one of them needs care, exercise and love.</p>
         <a class="button" href="#breeds">Meet the breeds</a>
       </section>

   <h2> is a section heading, one level below <h1>. Choose a heading level by its importance, not its size: CSS controls the size. The link has class="button" so CSS can make it look like a button on Day 2.

2. Fill the breeds section with a heading and three cards.

   index.html (inside <section id="breeds">)Copy

       <section id="breeds">
         <h2>Popular Breeds</h2>
         <div class="cards">
   
           <article class="card">
             <h3>Golden Retriever</h3>
             <p>Friendly, gentle and eager to please, Golden Retrievers are one of the most popular family dogs. They love swimming, playing fetch and being with people.</p>
           </article>
   
           <article class="card">
             <h3>Beagle</h3>
             <p>Small, curious and full of energy, Beagles were bred to follow a scent. Their noses are so good that some work at airports, sniffing luggage for hidden food.</p>
           </article>
   
           <article class="card">
             <h3>Border Collie</h3>
             <p>Often called the smartest breed, Border Collies were bred to herd sheep. They need lots of exercise and games that keep their busy minds working.</p>
           </article>
   
         </div>
       </section>

   Code	What it does
   <div class="cards">	A box around all three cards. On Day 2, CSS turns it into a grid that places the cards side by side.
   <article class="card">	A self-contained item that makes sense on its own, like a card. All three share the class card, so one CSS rule styles them all.
   <h3>	A heading one level below the section’s <h2>. Never skip levels.

3. Fill the care section with a heading, a paragraph and a bulleted list.

   index.html (inside <section id="care">)Copy

       <section id="care">
         <h2>What Every Dog Needs</h2>
         <p>Whatever the breed, a happy dog depends on a few basics:</p>
         <ul>
           <li>Fresh water and healthy food every day</li>
           <li>A walk and playtime every day</li>
           <li>Regular checkups with a veterinarian</li>
           <li>A collar with an ID tag</li>
           <li>Plenty of attention from <strong>you</strong></li>
         </ul>
       </section>

   <strong> marks words as important; browsers show them in bold. Use <ol> instead of <ul> when order matters, such as steps in a recipe.

4. Fill the adopt section with a link to another website.

   index.html (inside <section id="adopt">)Copy

       <section id="adopt">
         <h2>Adopt, Don't Shop</h2>
         <p>Millions of dogs enter animal shelters in the United States every year. Many are already house-trained and ready to love a new family.</p>
         <p><a href="https://www.petfinder.com" target="_blank" rel="noopener">Find a dog to adopt near you on Petfinder</a></p>
       </section>

   target="_blank" opens the link in a new tab, so visitors don’t lose your site. rel="noopener" is a security setting that always goes with it.

5. Fill the contact section with an email link.

   index.html (inside <section id="contact">)Copy

       <section id="contact">
         <h2>Contact</h2>
         <p>Have a question or a dog story to share? We would love to hear from you.</p>
         <p><a href="mailto:hello@happytails.example">hello@happytails.example</a></p>
       </section>

   mailto: opens the visitor’s email app with the address already filled in.

6. Save and test every link. Click each nav link and the button: the page should jump to that section. (On a short window the last sections may not move far.)

The three kinds of links

© Created by Sara Rosenstock, Marietta College Graphic Design.