Technical Documentation Page - Build a Technical Documentation Page

HTML-CSS
1

Tell us what’s happening:
When I run the test it fails," Your #navbar should always be on the left edge of the window."
I have cleared and restarted still can’t figure out what I am doing wrong I seem to be going about this from the wrong direction. Maybe. any hints or links to documents would be appreciated.
Bill

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Technical Documentation</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./styles.css">
  </head>
 <body>
    <header id="header"><strong>Technical Documentation</strong></header>
      <nav id="navbar">
       <ul>
      <header align="left">Jump to Topic</header>      
      <li><a class="nav-link" href="#topic_1">Topic 1</a></li>
      <li><a class="nav-link" href="#topic_2">Topic 2</a></li>
      <li><a class="nav-link" href="#topic_3">Topic 3</a></li>
       <li><a class="nav-link" href="#topic_4">Topic 4</a></li>
       <li><a class="nav-link" href="#topic_5">Topic 5</a></li>
       </ul>
            </nav>
       <main id="main-doc">
         <section class="main-section" id="topic_1">
      <header><code>Topic 1</code></header>
      <p>This is a technical doc for propellers</p>
      <ul>
        <li>Specs fo Propellers</li>
        <li>Data section</li>
        <li>We show all the numbers</li>
        <li>angle of the prop</li>
        <li>angle and radius dependent on distance from hub</li>
        </ul>
      </section>
      <section class="main-section" id="topic_2">
      <header><code>Topic 2</code></header>
      <p>This is a technical document for Jet Engines only</p>
      <p>Here we begin to list the components of a jet engine</p>
      <p></p>
      <p>list of only the fuel portion of the engine</p>
      </section>
      <section class="main-section" id="topic_3">
      <header><code>Topic 3</code></header>
      <p>Jet engine rotating parts only</p>
      <p>list of all the shafts that spin</p>
      <p>list of all the peices that lubricate the engine</p>
      <p>oil pump</p>
      </section>
      <section class="main-section" id="topic_4">
      <header><code>Topic 4</code></header>
      <p>list of all the auxiluary components</p>
      <p>hydralics does not run the engine but sure helps you fly</p>
      <p>hydralic rotating parts</p>
      <p>hydralic (pump)</p>
      </section>
      <section class="main-section" id="topic_5">
      <header><code>Topic 5</code></header>
      <p>hydralic parts that are fixed</p>
      <p>list hydralic parts not rotating </p>
      <p>parts fixed in place</p>
      <p> hoses </p>
      </section>
    </main>
  </body>
  </html>


/* file: styles.css */


html {  
  font-size: 20px; 
  font-family: "Open Sans", sans-serif;
  background-color: #0497;
}
#header:first-of-type {
  text-align: center;
}

body {
   display: flex;
   flex-direction: column;
   width: 700px;
   margin: 0;
   padding: 0 20px 20px 20px;
  }
  
code {
  font-size: 25px;
  font-weight: bold;
}

#navbar {
  display: flex;
  flex-direction: column;
  font-weight: bold;
  flex: 0 0 20%;
  height: 20%;
  position: fixed;
  margin-left:0;
  }
  

main {
  display:flex;
  flex-direction: column;
  padding: 10px;
 }

.main-section {
  display: flex;
  flex-direction: column;
  padding:0 5px 5px 135px;
  margin-left: 100px;
}
.nav-link {
  font-weight: bold;
  font-size: 1rem;
  flex-direction: column;
}

@media (max-width: 1199px) and (min-width: 769px) {
  #main-section {width: 675px}
  .keys {width: 633px}
}
@media (max-width: 768px) {
  #main-section {
    width: 358px;
  }}

Your browser information:

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

Challenge: Technical Documentation Page - Build a Technical Documentation Page

Link to the challenge:

2

take another look at the past couses, this is what I do when I get stuck in a cert since they don’t expect you to know anything they have yet to go over.
Its also likely the answer your looking for is in one of them.

there is also an example page as a clue:
https://technical-documentation-page.freecodecamp.rocks

be sure to play around with this page, you could also inspect it via right clicking on the open webpage then clicking inspect, to see the HTML and CSS that makes it up

I recommend creating small dummy sites, these can help by giving you somewhere to ‘play’ with different layouts, styles, animations, etc

having looked at what your code produces,
its possible its considering the nav bar, to be at the ‘top’ but not the ‘left’.

when I did this project I used media queries to have the nav bar
span the top of the window on small screens,
and jump to the left for large screens.
If you look at the example website, resizing the window will do the same.

this vid may be able to help show you what I mean, I’ve not watched all of it but the first part demonstrates a responsive layout:
(5) CSS Media Queries Tutorial for Responsive Design - YouTube

searching flexbox and media queries, responsive layouts, can get you some great results and examples

3

Which sides of the body are you adding padding to? Could one of those sides be keeping your nav menu from touching the left edge of the window?

4

Great hint, I had to go find padding info. Thank you I solved it.

5

Thank you Guided. Question how do you get into a page or is that an app to both code and see the results like you can inside this course. That guy in the video was doing it real time that was great for instruction and trouble shooting. Bill