Technical Documentation Page - Build a Technical Documentation Page

HTML-CSS
1

Tell us what’s happening:

can any one help me here please? its step 13. HTML project

Your code so far

<!-- file: index.html -->
<main id="main-doc">
   
   <link rel="stylesheet" href="./styles.css">
   
   <nav id="navbar">
     
      <header>Topic</header>

      <a class="nav-link" href="#filler_text_1">Filler text1</a>
      <a class="nav-link" href="#filler_text_2">Filler text2</a>
      <a class="nav-link" href="#filler_text_3">Filler text3</a>
      <a class="nav-link" href="#filler_text_4">Filler text4</a>
      <a class="nav-link" href="#filler_text_5">Filler text5</a>
  
   </nav>
  
  <section class="main-section" id="filler_text_1">
    
     <header>filler text 1</header>
     
     <p> This is a paragraph 1.</p>
     <p> This is a paragraph 2.</p>
   
     <code></code>
     
     <ul>
     <li></li>
     <li></li>
     <li></li>
     <li></li>
     <li></li>
     </ul>
    
     </section>
    
    <section class="main-section" id="filler_text_2">
    
    <header>filler text 2</header>
      
       <p> This is a paragraph 3.</p>
       <p> This is a paragraph 4.</p>
    
      <code></code>
    
     <li></li>
    
    </section> 


   <section class="main-section" id="filler_text_3">
      <header>filler text 3</header>
      
       <p> This is a paragraph 5.</p>
       <p> This is a paragraph 6.</p>
    
       <code></code>
     
     <li></li>
   
    </section> 
   
    <section class="main-section" id="filler_text_4">
   
    <header>filler text 4</header>
      
       <p> This is a paragraph 7.</p>
       <p> This is a paragraph 8.</p>
    
        <code></code>
      
      <li></li>
    
    </section> 
    
    <section class="main-section" id="filler_text_5">
    
    <header>filler text 5</header>
       
       <p> This is a paragraph 9.</p>
       <p> This is a paragraph 10.</p>
    
        <code></code>
    
     <li></li>
    
    </section>
  </main>

/* file: styles.css */
#navbar {
  position: fixed;
  left: 0;
  padding: 20px;
}

#navbar header {
  font-size: 1.618em;
  margin-bottom: 7px
}

#navbar a {
  text-decoration: none;
  display: block;
  margin-bottom: 12px
}
#main-doc{
  margin-left: 200px;
}

@media (max-height:600px) {
   .main-section {
   font-size:  ,7em;
  }
}

Your browser information:

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

Challenge Information:

Technical Documentation Page - Build a Technical Documentation Page

2

try to move this into the head element and create a body element around the main element.
Then also add the missing html element and the <!DOCTYPE html> to the first line of the code.

3

thank you but i tried already still not helping…

4

can you post the correct code with the boilerplate added and the html tag and the body tag etc all added in correctly? I’d be happy to test the corrections once you have them.

5

sure I did upload once again.

6

i don’t see it? (hopefully you can post here)

7

Tell us what’s happening:

i did few changes as you mention early i hope this time we get teh solution. Thank you for your help in advance.
love and thank you from europe :slight_smile:

Your code so far

<!-- file: index.html -->
<!DOCTYPE HTML>
<body>
   <main id="main-doc">
  </body>
  <head>
   <link rel="stylesheet" href="./styles.css">
   </head>
   
   <nav id="navbar">
      <header>Topic</header>

      <a class="nav-link" href="#filler_text_1">Filler text1</a>
      <a class="nav-link" href="#filler_text_2">Filler text2</a>
      <a class="nav-link" href="#filler_text_3">Filler text3</a>
      <a class="nav-link" href="#filler_text_4">Filler text4</a>
      <a class="nav-link" href="#filler_text_5">Filler text5</a>
  
   </nav>
  
  <section class="main-section" id="filler_text_1">
    
     <header>filler text 1</header>
     
     <p> This is a paragraph 1.</p>
     <p> This is a paragraph 2.</p>
   
     <code></code>
     
     <ul>
     <li></li>
     <li></li>
     <li></li>
     <li></li>
     <li></li>
     </ul>
    
     </section>
    
    <section class="main-section" id="filler_text_2">
    
    <header>filler text 2</header>
      
       <p> This is a paragraph 3.</p>
       <p> This is a paragraph 4.</p>
    
      <code></code>
    
     <li></li>
    
    </section> 


   <section class="main-section" id="filler_text_3">
      <header>filler text 3</header>
      
       <p> This is a paragraph 5.</p>
       <p> This is a paragraph 6.</p>
    
       <code></code>
     
     <li></li>
   
    </section> 
   
    <section class="main-section" id="filler_text_4">
   
    <header>filler text 4</header>
      
       <p> This is a paragraph 7.</p>
       <p> This is a paragraph 8.</p>
    
        <code></code>
      
      <li></li>
    
    </section> 
    
    <section class="main-section" id="filler_text_5">
    
    <header>filler text 5</header>
       
       <p> This is a paragraph 9.</p>
       <p> This is a paragraph 10.</p>
    
        <code></code>
    
     <li></li>
    
    </section>
  </main>

/* file: styles.css */
#navbar {
  position: fixed;
  left: 0;
  padding: 20px;
}

#navbar header {
  font-size: 1.618em;
  margin-bottom: 7px
}

#navbar a {
  text-decoration: none;
  display: block;
  margin-bottom: 12px
}
#main-doc{
  margin-left: 200px;
}

@media (max-height:600px) {
   .main-section {
   font-size:  ,7em;
  }
}

Your browser information:

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

Challenge Information:

Technical Documentation Page - Build a Technical Documentation Page

8

i just saw the duplicate post you made so I merged the new post into the old one (always use one post for all your updates/questions, don’t create a 2nd one)

I will take a look at this new code now.

9

this part should go after the <!DOCTYPE html>
also please correct the first line to be as I wrote and not HTML

Then you also need to fix the location of the </body>. It needs to be after the closing tag of the </main>