Technical documentation page help please

HTML-CSS
1

Tell us what’s happening:
I can’t accomplish user story #14 in the technical documentation project which says: On regular sized devices (laptops, desktops), the element with id="navbar" should be shown on the left side of the screen and should always be visible to the user.
Here’s a link to my code:
https://codepen.io/Bashar3/pen/Yzparmw
Your code so far

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title> Technical documentation </title>
    </head>
    <body>
    <main id="main-doc">
        
        <nav id="navbar">
            <header>Walk-through 5 different proramming languages</header>
            <a class="nav-link" href="#HTML5">HTML5</a>
            <a class="nav-link" href="#CSS3">CSS3</a>
            <a class="nav-link" href="#Javascript">Javascript</a>
            <a class="nav-link" href="#C#">C#</a>
            <a class="nav-link" href="#C++">C++</a>
        </nav>
      
      <section id="HTML5" class="main-section">
        <header>HTML5</header>
        <p></p>
        <p></p>
        <code></code>
        <ul>
            <li></li>
            <li></li>
            <li></li>
        </ul>
      </section>  
      <section id="CSS3" class="main-section">
          <header>CSS3</header>
          <p></p>
          <p></p>
          <code></code>
          <ul>
            <li></li>
            <li></li>
            <li></li>
        </ul>
      </section>
      <section id="Javascript" class="main-section">
          <header>Javascript</header>
          <p></p>
          <p></p>
          <code></code>
          <ul>
            <li></li>
            <li></li>
            <li></li>
        </ul>
      </section>
      <section id="C#" class="main-section">
          <header>C#</header>
          <p></p>
          <p></p>
          <code></code>
          <ul>
            <li></li>
            <li></li>
            <li></li>
        </ul>
      </section>
      <section id="C++" class="main-section">
          <header>C++</header>
          <p></p>
          <p></p>
          <code></code>
          <ul>
            <li></li>
            <li></li>
            <li></li>
        </ul>
      </section>
    </main>    
    </body>
</html>
<style>
   #navbar {
       position: fixed;
       
    }
    
  @media screen {max-width: 800px;}
        ul {
            background-color: aliceblue;
        }
        
    }
 
</style>

Your browser information:

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

Challenge: Build a Technical Documentation Page

Link to the challenge:

2

this is not the link to your code, you need to give the link to the pen saved to your account / if you have not saved the pen to your account, you can use the fork button in the bottom left corner, that will copy the pen to your account

can you please givet hat link so it’s easier to see your project?

3

I clicked the fork button

5

then please update the link, the one in the top post is still the FreeCodeCamp’s pen with just the test suite

1 Like
6

I just did did it work?

7

Hello there,

All of the tests pass, when I run them. Are you running the tests with the window fully expanded?

Also, in CodePen, this is unnecessary:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title> Technical documentation </title>
    </head>
    <body>

Anything outwith the body tags does not need to be in the HTML section, as CodePen adds this automatically behind the scenes.

Hope this helps

8

It just worked. I can’t believe that was the problem. Thank you!!

1 Like
9

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