Technical Documentation Page (Feedback)

The project is all tests done, but I need some feedback on it especially the positions of both Desktop and Mobile.
You’re free to edit the code if you think it’s unorganized/messy etc

Your code so far
https://codepen.io/maz12211/pen/LYxrdbb

Challenge: Build a Technical Documentation Page

Hi!
Here are some pieces of advice:
0. The navigation bar is overflowing the main content. You can fix this by giving the nav-bar a fixed width and giving the main content the same padding. Or you can wrap the whole main content (without nav-bar) in a <div> container and wrap the nav-bar in another <div> container. Like this:

    <main>
      <div class='nav-bar__wrapper'>
        <nav>
        </nav>
      </div>
      <div class='main-content>
        <section 1, 2, ...>
      </div>
    </main>

and giving the <main> display: flex declaration. Then you give your #navbar a width: 30% and your .main-content container width: 65%; order: 1; (the latter is used to position your main content AFTER your nav-bar).

  1. #main-doc { float: right;} is doing nothing. If you uncomment this rule nothing changes. float is mainly used for images and you won’t use it frequently later (because there are better alternatives). You can read in detail about float at MDN.
  2. Stop using <br> tag after list elements. <li> elements auto create line breaks, just like <p> or <h1/2/3...> elements. If you need to adjust spacing you can adjust it with CSS. (sibling combinator is a good choice).
  3. border-width: thin is overwritten by the next border: 2px solid grey declaration. Btw you can change this to border-right, this way you won’t get a border on all sides.
  4. It’s considered a better practice to place your nav-bar before your main content in HTML. (nav-bar>main>footer).
  5. When setting the font-family always add the backup font in case something goes wrong (font-family: Verdana, sans-serif for example).
  6. You can use padding instead of margin-left in your #code-var rule. padding: 5px 5px 5px 0; is same as padding: 5px 0 5px 0; + code { margin-left: 5px}.
  7. Instead of giving the a tag a margin declaration it’s possible to have the same margin on a nav-bar (because a tag is not only used in navigation bars).

I hope I don’t seem rude or impolite. You a doing a great job and you have a much cleaner code than I had on this project. Keep going!
Sorry for my English, it’s not my native language.

2 Likes

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