Technical Documentation Page - Build a Technical Documentation Page

HTML-CSS
1

Hi guys i kinda need help i get the error that: " 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." i don’t understand what i did wrong…

Describe your issue in detail here.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="styles.ccs"/>
  </head>
  <body>
    <main id="main-doc">JS Documentation
    <section id="Introduction"class="main-section"><header>Introduction</header><p></p><p></p><code></code><li></li></section>
    <section id="What_you_should_already_know"class="main-section"><header>What you should already know</header><p></p><p></p><code></code><li></li></section>
    <section id="JavaScript_and_Java"class="main-section"><header>JavaScript and Java</header><p></p><p></p><code></code><li></li></section>
    <section id="Hello_World"class="main-section"><header>Hello World</header><p></p><p></p><code></code><li></li></section>
    <section id="Variables"class="main-section"><header>Variables</header><p></p><p></p><code></code><li></li></section>
    
    <nav id="navbar">
    <header>JS Documentation</header>

    <a class="nav-link" #href="Introduction">Introduction</a>

<a class="nav-link" #href="What_you_should_already_know">What you should already know</a>

<a class="nav-link" #href="JavaScript_and_Java">JavaScript and Java</a>

    <a class="nav-link" #href="Hello_World">Hello World</a>

    <a class="nav-link" #href="Variables">Variables</a>
    </nav>
    </main>
    </body>
    </html>

/* file: styles.css */
#navbar {
  position: fixed;
left:0;
padding:20px;
}

#navbar header {
  font-size:1.618em;
  margin-bottom: 7;
}

#navbar a {
  text-decoration: none;
  diplay:block;
  margin-bottom:12px;
}

#main-doc {
  margin-left:200px;
}

@media (max-width:600px;) {
  .main-section {
    font-size: .7;
     }
    }

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/116.0.0.0 Safari/537.36 OPR/102.0.0.0

Challenge Information:

Technical Documentation Page - Build a Technical Documentation Page

1 Like
2

href …delete the #

1 Like
3

Move it here:

<a href="#bla bla"></a>
2 Likes
4

you have a tipo styles.css

2 Likes
5

thank you, it worked

2 Likes