I’m struggling with no. 19 and 20 on this particular challenge.
1 9. 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”).
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).
I have tried a lot of research, as well as triple checking all of my capitalization and spacing. Does anyone have any insight on where I’m going wrong on steps 19 & 20?
It also keeps telling me that I need 6 .main-sections despite the minimum being 5 and my doc only having 5 .nav-links. I don’t know where I’m going wrong.
Your code so far
<!DOCTYPE html>
<html lang="en">
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
</head>
<main id="main-doc">
<h1 id="title">HTML Application Check</h1>
<!----------NavBar------------->
<nav id="navbar">
<header>This page will cover some very basic HTML concepts.</header>
<nav> <a class="nav-link" href="#What_is_HTML?">What is HTML?</a></nav>
<nav><a class="nav-link" href="#Using_Tags">Using Tags</a>
</nav>
<nav><a class="nav-link" href="#CSS_Design">CSS Design</a></nav>
<nav ><a class="nav-link" href="#Now_What?">Now What?</a></nav>
<nav><a class="nav-link" href="#Your_Thoughts">Your Thoughts</a></nav>
</nav>
<!------Section 1------>
<section class="main-section" id="What_is_HTML?">
<header>
<h2 id="title">What is HTML?</h2>
</header>
<p>Html is a coding language that is broadly used to design webpages and other electronic communications. While it is widely seen as an entry-level coding language, it is still a powerful tool that anyone can use.</p>
</section>
<!------Section 2------>
<section class="main-section" id="Using_Tags">
<header>
<h2 id="title" class="sub-header">Using Tags</h2>
</header>
<p><code class="emphasis">Tags</code> utilize the "<" and ">" symbols to begin and close an <a class="sources" href="https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Basic_HTML_syntax">HTML</a> element. By sandiwching a tag between the two symbols (i.e."< _____ >"), you can open an element's tag and call its function.</p>
<p>Most elements require a closing indicator, so that the console will know when to end its function. To close an element's tag, utilize the back-slash or "/" symbol at the start of a closing tag's brackets. (i.e. " < /_____ >")
<p>There will be some elements who do not require a closing tag. These are known as "void" elements.</p>
<h3 id="title" class="sub-header">Some common <a class="sources" href="https://developer.mozilla.org/en-US/docs/Glossary/Void_element">void elements</a> would be:</h3>
<ul>
<li>"img"</li>
<li>"meta"</li>
<li>"input"</li>
</ul>
</section>
<!--------Section 3------->
<section class="main-section" id="CSS_Design">
<header>
<h2 id="title" class="sub-header">CSS Design</h2>
</header>
<p>Each of your elements can be styled by using <a class="sources" href="https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics">CSS</a> or <code class="emphasis">"Cascading Style Sheets."</code> You can add CSS design and formatting to elements by adding different identifiers to your elements in their opening tags.</p>
<p>Some of these identifiers include things like "class" or "id". These are useful for targeting multiple elements that are similiar in purpose. You can target your different elements and their identifiers by using <code class="emphasis">"selectors"</code>.</p>
<p>Once you've called an element, or groups of like-elements using your selectors, you can add and adjust different <code class="emphasis">properties</code> by sandiwching their <code class="emphasis">parameters</code> between the "{ }" symbols.</p>
<h3>Some common parameters would be:</h3>
<ul>
<li>color/background-color</li>
<li>font-style</li>
<li>display</li>
</ul>
</section>
<!------Section 4------>
<section class="main-section" id="Now_What?">
<header>
<h2 class="sub-header">Now What?</h2>
</header>
<p>Well, that's kind of up to you! The amazing thing about HTML is its accesibility. Now you have the power of computer programming at your fingertips! </p>
<p>Perhaps you'll use it to design the next great resource for information! Or maybe, you'll build a heartwarming database of cute animals.</p>
</section>
<!------Section 5------>
<section classs="main-section" id="Your_Thoughts">
<header>
<h2 class="sub-header">Your Thoughts</h2>
</header>
<form action="./submit_page" method="get">
<input for="radio_feedback" id="survey" class="user_input" type="radio" name="survey" required>This was well done.
<input for="radio_feedback"id="survey" class="user_input" type="radio" name="survey" required>There is much room to grow.
<textarea class="feedback" rows="3" cols="50" placeholder="Let us know in detail how we did! (:"></textarea>
<button target="_blank" id="form_submit" type="submit">Submit</button>
</form>
</section>
<!------Section 6------>
<section class="main-section" id="Thank_you_for_perusing_my_hard_work!">
<header>
<h2>Thank you for perusing my hard work!</h2>
</header>
<p>I have appreciated your time and energy!</p>
</section>
</main>
</html>
Okay! Thank you for this, as adding the body element (for whatever reason) solved 19 & 20. Also, did not know about the “Format Doc” function, so nifty!
HOWEVER now no.17 “You should have the same number of .nav-link and .main-section elements.” now comes back with an error??? Any further insights? Should I post the updated (and formatted :P) code in a reply? I’m pretty new here so I don’t want to commit any faux pas.
Thank you for that clarification! I have the code pasted below:
<!DOCTYPE html>
<html lang="en">
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
</head>
<main id="main-doc">
<h1 id="title">HTML Application Check</h1>
<!----------NavBar------------->
<nav id="navbar">
<header>This page will cover some very basic HTML concepts.</header>
<uo>
<li> <a class="nav-link" href="#What_Is_HTML?">What is HTML?</a></li>
<li><a class="nav-link" href="#Using_Tags">Using Tags</a>
</li>
<li><a class="nav-link" href="#CSS_Design">CSS Design</a></li>
<li><a class="nav-link" href="#Now_What?">Now What?</a></li>
<li><a class="nav-link" href="#Your_Thoughts">Your Thoughts</a></li>
<li><a class="nav-link" href="#Pop_Quiz">Pop Quiz</a></li>
</uo>
</nav>
<body>
<!------Section 1------>
<section class="main-section" id="What_Is_HTML?">
<header>
<h2 id="title">What is HTML?</h2>
</header>
<p>Html is a coding language that is broadly used to design webpages and other electronic communications. While it
is widely seen as an entry-level coding language, it is still a powerful tool that anyone can use.</p>
</section>
<!------Section 2------>
<section class="main-section" id="Using_Tags">
<header>
<h2 id="title" class="sub-header">Using Tags</h2>
</header>
<p><code class="emphasis">Tags</code> utilize the "<" and ">" symbols to begin and close an <a class="sources"
href="https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Basic_HTML_syntax">
HTML</a> element. By sandiwching a tag between the two symbols (i.e."< _____>"), you can open an element's tag
and call its function.</p>
<p>Most elements require a closing indicator, so that the console will know when to end its function. To close an
element's tag, utilize the back-slash or "/" symbol at the start of a closing tag's brackets. (i.e. " < /_____>
")
<p>There will be some elements who do not require a closing tag. These are known as "void" elements.</p>
<h3 id="title" class="sub-header">Some common <a class="sources"
href="https://developer.mozilla.org/en-US/docs/Glossary/Void_element">void elements</a> would be:</h3>
<ul>
<li>"img"</li>
<li>"meta"</li>
<li>"input"</li>
</ul>
</section>
<!--------Section 3------->
<section class="main-section" id="CSS_Design">
<header>
<h2 id="title" class="sub-header">CSS Design</h2>
</header>
<p>Each of your elements can be styled by using <a class="sources"
href="https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics">CSS</a> or
<code class="emphasis">"Cascading Style Sheets."</code> You can add CSS design and formatting to elements by
adding different identifiers to your elements in their opening tags.
</p>
<p>Some of these identifiers include things like "class" or "id". These are useful for targeting multiple elements
that are similiar in purpose. You can target your different elements and their identifiers by using
<code class="emphasis">"selectors"</code>.
</p>
<p>Once you've called an element, or groups of like-elements using your selectors, you can add and adjust
different
<code class="emphasis">properties</code> by sandiwching their <code class="emphasis">parameters</code> between
the
"{ }" symbols.
</p>
<h3>Some common parameters would be:</h3>
<ul>
<li>color/background-color</li>
<li>font-style</li>
<li>display</li>
</ul>
</section>
<!------Section 4------>
<section class="main-section" id="Now_What?">
<header>
<h2 class="sub-header">Now What?</h2>
</header>
<p>Well, that's kind of up to you! The amazing thing about HTML is its accesibility. Now you have the power of
computer programming at your fingertips! </p>
<p>Perhaps you'll use it to design the next great resource for information! Or maybe, you'll build a heartwarming
database of cute animals.</p>
</section>
<!------Section 5------>
<section classs="main-section" id="Your_Thoughts">
<header>
<h2 class="sub-header">Your Thoughts</h2>
<p>I am new to this, and value your feedback. Cheers!</p>
</header>
<form action="./submit_page" method="get">
<input for="radio_feedback" id="survey" class="user_input" type="radio" name="survey" required>This was well done.
<input for="radio_feedback"id="survey" class="user_input" type="radio" name="survey" required>There is much room to grow.
<textarea class="feedback" rows="3" cols="50" placeholder="Let us know in detail how we did! (:"></textarea>
<button target="_blank" id="form_submit" type="submit">Submit</button>
</form>
</section>
<!------Section 6------>
<section class="main-section" id="Pop_Quiz">
<header>
<h2>Pop Quiz</h2>
</header>
<p>I'm just kidding, this is for you to take up and try, or not! Isn't that the joy of learning?</p>
</section>
</body>
<footer id="Thank_you_for_perusing_my_hard_work!">
<header>
<h2>Thank you for perusing my hard work!</h2>
</header>
<p>I have appreciated your time and energy!</p>
</footer>
</main>
</html>
</html>
While I appreciate the HTML validator, I am new to coding. It does not really help me understand what is wrong with the code, which is why I turned to the community. As I understand it, this is supposed to be a communal experience where the more seasoned coders help the younger ones learn, no? I will keep using the validator until the interface makes more sense, but a long list of errors and jargon I don’t understand isn’t helping me learn.
It will be useful to learn to use the validator so you might as well do it. Otherwise you are asking the people here to do the work of an automated tool instead of learning to do it yourself, and you should be learning.
Which one are you using? Some are more clear than others.
If you have questions about the results of the validator then ask here.
This is exactly what will help you learn. If there’s something you don’t understand, search for it or ask here. Eventually you will understand it all.
