Stymied at Step 10 of the Technical Documentation Projection

Hello Everyone!

I’m working through the technical documentation project and I’m receiving the following error message

You should have the same number of .nav-link and .main-section elements.

I’ve gone through and counted my .nav-link and .main-section elements and come up with eight for both. But I’m still getting the error message.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="styles.css">
<meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<nav id="navbar">
<header>Boiler Plate HTML For Beginning a Project</header>
<ul>
<li><a href="#Introduction" class="nav-link">Introduction</a></li><!--1-->
<li><a href="#DOCTYPE_html" class="nav-link">DOCTYPE html</a></li><!--2-->
<li><a href="#Linking_Your_CSS" class="nav-link">Linking your CSS</a></li><!--3-->
<li><a href="#Head" class="nav-link">Head</li><!--4-->
<li><a href="#Meta_Viewport" class="nav-link">Meta Viewport</a></li><!--5-->
<li><a href="#Meta_UTF8" class="nav-link">Meta UTF8</a></li><!--6-->
<li><a href="#Title" class="nav-link">Title</li><!--7-->
<li><a href="#Reference" class="nav-link">Reference</a><!--8-->


</ul>
</nav>

<main id="main-doc">

<section  class="main-section" id="Introduction"><header>Introduction</header><article>What is boilerplate HTML<p>Boiler plate HTML is a template that you add to the beginning of a front-end project</p><p>The exmaple boiler plate code we will be discussing will look like this </p>
<code>
<p class="code-snippet">&lt;!DOCTYPE html></p>
<p class="code-snippet">&lt;html lang="en"></p>
<p class="code-snippet">&lt;head></p>
<p class="code-snippet">&lt;title></p>
<p class="code-snippet">&lt;link rel="stylesheet" href="styles.css"></p>
<p class="code-snippet">&lt;meta charset="UTF-8"></p>
<p class="code-snippet">&lt;meta name="viewport" content="width=device-width, initial-scale=1.0" />
&lt;title></p>
<p class="code-snippet">&lt;/head></p>
<p class="code-snippet">&lt;/html></p>
</code>
<p> By the end of this article, you will understand what the following template does and some additions that you can make to customize it to the needs of your proejct</p>
<p>Benefits to Boiler Plate Code</p>
<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
   
</article></section><!--1-->

<section  class="main-section" id="DOCTYPE_html"><header>DOCTYPE html </header><article><p>The DOCTYPE html tag lets the browser know what verision of HTML the document is using. Note: the DOCTYPE tag is self-closing</p><p>In HTML5 the syntax for the DOCTYPE tage looks like this <code>&lt;!DOCTYPE html></code></article></section ><!--2-->

<section class="main-section" id="Head"><header>Head</header><article><p>The head section of our boiler plate serves a very important function, containing and organizing meta data (data about data)</p><p>The head element can contain numberous types of tags all with their own properties but the most important of these is the &lt;title> element. Below is an example of &lt;head> section</p><code>
<p class="code-snippet">&lt;head></p>
<p class="code-snippet">&lt;title></p>
<p class="code-snippet">&lt;link rel="stylesheet" href="styles.css"></p>
<p class="code-snippet">&lt;meta charset="UTF-8"></p>
<p class="code-snippet">&lt;meta name="viewport" content="width=device-width, initial-scale=1.0" />
&lt;title></p>
<p class="code-snippet">&lt;/head></p>
</code></article></section><!--3-->

<section  class="main-section" id="Linking_Your_CSS"><header>Linking Your CSS</header><article><p>CSS(Cascadeing Styling Sheets) is a powerful tool in styling your web page, so we'll want to make sure that we link it to our page with the &lt;link> tag</p>In the &alt;link tag there are two common properties for the &alt;link> tag the rel and href attributes. The rel attribute desginates the relationship between your page and the other document. The href attribute tells the browser which URL has the styling information <code><p>&lt;link rel="stylesheet" href="styles.css"></p></code></article></section><!--4-->

<section class="main-section" id="Meta_Viewport"> <header>Meta Viewport</header><article><p> The &lt;meta> tag is designed to define metadata (data about data) in the document </p><p>As the web is increasingly accessed by mobile devices by using the &lt;meta> tag with the viewport attribute you give the browser the parameters to how the page is scaled</p><code>&lt;meta name="viewport" content="width=device-width, initial-scale=1.0"></code>
<p>width=device-width this attribute tells the browser that the width of the page that will be rendered will be the screen width of the device</p>
<p>initial-scale=1.0 this attribute sets the initial zoom of the browswer </p></article></section><!--5-->

<section class="main-section" id="Meta_UTF8" ><header>Meta UTF8</header><article><p>The &lt;meta charset="UTF-8"> makes the character set to UTF-8 the HTML5 standard</p><code>&lt;meta charset="UTF-8"></code></article></section><!--6-->

<section class="main-section" id="Title"><header>Title</header><article><p>The &lt;title> tag is a very useful tag as it defines what the page will contain. This is especially important for SEO (serach engine optimization) </p><code> &lt;title>Example Title &lt;/title></code></article></section><!--7-->

<section class="main-section" id="Reference"> <header>Reference</header><article><p>The following page was used for reference</p><a href="https://www.freecodecamp.org/news/basic-html5-template-boilerplate-code-example/" target="_blank"><!--8-->


</main>
</html>

Where are the closing </a> tags?

<li><a href="#Head" class="nav-link">Head</li><!--4-->↩

<li><a href="#Title" class="nav-link">Title</li><!--7-->↩

I knew that I’d be kicking myself when someone pointed out where I went wrong. Thanks for your help!

1 Like

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