Build a Technical Documentation Page

HTML-CSS
1

  • Failed: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”).

  • Failed: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).

I can’t seem to figure out why my code won’t pass these two requirements for this project. I haven’t done much styling for the page yet but I can’t imagine that is the source of the problem. Any help or thoughts would be greatly appreciated! :slight_smile:

<!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="Cole Smith CV"/>
    <link rel="stylesheet" href="styles.css"/>
  </head>
  <body>
      <nav id="navbar">
        <header>cole smith cv</header>
        <ul>
          <li><a class="nav-link" href="#colesmith">colesmith</a></li>
          <li><a class="nav-link" href="as_producer">as_producer</a></li>
          <li><a class="nav-link" href="as_musician">as musician</a></li>
          <li><a class="nav-link" href="education">education</a></li>
          <li><a class="nav-link" href="booking/contact">booking/contact</a></li>
        </ul>
      </nav>
  <main id="main-doc">
    <section class="main-section" id="colesmith">
        <header>colesmith</header>
        <code>
        <p>artist</p>
        <p>performer</p>
        </code>
    </section>
    <section class="main-section" id="as_producer">
        <header>as producer</header>
        <code>
        <p>Tradburner - TRADBURNER</p>
        <p>GALLOWS - BONESTRUCTURE</p>
        <p>TALLBOYETI EP<p>
        </code>
    </section>
    <section class="main-section" id="as_performer">
        <header>as performer</header>
        <code>
        <p>Tradburner - TRADBURNER</p>
          <ul>
            <li>bass</li>
            <li>moog sub 37</li>
            <li>guitar</li>
          </ul>
        <p>Bonestructure</p>
          <ul>
            <li>dj</li>
            <li>audio</li>
          </ul>
        </code>
    </section>
    <section class="main-section" id="education">
        <header>education</header>
        <code>
        <p>Bachelor's of Music in Jazz Guitar Performance</p>
        </code>
    </section>
    <section class="main-section" id="contact/booking">
        <header>contact/booking</header>
        <code>
        <p>3968 Panther St.Victoria, British Columbia</p>
        <p>phone # 250.826.0847</p>
        </code>
    </section
    </main>
  </body>
</html>

@media (prefers-reduced-motion: no-preference) {
  * {
    scroll-behavior: smooth;
  }
}

#navbar{
  width: 275px;
  height: 100%;
  background-color: #000000;
  display: flex;
  float: left;
}

nav > header > ul > li {
  color: #dfdfe2;
  margin: 0 0.2rem;
  padding: 1rem;
  display: block;
}

nav > header > ul > li:hover {
  background-color: #dfdfe2;
  color: #1b1b32;
  cursor: pointer;
  width:175px;
}
2

all internal links should being with the # because they reference the name of the ids of the elements.
(so you have # missing on 4 lines above)

Also each id should be exactly matching the id of the element it is referencing.

3

thank you! but after fixing what you mentioned above I am still not passing those two requirements.

<!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="Cole Smith CV"/>
    <link rel="stylesheet" href="styles.css"/>
  </head>
  <body>
      <nav id="navbar">
        <header>cole smith cv</header>
        <ul>
          <li><a class="nav-link" href="#colesmith">colesmith</a></li>
          <li><a class="nav-link" href="#as_producer">as_producer</a></li>
          <li><a class="nav-link" href="#as_musician">as_musician</a></li>
          <li><a class="nav-link" href="#education">education</a></li>
          <li><a class="nav-link" href="#booking/contact">booking/contact</a></li>
        </ul>
      </nav>
  <main id="main-doc">
    <section class="main-section" id="colesmith">
        <header>colesmith</header>
        <code>
        <p>artist</p>
        <p>performer</p>
        </code>
    </section>
    <section class="main-section" id="as_producer">
        <header>as producer</header>
        <code>
        <p>Tradburner - TRADBURNER</p>
        <p>GALLOWS - BONESTRUCTURE</p>
        <p>TALLBOYETI EP<p>
        </code>
    </section>
    <section class="main-section" id="as_musician">
        <header>as musician</header>
        <code>
        <p>Tradburner - TRADBURNER</p>
          <ul>
            <li>bass</li>
            <li>moog sub 37</li>
            <li>guitar</li>
          </ul>
        <p>Bonestructure</p>
          <ul>
            <li>dj</li>
            <li>audio</li>
          </ul>
        </code>
    </section>
    <section class="main-section" id="education">
        <header>education</header>
        <code>
        <p>Bachelor's of Music in Jazz Guitar Performance</p>
        </code>
    </section>
    <section class="main-section" id="contact/booking">
        <header>contact/booking</header>
        <code>
        <p>3968 Panther St.Victoria, British Columbia</p>
        <p>phone # 250.826.0847</p>
        </code>
    </section
    </main>
  </body>
</html>
4

check this again. Compare the id here with the nav-bar link

5

Okay, so fixed that stuff which eliminated one of the problems but still getting this error.

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”).

Probably just missing something super simple again…

<!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="Cole Smith CV"/>
    <link rel="stylesheet" href="styles.css"/>
  </head>
  <body>
      <nav id="navbar">
        <header>cole smith cv</header>
        <ul>
          <li><a class="nav-link" href="#colesmith">colesmith</a></li>
          <li><a class="nav-link" href="#as_producer">as_producer</a></li>
          <li><a class="nav-link" href="#as_musician">as_musician</a></li>
          <li><a class="nav-link" href="#education">education</a></li>
          <li><a class="nav-link" href="#booking/contact">booking/contact</a></li>
        </ul>
      </nav>
  <main id="main-doc">
    <section class="main-section" id="colesmith">
        <header>colesmith</header>
        <code>
        <p>artist</p>
        <p>performer</p>
        </code>
    </section>
    <section class="main-section" id="as_producer">
        <header>as producer</header>
        <code>
        <p>Tradburner - TRADBURNER</p>
        <p>GALLOWS - BONESTRUCTURE</p>
        <p>TALLBOYETI EP<p>
        </code>
    </section>
    <section class="main-section" id="as_musician">
        <header>as musician</header>
        <code>
        <p>Tradburner - TRADBURNER</p>
          <ul>
            <li>bass</li>
            <li>moog sub 37</li>
            <li>guitar</li>
          </ul>
        <p>Bonestructure</p>
          <ul>
            <li>dj</li>
            <li>audio</li>
          </ul>
        </code>
    </section>
    <section class="main-section" id="education">
        <header>education</header>
        <code>
        <p>Bachelor's of Music in Jazz Guitar Performance</p>
        </code>
    </section>
    <section class="main-section" id="booking/contact">
        <header>booking/contact</header>
        <code>
        <p>3968 Panther St.Victoria, British Columbia</p>
        <p>phone # 250.826.0847</p>
        </code>
    </section
    </main>
  </body>
</html>
6

The text as_producer doesn’t match the header (read the use case again if you don’t know what I mean)
Check the other lines as well.

1 Like
7

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