Technical Documentation Page - Steps 12 and 13

Hi guys, I’ve been stuck on the Technical Documentation project steps 12 and 13 for some time. The tests keep saying my nav-link texts do not correspond to the header text of my related section and that my nav-links do not have an href attribute that links to the corresponding main section. Would appreciate if anyone could help. Thank you!
(Also, I can only put 2 links on the forum so only 2 nav-links show up)

My code:

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

<main id="main-doc">

<section class="main-section" id="introduction">

<header>Introduction</header>

<p>Choose from a range of car brands </p>

<p><code>Car brands are in chronological order</code></p>

</section>

<nav id="navbar">

<section class="main-section" id="car_brand">

<header>Car Brand</header>

<ul>

<li>

<a class="nav-link" href="#Audi_Car_Brand" id="car_brand">Audi Car Brand</a>

</li>

<li>

<a class="nav-link" href="#BMW_Car_Brand" id="car_brand">BMW Car Brand</a>

</li>


</ul>

</nav>

</section>

<section class="main-section" id="choose_your_model">

<header>Choose your model</header>

<p>Choose from the sedan range or the SUV range</p>

<p>Choose a model type</p>

</section>

<section class="main-section" id="exterior_colour">

<header>Exterior colour</header>

<p>Choose a colour from the <code>Pastel Range</code> and the Dark Range</p>

<p>Choose a tyre rim</p>

</section>

<section class="main-section" id="interior_colour">

<header>Interior colour</header>

<p>Choose between high-quality full-leatherette trim and half leather, half mild-leather </p>

<p>Look out for <code>price differences!</code></p>

</section>

<section class="main-section" id="upholstery_and_trims">

<header><code>Upholstery and trims</code></header>

<p>Choose a material for trim e.g. dark wood</p>

<p>Choose from a range of cool <code>gears!</code></p>

</section>

</main>

You’ll need to wrap your HTML in triple back ticks so we can see the actual code instead of the results. The following explains how to do that.

To display your code in here you need to wrap it in triple back ticks. On a line by itself type three back ticks. Then on the first line below the three back ticks paste in your code. Then below your code on a new line type three more back ticks. The back tick on my keyboard is in the upper left just above the Tab key and below the Esc key. You may also be able to use Ctrl+e to automatically give you the triple back ticks while you are typing in the this editor and the cursor is on a line by itself. Alternatively, with the cursor on a line by itself, you can use the </> button above the editor to add the triple back ticks.

Where is the corresponding section for this link?

The corresponding section is the one with the id of ‘car_brand’ above.

So is the link text Audi Car Brand the same as the header text for that section?

If you click on the Audi Car Brand link does it take you to that section (assuming there was enough content on the page to cause scrolling)?

Well, the link text isn’t exactly the same as the header text but the “Car Brand” part is, and the test instruction said “Each .nav-link should have text that corresponds to the header text of its related section”, which means that the nav-link text just needs to contain the header text and not have exactly the same text, I’m assuming.
When I click on the Audi Car Brand text, it doesn’t really do anything except turn red.

Ya, in this case, the assumption is wrong. They must be exactly the same. I suppose I can see the ambiguity with the word “corresponds”. If you feel strongly enough about it then you can open a github issue. But the test instruction does give an example to clarify:

(e.g. if you have a “Hello world” section/header, your navbar should have an element which contains the text “Hello world”)

Correct, for two reason. One, you don’t have enough content on the page to cause it to scroll even if it was working correctly. You can add a bunch of filler content if you want to see the scroll. Two, when you want to create an internal link, where does the href attribute need to point to?

I changed it all of the nav-links text to "Car Brand’, the same as the header text but the test is still not working

So you have both nav links with the text “Car Brand”? That doesn’t seem right. Each link should go to a different section. Also, the problem wasn’t just with the link text but also the href value for the links as well.

In the future, if you make changes and want us to look a them then please paste your update code in here so we can see exactly what you did.

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