Hey guys,
I have completed the technical documentation page project.
Please provide your feedback and criticism.
Thanks.
Looks good, and working.
The design simple and solid as it should be for a reference like page, very good.
Some suggestions
Desktop view: the left navigation panel, the header text(“Js Documentation”), is fixed by scroll, this is better to either not make it fixed, or add one border bottom to make it clear the header is fixed for user(not critical)
The first entry element in navigation also no need top border too.
For the mobile view, the navigation goes to the top(very good), but it’s fixed height and scrollable. I don’t say it’s bad, but maybe it’s better to not make it scroll and let it get it’s size/space as it needs.
Another suggestion is for both mobile and desktop view, you may allow the user toggle(show/hide) the navigation panel using a button maybe to utilize maximum space for reading panel.(it needs some js)
Another suggestion(about typography, not critical) is add horizontal line after each header in reading panel, it could help user have good overview of content.
If you could also colour the syntax for the code snippets would be great(needs js)
Another great suggestion(highly recommended) is adding caption for each code snippet, also remember to order(number) the code snippets correct.(e.g., after hello word code snippet place a centered text as “snippet 1: Hello world sample code in js”)
Also this could be awesome if you place each section/header in reading pane with an anchor, and set name for each. This is so helpful to share the link with a inline anchor (e.g. <url>/#hello_world)
Adding a little more line-height for mobile view is better too.
Overall looks good, well done.
Keep goin on great work, happy programming
Thanks for the feedback.
I have added the bottom border to “js documentation” and also increased line width for mobile view.
Also i have added horizontal line between each section for better overview.
All the js stuff i can’t do because of lack of knowledge.
P.S.: If you could explain what do you mean by " place each section/header in reading pane with an anchor, and set name for each." that you mentioned.
Thanks.
Please check this link for some explanation