Skip to content
Submitted almost 2 years ago

QR Component | Mobile First solution with CSS Flexbox

accessibility
Mayank Arora•430
@mayankdrvr
A solution to the QR code component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Hi Frontendmentor community,

This is my QR component beginner challenge solution and my first submission. I was having difficulty in making the large size of my solution's <main> container to smaller dimensions to match the solution .jpg screenshot given on the challenge page. I request the community to review and give feedback for the live site and the shared source code on the following parameters-

  1. Does it follow all the good web accessibility practices?
  2. Is the site mobile first and responsive on all devices?
  3. Do all the padding, margin and border settings comply with the original design(as i am not a pro member and do not have access to the design files)?
  4. Are all the colors and font settings matching the original design?
  5. Do you have any other code refactoring suggestion?

Please feel free and do not hesitate to review my code and do give feedback for improvement. All suggestions are welcome. Waiting to learn from your feedback and experience. Thank you for reviewing my challenge submission.

Code

Please log in to post a comment

Log in

Community feedback

  • Lukáš Říha•225
    @lukasriha

    Hi Mayank,

    I just saw you liking a comment of mine on another project so i decided to check out one of your projects.

    1. I'm not an expert on a11y (accesibility), but using semantic html is always a good start. From my experience, accessibility starts getting complicated once controls are involved. You know, buttons with handlers, opening / closing menus etc. If you want a quick check you can use google lighthouse - that's built in with google chrome, it will generate a report for you and let you know where your problems are. In your case, the only it detected was that the background is too similar to the font colour - that's not your fault though, you implmeneted the design. :) if you want to be super sure, just download a plugin/extension for chrome :)

    2. Your website looks good on mobile and desktop - so it's responsive enough i'd say. In my opinion, a responsive website is a combination of fluid and adaptive. Look up those terms and see if you can make sense of that. Just my opinion though ;) I'm my opinion, a good practice is to make use of width and max-width. If you look at something like bootstrap, container widths are set to 100%, but they do have a max width set. You don't want containers with 100% on an ultra wide monitor

    3. Don't have pro either. ;)

    4. Didn't check sorry :)

    5. Refactoring wise - The code base is small, so your code works well. Look into something called BEM - it's a way of writing html and css.

    Otherwise two remarks:

    1. Import your fonts in your html in the head elements. It is better for performance because of caching and parallel downloads.
    2. When you have <a> tags to external links, make sure to add noopener, noreferrer. It's a security best practice.

    Overall, great job and happy hacking :)

    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