Technical Documentation Page - Build a Technical Documentation Page

HTML-CSS
1

Tell us what’s happening:
Describe your issue in detail here.
Each .nav-link should have an href attribute that links to its corresponding .main-section (e.g. If you click on a .nav-link element that contains the text “Hello world”, the page navigates to a section element with that id).

im dont understand why this check isnt going through
Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang='en'>
  <head>
    <meta charset='utf-8'>
    <meta width = 'width - device, initial-scale=1.0'>
    <titel></title>
    <link rel="stylesheet" href="./styles.css">
</head>
  <body>
    <main id='main-doc'>
      <section class='main-section' id='Hello_Kitty'>
        <header> Hello Kitty</header>
        <nav id='navbar'>
          <header>not empty</header>
        <ul>
          <li><a class='nav-link' href='Hello_Kitty'>Hello Kitty</a></li>
          <li><a class='nav-link' href='Hello_Kitty_ Design'>Hello Kitty Design</a></li>
          <li><a class='nav-link' href='Hello_Kitty_Idea'>Hello Kitty Idea</a></li>
          <li><a class='nav-link' href='Hello_Kitty_Creator'>Hello Kitty Creator</a></li>
          <li><a class='nav-link' href='Hello_Kitty_Impact'>Hello Kitty Impact</a></li>
          <li><a class='nav-link' href='Hello_Kitty'>Hello Kitty</a></li>
          <li><a class='nav-link' href='JavaScript_and_Java'>JavaScript and Java</a></li>
        </ul>
        </nav>
      </section>

      <section class='main-section' id='Hello_Kitty' id='HelloKitty-section' for='hellokitty'>
        <header id='hellokitty'>Hello Kitty</header>
        <p></p>
        <p></p>
        <code></code>
      </section>

      <section class='main-section' id='Hello_Kitty_Design' for='design'>
        <header id='design'>Hello Kitty Design</header>
        <p></p>
        <p></p>
        <code></code>
      </section>

      <section class='main-section' id='Hello_Kitty_Idea' for='idea'>
        <header id='idea'>Hello Kitty Idea</header>
        <p></p>
        <p></p> 
        <code></code>     
      </section>

      <section class='main-section' id='Hello_Kitty_Creator' for='creator'>
        <header id='creator'>Hello Kitty Creator</header>
        <p></p>
        <p></p>
        <code></code>
      </section>

      <section class='main-section' id='Hello_Kitty_Impact' for='impact'>
        <header id='impact'>Hello Kitty Impact</header>
        <p></p>
        <p></p>
        <code></code>
      </section>
      <section class='main-section' id='JavaScript_and_Java' for='JavaScript_and_Java'>
        <header id='JavaScript_and_Java'>JavaScript and Java</header>
        <p></p>
        <p></p>
        <code></code> 
      </section>

    </main>

  </body>
</html>

/* file: styles.css */
@media (max-width: 768px) {
  #main-section {
    margin:25 auto;
  }
}
body{
  background-color:green;
}

Your browser information:

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

Challenge: Technical Documentation Page - Build a Technical Documentation Page

Link to the challenge:

2

  • use “#” infront of these “href” values within “nav-link” elements

  • you have also used “Hello_Kitty” as an ID twice, change that and also look for any “similarities” that might “conflict” with “nav-links” href values

happy learning :slight_smile:

2 Likes
3

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