Skip to content
Submitted over 1 year ago

QR Component using flexbox

accessibility
Renukta-21•130
@Renukta-21
A solution to the QR code component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Think is done :) Feedback would be usefull

Code

Please log in to post a comment

Log in

Community feedback

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

    Hello, here is my feedback, hope it helps.

    HTML:

    • The image must have alt text. This is essential for screen readers to understand the image. The alt text should be descriptive, and in this example, it also needs to say where it leads (frontendmentor.io).

    • Headings should always be in order, so you never start with a <h3>. Change it into a <h1>.

    CSS:

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

    • It's good practice to include a CSS Reset at the top.

    • Remove width: 100% on main - it is a block element, which means it is 100% wide by default.

    • height on main should be min-height.

    • max-width on the card should be in rem. Around 20rem will work fine.

    • Remove width: 100%, the reason being mentioned above.

    • Remove the fixed height on the card, you want the content to determine the height of a component.

    • Font-size must never be in px. Use rem , as you have done on the heading.

    • text-align: center should be set on the body, as all of the text is centered.

    • The image should not have a width but max-width: 100%, as well as display: block. This is included in the mentioned CSS Reset

    Marked as helpful
  • P
    Daniel 🛸•44,740
    @danielmrz-dev

    Great job!

    If you change the background-color to #D6E1F0 and add a box-shadow to your card, it will look exaclty the same as the original design.

    Other than that, it looks nice!

    Marked as helpful
  • JulienLach•260
    @JulienLach

    Look good ! Great job

    Marked as helpful

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