Please Critique my Technical Document Page

Code Feedback
1

Howdy,

When you get some free time could you please critique may Technical Document Page, let me know what I need to do to improve.

I was 90% done with the page when I found out I needed a code tag, I missed it on the initial read through. So I used it for some formulas. Also I know Codepen doesn’t need the head and body sections. I write my code on VSC then paste it into Codepen.

Thanks for your help.

2

Hey, since you gave great help on mine it’s only fair to comment on yours!

Yours looks great, responsive and nice layout. I would only say that the font size is a tad on the small side. While I know users can adjust the size of fonts on their end, would you consider making yours slightly bigger?

1 Like
3

Thanks for the feedback. The funny things is, on all if my other projects I got feedback that my font size was to big, so this time I made it a little smaller, than I actually liked.

I did bump it up a bit.

Thanks again.

4

hey there, I don’t think vh is the best unit for font size. I’d recommend sticking with px, em, or rem. I’d say in general you’re using vh in a lot of places where these other units would be better suited.

edit I mention that because the text actually looks huge on my display. Not sure if that’s a change you made or if we are just seeing it differently due to display size differences. But text size shouldn’t necessarily scale with display size for readability, if you are on a small mobile screen you probably don’t want the text that small, and on larger displays its too big.

Also FYI on codepen you can think of the html window as everything that goes in <body></body> the rest of the html boilerplate is provided by codepen under the hood. You can access and edit the <head> of the html by clicking the gear in the top left of the code window and pasting everything there.

5

Thanks for the info. On a previous project someone recommended I use vh to make things responsive, so I switched over from px to vh. But now that I think about it, they were commenting on a picture.

I’ll switch back to one of the font size units you mentioned on my next project and just use vh and vw for other things.

Thanks for the advice.

6

Your page looks good @zebco_king. Something to revisit;

  • Never use view port units for font sizes. The user should always be in control of the text size on the page (that is, they should be able to manually increase the text size). Using view port units prevents them from doing this. Your job as a developer is to make sure your page is responsive to text size increases. If you don’t know how to manually increase the text size, using Firefox, go to the ‘View->Zoom’ menu and activate ‘Zoom Text Only’. Then while holding down the Ctrl key scroll your middle mouse button to increase the text size. Currently, the text size on your page will not change using this method because all of the font-sizes are defined with vw units. This means the only way I can increase the text size is to widen my browser window. What if I have really bad eyesight and can’t make my browser window wide enough?
2 Likes
7

Thanks for the information. I switched from px to vh for font size on this project because a miss understood a recommendation on a previous project to make a picture more responsive. I’ll fix this project when I get some from time and the next project will definitely be back to px or em’s for font size.

Thanks for the advice and let me know if there is any other way I can improve my skills?