Feedback on Technical Documentation Page

Hi FCCers! I’d be really grateful for feedback on my Technical Documentation Page at

Also, I made a second version using jQuery to show/hide the navigation section - at https://codepen.io/mcpop999/full/KebNgE/

This was just for fun, and it doesn’t pass the FCC tests because the nav panel is not permanently visible, but any views/error checking on different devices would be great!

Thanks in advance.
Richard

1 Like

Looks good,(I didn’t check the jquery version)

Seems everything is great! neat, simple and clean design.

Beside it works, and layout is functional, but I would suggest you some changes.

Code blocks, they are inline-block, I suggest let them just be block
Same you applied some left-margin for code blocks(in both mobile and desktop view), I suggest you remove that.

In small screen size, if a line comes without any space or breakable section, so that line causes layout break and horizontal scrolling, mostly becasue of code blocks. check:


Note the highlighted text, since it goes lengthy, so broke the layout and horizontal scroll.

Fix is easy, you can either let code block scroll when needed using overflow:auto, but I think you should set it as block too, instead of inline-block
Another solution is let it breaks at any place there is no more space using word-break:break-all

Another suggestion is place one horizontal line <hr/> after each title(h2 tag) in your reading panel. it helps to scan the page easier I believe.

Inline code blocks (code tag used with inline text), please add a background colour.

For mobile I think a little more line-height could be great. Spacing between paragraphs are very good.

I say it’s a good work dear, perfect. If you could apply that fixes, it will be awesome.

Keep going on great work, happy programming.

Thank you for the feedback! I will look at implementing your suggestions.