Responsive QR code using sass/scss

Community feedback

• 

  T

  Grace•31,090

  @grace-snowPosted 8 months ago

  So this is the challenge to nail some important foundational principles often skipped or skimmed in tutorials. I hope this is helpful!

  • all content should be contained within landmarks. That means you need to wrap this card in a main landmark. Every page needs one so get into the habit of including it.
  • this is a single component build not a full Web page. That means it shouldn't have a h1. The h1 is for the main page heading. Whereas this is a card component likely to sit alongside others and all sorts of other content on a page. So make it a h2 instead.
  • alt text descriptions don't need to say "image of". It's already an image element so already has an image role! There's a great post about alt text in the resources channel on discord.
  • Font size must never ever be in px. Use rem. Very important.
  • Never limit the height of elements that contain text, including the body. Use min-height instead of height so the height of the body is allowed to grow when needed.
  • the card does not need a width or a media query. All it needs is a single max width in rem. That allows it to expand only until the limit set but allows it to shrink narrower on smaller screens when needed.
  • Get into the habit of using a full modern css reset at the start of the styles in every project. Andy Bell has a good one you can look up and use.
  • place classes on what you want to style instead of relying on element selectors. Single class selectors are much better to use when possible in css because it keeps specificity low, and means styles won't break if the html changes, and means your component styles won't "leak out" into other components when it's incorporated into a real site.
  • there is no need for a media query in this challenge at all. If font sizes really need to change and that's a design requirement you would usually adjust custom properties in one go or use a function like clamp(). But in good designs the font sizes rarely change across mobile to desktop.
  • for future reference though, make sure you understand how to use media queries well. I think this post is a must read for where you're at right now.
  • you are overcomplicating the challenge with how you're trying to use margins at the moment. The component should have some padding, then the children within it should only need vertical margins to create space between them. I've written another post on padding vs margin which you may find helpful.

  Marked as helpful

  1

  ---

  

  Lucia Verde•60

  @LuciaVerdePosted 8 months ago

  @grace-snow Thank you very much for your feedback Grece. I really appreciate it! I will work immediately on the suggested improvements.

  0