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 using HTML and CSS

123dakalo 50

@123dakalo

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


What are you most proud of, and what would you do differently next time?

Well I didn't learn much

What challenges did you encounter, and how did you overcome them?

center div... i left out position absolute

What specific areas of your project would you like help with?

none

Community feedback

P

@cillianbc

Posted

Have a look at using semantic HTML like <section>

Marked as helpful

0
T
Grace 29,310

@grace-snow

Posted

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.
1

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