Interactive rating component - Keyboard accessible form / Vanilla JS
Design comparison
Solution retrospective
Hey guys! How're you doing!? :)
- I'm trying to comprehend what is fully accessible markup on practice, that's my attempting, check it out! ;)
- And also maybe could you please take a look and possibly give me some useful advices in general and especially on how to feel my head more safe in dealing with more easily adaptive typography sizes for mobile/desktop, looks like I'm struggling a bit with amount of "pixel rules" (I remember that we have *rem and *em in CSS and many more, right?).
I'll be happy to catch any of kind of Frontend Guru advices :) to start making things more right way at last.
THANK YOU!
Community feedback
- @markuslewinPosted over 1 year ago
There are plenty of units to choose from, but for text, the most important one is
rem
.rem
respects the font settings specified in the browser. If the user wants large text,1rem
might result in20px
. If the user wants small text,1rem
might result in12px
.The default size in most browsers is
16px
, so a common practice is to convert all font sizes in the style guide frompx
torem
by dividing the pixel value by 16.22px
/ 16 =1.375rem
.em
is useful when you want to set a size that depends on the size of surrounding content. If you want the first letter to be 3 times larger than the rest of the text, you can set the first letter to be3em
, for example.For size and space, things get more subjective. I prefer having the values of those properties grow with the text size, so I mostly use
rem
there as well.Marked as helpful1 - @lack21Posted over 1 year ago
Good job 👍, but I have a suggestion!
- Remove
padding: 155px 0
from themain
and addmin-height: 100vh
instead, like this it will be centered!
Marked as helpful1 - Remove
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord