Skip to content
Submitted over 1 year ago

Responsive QR Code Component

Muhammad Amoo•220
@DruxAMB
A solution to the QR code component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

  • w3Schools - This helped me in learning how to center an element vertically and horizontally with CSS . Let me know if this link is useful to you.

Happy Coding

Code

Please log in to post a comment

Log in

Community feedback

  • P
    Øystein Håberg•13,260
    @Islandstone89

    My feedback:

    HTML:

    • Change the .container into a <main>. Main landmarks are important for accessibility.

    • As mentioned above, the image needs alt text. It should describe the content, and in this case, it also needs to say where it leads. Don't use words like "photo" or "image" - a screen reader will announce it as an image.

    • "Improve your frontend skills by building projects" should be a heading. Since it's the main heading on this page, you can use a <h1>.

    • .attribution should be a <footer>.

    • "Challenge by" and "Coded by" needs to be wrapped in <p>. This will make them stack on top of each other, since <p> is a block element. If you want to have them side by side, put this on the .attribution:

    display: flex;
gap: 1rem;

    This would make the paragraphs flex items, and since the flex-direction of the parent (.attribution) is by default row, it means they will line up side by side.

    CSS:

    • Performance-wise, it's better to link the fonts in the <head> of the HTML, instead of using @import.

    • Put text-align: center; on the body. The children will inherit the value, so you get the same result, with one less line of code.

    • You should have a CSS Reset at the top. Check out the one from Andy Bell.

    • Remove the fixed width on .container, fixed dimensions are not recommended.

    • max-width should be in rem instead of px.

    • Remove all positioning, including transform. You don't need it in this challenge.

    • To center the card horizontally and vertically, put this on the body:

    display: flex;
flex-direction: column; 
justify-content: center;
align-items: center;
min-height: 100vh;
    • <img> should have a max-width of 100%. This is included in the mentioned CSS Reset by Andy Bell.

    Hope this helps, good luck :)

    Marked as helpful
  • Mateusz•440
    @MatPawluk

    Hi, congratulations on sharing this project! 🎉👏

    HTML:

    1. Structure: HTML structure is simple and concise, using appropriate tags.
    2. Accessibility: Missing alt attribute for the QR code image could impact accessibility for users relying on screen readers.
    3. Links: Links to Frontend Mentor and the coder's portfolio are functional and correctly implemented.
    4. Content: Content is clear and straightforward, conveying the purpose effectively.

    CSS:

    1. Variables: Good use of CSS variables for managing colors, enhancing maintainability.
    2. Styling: The layout is responsive, utilizing relative units and positioning for adaptability across devices.
    3. Selectors: Clear and concise use of selectors, making the CSS easy to understand and modify.

    Recommendations:

    1. Accessibility Enhancement: Adding an alt attribute to the QR code image for better accessibility.
    2. Comments: Consider adding comments for more complex styling sections to improve code understanding and maintainability.

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