Technical Documentation Help sidebar title

Code Feedback
1

I cannot seem to center align the header ‘Documentation’ in my navbar. I tried assigning the parent element width, I tried making it into flexbox. I tried all types of margins and paddings and nothing seems to work. It almost seems as if their is some type of hidden default padding/margin that I cannot see. I tested this out on Chrome also and the problem exists. Below is the link to codepen. Please help! Thank you!

<nav id="navbar">
      <header class="navheader">
               <div class="navd">Documentation</div>
      </header>
                            
<ul class="navul">
          <li><a class="nav-link" href="#header1">header1</a></li>
            <li><a class="nav-link" href="#header2">header2 </a></li>
           <li><a class="nav-link" href="#header3">header3</a></li>
              <li><a class="nav-link" href="#header4">header4</a></li>
             <li><a class="nav-link" href="#header5">header5</a></li>
</ul>
 </nav> <!--navigation element end-->
2

Hello there.

I would suggest going right through your code, and removing all of the redundant declarations:

  1. There are far too many calls to change the width of your elements. This should be a flag that something is not right.
  2. There are media queries targeting the same properties. Combine them.
  3. I suggest you decide on a convention for your CSS selectors. For example, what I do: If there is only one of an element I need to change, I give it an id, and I target that in the CSS; if there are multiple elements I want the same styling for, I do not give them ids, but I do give them class names. I never create a class that only one element will use.

Some things to note when using CodePen:

  1. CodePen does not expect any content outwith the body tags.
  2. All meta, link, and script information must be put in the :gear: settings section of the HTML editor.
  3. You do not need to/cannot link the CSS in your HTML, if you place the CSS in the appropriate section.
  4. If your project uses React, use the Babel preprocessor, and link the CDN in the appropriate :gear: section.
  5. The editors offer the ability to format and analyse your code, providing useful information about forgotten closing tags etc.

If you are still confused with how to use CodePen, please read the official documentation.

Hope this helps

1 Like
3

You are absolutely right. I deleted all of my CSS and I am going to start over and try to make it clean and efficient. Thank you for pointing that out!

4

I did the project over again. Here it is. I did not want to copy the example from the curriculum so I chose some weird colors. Let me know what you think! Thank you for your feedback my friend!

https://codepen.io/coe9257/pen/rNOpQmW

5

Well done.

I like how straight-forward it is. Some things I would change:

  1. The text does not contrast enough with the background colour. Use this to help: https://webaim.org/resources/contrastchecker/
  2. It is difficult to select the anchor elements in the navbar, because the a does not take up the whole block. Add padding to the a elements.
  3. I am still seeing 5 min-width: 800px, and 2 max-width media queries. Combine them into 1 each.
  4. There are still redundant CSS calls. Use the built-in analyser in CodePen.

Hope this helps

1 Like
6

  1. Alright, that contrast website is awesome! I bookmarked it and will be sure to use it from now on! Thank you so much for that!

  2. I ended up making the anchor elements into table cells which applied to the entire cell. Using padding was incredibly difficult to make more space clickable without screwing up the layout.

  3. I finally understood what you meant by combining them. There are now only two media queries for the min-wid: and max-width:

  4. I will be using the analyzer from now on. I got rid of 1 redundant CSS call.

Thank you so much for the input! I do agree that the font color is weird, I will be looking for other combos.

1 Like