Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Responsive QR Code Component

@TotallySly

Desktop design screenshot for the QR code component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


I would like advice regarding Units of Measurement. I am not entirely sure which unit is the best and when. I have read a lot and it does appear to be a personal preference. I base this upon the many differing opinions.

I am yet to learn Bootstrap. And I only use 'vanilla' CSS (unless Flexbox is not considered 'vanilla'?!). I have read that, for the time it takes to learn Bootstrap, I should just consider continuing with more vanilla CSS and learn CSS Grid instead?

Thank you for taking the time to have a look at my work!

Community feedback

kxnzx 870

@kxnzx

Posted

Hi @TotallySly,

I would like to share what I have learned about Units of Measurements and how I use them + why:

  • REM Units for defining width’s of elements, margins, padding, and font-sizes (using this relative unit is important for accessibility settings, they adapt to the user's browser > people with visual impairment can zoom in to make the font-size/components on the screen bigger/smaller)
  • Pixels for shadows & borders (pixels are static > borders/shadows need to stay the same size always)
  • EM Units for media queries & padding in buttons (this is also a relative unit > the padding will auto adjusts to the font-size of the button)
  • % use this in combination with a max-width ( I personally mostly use this to define the width and min-height of the html element, you can also use vh or vw for this. However I have read somewhere that this is not the best practice to do yet)
  • CH Unit for defining the of width paragraphs

There is a lot of info about this available, but this out of my head what I have learned for now. I hope you can get something out of this.

Greetings, Kxnzx

Marked as helpful

1

@TotallySly

Posted

@kxnzx

Thank you so much for your response, I will certainly be taking that on board for future projects!

0

Please log in to post a comment

Log in with GitHub
Discord logo

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