Technical Documentation Page - Build a Technical Documentation Page

HTML-CSS
1

Tell us what’s happening:

I dont’ know what’s wrong and don’t know how to adjust my codes. It made me dizzy and I can only go this far. Can anyone help me . Don’t pass on step 5,8,13

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<link rel="stylesheet" href="styles.css">
<main id="main-doc">
  <section class="main-section" id="Clara's_music">
    <nav id="navbar">
     <a class="nav-line" href="">
    <header id="Clara's_music">Clara's music</header> </a>
 
      <p>My lover</p><p>is Clara.</p>
        <code>Something about Clara here.</code>
        <code>I know her about 1.5 years ago</code>
        <code>I have fallen in love with her at that time</code>
        <code>I want to see her by face soon.</code>
        <code>Wish the mighty God can help me.</code>
    </nav>
  </section> 
  <section class="main-section" id="Clara's_boy_friend_Amac">
    <nav id="navbar">
      <a class="nav-line" href="">
    <header id="Clara's_boy_friend_Amac">Clara's boy friend Amac</header>
      </a>
    
      <p>His name</p><p>is Amac.</p>
        <li>He live in Taiwan.</li>
        <li>He likes singing.</li>
        <li>He live in Taichung. </li>
        <li>He also like MLBB.</li>
        <li>He is a reliable man.</li>
    </nav>
          <nav id="navbar">
            <a class="nav-link" href=""><header>Details about Clara and Amac's story</header></a>
          </nav>
  </section>
    
  <section class="main-section" id="Their_story">
    <nav id="navbar">
      <a class="nav-line" href="">
     <header id="Their_story">Their story</header>
      </a>
    
       <p>I will tell </p><p>you their story.</p>
    </nav>
   </section>
   
  <section class="main-section" id="Their_child">
    <nav id="navbar">
      <a class="nav-line" href="">
    <header id="Their_child">Their child</header>
      </a>
    
       <p>They will have</p><p>a boy in the future.</p>
    </nav>
  </section>
  <section class="main-section" id="The_secret_how_Amac_success">
    <nav id="navbar">
      <a class="nav-line" href="">
    <header id="The_secret_how_Amac_success">The secret how Amac success</header>
      </a>
  
      <p>I will reveal you </p><p>Amac's secret how he succsess finally.</p>
    </nav>
  </section>
</main>

/* file: styles.css */

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36 Edg/131.0.0.0

Challenge Information:

Technical Documentation Page - Build a Technical Documentation Page

2

Hi @Amac13,

here are the things you need to fix:

  1. The first child of each .main-section should be a header element.

This means you need to add a header tag as the first child right inside the .main-section.

  1. Each .main-section should have an id that matches the text of its first child, having any spaces in the child’s text replaced with underscores (_) for the id’s.

The id attribute of every .main-section in your html should be the same as the text of the header child.

  1. Your #navbar should have exactly one header element within it.

Same as the step 5, you need to include a header tag inside the #navbar.

3

Hi there!

You didn’t need to add a nav element each per main section. Add only one nav element and within nav element create anchor elements each per main section. Give in each anchor href attribute value’s corresponding to the main section’s id value. header text, href value, anchor text and id value should be exactly the same as per main section.