Technical Documentation Page - Build a Technical Documentation Page

HTML-CSS
1

Hello i bit dont understand this condition = 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.
You mean it like every element must have his own ID ? I have IDs at every section with class main-section but if i have in code about 30 elements its bit problem for me come up with names for so many IDs. Thank you

/* file: index.html */
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>Technical Docs Page</title>
</head>
<body>
<main id="main-doc">
  <section id="navigation">
    <nav id="navbar">
      <header>Navigation</header>
      <ul>
        <li>
          <a href="#lorem_ipsum" class="nav-link">Lorem Ipsum</a>
        </li>
        <li>
          <a href="#what_is_lorem" class="nav-link">What is Lorem Ipsum?</a>
        </li>
        <li>
          <a href="#where_from" class="nav-link">Where does it come from?</a>
        </li>
        <li>
          <a href="#why_use" class="nav-link">Why do we use it?</a>
        </li>
        <li>
          <a href="#where_get" class="nav-link">Where can I get some?</a>
        </li>
        <li>
          <a href="#code" class="nav-link">Code</a>
        </li>
      </ul>
    </nav>
  </section>

  <section id="lorem_ipsum" class="main-section">
    
    <header id="header_one">
      <h1>Lorem Ipsum</h1>
      <p></p>
      <p></p>
    </header>

  </section>

  <section id="what_is_lorem" class="main-section">
    
    <header id="header_two">
      <h1>What is Lorem Ipsum?</h1>
      <p></p>
      <p></p>
      <p></p>
      <p></p>
    </header>
                    
  </section>

  <section id="where_from" class="main-section">
    
    <header id="header_three">
      <h1>Where does it come from?</h1>
      <p></p>
      <p></p>
      <p></p>
      <p></p>
    </header>

  </section>

  <section id="why_use" class="main-section">
    
    <header id="header_four">
      <h1>Why do we use it?</h1>
      <p></p>
      <p></p>
    </header>
  
  </section>

  <section id="where_get" class="main-section">
    
    <header id="header_five">
      <h1>Where can I get some?</h1>
      
      
    </header>
            
  </section>

  <section id="code" class="main-section">
    <header>
      <h1>Code</h1>
    </header>
    <article>
      <ul>
        <li>
          <code></code>
        </li>
        <li>
          <code></code>
        </li>
        <li>
          <code></code>
        </li>
        <li>
          <code></code>
        </li>
        <li>
          <code></code>
        </li>
      </ul>
    </article>
  </section>

</main>
</body>
</html>

/* 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/104.0.0.0 Safari/537.36

Challenge: Technical Documentation Page - Build a Technical Documentation Page

Link to the challenge:

2

okey my bad. I misread it already done this chalange.

3

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.