Technical Documentation Page - Build a Technical Documentation Page

HTML-CSS
1

Tell us what’s happening:

I’m kinda stuck on this. The instruction says. “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)”.

I did what it asked but I’m not passing the test. Please help me out guy

Your code so far

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <meta charset="UTF-8"/>
    <title>Technical Documentation</title>
    <link rel="stylesheet" href="styles.css"></link>
</head>
<body>
    <nav id="navbar">
      <header>Hyper Text Markup Language(HTML)</header>
      <div>
        <ul>
          <li><a class="nav-link" href="#Introduction">Introduction</a></li>
          <li><a class="nav-link" href="#html_definition">Html Definition</a></li>
          <li><a class="nav-link" href="#void_elements">Void elements</a></li>
          <li><a class="nav-link" href="#images">Images</a></li>
          <li><a class="nav-link" href="#headings">Headings</a></li>
          <li><a class="nav-link" href="#paragraphs">Paragraphs</a></li>
          <li><a class="nav-link" href="#lists">Lists</a></li>
        </ul>
      </div>
    </nav>
    <main id="main-doc">
      <section class="main-section" id="introduction">
        <header><b>Introduction</b></header>
          <p><code><b>HTML (HyperText Markup Language)</b></code> is the code that is used to structure a web page and its content. For example, content could be structured within a set of paragraphs, a list of bulleted points, or using images and data tables. This article provides a basic understanding of HTML and its functions, and shows you how to create the basic content for your first website.</p>
      </section>
      <section class="main-section" id="html_definition"> 
        <header><b>HTML Definition</b></header>
          <p>HTML is a markup language that defines the structure of your content. HTML consists of a series of elements, which you use to enclose, or wrap, different parts of the content to make it appear a certain way, or act a certain way. The enclosing tags can make a word or image hyperlink to somewhere else, can italicize words, can make the font bigger or smaller, and so on.
            <p>The main part of our elements are as follows:
              <ul>
                <p><li>The opening tag: This consists of the name of the element (in this case, p), wrapped in opening and closing angle brackets. This states where the element begins or starts to take effect — in this case where the paragraph begins.</li></p>
                <p><li>The closing tag: This is the same as the opening tag, except that it includes a forward slash before the element name. This states where the element ends — in this case where the paragraph ends. Failing to add a closing tag is one of the standard beginner errors and can lead to strange results.</li></p>
                <p><li>The content: This is the content of the element, which in this case, is just text.</li></p>
                <p><li>The element: The opening tag, the closing tag, and the content together comprise the element.</li></p>
              </ul>
            </p>
          </p>
      </section>
      <section class="main-section" id="void_elements">
        <header><b>Void elements</b></header>
          <p>A <code><b>void element</b></code> in HTML is an element that does not have a closing tag and cannot contain any content inside it. These elements are self-contained and usually perform a specific function, like inserting images, breaking lines, or creating inputs.
            <p><b>Keys Characteristics of Void elements:</b>
              <ul>
                <li>No closing tag(&lt/tag&gt in not needed)</li>
                <li>Cannot contain any child element</li>
                <li>Usually self-enclosing(&lttag/&gt) in <code>XHTML</code> but just (&lttag&gt)in <code>HTML</code></li>
              </ul>
            </p>
          </p>
      </section>
      <section class="main-section" id="images">
        <header><b>Images</b></header>
          <p>The <code><b>image element</b></code> in HTML is the (&ltimg&gt) tag. It is used to display images on a webpage. Since it is a void element, it does not have a closing tag.
</p> 
      </section>
      <section class="main-section" id="headings">
        <header><b>Headings</b></header>
          <p>A <code><b>heading element</b></code> in HTML is used to define headings on a webpage. There are six levels of headings, from &lth1&gt (largest) to &lth6&gt (smallest).
            <p>Syntax & Examples:
              <ol>
                <li>&lth1&gtThis is Heading 1&lt/h1&gt</li>
                <li>&lth2&gtThis is Heading 2&lt/h2&gt</li>
                <li>&lth3&gtThis is Heading 3&lt/h3&gt</li>
                <li>&lth4&gtThis is Heading 4&lt/h4&gt</li>
                <li>&lth5&gtThis is Heading 5&lt/h5&gt</li>
                <li>&lth6&gtThis is Heading 6&lt/h6&gt</li>
              </ol>
            </p>
            <p>Key Points About Headings:
              <ul>
                <li>&lth1&gt is usually the main title of a page.</li>
                <li>&lth2&gt to &lth6&gt are used for subheadings.</li>
                <li>Headings help with <b>SEO</b> (Search Engine Optimization) and <b>page structure</b>.</li>
                <li>They are <b>block-level elements</b> (they take up the full width).</li>
              </ul>
           </p>
</p>
      </section>
      <section class="main-section" id="paragraphs">
        <header><b>Paragraphs</b></header>
          <p>The <code><b>paragraph element</b></code> in HTML is the &ltp&gt tag. It is used to define paragraphs of text on a webpage.
            <p>Key Points About &ltp&gt:
              <ul>
                <li>It is a block-level element (takes up the full width).</li>
                <li>Adds automatic spacing before and after the text.</li>
                <li>Can contain text, inline elements, and links but not block elements inside it.
</li>
              </ul>
            </p>
</p>
      </section>
      <section class="main-section" id="lists">
        <header><b>Lists</b></header>
          <p>A list element in HTML is used to display lists of items. There are three main types of lists:
            <ol>
              <li>Ordered List(&ltol&gt)<p>Used when the order of items matters.
</p></li>
              <li>Unordered List(&ltul&gt)<p>Used when the order doesn't matter.
</p></li>
              <li>Description List(&ltdl&gt)<p>Used for key-value pairs, like a dictionary.</p></li>
            </ol> 
            <p>Key Points About Lists:
              <ul>
                <li>&ltol&gt uses numbers (1, 2, 3...)</li>
                <li>&ltul&gt uses bullets (●, ○, ■...)</li>
                <li>&ltdl&gt is for terms and descriptions</li>
                <li>&ltli&gt (list item) is used inside &ltol&gt and &ltul&gt</li>
              </ul>
            </p>
          </p>
      </section>
    </main>
</body>
</html>

WARNING

The challenge seed code and/or your solution exceeded the maximum length we can port over from the challenge.

You will need to take an additional step here so the code you wrote presents in an easy to read format.

Please copy/paste all the editor code showing in the challenge from where you just linked.

Replace these two sentences with your copied code.
Please leave the ``` line above and the ``` line below,
because they allow your code to properly format in the post.

Your mobile information:

23106RN0DA - Android 13 - Android SDK 33

Challenge: Technical Documentation Page - Build a Technical Documentation Page

Link to the challenge:

2

My code is not responding here. What’s wrong guys

3

I’ve edited your code for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

4

Another way could be: if you have a question about a specific challenge as it relates to your written code for that challenge, just click the Ask for Help button located on the challenge. It will create a new topic with all code you have written and include a link to the challenge also. You will still be able to ask any questions in the post before submitting it to the forum.

5

Check your links, do they work when you click them?

Check the capitalization of the code in links that are broken.

6

There was this error so I believe they had to do it manually

7

When it comes to linking with IDs, it is important to match the case exactly. Let me know if you already checked that.
Like:

 <li><a class="nav-link" href="#Introduction">Introduction</a></li>

Does not match with:

<section class="main-section" id="introduction">
8

Ok it passed thanks for that. Didn’t saw that little mistake been stuck for hours :joy::pray:

9

Ok will do that next time. Thanks