Hello everyone,
I spent the last day trying to solve this last step i have that i can’t pass:
“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 went through my code a number of times to try and catch what i am missing, but no success. I confirmed that when i click on the nav link sections in the navigation bar, they take me to the correct section in the body of the document. I am not sure what is going on.
Any guidance is much appreciated.
WARNING
The challenge seed code and/or your solution exceeded the maximum length we can port over from the challenge.
You will need to take an additional step here so the code you wrote presents in an easy to read format.
Please copy/paste all the editor code showing in the challenge from where you just linked.
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="keyword" content="html, how to, coding, css">
<meta name="description" content="intro to html">
<link rel="stylesheet" href="styles.css">
<title>Learn HTML</title>
</head>
<body>
<nav id="navbar">
<header>
<ul>
<h1>Learn HTML</h1>
<li><a href="#1" class="active nav-link">Introduction</a></li>
<li><a href="#2" class="nav-link">What you should already know</a></li>
<li><a href="#3" class="nav-link">Browser Support</a></li>
<li><a href="#4" class="nav-link">HTML Metadata</a></li>
<li><a href="#5" class="nav-link">HTML Elements</a></li>
<li><a href="#6" class="nav-link">HTML Attributes</a></li>
<li><a href="#7" class="nav-link">Hello World</a></li>
<li><a href="#8" class="nav-link">Styling Options</a></li>
<li><a href="#9" class="nav-link">Improving your skills</a></li>
<li><a href="#10" class="bottom_li nav-link">What's Next?</a></li>
</ul>
</header>
</nav>
<main id="main-doc">
<section id="Introduction" class="main-section">
<header id="1">Introduction</header>
<p class="spacing">HTML is the standard markup language for creating web pages. HTML stands for 'Hyper Text Markup Language'. Although expert opinions can vary, most experienced web developers/coders recommend that everyone start with learning HTML. So, HTML can be viewed as the foundational component to becoming a web developer/coder.</p>
<ul class="intro_html" style="line-height: 180%">
<li> HTML describes the structure of a web page</li>
<li> HTML consists of a series of elements (see below)</li>
<ul>
<li> As you will see below, HTML elements can also contain attributes</li>
</ul>
<li> HTML elements tell the browser how to display content</li>
<li> HTML elements label pieces of content such as "this is a heading", "this is a paragraph", "this is a link", etc.</li>
<li> In most cases, HTML elements are defined by a start tag, some content, and an end tag</li>
<ul>
<li><b>Example:</b> <code>< p ></code> This is the content <code>< /p ></code></li>
</ul>
</ul>
</section>
<section id="What_you_should_already_know" class="main-section">
<header id="2">What you should already know</header>
<p class="spacing">This guide assumes you have the following basic background:<p>
<ul style="line-height: 180%">
<li> A general understanding of the Internet and the World Wide Web (WWW)</li>
<li> Good working knowledge of hot to navigate on a computer (i.e., search the web, open documents, type...)</li>
<li> A personality that likes to constantly learn and be challenged...if you can't handle challenges, this may not be for you</li></ul>
</section>
<section id="Browser_Support" class="main-section">
<header id="3">Browser Support</header>
<p class="spacing">The purpose of a web browser (Chrome, Edge, Firefox, Safari) is to read HTML documents and display them <em>correctly</em>. A browser does not display the HTML tags, but uses them to determine how to display the document. In order for the code to read properly when learning, we recommend using Chrome or Firefox. </p>
</section>
<section id="HTML_Metadata" class="main-section">
<header id="4">HTML Metadata</header>
<p class="spacing"> The metadata section houses important information that won't be displayed on the web page for users to see. However, it is crucial to include the proper metadata in a HTML page for many reasons. Most of the metadata for the web page are housed in the <code> < head > </code> element. Below are examples of some important metadata to include in your HTML page:</p>
<ul style="line-height: 180%">
<li> <code>< title ></code> : nested inside this element will be the title that</li>
<li> <code>< meta ></code> : used to next most of the metadata that will be used for the web page </li>
<ul>
<li> <b>HTML Charset</b>: The HTML5 specification encourages web developers to use the UTF-8 character set, which covers almost all of the characters and symbols in the world!</li>
<li> <b>HTML Viewport</b> The viewport is the user's visible area of a web page. The viewport varies with the device, and will be smaller on a mobile phone versus a desktop. To address this, developers now address this via the < meta > element</li>
<li> <b>HTML <code>< link ></code></b> : the link element can tie your HTML page to an external styling page (most commonly CSS)</li>
<li> Adding other keywords and descriptions of your website to help with Search Engine Optimization (SEO)</li> </ul>
</ul>
</section>
<section id="HTML_Elements" class="main-section">
<header id="5">HTML Elements</header>
<p class="spacing"> Simply put, elements tell a web page how to display the content. There are several HTML elements, but a few foundational ones are noted below:</p>
<ol style="line-height: 180%">
<li><code>< html ></code></li>
<ul>
<li> The 'html' tag will enclose the entire page sturcture of the html. It will also have a closing tag: < /html ></li> </ul>
<li><code>< head ></code></li>
<ul>
<li>The 'head' elements houses the <b>metadata</b> portion of the HTML</li> </ul>
<li><code>< body ></code></li>
<ul>
<li>The 'body' element houses all the other elements and attributes that will <b>display</b> the content on the web page.</li>
</ul>
</ol>
<p class="spacing"> An HTML element is an individual component of an HTML document. It represents semantics, or meaning. For example, the title element represents the title of the document.</p>
<p class="spacing"> Most HTML elements are written with a start tag (or opening tag) and an end tag (or closing tag), with content in between. Elements can also contain attributes that defines its additional properties. </p>
</section>
<section id="HTML_Attributes" class="main-section">
<header id="6">HTML Attributes</header>
<p class="spacing"> HTML attributes are special words used inside the opening tag to control the element's behavior. HTML attributes are a modifier of an HTML element type. An attribute either modifies the default functionality of an element type or provides functionality to certain element types unable to function correctly without them. In HTML syntax, an attribute is added to an HTML start tag.</p>
<p class="spacing">Several basic attributes types have been recognized, including: (1) required attributes, needed by a particular element type for that element type to function correctly; (2) optional attributes, used to modify the default functionality of an element type; (3) standard attributes, supported by many element types; and (4) event attributes, used to cause element types to specify scripts to be run under specific circumstances.</p>
<p class="spacing">Some attribute types function differently when used to modify different element types. For example, the attribute name is used by several element types, but has slightly different functions in each. A few of the most utilized attributes are noted below:</p>
<ul style="line-height: 180%">
<li> <b><code>< id ></code></b> : Specifies a <em>unique</em> id for an HTML element (the value must be unique within the HTML document). Also used to point to a style in a style sheet. </li>
<li> <b><code>< form ></code></b> : Specifies the form the element belongs to. </li>
<li> <b><code>< class ></code></b> : Mostly used to point to a class in a style sheet. </li>
<li> <b><code>< href ></code></b> : Specifies the URL of the page the link goes to. This is usually the attribute for < a > or < link >. </li>
<li> <b><code>< lang ></code></b> : Specifies the language of the element's content. Common examples are "en" for English and "es" for Spanish. </li>
</ul>
</section>
<section id="Hello_World" class="main-section">
<header id="7">Hello World</header>
<p class="spacing"> Now we create our first HTML code! To get started, open your 'Notepad' app on your windows computer and input the following code:</p>
<p class="code-ex"> <code>< h1 ></code> This is the main heading <code>< /h1 ></code></p>
<p class="code-ex"> <code>< p ></code> This is a paragraph. I can type as many sentences as I want. <code>< /p ></code></p>
<p class="code-ex"> <code>< p ></code> This is also a paragraph... Hello World! <code>< /p ></code></p>
</section>
<section id="Styling_Options" class="main-section">
<header id="8">Styling Options</header>
<p class="spacing"> There are many styling options for HTML. There is so much to learn that it has become another programming language known as Cascading Style Sheets or <em>CSS</em>. CSS describes how HTML elements are to be displayed on screen. It can control the layout of multiple web pages all at once. The most important thing to consider is that it saves a lot of time! HTML was NEVER intended to contain tags for formatting a web page!</p>
</section>
<section id="Improving_your_skills" class="main-section">
<header id="9">Improving your skills</header>
<p class="spacing"> The best way to improve your skills is to begin practicing. You can read/watch videos all you want, but the only way to actually learn is by <b>DOING</b>. There are many websites available that can take you through tutorials and help you learn a specific programming language. The best website is <a href="www.freecodecamp.org">freeCodeCamp</a>. They offer tutorials on nearly EVERY programming language (including HTML) for FREE!</p>
</section>
<section id="What's_Next?" class="main-section">
<header id="10">What's Next?</header>
<p> This is most likely the most simple section. What's next is you getting started! May the force be with you.</p>
</section>
<br>
<footer>
<h2>Reference</h2>
<p>All references from this article can be found <a href="w3schools.com">here.</a></p>
</footer>
</main>
</body>
</html>
CSS code:
body {
margin: 0;
font-family: sans-serif, tahoma;
color: black;
}
h1 {
text-align: center;
font-size: 40px;
}
#navbar ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 25%;
background-color: #f1f1f1;
position: fixed;
height: 100%;
overflow: auto;
border-right: 2px solid gray;
}
li .nav-link {
border: 1px solid gray;
}
.active {
border-top: 1px solid gray;
}
.bottom_li {
border-bottom: 1px solid gray;
}
li a {
display: block;
color: #000;
padding: 20px 16px;
text-decoration: none;
}
li a.active {
background-color: lightsteelblue;}
li a:hover:not(.active) {
background-color: #555;
color: white;
}
main {
margin-left: 25%;
padding: 1px 16px;
height: 1000px;
}
section header {
font-weight: bold;
font-size: 25px;
}
.code-ex {
padding-left: 5%;
line-height: 15px;
}
code {
color: crimson;
background-color: #f1f1f1;
padding: 2px;
font-size: 100%;
font-weight: bold;
}
body {
font-size: 18px;
}
@media only screen and (max-width: 768px) {
body {
font-size: 18px;
}
}
@media only screen and (max-width: 450px) {
body {
font-size: 14px;
}
}
footer {
text-align: center;
}
p.spacing {
line-height: 1.6;
}
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/106.0.0.0 Safari/537.36
Challenge: Technical Documentation Page - Build a Technical Documentation Page
Link to the challenge: