Build a Technical Documentation Page | nav-link , media query,

[tufu]

I’m working on the project 【 Build a Technical Documentation Page 】

I almost complete the course, but there’s 2 tests i didnt pass, and not sure how to fix it.

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

  <nav id="navbar">
    <header>JS Documentation</header>
    <ul>
      <li><a class="nav-link" href="#Introduction">Introduction</a></li>

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

<link rel="stylesheet" href="styles.css">

Codepen : https://codepen.io/Gugukk/pen/oNqayEg

Thanks in advance.

[bbsmooth]

For the first issue, you’ve got some unwanted characters in some of the link text in your nav menu. You just need to go through each one very carefully until you find them.

For the second issue, you don’t have a media query in your CSS.

MDN: Using media queries

[tufu]

finally fixed

1. Each .nav-link should have text that corresponds to the header text of its related section

Before

<li><a class="nav-link" href="#Variable_scope">Variable_scope</a></li>
<li><a class="nav-link" href="#Global_variables">Global_variables</a></li>

After

<li><a class="nav-link" href="#Variable_scope">Variable scope</a></li>
<li><a class="nav-link" href="#Global_variables">Global variables</a></li>

2. Try to add a media query in CSS.

@media (any-hover: hover) {
  a:hover {
    background: yellow;
  }
}