Skip to content
Submitted over 1 year ago

I've used HTML and CSS with Responsive Design

Rodriguez Facundo Gabriel•10
@RodriguezFacundoG
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

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.

Community feedback

  • Vanza Setia•27,775
    @vanzasetiaPosted over 1 year ago

    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! 👍

    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