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

QR code componet with HTML and CSS

P

@AlvaroPrates

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

@BorysPresn

Posted

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