Oops! You need to be logged in to do that
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Oops! You need to be logged in to do that
Not Found
Oops! You need to be logged in to do that
Not Found
Not Found
Not Found
Not Found
Oops! You need to be logged in to do that

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

Report

3

Accessibility Issues

0

HTML Issues

View Report

Dizzy_Sloth’s questions for the community

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 360

@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 focus on giving high-quality, helpful feedback and answering any questions TotallySly might have. Here are some key points to consider:

  • Does the solution include semantic HTML?
  • Is it accessible, and what improvements could be made?
  • Does the layout look good on a range of screen sizes?
  • Is the code well-structured, readable, and reusable?

You can read our community guidelines if you're unsure what to post.

Slack logo

Join our Slack community

Join over 100,000 people taking the challenges, talking about their code, helping each other, and chatting about all things front-end!