Hi I finally finished my technical documentation page project. It’s pretty simple as I do not really have a creative side and I now prefer minimalist designs. I would appreciate any feedback. Thank you!
Overall this is a very nice page, only one major issue stands out for me. Before I go into that, I do think you should move the <header> out of the <nav>. A header isn’t part of the navigation.
As to the major issue, you are doing this for the font size:
:root {
font-size: 3vmin;
}
This is very bad for accessibility because it prevents the user from manually increasing the text size on their own. Also, the text size gets way too small when I narrow the browser window all the way in. If you want the text size to change a little based on the browser width then you could do something like:
font-size: calc(1em + 1vh);
Now the text size will always be at least 1em but will increase slightly as the width of the browser window gets bigger. Personally, I’m not a big fan of changing the text size like this, at least not for the primary content. I believe you should respect the user’s text size settings in their browser and just use 1em for the main content, no matter what the browser width. But adding a small vh to the base font size (1em) will at least prevent it from going below a reasonable size. Otherwise, the base font size should be 1em.
Oh, a few other minor things. I think you should put a max width on the <main> so that the line length doesn’t get too long if someone has their browser open very wide (and I would set this in em units). Also, I would add a little side padding to the gray boxes so the text doesn’t come right up to the edge.
1 Like
@bbsmooth sir, thanks a lot! I didn’t know how important it is to consider readers’ preference for changing text size. I will apply the changes needed right away. 
@bbsmooth do I also need to change the unit rem to em for all my properties?
No, that is not necessary, you can use either, it depends primarily on your personal preference. I find myself using em most of the time but a lot of people prefer rem. There is a subtle difference between the two that you should understand. If you are unsure then be sure to google it.
I should add, if you are using them in your CSS media query break points (which I highly recommend) then there is no difference between em and rem (I always use em for those because it is one less character to type 
).
1 Like
@bbsmooth Thank you!
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.