Technical Documentation Page - Build a Technical Documentation Page

HTML-CSS
1

Tell us what’s happening:
Describe your issue in detail here.
Stuck at “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).”

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>

<html lang="en"></html>

<head>
  
  <main charset="utf-8"></main>
<main name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>Technical Documentation Page</title>
</head>

<body>
  <nav id="navbar">
      <header id="header">Reference</header>
      <ul>
       <li> <a class="nav-link" href="#SONOGONG" > SONOGONG </a> </li>
       <li> <a class="nav-link" href="#My_Bag"> My Bag </a> </li>
       <li> <a class="nav-link" href="#Picasso"> Picasso</a> </li>
       <li> <a class="nav-link" href="#HWAA">HWAA</a> </li>
       <li> <a class="nav-link" href="#Illa_Illa">Illa Illa</a> </li>
       <li><a class="nav-link" href="#_World"> _World </a></li>
      
     </ul>
    </nav>
  <main id="main-doc">
    
  
  <section class="main-section">
  <header><a href="#SONOGONG">SONOGONG</a></header>
  <ul>
  <li>Seventeen</li>
  </ul>
  <p></p>
  <p></p>
  <code></code>
  
  </section>
  
  <section class="main-section">
<header> <a href="#My_Bag">My Bag</a></header>
<ul>
<li>(G)-IDLE</li>
</ul>
<p></p>
<p></p>
<code></code>

</section>
 
  <section class="main-section">
  <header><a href="#Picasso">Picasso</a></header>
  <ul>
  <li>Kingdom</li>
  </ul>
  <p></p>
  <p></p>
 </section>
  
  <section class="main-section">
  <header><a href="#HWAA">Hwaa</a></header>
  <ul>
  <li>(G)-IDLE</li>
  </ul>
 <p></p>
 <p></p>
  <code></code>
  </section>
  
  <section class="main-section">
  <header><a href="#Illa_Illa">Illa Illa</a></header>
  <ul>
  <li>B.I</li>
  </ul>
 <p></p>
 <p></p>
  <code></code>
  </section>
 
 <section class="main-section">
  <header><a href="#_World">_World</a></header>
    <ul>
  <li>Seventeen</li>
  </ul>
  <p></p>
  <p></p>
  <code></code>

  </section>

 
     
  </main>
</body>

/* file: styles.css */
*{
  background-color: rgb(255, 183, 100)
}
@media (min-width: 300px)(max-width: 500px){
  #section{
    width: 300px
  }
}

Your browser information:

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

Challenge: Technical Documentation Page - Build a Technical Documentation Page

Link to the challenge:

3

Each .nav-link should have an href attribute that links to its corresponding .main-section:
According to the instruction, your ‘section’ element should have an id with a value that corresponds to the ‘href’ value, and vice versa. But, all of your ‘section’ elements don’t have the id with the same value as corresponding ‘href’ attribute:

Here, the opening <section> tag doesn’t have the id attribute at all.

Add the id attribute to all ‘section’ elements with the same value as the corresponding ‘href’ attribute.

1 Like
5

@fatima.madhurja

It looks like you are trying to post code.

Here is how you do that

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

2 Likes
6 
<section class="main-section" id="#SONOGONG">
7

The id value goes without the # character.

You have to repeat that step for all of your ‘section’ elements.

8 
The id value goes without the # character. 

You have to repeat that step for all of your 'section' elements.
[/quote]

It says: 
1.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).
 
My code :
 <section class="main-section"  id="SONOGONG">
  <header><a href="#SONOGONG">SONOGONG</a></header>
  <ul>
  <li>Seventeen</li>
  </ul>
  <p></p>
  <p></p>
  <code></code>
  
  </section>
9

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