Technical Documentation Page - Build a Technical Documentation Page

HTML-CSS
1

Tell us what’s happening:

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 the solution as for me the href links are connected with the section elements with the same id.

Any help would be much appreciated!

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">
    <title>CSS Document</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
<nav id="navbar">
<header>CSS Documentation</header>
 <ul>
  <li> <a href="What_is_CSS?" class="nav-link">What is CSS?</a></li>
  <li> <a href="Anatomy_of_a_CSS_ruleset" class="nav-link">Anatomy of a CSS ruleset</a></li>
  <li> <a href="CSS:_all_about_boxes" class="nav-link">CSS: all about boxes</a></li>
  <li> <a href="Changing_the_page_color" class="nav-link">Changing the page color</a></li>
  <li> <a href="Styling_the_body" class="nav-link">Styling the body</a></li>
  <li> <a href="Centering_the_image" class="nav-link">Centering the image</a></li>
  <li> <a href="Positioning_and_styling_the_main_page" class="nav-link">Positioning and styling the main page</a></li>
 </ul>
</nav>

  <main id="main-doc">
    <section class="main-section" id="What_is_CSS?">
        <header>What is CSS?</header>
        <p></p>
        <code></code>
    </section>
    <section class="main-section" id="Anatomy_of_a_CSS_ruleset">
        <header>Anatomy of a CSS ruleset</header>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
    </section>
    <section class="main-section" id="CSS:_all_about_boxes">
        <header>CSS: all about boxes</header>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
    </section>
    <section class="main-section" id="Changing_the_page_color">
        <header>Changing the page color</header>
        <code></code>
        <p></p>
    </section>
    <section class="main-section" id="Styling_the_body">
        <header>Styling the body</header>
        <code></code>
        <p></p>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </section>
    <section class="main-section" id="Centering_the_image">
        <header>Centering the image</header>
        <code></code> 
        <p></p>
        <p></p>  
    </section>
    <section class="main-section" id="Positioning_and_styling_the_main_page">
        <header>Positioning and styling the main page</header>
        <code></code> 
        <p></p>
    </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/128.0.0.0 Safari/537.36 Edg/128.0.0.0

Challenge Information:

Technical Documentation Page - Build a Technical Documentation Page

2

your nav-link href attributes should all start with a # to link to the internal elements.

for eg. <a href="#internal-id"></a>

2 Likes
3

Thanks a lot and make sense as you would apply # to target id selectors with styling in css.

2 Likes