Build a Technical Documentation Page

HTML-CSS
1

I have everything solved besides the Linking part APPARENTLY. I’ve replicated all of it and I keep testing for any hooks n sinkers maybe caused by freeCodeCamp but i can’t figure it out.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bruh</title>
    <link rel="stylesheet" href="./styles.css">
</head>

<body>
    <nav id="navbar">
    <header>Why Doesn't It WORK</header>
    <ul>
        <li><a class="nav-link" href="#Introduction">Introduction</a></li>
        <li><a class="nav-link" href="#Butt">Butt</a></li>
        <li><a class="nav-link" href="#Apple">Apple</a></li>
        <li><a class="nav-link" href="#Fear">Fear</a></li>
        <li><a class="nav-link" href="#Nick">Nick</a></li>
    </ul>
</nav>
<section class="main-section" id="Introduction">
        <header>Introduction</header>
        <article></article>
    </section>
<section id="Butt" class="main-section">
        <header>Butt</header>
        <article></article>
    </section>
    <section id="Apple" class="main-section">
        <header>Apple</header>
        <article></article>
    </section>
    <section id="Fear" class="main-section">
        <header>Fear</header>
        <article></article>
    </section>
    <section id="Nick" class="main-section">
        <header>Nick</header>
        <article></article>
    </section>
    
   
</body>
</html>

I can’t figure it out for the life of me

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

ERROR^^

2

hello! Hope you’re fine! The problem is your href! Your href for the link in the head is not correct!

2 Likes
3 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bruh</title>
    <link rel="stylesheet" href="styles.css">
</head>

This wasn’t affecting it. This just links to the stylesheet. Common practice is ./filename
(i was building this in VSC)

I changed it and it still doesnt work

(the dot refers to the folder if I remember correctly)

1 Like
4

Reply with your CSS code as well, using the HTML code only displayed a lot of unresolved issues.

1 Like
5

I’m just trying to solve this atm:
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”).

The other ones are pretty simple to solve. This one is the only error I get.
I forgot to mention that I did this as a mock up to test why the .nav-link here doesn’t work. It doesn’t recognize the Header & a-text as the same. I do not know why

6 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bruh</title>
    <link rel="stylesheet" href="styles.css">
</head>

<body>
    <nav id="navbar">
    <header id="main-header">Why Doesn't It WORK</header>
    <ul>
        <li><a class="nav-link" href="#introduction">Introduction</a></li>
        
    </ul>
</nav>
<main id="main-doc">
<section class="main-section" id="introduction">
        <header>Introduction</header>
        <article><p>introduction Introduction</p></article>
    </section>
</main
    
   
</body>
</html>

Here is more testing. I stripped it down to just ONE header and it DOES NOT work.
It shouldn’t flag this, but it does. I literally made the p tag w/ the text. Im moving on from this project, if anyone can tell me why freeCodeCamp thinks mine has an issue I would love to know.

At this point I’m almost 100% I did the assignment correctly since I get no issues besides this w/ my actual project, but this has taken up too much time.

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

7

Solution found. The issue was that I had been hiding my Navbar if the screen got too small (i set the visibility to hidden) and it didnt like that. I had no issues. Once I had shown the navbar at end it was happy.

8

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