Skip to content
Submitted 5 months ago

QR-code-component

Mohammed Ayoub Nedjima•170
@Mohammed-Nedjima
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

Community feedback

  • Gwenaël Magnenat•1,290
    @gmagnenatPosted 5 months ago

    Hi, congrats on completing the challenge! it looks great.

    I have a few comments on your code that could help you make a more responsive and accessible solution.

    Does the solution include semantic HTML?

    • i'm not 100% sure that <article> is a good use here. Do you think this card content is ment to be distributed somewhere else? article element on MDN.
    • That's a performance recommandation but you should place the title in <head> at the top right after the <meta name="viewport".. We shared some ressources about it on discord in the #ressource forum. Link to the post
    • It's good in case of a QR code to mention what it does or where it will lead in the alt tag. "QR Code to frontendmentor.io" for example.

    Is it accessible, and what improvements could be made?

    • Why font-size must NEVER be in pixels in case of a reflow test (try to update your browser default font size to 40px) your layout should scale correctly. Currently you are using pixels which fixes value and doesn't respect user preferences. Many people with visual disability increase the default font size to navigate the web. You need to use relative units for everything related to sizes and fonts.

    Does the layout look good on a range of screen sizes? yes

    Is the code well-structured, readable, and reusable? It is ok here but I would use more classes instead of styling directly the html element. It will be more scoped and reusable. Keep the element styling really for global settings. This is just a QR card component but imagin it is one small element in a larger project.

    Does the solution differ considerably from the design? It looks great and respects the design. good work !

    I hope these comments bring you something useful to improve this solution and your future challenges.

    Happy coding !

    0

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