I’ve had an attempt at the technical documentation page and would love some feedback.
I thought this project looked really easy before I started then got confused with the placement of the navigation bar. I just couldn’t get it to do what I wanted - which was frustrating, but I loved the feeling I got when I figured out where I was going wrong.
Feedback on my previous projects has really helped me learn and to stay motivated so any and all comments are appreciated.
This looks good to me. The nav bar is going to be an issue for this project because you don’t know JS yet. Normally, you would make this responsive by putting the menu in a collapsible hamburger menu, but that takes JS. So for now you just try your best to make it work and look nice. I will point out a few things just to make you aware of potential issues.
You might think about putting a max width on the content, perhaps add it to the
section element. Right now your content will take up all the width it can, so if someone has their browser at a really wide width then the line length will be very long and that can be hard to read. I’d suggest using
rem units. I usually put the max width around
Best practice is to only have one
h1 heading on the page. In this case that would be the “JS Documentation” heading. The other headings on the page fall under this main heading and thus should be
If you want to get fancy, then for narrow view port widths (when the nav menu sits on top of the content) I would suggest you get rid of vertical scrolling on the
body and instead have
main each have their own vertical scroll bars. It think this will make it look nicer and make scrolling less confusing. Also, it will make keyboard navigation more sensible.
Thanks @bbsmooth. I appreciate your time you have given for feedback.
I did think that there will likely be a much better menu implementation that I will learn down the road, so it’s good to hear that is the case.
I can’t believe I put multiple
h1 headings though. Total rookie mistake
I’ll take a look at your other suggestions too.