Technical Documentation Page - Pug

Code Feedback
1

I made a [Technical Documentation Page] for the Pug preprocessor while learning the the basics of this preprocessor.

Any feedback is welcome, I want to improve.

Here is the link:
(https://codepen.io/huascararturo/pen/LYVgroR)

Thanks :]

1 Like
2

Hi, nice work, I’m also working with pug in one of my company’s projects and I like it a lot.
The details and structure of your page looks good, however there are a few problems that I’ve found:

  1. Your img tags don’t have alt attributes, it’s not good for accessibility.
  2. border: 1px solid 5E606C;, I believe this is not a valid value for hex color, it should be #5E606C. Also postiion: absolute;, it’s a typo.
  3. This will not work:

#navbar{
  position: fixed;
  width: 160px;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 30px;
  text-align: left;
  height: 100%;
  background-color: #E5DFD3;
}


@media only screen and (max-width: 768px){
  nav {
    position:absolute;
  }
}

Pay attention to #navbar and nav selector. Here is a thing which is called CSS Selector Specificity comes to play. Read the MDN document and you will understand why the rules in your media query will never be applied.

  1. Even if you were able to make the navbar position to be absolute, I’m afraid it won’t change anything. You should find another way to make your page responsive. At the moment your site isn’t look good in small device screens.

Anyway, I like your project in general, keep it up! :+1:

1 Like
3

I made the changes you suggested,

Thank you!

4

@huascar.lopeze, some things to revisit;

  • Don’t use the <br> tag to force line breaks
  • All styling should be external. I see at least one instance of in-line styling
  • Make your page responsive. You have overflow on smaller screens.