Technical Documentation Page Feedback Please

Any feedback is appreciated. If I were to start over, I think I would have gone about the fixed navigation differently. Let me know what you think. Thanks!

https://codepen.io/KellyR7/pen/ZEyGNJm

Hi
Looks good, well done!
One small improvement I would make would be to give the paragraphs in your main doc a little more left and right padding. Particularly on the right some of the text goes right to the edge.
Also header title js documentation moves onto 2 lines as the screen narrows and starts to hide behind introduction. I had similar issue when doing my tech doc, I gave the navbar a fixed width rather than a responsive width which avoided the problem of things moving onto 2 lines. It meant a few alterations to the font sizes etc to get it all to fit & work but I got there eventually.

Great tips. Thank you!

I understand what you are trying to do with the menu in narrow view but unfortunately it is not keyboard accessible. Using :hover only works for people who can use a mouse. I’ve always thought this technical document project was somewhat unfair because most people aren’t using JS yet and thus you can’t implement a proper hamburger menu option for narrow view ports. I suppose you could find a third-party option to do it for you. But if you don’t want to do that then for the time being you should lose the :hover and just display the nav links above the content.

For the code examples I would suggest you wrap them with <pre> tags as well so that the line breaks are included and the code is formatted properly. And then you’ll want to allow the code blocs to scroll on overflow so that if a line is longer than the browser width the user can scroll to see the entire thing but you still maintain formatting. This is an acceptable use of horizontal scrollbars.

Oh man. I can’t believe I didn’t think of the :hover not working without a mouse! I definitely learned a lot with this project. Thanks for the input.

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