This is my first project on FCC. I really struggled with the graphical design, however, I feel that I have a decent handle on CSS with positioning and responsive design and such. I used google advanced search settings to find a timeline of Bill Gates Accomplishments that was available for ‘reuse’. I did this to save time and focus on HTML and CSS and graphic design. The same goes for the picture.
Please let me know of anything better I can do, specifically for graphic design and sizing and such. Thank you guys!
Overall, this looks pretty good. There is one major accessibility issue however. You should not base your font sizes on ‘vh’ or ‘vw’. Use ‘em’ instead. Using viewport units limits the size that the user can increase the text. User’s should have complete control over how big they need the text to be.
Thank you for the reply. I am so confused because there is so much information online about units. I was using em and/or pixels with media query’s. However, I ran across some articles that explained how inputing the ‘font-size: calc(1em + 1vw)’ into the html will automatically make the page responsive which eliminates the need for media query’s for all fonts on the page.
Is there a way to make my page responsive and fluid without using the ‘vw’ and tons of media query’s?
Oh yeah, that haha. So, I wanted to decrease the size of the body and how responsive it is to the browser which is why I in-puted that. I read that the base size of em was 16px. So I just put 4px instead of 0.25em.
Are you saying that using ‘px’ instead of ‘em’ will disable the option for users to zoom in and out of the text?
They will still be able to increase the text size, but not nearly as much as they might need to because the vh units are more powerful than px.
Text is already responsive because it automatically fills in its container. So as you widen the browser window the lines of text grow horizontally and as you narrow the browser window the lines of text shrink horizontally. You don’t need to do anything special to make it responsive (such as adding + 1vw). Adding this just makes the text size get a little bigger as the user widens the browser window. But there are other ways that the user can increase the text size so you don’t really need it. It is better to let the user have complete control over the text size themselves.
Personally, I would just stick to 'em’s for font sizes.