Technical Documentation Errors

I have two errors that I am unable to solve.
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).
AND
Your Technical Documentation project should use at least one media query.

`<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-size=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>Beginner HTML/CSS</title>
  </head>
  <body>
    <main id="main-doc">
        <nav id="navbar">
        <header>Website Documents</header>
        <ul>
          <li><a class="nav-link" href="#HTML">HTML</a></li>
          <li><a class="nav-link" href="#HTML_Examples">HTML Examples</a></li>
          <li><a class="nav-link" href="#CSS">CSS</a></li>
          <li><a class="nav-link" href="#CSS_Examples">CSS Examples</a></li>
          <li><a class="nav-link" href="#JavaScript">JavaScript</a></li>
        </ul>
      </nav>
        <header id="Building_websites">Building websites</header>
        <section class="main-section" id="HTML">
          <header>HTML</header>
          <p>HTML, HyperText Markup Language is language for documents to show pages in an internet browser. It works hand in hand with several script languages for complete control of content and formatting. HTML was first introduced in 1993 and as of my writing it is in the fifth version.</p>
          <p>To build the page(s) you use elements. These elements are written with angled brackets and usually require closing brackets. These elements can range from text, links, photos, and more</p>
        </section>
        <section class="main-section" id="HTML_examples">
          <header>HTML Examples</header>
          <p>Coding webpages can be as simple or complicated as you wish to meet your needs. I will show you a few reqired tags to introduce you to the world of HTML.</p>
          <code> < !DOCTYPE html > starts all websites by introducing the type of document you are coding. </code>
          <p> 
          <code> < html lang="en" > allows you to set the language to english.</code>
          </p>
          <p>
          <code> < body > with its closing tag < / body > allows for the main body of text that will display on your site.</code>
          </p>
          <p> Ther are many more required elements to get a page to completion, but this should give you an idea of how to start.
        </section>
        <section class="main-section" id="CSS">
          <header>CSS</header>
          <p>Cascading Style Sheets (CSS) is the main language to format your websites displays. This can be the most valueable piece of coding your site will have. Without this valueable language all pages on the World Wide Web would be quite boring due to being plain white and all font the same type and size. </p>
          <p>CSS opened to the world 26 years ago, in 1996. It did not take long for programmers to see the importance of this language. While many others like JavaScript followed HTML and CSS go together like peanut butter and jelly.</p>
        </section>
        <section class="main-section" id="CSS_Examples">
          <header>CSS Examples</header>
          <p>Adding CSS to your webistes will vastly assist your readers by adding any style you'd like. Below I have listed a few common codes.</p>
          <code> < width : 200 px ; is how you could display a table or other elements width to help divide your pages into sections.</code>
          <p>
          <code> < font-size : 16px ; > will allow for your font to change its size to 16 pixels</code>
          </p>
          <p>Having these as a quick idea of what you should expect from coding CSS is helpful to awaken your mind to any of creativeness you see fit.</p>
        </section>
        <section class="main-section" id="JavaScript">
          <header>JavaScript</header>
          <p>JS as you will often see JavaScript abbrevated for is another vital programming language. Again, can be added to your site to help control behavior of the page. Listed below are some of the more common uses of JavaScript.</p>
          <p>
            <ul class="JS">
              <li>Redirecting to another page</li>
              <li>Playing games inside a browser</li>
              <li>Creating pop-up ads</li>
              <li>Web based animations</li>
              <li>loading new website data without refreshing</li>
            </ul>
          </p>
      </main>
    </body>
</html>`

All the letter casing should match.

href="#HTML_Examples"
id="HTML_examples"
1 Like

In the header, ID, and href?

edit (it worked; Thank you!)

Do you happened to see why I am still getting this error (“Your Technical Documentation project should use at least one media query.”) as well?

Do you have a codepen for your solution? Just to make sure you have media queries.

I faced the same issue but it was because I had two stylesheet links in my head tag (in html) and figured out that I had to keep just one stylesheet link.

Post your CSS. Do you have a media query?

I got it now. Thanks!

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