Feedback on my Technical Document page

Code Feedback
1

Hello, I would appreciate some feedback/critique on my Technical Document Page

1 Like
2

@AlexOros The styling is excellent, the layout need adjusting in my opinion.

  1. I belive the menu should go to the top of the page like in the example project.
  2. The huge space to the right of the menu is not necessary.

I hope that my Techical Documentation page will look as good as yours.

1 Like
3

It’s looking good @AlexOros. I would suggest;

  • running your code through an HTML validator. You have many times where you’ve used the same id more than once. codepen provides you with a validator. Click ont the arrow in the upper right and then click on ‘Analyze’.
  • On smaller screens, consider possibly making your Nav a hamburger menu and fixing it to the to top.
1 Like
4

Thank you for the review @Roma , I didn’t know about codepen’s HTML analyzer it’s awesome. The hamburger menu did pass my mind but I decided against it.

1 Like
5

Hey @brandon_wallace, about your points:

  • The menu going at the top. When you go on mobile the menu remains on top, for larger screens I made it sticky to the left, is this what you meant about the menu going to the top?

  • For the spacing the right of the navbar I took your suggestion and modified the spacing between it and the main content.

P.S Thank you for the review

1 Like
6

@AlexOros
Things to look for;

  1. Menu border is touching letters when screen is scrolled.
  2. Menu shifts a bit up as scrolled. It can stay where it is.
  3. Go to top link arrow can initiate a faster elevation to top of the page.

I like the style.

1 Like
7

Wow! such an amazing tech doc page for JS!!
the styles are so cool, but one suggestion:
maybe keep all of the links fixed to the side of the tutorial so when I want to skip to different parts, I can. kinda like this:
https://codepen.io/Glaurung/pen/eXVwZP

8

@AlexOros The words “Javasript - Arrays” are at the top of the page. I was suggesting that the menu should touch the top of the browser and “Javascript - Arrays” should be next to the menu on the right. Just a suggestion…

Great job on your project.

By the way, what is prism.css?

1 Like
9

Hey @brandon_wallace hmm I was thinking that Javascript - arrays is something like the main title, a header and then comes the nav. Ah well it’s a matter of taste, oh and prism.css is a lightweight, extensible syntax highlighter for the code tag’s. Thanks for the kind words

1 Like