Technical Documentation Page - Build a Technical Documentation Page

I can’t figure out this one–> 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”).

I’m not finished it yet but I keep trying to run the code for this one and just can’t seem to figure out what I’m doing wrong, any help would be appreciated, thank you.

*Your code so far<DOCTYPE! html>

Documentation Page What is HTML & CSS?
        <header>The basics of HTML & CSS</header>
    <nav id="navbar">
   <a class="nav-link" href="#The_basics_of_HTML_&_CSS">The basics of HTML & CSS</a>
</nav>
  </section>

<main id="main-doc">
    <section class="main-section" id="Introduction">
        <header>Introduction</header>
        <nav id="navbar">
            <a class="nav-link" href="#Introduction">Introduction</a>
        </nav>
        
        <p>This is what you need to know if you want to learn how to build a website and the basics of HTML & CSS.</p>
        <p></p>
    </section>
    <section class="main-section" id="The_basics">
        <header>The basics</header>
        <nav id="navbar">
            <a class="nav-link" href="#The_basics"></a>The basics</a>
        </nav>
        <P>The first thing you need to know is HTML & CSS are <strong>essential</strong> to know if you want to build a website from scratch and maintain it. Without knowing these you might struggle and run into problems you may find difficult to solve and you will be fustrated.</P>
        <P>Where as if you know the basics of HTML & CSS you will be able to find the problem and solve your difficulty yourself very quick and easily.</P>
    </section>
    <section class="main-section" id="HTML">
        <header>HTML</header>
        <nav id="navbar">
            <a class="nav-link" href="#HTML">HTML</a>
        </nav>
        <p>To start, HTML is the markup language for creating Web pages. It stands for <em>Hyper Text Markup Language</em>. It consists of elements.<br>HTML elements, in short, tell the browser how to display the content on a webpage.</br></p>
        <p>So what is HTML?</p>
        <ul>
            <li>Again, it stands for Hyper Text Markup Language.</li>
            <li>It's the standard markup language for creating Web pages.</li>
            <li>It describes the structure of a Web page.</li>
            <li>Consists of a series of elements.</li>
            <li>Tells the browser how to display the content.</li>
        </ul>
    </section>
    <section class="main-section" id="CSS">
        <header>CSS</header>
        <nav id="navbar"><a class="nav-link" href="#CSS">CSS</a></nav>
        <p>CSS is the language we use to style a Web page. It stands for Cascading Style Sheets. CSS describes how HTML elements are to be displayed on screen, paper or in other media.</p>
        <p>Why would you use CSS?</p>
        <ul>
            <li>CSS is used to define styles for your Web pages. Inlcuding design, layout and varioations in display for different devices and screen sizes.</li>
            <li>CSS helps you to read your code easier and seperates your HTML file from your CSS file.</li>
            <li>CSS saves a lot of work too. With an external stylesheet file, you can change the look of an entire website by changing just one file.</li>
    
        </ul>
    </section>
    <section class="main-section" id="Elements">
        <header>Elements</header>
        <nav id="navbar">
            <a class="nav-link" href="#Elements">Elements</a>
        </nav>
       <p>The HTML elements are defined by a start tag, content in the middle, and an end tag:</p>
       <p><br><strong>For example:</strong></br></p>
       <p>The <code>html</code> element is the root of an HTML page. Everything you code will go in between the html element.</p>
       <P>The <code>!DOCTYPE html</code> defines that this document is an HTML5 document.</P> 
       <p>The <code>head</code> element is the root of an HTML page.</p>
       <p>The <code>title</code> element specifies a title for the HTML page, this is shown in the browser's title bar.</p>
       <p>The <code>body</code> element defines the document's body, it's like a container for all the visible contents, like headings, paragrpahs, images, tables etc.</p>
       <p>The <code>h1</code> element defines a large heading, they rage from h1 to h6, h1 being the biggest and h6 being the smallest.</p>
       <p>The <code>p</code> element defines a paragraph just like this.</p>

    </section>
    <section class="main-section" id="References">
        <header>References</header>
        <nav id="navbar">
            <a class="nav-link" href="#References">References</a>
        </nav>
      <p>I took these references from <a href="https://www.w3schools.com/html/html_intro.asp#:~:text=HTML%20stands%20for%20Hyper%20Text,how%20to%20display%20the%20content" >w3schools.com</p></a>
        
    </section>
    <section class="main-section" id="Contact_us">
        <header>Contact us</header>
        <nav id="navbar">
            <a class="nav-link" href="#Contact_us">Contact us</a>
        </nav>
        
        <p></p>
    </section>
    
     </main>

Is this the entire code you have, it appears to be missing the opening section tag also main id=“main-doc” should be moved or deleted here.
Good luck

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