Technical Documentation Page - Build a Technical Documentation Page

Tell us what’s happening:

I haven’t set up any CSS styling yet however I am continuously not passing this step but I cannot find the typo or code error in my navbar.

Each .nav-link should have text that corresponds to the header text of its related section (e.g. if you have a “Hello world” section/header, your #navbar should have a .nav-link which has the text “Hello world”).

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="room design" />
    <title id="title">Room Design</title>
    <link rel="stylesheet" href="styles.css" />
</head>

<body>
  <nav id="navbar">
    <header>Room Decor</header>
    <a class="nav-link" href="#design_style">Room Design</a>
    <a class="nav-link" href="#general_colourway">General Colourway</a>
    <a class="nav-link" href="#choose_elements">Choose Elements</a>
    <a class="nav-link" href="#room_flow">Room Flow</a>
    <a class="nav-link" href="#plants_&_misc">Plants & Misc</a>
  </nav>
  <main id="main-doc">
    <section class="main-section" id="design_style">
      <header>Design Style</header>
      <p>Your room ultimately will take on the style you design it in. If you start purchasing a bunch of rustic looking items for it but want to design it with a thought to modern, you'll wind up with a hybrid or maybe more rustic room than anything. It's best to choose how you want to go forward and try to stick in that realm... if you want to. Some styles include:</p>
      <ul>
        <li>Mid-Century Modern</li>
        <li>Japandi</li>
        <li>Rustic</li>
        <li>Maximalist</li>
        <li>Bauhaus</li>
      </ul>
    </section>
    <section class="main-section" id="general_colourway">
      <header>General Colourway</header>
      <p>Once you have set yourself on how you plan to design and decorate the space, you'll want to decide on a general colourway, especially if you are going to be painting the walls as well. Of course, some styles kind of have specific pallettes you would typically choose from. A modern room is typically going to use white, black or various shades of either. Conversely, a more rustic room will likely contain browns, greens and more earthy tones.</p>
      <p>9</p>
      <p>10</p>
    </section>
    <section class="main-section" id="choose_elements">
      <header>Choose Elements</header>
      <p>Pick your pieces! It's time to start perusing for furniture. Regardless of the room it is, you'll need to look for things roughly in that style and general colorway. Looking for a couch for your rustic, cabin themed room? Look into brown leater sofas.</p>
      <p>Another example? Maybe you've decided to look into having a mid-century modern room. You would be best to choose a couch that is simple, neutral and had wood.</p>
    </section>
    <section class="main-section" id="room_flow">
      <header>Room Flow</header>
      <p>No matter the size of your room, there is always a better way to place your furniture and decor. You can really put a blockage in the way your room flows by placing just one piece off.</p>
      <p>This can tie into choosing elements. If you choose the wrong pieces, you can find yourself not able to really fit them properly into the space, either due to size or shape.
    </section>
    <section class="main-section" id="plants_&_misc">
      <header>Plants & Misc</header>
      <p>Plants are life! Bring them in to give your space some good aesthetics and also some fresh air and happiness.</p>

      <p>Good plants for rooms include:</p>
        <code>Fiddle leaf</code>
        <code>Sunflower</code>
        <code>Fern</code>
        <code>Carrots</code>
        <code>Fig Tree</code>
    </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/126.0.0.0 Safari/537.36

Challenge Information:

Technical Documentation Page - Build a Technical Documentation Page

The link above has label Room Design but it links to a header which is called Design Style.

This testcase wants to see that each link in the navbar is labelled in exactly the same way as the header element in the corresponding main-section element.

My hero. Thank you so much!

1 Like