Technical Documentation Page - Build a Technical Documentation Page

HTML-CSS
1

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

can someone help me identify the problem here 1. When you click on a navbar element, the page should navigate to the corresponding section of the #main-doc element (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, and contains the corresponding header)
Your code so far

/* file: index.html */
<!DOCTYPE html>
<html lang="en">
  <link rel="stylesheet" href="styles.css">
    <main id="main-doc">
      <section class="main-section" id="introduction"> <header>Introduction</header><p></p> <p></p> 
      <li></li>
      <li></li>
      <code></code> </section>
      
      <section class="main-section" id="internal_stylesheet"> <header>Internal Stylesheet</header><p></p> <p></p> 
      <li></li>
      <li></li>
      <code></code> </section>
      <section class="main-section" id="external_stylesheet">  <header>External Stylesheet</header> <p></p> <p></p>
      <li></li>
      <li></li>
       <code></code></section>
      <section class="main-section" id="combining_selectors"> <header>Combining Selectors</header <p></p> <p></p> 
      <li></li>
      <li></li>
      <code></code></section>
      <section class="main-section" id="divisions"> <header>Divisions</header> <p></p> <p></p>
      <li></li>
      <li></li>
       <code></code> </section>
       <section class="main-section" id="color"> <header>Color</header> <p></p> <p></p>
      <li></li>
      <li></li>
       <code></code> </section>

      <section class="main-section" id="Text_align"> <header>Text Align</header> <p></p> <p></p>
      <li></li>
      <li></li>
       <code></code> </section>
       <section class="main-section" id="psuedo_classes"> <header>Psuedo Classes</header> <p></p> <p></p>
      <li></li>
      <li></li>
       <code></code> </section>
       <section class="main-section" id="border"> <header>Border</header> <p></p> <p></p>
      <li></li>
      <li></li>
       <code></code> </section>

       <nav id="navbar">
         <header>
           CSS Documentation</header>
         <a  class="nav-link" href="#introduction">Introduction</a>
         <a class="nav-link" href="#internal_stylesheet">Internal Stylesheet</a>
         <a class="nav-link" href="#external_stylesheet">External Stylesheet</a>
         <a class="nav-link" href="#combining_selectors">Combining Selectors</a>
         <a class="nav-link" href="#divisions">Divisions</a>
         <a class="nav-link" href="#color">Color</a>
         <a class="nav-link" href="#Text_Align">Text Align</a>
         <a class="nav-link" href="#psuedo_classes">Psuedo Classes</a>
         <a class="nav-link" href="#border">border</a>
         
         </nav>
    </main>
</html>

/* file: styles.css */
@media(width: 695){}

  **Your browser information:**

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

Challenge: Technical Documentation Page - Build a Technical Documentation Page

Link to the challenge:

2

try changing this line:

<a class="nav-link" href="#Text_Align">Text Align</a>

to use the id “Text_align” instead as the id has to be an exact match and is case-sensitive

3

thank you! worked out

1 Like
4

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