Hi campers.
I would like to know your opinion about my Technical Documentation Page.
Any suggestions to improve the project. I will be gratefull for any feedback.
Thank you.
5 Likes
Beautiful! I always appreciate clean design. The only thing I miss are “back to top” links in each section, but that may be old-fashioned. I don’t see them much anymore. Either way, very nice page.
2 Likes
Hi, @CallMeFrank! I love the design on the project and can tell you took extra time to make it look good.
One note: The HTML was a bit tough to read. Maybe some line breaks would make the code easier to understand and skim!
1 Like
Thanks guys for your comments.
@Kallistrate I thought about “back to top” button but didn’t do that because of not very big height of the page and on mobile viewports chapters of a documentation are small too. And I decided not to do the button.
@nicknish I understand what you’re talking about. This format of HTML because of Pug(Jage) HTML Preprocessor I use. Pug compiles to HTML with compression in some places. Particularly it happens with a tags inside block elements like links within .navigation__list.
1 Like
nice work 
Looks really rich about design. Super cool colour scheme! very good.
It’s responsive, but for small mobile devices it’s broke. I think this is becasue of some lengthy text without any space between them, so browser won’t break the text, and it causes the scroll, check:
This could be fixed by manually adding breakable sections using <wbr/> tag, or let browser breaks the text whenever it needs using break-word:break-all. Another solution is about let code section scroll which I don’ think is a good thing.
I think, for mobile you applied a little too much padding(20px) for code snippet sections.
I also suggest, add one very light background colour for snippet sections too. Same for inline code and commands.
Since you are familiar with JS, have a script to find all code snippets in your page, and caption them as code snippet 1: <<description_if_any>>, code snippet 2: and so on.
For mobile, I think a little more line-height could be great.
I also suggest do not host any nonde source/code content with a code block, just like following:
in code block half is code, half is not.
Another suggestion I have, which is kind of very common, is make the code block sections as block. rather than inline-block
Let all code blocks fit to parent width. Let them be block, rather than inline-blocks.
Another suggestion is about placing the navigation to top, rathe bottom. I think it’s more common, but not critical. but whatever you place the navigation to top or bottom, add one top-border(if it’s located at bottom) or a bottom border(it’s on top), this is more than a suggestion, please do.
For now the navigation is at bottom, when user tries to open it, the close button is at the top! usually open/close toggle button are located in a same place. either let navigation goes top, or move the close button in place menu button is.
Since the navigation is fixed, so its advance won’t affect the parent advance. The issue is about content behind the fixed element(navigation) when there is no more scrolling, check:
No more scroll, and see contents are behind the fixed element(navigation). Add some bottom-margin for body could fix it.
Very good work, keep going on great work, happy programming.
1 Like
Another bug is about the toggled navigation elements.
Try following order
- Once page is loaded in desktop, try to resize it(small) to a mobile like screen, until the navigation goes at the bottom.
- Now
- Now click on navigation menu to open navigation and close it.
- Resize the page back to desktop(large), see menu elements are toggled(hide)
Another state issue
- Now if you go resize for mobile again and open the navigation and let it be open.
- Now resize back to desktop. elements are there, but with a scroll!?
Please fix.
Thank you very much for your suggestions.
I’ve fixed it and now it looks much better.
Thank you @naveen_coder
1 Like