Technical Documentation Page - Build a Technical Documentation Page

HTML-CSS
1

hello, i dont know where i am wrong.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, inital-scale=1.0">
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <main id="main-doc">
      <section id="Introduction" class="main-section">
        <header>Introduction</header>
        <p><code></code></p>
        <p></p>
        <ul>
          <li></li>
          <ul>
            <nav id="navbar">
              <header>Introduction</header>
              <a class="nav-link" href="/#Introduction/">Introduction</a>
              </nav>
      </section>
      <section id="What_you_should_already_know" class="main-section">
        <header>What you should already know
</header>
        <p><code></code></p>
        <p></p>
        <ul>
          <li></li>
          <ul>
            <nav id="navbar">
              
              <a class="nav-link" href="/#What_you_should_already_know/">What you should already know</a>
              </nav>

      </section>
      <section id="JavaScript_and_Java" class="main-section">
        <header>JavaScript and Java
</header>
        <p><code></code></p>
        <p></p>
        <ul>
          <li></li>
          <ul>
            <nav id="navbar">
         
              <a class="nav-link" href="/#JavaScript_and_Java/">JavaScript and Java</a>
              </nav>

      </section>
      <section id="Hello_world" class="main-section">
<header>Hello world
</header>
        <p><code></code></p>
        <p></p>
        <ul>
          <li></li>
          <ul>
            <nav id="navbar">
              
              <a class="nav-link" href="/#Hello_world/">Hello world</a>
              </nav>

      </section>
        
      <section id="Variables" class="main-section">
        <header>Variables
</header>
        <p><code></code></p>
        <p></p>
        <ul>
          <li></li>
          <ul>
            <nav id="navbar">
            
              <a class="nav-link" href="/#Variables/">Variables</a>
            </nav>
      </section>

    </main>
  </body>
</html>

/* file: styles.css */
#navbar{
  text-align: left;
}
@media (min-width:567px){

}

Your browser information:

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

Challenge: Technical Documentation Page - Build a Technical Documentation Page

Link to the challenge:

2

Can you provide more information about what you are struggling to do?

3

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

4

this should be href="#Introduction" without any slashes if you want to link to a section whose id is Introduction

6

i removed the slashes and still have the same problem !

7 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, inital-scale=1.0">
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <main id="main-doc">
      <nav id="navbar">
      <header>JS Documentation</header>
      
        <ul>
          <li><a class="nav-link" href="#Introduction">Introduction</a></li>
          <li><a class="nav-link" href="#What_you_should_already_know">What you should already know</a></li>
          <li><a class="nav-link" href="#Javascript_and_Java">JavaScript and Java</a></li>
          <li><a class="nav-link" href="#Hello_world">Hello world</a></li>
          <li><a class="nav-link" href="#Variables">Variables</a></li>
          </ul> 
        </nav>
      <section id="Introduction" class="main-section">
        <header>Introduction</header>
        <p><code></code></p>
        <p></p>
        <ul>
          <li></li>
          <ul>
      </section>
      
      <section id="What_you_should_already_know" class="main-section">
        <header>What you should already know</header>
        <p><code></code></p>
        <p></p>
        <ul>
          <li></li>
          <ul>

      </section>
      <section id="JavaScript_and_Java" class="main-section">
        <header>JavaScript and Java</header>
        <p><code></code></p>
        <p></p>
        <ul>
          <li></li>
          <ul>
           

      </section>
      <section id="Hello_world" class="main-section">
<header>Hello world</header>
        <p><code></code></p>
        <p></p>
        <ul>
          <li></li>
          <ul>
         

      </section>
        
      <section id="Variables" class="main-section">
        <header>Variables</header>
        <p><code></code></p>
        <p></p>
        <ul>
          <li></li>
          <ul>
      </section>

    </main>
  </body>
</html>
8

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 (').

9

you have to make sure all your links are working. For eg. this link doesn’t work because the id is not an exact match

10

thank you i passed the code

1 Like
11

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