Hi!
I´m doing the Technical Documentation Page and I don´t know why my main-doc class and header nav bar tasks are wrong.
Can any of you guys help me?
https://codepen.io/Vitaminar/pen/YzyjKGd?editors=1100
Each element with the class of “main-section” should also have an id comprised of the innerText contained within it, with underscores in place of spaces. The id may include special characters if there are special characters in the respective innerText. (e.g. The that contains the header, “JavaScript & Java”, should have a corresponding id=“JavaScript_&_Java”).
-
Additionally, the navbar should contain link () elements with the class of “nav-link”. There should be one for every element with the class “main-section”.
-
When I click on a navbar element, the page should navigate to the corresponding section of the “main-doc” element (e.g. If I click on a “nav-link” element that contains the text “Hello world”, the page navigates to a element that has that id and contains the corresponding .
<nav id="navbar">
<header id="header0">
<ul>
<li class="navlink"><a class="nav-link" href="#html-first-experience">HTML first experience</a></li>
<li class="navlink"><a class="nav-link" href="#css-first-experience">CSS first experience</a></li>
<li class="navlink"><a class="nav-link" href="#what-comes-next">What comes next</a></li>
<li class="navlink"><a class="nav-link" href="#JavaScript_and_Java">JavaScript & Java</></li>
<li class="navlink"><a class="nav-link" href="#goals">Goals</a></li>
</ul>
</header>
</nav>
<main id="main-doc">
<h1>Learning Code</h1>
<section class="main-section" id="html-first-experience">
<header class="h2"> HTML first experience</header>
<article>
<br/>
<h3>I didn´t know where to start coding then I searched in reddit and then I found it... a gift from GODS in Olympus, a tottaly free codding camp,<code> FREECODECAM</code>, was there my journey started with html, then css, and after this Javascript!!! After some tests and hours of youtbe videos reposted in their YouTube channel I start making this websites for my portofolio.<p> I´m far for a developer, but I appreciate soo much this organization to get me and thousands starting on this way of life.</p></h3>
</section>
<section class="main-section" id="css-first-experience">
<header class="h2">CSS first experience</header>
</br>
<h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris convallis turpis venenatis lobortis porttitor. Ut pulvinar bibendum urna sit amet vehicula.<p> Ut pharetra nibh eu imperdiet commodo. Integer placerat nibh sit amet eros vehicula aliquam. Nunc et consectetur nisl, in maximus risus. Curabitur eleifend efficitur semper.</p> </h3>
<br/>
</article>
</section>
<section class="main-section" id="what-comes-next">
<header class="h2">What comes next</header>
<article>
<h3><p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maurisconvall is turpis venenatis lobortis porttitor. </p>Ut pulvinar bibendum urna sit amet vehicula. Ut pharetra nibh eu imperdiet commodo. Integer placerat nibh sit amet eros vehicula aliquam. Nunc et consectetur nisl, in maximus risus. Curabitur eleifend efficitur semper. Etiam mollis ultricies hendrerit. Nunc fermentum dignissim orci, nec varius risus scelerisque a. Donec consequat leo dolor, at posuere ipsum volutpat vitae. In tempus est eu turpis sollicitudin, sit amet ullamcorper elit congue. Nulla mollis laoreet tempor. Aenean eleifend enim eget lacus hendrerit, porta imperdiet odio laoreet.<p> Sed malesuada vehicula leo, sit amet laoreet justo consectetur pharetra. Integer porta facilisis hendrerit. Integer ex lectus, eleifend vel orci vitae, consequat mattis urna. Integer finibus ultrices velit in egestas.</p>
<p>Morbi scelerisque urna turpis. Fusce dignissim nunc vitae nisl fermentum pellentesque. Proin tempus felis magna, in imperdiet sapien rutrum lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a elementum sem. Nunc finibus orci at risus congue mattis. Nunc sed tristique ipsum. Sed sed elementum nisl, sed rhoncus nisi. Aliquam pretium eu eros in facilisis. Integer porttitor eros sapien.</p>
<p>Mauris sollicitudin ex mi, eu finibus velit finibus id. Sed pellentesque non nulla in laoreet. Donec convallis urna quis erat ornare, id egestas libero viverra. Donec convallis fringilla risus, ac eleifend ex posuere tristique. Donec dictum ante vitae dignissim placerat. Mauris sit amet purus ac mi laoreet rutrum eget mattis lorem. Etiam id dolor leo.</p> </h3>
<br/>
</article>
</section>
<section class="main-section" id="JavaScript_&_Java">
<header class="h2">JavaScript & Java</header>
<article>
<h3><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris convallis turpis venenatis lobortis porttitor. Ut pulvinar bibendum urna sit amet vehicula. Ut pharetra nibh eu imperdiet commodo. Integer placerat nibh sit amet eros vehicula aliquam. Nunc et consectetur nisl, in maximus risus.</p> Curabitur eleifend efficitur semper. Etiam mollis ultricies hendrerit. Nunc fermentum dignissim orci, nec varius risus scelerisque a. Donec consequat leo dolor, at posuere ipsum volutpat vitae. In tempus est eu turpis sollicitudin, sit amet ullamcorper elit congue. Nulla mollis laoreet tempor. Aenean eleifend enim eget lacus hendrerit, porta imperdiet odio laoreet. Sed malesuada vehicula leo, sit amet laoreet justo consectetur pharetra. Integer porta facilisis hendrerit.<p> Integer ex lectus, eleifend vel orci vitae, consequat mattis urna.</p> Integer finibus ultrices velit in egestas. </h3>
<br/>
</article>
</section>
<section class="main-section" id="goals">
<header class="h2">Goals</header>
<article>
<h3> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris convallis turpis venenatis lobortis porttitor. Ut pulvinar bibendum urna sit amet vehicula. Ut pharetra nibh eu imperdiet commodo. Integer placerat nibh sit amet eros vehicula aliquam. Nunc et consectetur nisl, in maximus risus. Curabitur eleifend efficitur semper. Etiam mollis ultricies hendrerit. Nunc fermentum dignissim orci, nec varius risus scelerisque a. Donec consequat leo dolor, at posuere ipsum volutpat vitae. In tempus est eu turpis sollicitudin, sit amet ullamcorper elit congue. Nulla mollis laoreet tempor. Aenean eleifend enim eget lacus hendrerit, porta imperdiet odio laoreet. Sed malesuada vehicula leo, sit amet laoreet justo consectetur pharetra. Integer porta facilisis hendrerit. Integer ex lectus, eleifend vel orci vitae, consequat mattis urna. Integer finibus ultrices velit in egestas.</p>
<p>Morbi scelerisque urna turpis. Fusce dignissim nunc vitae nisl fermentum pellentesque. Proin tempus felis magna, in imperdiet sapien rutrum lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a elementum sem. Nunc finibus orci at risus congue mattis. Nunc sed tristique ipsum. Sed sed elementum nisl, sed rhoncus nisi. Aliquam pretium eu eros in facilisis. Integer porttitor eros sapien.</p>
<p>Mauris sollicitudin ex mi, eu finibus velit finibus id. Sed pellentesque non nulla in laoreet. Donec convallis urna quis erat ornare, id egestas libero viverra. Donec convallis fringilla risus, ac eleifend ex posuere tristique. Donec dictum ante vitae dignissim placerat. Mauris sit amet purus ac mi laoreet rutrum eget mattis lorem. Etiam id dolor leo.</p>
<ol>
<h2>Step by step</h2>
<li><code>Learn new languages</code></li>
<li><code>Do individual projects</code></li>
<li><code>Improve laguange knowledge</code></li>
<li><code>Do new individual projects and compare to the olders ones</code></li>
<li><code>Repeat</code></li>
</ol>
</h3>
</article>
</section>
</main>
<script defer src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>