Responsive QR code using HTML and CSS

Community feedback

• 

  Cillian Bracken-Conway•50

  @cillianbc

  Posted over 1 year ago

  Have a look at using semantic HTML like <section>

  00

  Marked as helpful
• 

  

  Grace•32,130

  @grace-snow

  Posted over 1 year ago

  There are some important foundational learnings from this challenge:

  1. All content should be contained within landmarks. This needs a main wrapping the container. You could make container into a section too but there is really no benefit at all to doing that.
  2. The image is extremely important content. It must have a proper alt description saying what it is ("QR code") and where it goes ("to FrontendMentor.io")
  3. Remove all of those brs. That is not how you create line breaks. They need to happen naturally.
  4. The html file should always be called index.html
  5. It's better for performance to link fonts in the html head instead of css imports.
  6. Never limit the height of elements that contain text. It's fine to use min-height on the body but not set a height.
  7. Do not use position absolute to center a component in the viewport. Use flexbox or css grid. Position absolute removes the elements from the document flow and could lead to really awful bugs.
  8. Always use a modern css reset at the start of the styles in every project. Get into the habit now. Andy Bell or Josh Comeau both have good ones you can look up and use.
  9. The image must not have an explicit width. All it needs is display block and max-width 100% (which would already be included in the css reset)
  10. Font size must never be in px
  11. You seem to be confusing padding and margin in this. I've written a post about padding and margin which you may find helpful.

  10