Build a Technical Documentation Page-Stuck From Beginning

Surprisingly Scoring 2/16:
I have been battling with this issue for days. When I test the below code, I score 2/16. I am surprised as to why. Even the main id (id=“main-doc”)which is simple enough fails. I even took off the “body tag” still nothing. I have tried this both on Chrome and Edge browsers.
Could anyone spot what is causing this to fail please. Thanks in advance.

My code is below:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TechDoc</title>
</head>
<body>
    <nav id="nav-link">
        <header>
            Go to:
        </header>
        <a class="nav-link" href="#Introduction_to_HTML5_Elements">
            Introduction to HTML5 Elements
        </a>
        <a class="nav-link" href="#Change_the_Color_of_Text">
            Change the Color of Text
        </a>
        <a class="nav-link" href="#Use_CSS_Selectors_to_Style_Elements">
            Use CSS Selectors to Style Elements
        </a>
        <a class="nav-link" href="#Size_Your_Images">
            Size Your Images
        </a>
        <a class="nav-link" href="#Understand_Absolute_versus_Relative_Units">
            Understand Absolute versus Relative Units
        </a>
    </nav>
    <main id="main-doc">
        <section class="main-section"id="Introduction_to_HTML5_Elements">
            <header>
                Introduction to HTML5 Elements
            </header>
            <p>
                HTML5 introduces more descriptive HTML tags. These include main, header, footer, nav, video, article, section and others.
            </p>
            <p>
                These tags give a descriptive structure to your HTML, make your HTML easier to read, and help with Search Engine Optimization (SEO) and accessibility. The main HTML5 tag helps search engines and other developers find the main content of your page. <br> Example usage, a main element with two child elements nested inside it: <br> 
                <main> 
                    <h1>Hello World</h1>
                    <p>Hello Paragraph</p>
                </main>
            </p>
            <code>
                
            </code>
            <ul>
                <li>
                    <a href="#">Back to top</a>
                </li>
            </ul>
        </section>
        <section class="main-section"id="Change_the_Color_of_Text">
            <header>
                Change the Color of Text
            </header>
            <p>
                Now let's change the color of some of our text. We can do this by changing the style of your h2 element. <br> The property that is responsible for the color of an element's text is the color style property.
            </p>
            <p>
                Here's how you would set your h2 element's text color to blue: <br> <h2 style="color: blue;">CatPhotoApp</h2><br> Note that it is a good practice to end inline style declarations with a ; .
            </p>
            <code>
                
            </code>
            <ul>
                <li>
                    <a href="#">Back to top</a>
                </li>
            </ul>
        </section>
        <section class="main-section"id="Use_CSS_Selectors_to_Style_Elements">
            <header>
                Use CSS Selectors to Style Elements
            </header>
            <p>
                With CSS, there are hundreds of CSS properties that you can use to change the way an element looks on your page. <br> When you entered <h2 style="color: red;">CatPhotoApp</h2>, you were styling that individual h2 element with inline CSS, which stands for Cascading Style Sheets.
            </p>
            <p>
                That's one way to specify the style of an element, but there's a better way to apply CSS. At the top of your code, create a style block like this:<br> <a href="https://www.freecodecamp.org/learn/responsive-web-design/basic-css/use-css-selectors-to-style-elements#:~:text=block%20like%20this%3A-,%3Cstyle%3E%0A%3C/style%3E,-Inside%20that%20style">Hit this link to see it.</a>
            </p>
            <code>
                
            </code>
            <ul>
                <li>
                    <a href="#">Back to top</a>
                </li>
            </ul>
        </section>
        <section class="main-section"id="Size_Your_Images">
            <header>
                Size Your Images
            </header>
            <p>
                CSS has a property called width that controls an element's width. Just like with fonts, we'll use px (pixels) to specify the image's width. 
            </p>
            <p>
                For example, if we wanted to create a CSS class called larger-image that gave HTML elements a width of 500 pixels, we'd use: <br> <a href="https://www.freecodecamp.org/learn/responsive-web-design/basic-css/size-your-images#:~:text=%3Cstyle%3E%0A%20%20.larger%2Dimage%20%7B%0A%20%20%20%20width%3A%20500px%3B%0A%20%20%7D%0A%3C/style%3E">Follow this link</a>.
            </p>
            <code>
                
            </code>
            <ul>
                <li>
                    <a href="#">Back to top</a>
                </li>
            </ul>
        </section>
        <section class="main-section"id="Understand_Absolute_versus_Relative_Units">
            <header>
                Understand Absolute versus Relative Units
            </header>
            <p>
                The last several challenges all set an element's margin or padding with pixels (px). Pixels are a type of length unit, which is what tells the browser how to size or space an item. In addition to px, CSS has a number of different length unit options that you can use.<br> The two main types of length units are absolute and relative. Absolute units tie to physical units of length. For example, in and mm refer to inches and millimeters, respectively. Absolute length units approximate the actual measurement on a screen, but there are some differences depending on a screen's resolution.
            </p>
            <p>
                Relative units, such as em or rem, are relative to another length value. For example, em is based on the size of an element's font. If you use it to set the font-size property itself, it's relative to the parent's font-size.<br> Note: There are several relative unit options that are tied to the size of the viewport. They are covered in the Responsive Web Design Principles section.
            </p>
            <code>
                
            </code>
            <ul>
                <li>
                    <a href="#">Back to top</a>
                </li>
            </ul>
        </section>
    </main>
    
