Skip to content
Submitted 3 months ago

QR code componet with HTML and CSS

AlvaroPrates•130
@AlvaroPrates
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...QR code component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

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

I'm still a little uncomfortable with flexbox, but I believe that with the next projects this should improve.

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

I'm not sure why an image is overflowing inside a certain container. I tough that would fit to the parent container. The solution I found was to force the image's width or height to 100% (width). Don't know if this is enough or if it's necessary to add the object-fit property.

Community feedback

  • Borys Presniak•40
    @BorysPresnPosted 3 months ago

    Hi! I have a feedback for you :) Visually everything looks very good Semantic HTML: Good use of semantic elements. Consider enhancing with more structuring elements if needed. Accessibility: Generally good. Ensure alt text is descriptive and consider additional ARIA roles if applicable. Code Structure: Well-organized and readable. Consider adding comments and grouping related styles for clarity.

    Errors and Improvements: body p Class: You are setting font-size for all <p> elements inside <body>, which may be excessive. It's better to use more specific classes or elements to avoid unexpected application of styles.

    Flexbox Properties: In flex-center and other classes, ensure that align-items and justify-content values are used correctly. For example, if you only want to center content horizontally, align-items: center; is sufficient.

    Marked as helpful
    1

Please log in to post a comment

Log in with GitHub

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