Build a Technical Documentation Page - failing .navlink checks

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Technical Doc</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="styles.css">
    </head>
    <body>
        <nav id="navbar">
            <header class="navbar-title">Python Documentation</header>
            <ul class="navbar-list">
                <li>
                    <a class="nav-link" href="#Output">Output</a>
                </li>
                <li>
                    <a class="nav-link" href="#Input">Input</a>
                </li>
                <li>
                    <a class="nav-link" href="#Comments">Comments</a>
                </li>
                <li>
                    <a class="nav-link" href="#Variable">Variables</a>
                </li>
                <li>
                    <a class="nav-link" href="#Strings_operations">Strings operations</a>
                </li>
                <li>
                    <a class="nav-link" href="#Arithmetic_and_mathematics">Arithmetic and mathematics</a>
                </li>
                <li>
                    <a class="nav-link" href="#Comparison_and_logical_operators">Comparison and logical operators</a>
                </li>
                <li>
                    <a class="nav-link" href="#Data_types_and_conversions">Data Types and conversions</a>
                </li>
                <li>
                    <a class="nav-link" href="#For_loops">For loops</a>
                </li>
                <li>
                    <a class="nav-link" href="#If_statements">If statements</a>
                </li>
                <li>
                    <a class="nav-link" href="#While_loops">While loops</a>
                </li>
                <li>
                    <a class="nav-link" href="#Lists_arrays">Lists Arrays</a>
                </li>
                <li>
                    <a class="nav-link" href="#Procedures">Procedures</a>
                </li>
                <li>
                    <a class="nav-link" href="#Functions">Functions</a>
                </li>
                <li>
                    <a class="nav-link" href="#File_handling">File handling</a>
                </li>
                <li>
                    <a class="nav-link" href="#Random_numbers">Random numbers</a>
                </li>
                <li>
                    <a class="nav-link" href="#Validation">Vallidation</a>
                </li>
                <li>
                    <a class="nav-link" href="#SQL">SQL</a>
                </li>
                <li>
                    <a class="nav-link" href="#Extras">Extras</a>
                </li>
            </ul>
        </nav>
        <main id="main-doc">
            <header>Beginner Python Documentation</header>
            <div class="indent">
                <p>The following information is introductory knowledge on coding in python that has been copied over from the <a href="https://www.easypythondocs.com/output.html">Easy Python Docs</a> website. This website is simply to show my current knowlede of HTML/CSS to potential employers. All HTML/CSS coding is stricly my own although the knowledge of python coding is taken from the aforementioned website. If you are looking to begin coding in python I do highly reccomend you check it out it is a very useful site.</p>
            </div>
            <section class="main-section" id="Output">
                <header>Output</header>
                <article>
                    <h2>Definition</h2>
                    <div class="indent">
                        <p>
                            <span class="italics">Output</span> in Python is carried out using the <code><span class="red-text white-back">print</span></code> statement. <code><span class="red-text white-back">print('text here')</span></code> will output <code><span class="red-text white-back">text here</span></code> to the screen.
                        </p>
                        <table class="blue">
                            <thead class="notice-title blue">
                                <tr>
                                    <th class="blue">Note</th>
                                </tr>
                            </thead>
                            <tbody class="notice-text light-blue">
                                <tr>
                                    <th class="light-blue">Don’t use a space with the print statment. It should be written as <code><span class="red-text white-back">print()</span></code> not <code><span class="red-text white-back">print ()</span></code>.</th>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <h2>Easy example</h2>
                    <div class="indent code-box">
                        <code>print(<span class="red-text">'Hello world'</span>)</code>
                    </div>
                    <h2>Syntax</h2>
                    <div class="indent code-box">
                        <code>print(<span class="italics">string</span>);</code>
                    </div>
                    <h2>Examples</h2>
                    <div class="indent">
                        <h3>Example 1 - Output a string</h3>
                        <div class="code-box">
                            <code>print(<span class="red-text">'Hello'</span>)</code>
                        </div>
                        <h3>Example 2 - Output a variable</h3>
                        <div class="code-box">
                            <code>name = <span class="red-text">'Smith'</span></code>
                            <br>
                            <code>print(<span class="italics">name</span>)</code>
                        </div>
                        <h3> Example 3 - Output variable and string</h3>
                        <div class="code-box">
                            <code>name = <span class="red-text">'Laura'</span></code>
                            <br>
                            <code>print(<span class="red-text">'Hello'</span> + <span class="italics">name</span>)</code>
                        </div>
                        <h3>Example 4 - Output using a new line character</h3>
                        <div class="code-box">
                            <code>print(<span class="red-text">'This text is on the first line \n and this text is on the second line'</span>)</code>
                        </div>
                    </div>
                    <h2>Key points</h2>
                    <div class="indent">
                        <table class="orange">
                            <thead>
                                <tr class="notice-title orange">
                                    <th class="orange">Warning</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr class="notice-text light-orange">
                                    <th class="light-orange">The print statement should always be given a string to print. If you get an error on this statement make sure that you’re not trying to print a different data type, such as an integer - this is especially important if you are concatenating values together.</th>
                                </tr>
                            </tbody>
                        </table>
                        <table class="green">
                            <thead>
                                <tr class="notice-title green">
                                    <th class="green">Hint</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr class="notice-text light-green">
                                    <th class="light-green">You can use <code><span class="red-text white-back">print()</span> to simply print a blank line.</code></th>
                                </tr>
                            </tbody>
                        </table>
                        <table class="blue">
                            <thead class="notice-title blue">
                                <tr>
                                    <th class="blue">Note</th>
                                </tr>
                            </thead>
                            <tbody class="notice-text light-blue">
                                <tr>
                                    <th class="light-blue">Don’t use a space with the print statment. It should be written as <code><span class="red-text white-back">print()</span></code> not <code><span class="red-text white-back">print ()</span></code>.</th>
                                </tr>
                            </tbody>
                        </table>
                        <table class="blue">
                            <thead class="notice-title blue">
                                <tr>
                                    <th class="blue">Note</th>
                                </tr>
                            </thead>
                            <tbody class="notice-text light-blue">
                                <tr>
                                    <th class="light-blue">A sequence in programming is instructions which are run one after another in order. It is the most basic programming construct. Example 3 shows a very simple sequence with two instructions.</th>
                                </tr>
                            </tbody>
                        </table>    
                    </div>                    
                </article>
            </section>
            <section class="main-section" id="Input">
                <header>Input</header>
                <article>
                    <h2>Definition</h2>
                    <div class="indent">
                        <p><span class="italics">Input</span> in Python is carried out using the <code><span class="red-text white-back">input</span></code> statement. When used in a program, this will let the user input some text. This text can then be assigned to a variable.</p>
                        <table class="orange">
                            <thead class="orange">
                                <tr class="notice-title orange">
                                    <th class="orange">Warning</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr class="notice-text light-orange">
                                    <th class="light-orange">If you write <code><span class="red-text white-back">input('enter your name: ')</span></code> then it will ask the user to enter their name, but there name will not be saved to use later in the program. Instead use<br><code><span class="red-text white-back">name = input('Please enter your name')</span>.</code></th>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <h2>Easy example</h2>
                    <div class="indent">
                        <div class="code-box">
                            <code>name = <span class="blue-text">input</span>(<span class="red-text">'Enter your name: '</span>)</code>
                        </div>
                        <p>Whatever text is entered by the user is assigned to the variable <span class="red-text white-back">name</span>.</p>
                    </div>
                    <h2>Syntax</h2>
                    <div class="indent code-box">
                        <code>variableName = <span class="blue-text">input</span>(<span class="italics">string</span>)</code>
                    </div>
                    <h2>Examples</h2>
                    <div class="indent">
                        <h3>Example 1 - Input to pause a program</h3>
                        <div class="code-box">
                            <code><span class="blue-text">input</span>()</code>
                        </div>
                        <h3>Example 2 - Input Statement which also outputs text</h3>
                        <div class="code-box">
                            <code><span class="blue-text">input</span>(<span class="red-text">'Press return to continue ...'</span>)</code>
                        </div>
                        <h3>Example 3 - Storing user input in a variable</h3>
                        <div class="code-box">
                            <code>name = <span class="blue-text">input</span>(<span class="red-text">'What is your name? '</span>)<br>
                            print(<span class="redtext">'Hello'</span> + name)</code>
                        </div>
                    </div>
                    <h2>Keypoints</h2>
                    <div class="indent">
                        <table class="blue">
                            <thead class="notice-title blue">
                                <tr>
                                    <th class="blue">Note</th>
                                </tr>
                            </thead>
                            <tbody class="notice-text light-blue">
                                <tr>
                                    <th class="light-blue">Don't use a space with the input statement. It should be written as <code><span class="red-text white-back">input()</span></code> not <code><span class="red-text white-back">input ()</span></code></th>
                                </tr>   
                            </tbody>
                        </table>
                        <table class="green">
                            <thead>
                                <tr class="notice-title green">
                                    <th class="green">Hint</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr class="notice-text light-green">
                                    <th class="light-green"><code><span class="red-text white-back">name = input('Enter your name')</span></code> Will not have a space before they enter their name. Instead use <code><span class="red-text white-back">name = input('Enter your name ')</span></code>.</th>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </article>
            </section>
            <section class="main-section" id="Comments">
                <header>Comments</header>
            </section>
            <section class="main-section" id="Variables">
                <header>Variables</header>
            </section>
            <section class="main-section" id="Strings_operations">
                <header>Strings operations</header>
            </section>
            <section class="main-section" id="Arithmetic_and_mathematics">
                <header>Arithmetic and mathematics</header>
            </section>
            <section class="main-section" id="Comparison_and_logical_operators">
                <header>Comparison and logical operators</header>
            </section>
            <section class="main-section" id="Data_types_and_conversions">
                <header>Data types and conversions</header>
            </section>
            <section class="main-section" id="For_loops">
                <header>For loops</header>
            </section>
            <section class="main-section" id="If_statements">
                <header>If statements</header>
            </section>
            <section class="main-section" id="While_loops">
                <header>While loops</header>
            </section>
            <section class="main-section" id="Lists_arrays">
                <header>Lists Arrays</header>
            </section>
            <section class="main-section" id="Procedures">
                <header>Procedures</header>
            </section>
            <section class="main-section" id="Functions">
                <header>Functions</header>
            </section>
            <section class="main-section" id="File_handling">
                <header>File handling</header>
            </section>
            <section class="main-section" id="Random_numbers">
                <header>Random numbers</header>
            </section>
            <section class="main-section" id="Validation">
                <header>Validation</header>
            </section>
            <section class="main-section" id="SQL">
                <header>SQL</header>
            </section>
            <section class="main-section" id="Extras">
                <header>Extras</header>
            </section>
        </main>
    </body>
</html>

I’ve been over and over it with a fine tooth comb I can’t seem to understand why I am failing the check. It works as intended thats for sure. I’ve been over it looking for and extra space. Then II thought maybe it was because one was capitalized and the other wasn’t. no go there. any hints?

Hello, I cannot see a link to the challenge you are on. Can you post it and clarify what test is failing. (If the test has a specific number pls explicitly mention it)

It should tell you what you are missing and why its failing.

There are a list of tasks on the left side when you try to run it, it should show you what task your note meeting.

Technical Documentation Page

I’m receiving these two messages:

  • 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”).

  • Waiting: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).

Looks like these lines may be the cause.

Make sure the id and href matches the name of the section exactly.

Variables not Variable for eg
(Match the case too lowercase or uppercase )

1 Like

omg thank you I’ve been looking over this for hours. its great to get a fresh set of eyes to point out the obvious for me

ah shoot still doesn’t pass

2 Likes

it couldn’t be because the headers i’m using in each in each section is literally <header> instead of like <h2> through <h6> could it?

can you post your updated code in full again?

1 Like

Nevermind, thank you though. it was a few typos. an extra l in variables and a lower case a in an id. once you pointed me in the right direction I could just physically test the links one at a time and the ones that didn’t work had the typos.

thanks again