@DeadvLoper
Latest solutions
No solutions submitted yet.Latest comments
- @brsmit1993
A quick note / something I noticed right away is for the 'best practice' font-size should be set using 'rem'. This is because rem is relative to the root-font-size which is defaulted at 16px and can also be controlled via a web browsers font-size settings. This matters because of accessibility reasons. For 8px this would be .5rem for 16px = 1rem. Generally, you can find online conversion tools by searching px to rem. I'll leave an excerpt from an article as well as the link for more information regarding rem and why it matters.
'By default, most browsers use a font size value of 16px. So, if the root element is 16px, an element with the value 1rem will also equal 16px. Therefore, rem units are useful for scaling CSS elements in relation to the size of the root element — even if you don’t know what the default font size will be.'
Marked as helpful - @mo-oe@brsmit1993
Your solution visually is spot on and it's really impressive how close you got it to the original design. One small thing I did notice your for font size you're using px instead of rem. Rem is based on the root font size which is defaulted to 16px but if a user changes their default browser font size that will modify that default to be larger or smaller. This primarily just ties into making your website as accessible as possible as well as following 'best practices'. The only time you should really be using px is when you explicitly want the value to stay static otherwise things like rem, %, vw, and vh are better options to make your site more responsive. On that topic as well. Avoid using vh, vw, etc for fonts as well because that disables the browser's ability to make the fonts larger when zooming in. If you really want to dive into making at least your font responsive you can dive down the rabbit hole of clamp-generators which allows you to use the clamp function to dynamically change the size of your font based on the screen width. But that's a bit more complex and further off-topic than I should probably get. In any case, your solution looks awesome so good job. :D
Marked as helpful - @eosook@brsmit1993
If you're looking to organize your CSS better the two best pieces of advice I could give would be 1. Learn sass as soon as you can. Once you're comfortable with CSS learning how to use SASS will save you tons of headaches when it comes to organizing CSS the second thing would be to look into naming /organizing methods like BEM. BEM even if not followed perfectly just understanding the theory behind why / how people follow it will likely be a big help as well.
https://www.toptal.com/css/introduction-to-bem-methodology
Marked as helpful - @yavuzkarakus@brsmit1993
Overall your code looks pretty clean and well formatted. A few things I noticed though. The first you were mixing px and em and using them interchangeably. Although this isn't a big deal it's usually best to pick one and stick with it throughout your code. The only exception I would say is using 'rem' or 'em' for fonts and then px for everything else. Another note as well I would avoid using 'em' unless you intend to do it for a specific purpose. em values are relative to the font-size of the nearest parent element, while rem values are relative to the root font-size which is generally 16px. I tend to use 'rem' because I know it will always (rem * root font-size) but with em if you've modified font sizes for any of it's parents it can cause weird and unintended effects if not used carefully. Hope this info comes in handy and if you're interested in learning more about rem or em than this article might be a good place.
https://blog.logrocket.com/using-em-vs-rem-css/
Marked as helpful
