Skip to content
Submitted almost 2 years ago

I've used HTML and CSS with Responsive Design

Rodriguez Facundo Gabriel•10
@RodriguezFacundoG
A solution to the QR code component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Is it good for you not to use media queries? Does it still feels like a good design? Since it's a simple application I preferred to use rem as unit of measurement, and to have the html font-size attribute linked by a calc() with de vw, so, as the screen widens, all of the rem attached attributes are being modified as well.

Code

Please log in to post a comment

Log in with GitHub

Community feedback

  • Vanza Setia•27,715
    @vanzasetia

    Hi, Rodriguez Facundo Gabriel! 👋

    Here are some suggestions for improvements:

    • Alternative should describe the image: Alternative text is not for telling the users the image fails to load. It should describe the purpose of the image. Describe what is the image about (QR code).
    • Do not skip heading levels: Start from <h1>. Heading levels must always be in order to give structure to a page.
    • Do not change the <html> or the :root font size: It can cause huge accessibility implications for those users with different font sizes or zoom requirements. Grace Snow explains the issue clearly—Should I change the default HTML font-size to 62.5%?—and Joshua Comeau also does not recommend that approach—The Surprising Truth About Pixels and Accessibility: should I use pixels or rems?.
    • Remove extra element: You do not need <div class="component">. You can use the <body> element as the flex container of the card. Then, use the <main> element as the card component. Also, you do not need <div class="attribution">. You can just use the <footer>.
    • Use padding to prevent child elements from touching the edges of the parent element: You can set padding on the card to push the element toward inside the card. For the image, you can remove the margin: 6% 6% 0 6%; and set the width to 100%. The same goes for the <div class="textContainer">, remove the margin and the div element itself.

    I hope this helps. Happy coding! 👍

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