</body>
</html>

**

TechDoc Go to: Introduction to HTML5 Elements Change the Color of Text Use CSS Selectors to Style Elements Size Your Images Understand Absolute versus Relative Units Introduction to HTML5 Elements

HTML5 introduces more descriptive HTML tags. These include main, header, footer, nav, video, article, section and others.

These tags give a descriptive structure to your HTML, make your HTML easier to read, and help with Search Engine Optimization (SEO) and accessibility. The main HTML5 tag helps search engines and other developers find the main content of your page.
Example usage, a main element with two child elements nested inside it:

Hello World

Hello Paragraph

        </code>
        <ul>
            <li>
                <a href="#">Back to top</a>
            </li>
        </ul>
    </section>
    <section class="main-section"id="Change_the_Color_of_Text">
        <header>
            Change the Color of Text
        </header>
        <p>
            Now let's change the color of some of our text. We can do this by changing the style of your h2 element. <br> The property that is responsible for the color of an element's text is the color style property.
        </p>
        <p>
            Here's how you would set your h2 element's text color to blue: <br> <h2 style="color: blue;">CatPhotoApp</h2><br> Note that it is a good practice to end inline style declarations with a ; .
        </p>
        <code>
            
        </code>
        <ul>
            <li>
                <a href="#">Back to top</a>
            </li>
        </ul>
    </section>
    <section class="main-section"id="Use_CSS_Selectors_to_Style_Elements">
        <header>
            Use CSS Selectors to Style Elements
        </header>
        <p>
            With CSS, there are hundreds of CSS properties that you can use to change the way an element looks on your page. <br> When you entered <h2 style="color: red;">CatPhotoApp</h2>, you were styling that individual h2 element with inline CSS, which stands for Cascading Style Sheets.
        </p>
        <p>
            That's one way to specify the style of an element, but there's a better way to apply CSS. At the top of your code, create a style block like this:<br> <a href="https://www.freecodecamp.org/learn/responsive-web-design/basic-css/use-css-selectors-to-style-elements#:~:text=block%20like%20this%3A-,%3Cstyle%3E%0A%3C/style%3E,-Inside%20that%20style">Hit this link to see it.</a>
        </p>
        <code>
            
        </code>
        <ul>
            <li>
                <a href="#">Back to top</a>
            </li>
        </ul>
    </section>
    <section class="main-section"id="Size_Your_Images">
        <header>
            Size Your Images
        </header>
        <p>
            CSS has a property called width that controls an element's width. Just like with fonts, we'll use px (pixels) to specify the image's width. 
        </p>
        <p>
            For example, if we wanted to create a CSS class called larger-image that gave HTML elements a width of 500 pixels, we'd use: <br> <a href="https://www.freecodecamp.org/learn/responsive-web-design/basic-css/size-your-images#:~:text=%3Cstyle%3E%0A%20%20.larger%2Dimage%20%7B%0A%20%20%20%20width%3A%20500px%3B%0A%20%20%7D%0A%3C/style%3E">Follow this link</a>.
        </p>
        <code>
            
        </code>
        <ul>
            <li>
                <a href="#">Back to top</a>
            </li>
        </ul>
    </section>
    <section class="main-section"id="Understand_Absolute_versus_Relative_Units">
        <header>
            Understand Absolute versus Relative Units
        </header>
        <p>
            The last several challenges all set an element's margin or padding with pixels (px). Pixels are a type of length unit, which is what tells the browser how to size or space an item. In addition to px, CSS has a number of different length unit options that you can use.<br> The two main types of length units are absolute and relative. Absolute units tie to physical units of length. For example, in and mm refer to inches and millimeters, respectively. Absolute length units approximate the actual measurement on a screen, but there are some differences depending on a screen's resolution.
        </p>
        <p>
            <ul>
                <li>
                    Relative units, such as em or rem, are relative to another length value. For example, em is based on the size of an element's font. If you use it to set the font-size property itself, it's relative to the parent's font-size.
                </li>
                <li>
                    Note: There are several relative unit options that are tied to the size of the viewport. They are covered in the Responsive Web Design Principles section.
                </li>
                <li>
                    <a href="#">Back to top</a>
                </li>
            </ul>
            <br>
        </p>
        <code>
            
        </code>
    </section>
</main>
**

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/97.0.4692.71 Safari/537.36

Challenge: Build a Technical Documentation Page

Link to the challenge:

it would be super helpful if you put it in a codepen with the test suite
From the bottom by the submission:
You can build your project by using this CodePen template and clicking Save to create your own pen. Or you can use this CDN link to run the tests in any environment you like: https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js

Oh my goodness!
I have always pasted both the CSS and html parts into the CSS section on the testing page.
I just copied the html section and pasted where it was supposed to be and tested it and it gave 11/16.
This learning the hard way.

Thanks everyone, I think it is resolved now.

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