Technical Documentation Page - Build a Technical Documentation Page

HTML-CSS
1

Tell us what’s happening:
Describe your issue in detail here.

Your code so far *
I’m having these 3 issues belowI don’t know why please i need help

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

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

3 Your Technical Documentation project should use at least one media query.

<!-- file: index.html -->
<!-- file: index.html -->
<DOCTYPE! HTML>
  <html>
    <head>
      <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
    <title>Technical Documentation</title>
    <link rel="stylesheet" href="style.css">
      
    </head>

    <body>
<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_know">What you should know</a><li>

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

     <li><a class="nav-link" href="#Hello_World">Hello World</a></li> 

<li><a class="nav-link" href="#Variables">Variables</a></li>
   
   <li><a class="nav-link" href="#Declaring_Variables">Declaring Variables</a></li>

 <li><a class="nav-link" href="#Global_Variables">Global Variables</a></li>

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

      <li><a class="nav-link" href="#Data_Types">Data Types</a><li> 

<li><a class="nav-link" href="#if_else_statement">if else statement</a><li>

   <li><a class="nav-link" href="#While_statement">While statement</a><li> 
   
  <li><a class="nav-link" href="#Function_Declarations">Function Declarations</a><li>

<li><a class="nav-link" href="#References">References</a><li></ul>
</nav>
<main id="main-doc">
  <section class="main-section" id="Introduction">
  <header>Introduction</header>
  <ul>
   <li></li>
  <li></li>
  <li></li>
  </ul>
  </section>
 <section class="main-section" id="What_should_you_know">
 <header>What should you know</header></section>
 <section class="main-section" id="Javascript"><header>Javascript</header>
 <ul>
  <li></li>
  <li></li>
  <li></li>
  </ul></section>
 <section class="main-section" id="Hello_World"><header>Hello World</header></section>

 <section class="main-section" id="Variables"><header>Variables</header></section>

 <section class="main-section" id="Declaring_Variables"><header>Declaring Variables</header></section>

 <section class="main-section" id="Global_variables"><header>Global Variables</header
 <code></code>
  <code></code>
  </section>

 <section class="main-section" id="Constants"><header>Constants</header></section>

 <section class="main-section"id="Data_Types"><header>Data Types</header>
 <p></p>
   <p></p>
    <p></p>
     <p></p>
     </section>

<section class="main-section" id="if_else_statement"><header>if else statement</header>
<code></code>
  <code></code>
</section>

<section class="main-section" id="While_Statements"><header>While Statements</header>
<p></p>
   <p></p>
    <p></p>
     <p></p>
<code></code>
  <code></code>

</section>

<section class="main-section" id="Function_Declarations"><header>Function Declarations</header><p></p>
   <p></p>
    <p></p>
     <p></p>
     </section>

 <section class="main-section" id="References"><header>References</header></section>
</main>
     </body>
  </html>

  

/* file: styles.css */
/* file: styles.css */
@media(max-width: 815px) {
 #navbar{
    width: 356px;
    height:207px;
  }}

Your browser information:

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

Challenge: Technical Documentation Page - Build a Technical Documentation Page

Link to the challenge:

2

Change this to <!DOCTYPE html>

Add missing > to the closing tag

Edit: also you have some li lines that are not properly closed.
Check each one carefully (they should have </li> not <li> at the end)

3

done but nothings changed…any other errors?

4

and i dont get why my media query is not working

5

check the spelling of your linked css to fix that

6

The headers and id are not matching here.
(in addition to the bad closing li tags in approx 6 different places)

7

I’m sorry if it feels like I’m disturbing but ive done that and its still saying i failed but the media worked tho

8

please post the changed code

9

these do not match (capital V for Variables)
Double check the href in the nav-link as well

10

The above also doesn’t match

11

they said new users can only put 2 liks in a post dont uderstand what they mean by that guess i cant post the changed code

12

after making all the changes I’ve suggested so far, your code passes for me.
So keep trying.

13

done that it worked now im left with the 2nd error

14

without seeing the code I cannot comment further.
As I mentioned, your code passes for me when all the changes I’ve suggested above have been applied.

To post code on the forum, follow the instructions below

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

15 
<!-- file: index.html -->
<!DOCTYPE html>
  <html>
    <head>
      <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
    <title>Technical Documentation</title>
    <link rel="stylesheet" href="styles.css">
      
    </head>

    <body>
<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_know">What you should already know</a></li>

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

     <li><a class="nav-link" href="#Hello_World">Hello World</a></li> 

<li><a class="nav-link" href="#variables">variables</a></li>
   
   <li><a class="nav-link" href="#Declaring_variables">Declaring variables</a></li>

 <li><a class="nav-link" href="#Global_variables">Global variables</a></li>

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

      <li><a class="nav-link" href="#Data_Types">Data Types</a></li> 

<li><a class="nav-link" href="#if_else_statement">if else statement</a></li>

   <li><a class="nav-link" href="#While_statements">While statements</a></li> 
   
  <li><a class="nav-link" href="#Function_Declarations">Function Declarations</a></li>

<li><a class="nav-link" href="#References">References</a></li></ul>
</nav>
<main id="main-doc">
  <section class="main-section" id="Introduction">
  <header>Introduction</header>
  <ul>
   <li></li>
  <li></li>
  <li></li>
  </ul>
  </section>
 <section class="main-section" id="What_you_should_already_know">
 <header>What you should already know</header></section>
 <section class="main-section" id="Javascript"><header>Javascript</header>
 <ul>
  <li></li>
  <li></li>
  <li></li>
  </ul></section>
 <section class="main-section" id="Hello_World"><header>Hello World</header></section>

 <section class="main-section" id="variables"><header>variables</header></section>

 <section class="main-section" id="Declaring_variables"><header>Declaring variables</header></section>

 <section class="main-section" id="Global_variables"><header>Global variables</header>
 <code></code>
  <code></code>
  </section>

 <section class="main-section" id="Constants"><header>Constants</header></section>

 <section class="main-section"id="Data_Types"><header>Data Types</header>
 <p></p>
   <p></p>
    <p></p>
     <p></p>
     </section>

<section class="main-section" id="if_else_statement"><header>if else statement</header>
<code></code>
  <code></code>
</section>

<section class="main-section" id="While_Statements"><header>While Statements</header>
<p></p>
   <p></p>
    <p></p>
     <p></p>
<code></code>
  <code></code>

</section>

<section class="main-section" id="Function_Declarations"><header>Function Declarations</header><p></p>
   <p></p>
    <p></p>
     <p></p>
     </section>

 <section class="main-section" id="References"><header>References</header></section>
 <ul>
   <li></li>
   </ul>
</main>
     </body>
  </html>
````Preformatted text`
16

make sure the headers and links match

17

these don’t match the nav-link line

18

thanks the code passed

1 Like
19

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