Technical Documentation Page - Build a Technical Documentation Page

Tell us what’s happening:
You should have the same number of .nav-link and .main-section elements.

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

Your Technical Documentation project should use at least one media query.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8"/>
    </head>
    <main id="main-doc">
      <nav id="navbar"><header id="nav-bar"><a class="nav-link">Main Menu</header>
        <ul><a class="nav-link" href="Create_an_Account">Create an Account</a>
        <a class="nav-link" href="Gallery">Gallery</a>
        <a class="nav-link" href="Meet_Our_Stylists">Meet Our Stylists</a>
        <a class="nav-link" href="Book_an_Appointment">Book an Appointment</a>
        <a class="nav-link" href="Contact_Us">Contact Us</a>
        </ul>
        </nav>
        
      
      <section class="main-section" id="Create_an_Account"><header>Create an Account</header>
      <li>Schedule a time with us!</li>
      <p>Create an account with us today in order to book an appointment.</p>
        <p> Plus, you will gain access to exclusive promotions.</p>
        <code>Account</code>
        </section>
        <section class="main-section" id="Gallery"><header>Gallery</header>
          <li>Take a look at our salon!</li>
          <p><image id="salon" src="https://www.google.com/url?sa=i&url=https%3A%2F%2Fwww.nickellebeauty.com%2F&psig=AOvVaw1f5IU1j4kqh87ltKOnWp3i&ust=1666274898576000&source=images&cd=vfe&ved=0CAwQjRxqFwoTCMDf4e277PoCFQAAAAAdAAAAABAE" alt="Our Salon"></image></p>
          <p><image id="hair" src="https://www.google.com/url?sa=i&url=https%3A%2F%2Fwww.thetrendspotter.net%2Flong-hairstyles-for-women%2F&psig=AOvVaw0fi9KnJY2-mitP8pmZpwMo&ust=1666274973924000&source=images&cd=vfe&ved=0CAwQjRxqFwoTCKD535G87PoCFQAAAAAdAAAAABAF" alt="Hair Model"></image></p>
          <code>Picture</code>
        </section>
        <section class="main-section" id="Meet_Our_Stylists" ><header>Meet Our Stylists</header>
        <li>Our top stylists</li>
          <p>Yolis is our founder and master hair colorist. </p>
          <p>Nico is our haircut expert.</p>
          <code> Our Stylists</code>
        </section>
        <section class="main-section" id="Book_an_Appointment"><header>Book an Appointment</header>
        <li>Let us make you feel beautiful!</li>
          <p>Click on the Calender to view available appointments.</p>
          <p>Select your stylist from the available time slots</p>
          <code>Appointment</code>
        </section>
        <section class="main-section" id="Contact_Us"><header>Contact Us</header>
        <li>You can contact us throught the following methods:
          <p>Our phone number is 555-6849</p>
          <p>Email us at colorexpertsbeautysalon@gmail.com</p>
    <code>Contact Us</code>
        </section>
      </main>

  </html>
/* file: styles.css */
h1 {
  font-weight: bold; 

}

p{

}
@media (max-width:1576px){
  #navbar {width: 375px}
}

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) 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:

first problem is you have not included a link to the stylesheet (the exercise I believe mentions this is a requirement)

Second issue I noticed:
your nav links are missing the hashtag that will make them work internally to the page
eg.

href="Gallery"

this will not link anywhere. Add # to it so it links to the id #Gallery.

1 Like

Thank you! Do you know why it’s saying i dont have the same amount of .nav-link and .main-section elements? i see five of each.

try fixing the 2 points mentioned then repost your code here and I will investigate it further

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8"/>
    <link href="styles.css"></link>
    </head>
    <main id="main-doc">
      <nav id="navbar"><header id="nav-bar"><a class="nav-link">Main Menu</header>
        <ul><a class="nav-link" href="#Create_an_Account">Create an Account</a>
        <a class="nav-link" href="#Gallery">Gallery</a>
        <a class="nav-link" href="#Meet_Our_Stylists">Meet Our Stylists</a>
        <a class="nav-link" href="#Book_an_Appointment">Book an Appointment</a>
        <a class="nav-link" href="#Contact_Us">Contact Us</a>
        </ul>
        </nav>
        
      
      <section class="main-section" id="Create_an_Account"><header>Create an Account</header>
      <li>Schedule a time with us!</li>
      <p>Create an account with us today in order to book an appointment.</p>
        <p> Plus, you will gain access to exclusive promotions.</p>
        <code>Account</code>
        </section>
        <section class="main-section" id="Gallery"><header>Gallery</header>
          <li>Take a look at our salon!</li>
          <p><image id="salon" src="https://www.google.com/url?sa=i&url=https%3A%2F%2Fwww.nickellebeauty.com%2F&psig=AOvVaw1f5IU1j4kqh87ltKOnWp3i&ust=1666274898576000&source=images&cd=vfe&ved=0CAwQjRxqFwoTCMDf4e277PoCFQAAAAAdAAAAABAE" alt="Our Salon"></image></p>
          <p><image id="hair" src="https://www.google.com/url?sa=i&url=https%3A%2F%2Fwww.thetrendspotter.net%2Flong-hairstyles-for-women%2F&psig=AOvVaw0fi9KnJY2-mitP8pmZpwMo&ust=1666274973924000&source=images&cd=vfe&ved=0CAwQjRxqFwoTCKD535G87PoCFQAAAAAdAAAAABAF" alt="Hair Model"></image></p>
          <code>Picture</code>
        </section>
        <section class="main-section" id="Meet_Our_Stylists" ><header>Meet Our Stylists</header>
        <li>Our top stylists</li>
          <p>Yolis is our founder and master hair colorist. </p>
          <p>Nico is our haircut expert.</p>
          <code> Our Stylists</code>
        </section>
        <section class="main-section" id="Book_an_Appointment"><header>Book an Appointment</header>
        <li>Let us make you feel beautiful!</li>
          <p>Click on the Calender to view available appointments.</p>
          <p>Select your stylist from the available time slots</p>
          <code>Appointment</code>
        </section>
        <section class="main-section" id="Contact_Us"><header>Contact Us</header>
        <li>You can contact us throught the following methods:
          <p>Our phone number is 555-6849</p>
          <p>Email us at colorexpertsbeautysalon@gmail.com</p>
    <code>Contact Us</code>
        </section>
      </main>

  </html>

I’ve edited your code for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

this is supposed to be a link?

Oh i see. That wasn’t supposed to be in there. Thanks for the help :slight_smile:

1 Like

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