Skip to content
Submitted over 1 year ago

Interactive rating component - Keyboard accessible form / Vanilla JS

Alexander Bobykin•90
@abobykin
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Interactive rating component
  • HTML
  • CSS
  • JS
1newbie

Design comparison

SolutionDesign

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

  • markus•2,250
    @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 in 20px. If the user wants small text, 1rem might result in 12px.

    The default size in most browsers is 16px, so a common practice is to convert all font sizes in the style guide from px to rem 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 be 3em, 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 helpful
    1
  • Luka Glonti•3,440
    @lack21Posted over 1 year ago

    Good job 👍, but I have a suggestion!

    • Remove padding: 155px 0 from the main and add min-height: 100vh instead, like this it will be centered!
    Marked as helpful
    1

Please log in to post a comment

Log in with GitHub

Join 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