Technical Documentation Page - Build a Technical Documentation Page

HTML-CSS
1

Tell us what’s happening:

i cannot figure out what i wants me to do. Tried getting help using ai couldnt understand what the hell it was talking about.

Your code so far

<!-- file: index.html -->
<!doctype html>
<html lang="en">


   <main id="main-doc">
   <section class="main-section" id="This_is_header">This is header
    <header id="This_is_header">This is header</header>
<p></p>
<p></p>
<code>
</code>
<li>
</li>


<section class="main-section" id="This_is_header_2">This is header 2
<header id="This_is_header_2">This is header 2</header>
<p></p>
<p></p>
<code>
</code>
<li>
</li>
</section>


<section class="main-section" id="This_is_header_3">This is header 3
<header id="This_is_header_3">This is header 3</header>
<p></p>
<p></p>
<code>
</code>
<li>
</li>
</section>


<section class="main-section" id="This_is_header_4">This is header 4
<header id="This_is_header_4">This is header 4</header>
<p></p>
<p></p>
<code>
</code>
<li>
</li>
</section>


<section class="main-section" id="This_is_header_5">This is header 5
<header id="This_is_header_5">This is header 5</header>
<p></p>
<p></p>
<code>
</code>
<li>
</li>
</section>

<nav id="navbar">
   <header>Example
      <a class="nav-link" href="main-section">Example
      </a>

      <a class="nav-link" href="main-section">Example
      </a>

      <a class="nav-link" href="main-section">Example
      </a>

      <a class="nav-link" href="main-section">Example
      </a>

      <a class="nav-link" href="main-section">Example
      </a>
        
         
   </nav>
    </header>
</main>

  </html>

/* file: styles.css */

Your browser information:

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

Challenge Information:

Technical Documentation Page - Build a Technical Documentation Page

2 
doctype html>
<html lang="en">


   <main id="main-doc">
   <section class="main-section" id="This_is_header">This is header
    <header id="This_is_header">This is header</header>
<p></p>
<p></p>
<code>
</code>
<li>
</li>


<section class="main-section" id="This_is_header_2">This is header 2
<header id="This_is_header_2">This is header 2</header>
<p></p>
<p></p>
<code>
</code>
<li>
</li>
</section>


<section class="main-section" id="This_is_header_3">This is header 3
<header id="This_is_header_3">This is header 3</header>
<p></p>
<p></p>
<code>
</code>
<li>
</li>
</section>


<section class="main-section" id="This_is_header_4">This is header 4
<header id="This_is_header_4">This is header 4</header>
<p></p>
<p></p>
<code>
</code>
<li>
</li>
</section>


<section class="main-section" id="This_is_header_5">This is header 5
<header id="This_is_header_5">This is header 5</header>
<p></p>
<p></p>
<code>
</code>
<li>
</li>
</section>

<nav id="navbar">
   <header>Example
      <a class="nav-link" href="This_is_header">This is header
      </a>

      <a class="nav-link" href="This_is_header_2">This is header 2 
      </a>

      <a class="nav-link" href="This_is_header_3">This is header 3 
      </a>

      <a class="nav-link" href="This_is_header_4">This is header 4 
      </a>

      <a class="nav-link" href="This_is_header_5">This is header 5
      </a>
        
         
   </nav>
    </header>
</main>

  </html>

ended up fixing one part but the href part isnt working

3

  1. The href should have a # and point to a corresponding id on a section

  2. Each a element should have the same link text as the header inside the section it is linking to.

Example:

<nav>
  <a href="#section_one">Section one</a>
</nav>

<section id="section_one">
  <header>Section one</header>
</section>

MDN: Linking to an element on the same page

4

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