Skip to content
Submitted almost 3 years ago

QR Code Component

Pablo Rizzieri•60
@PabloRizzieri
A solution to the QR code component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

QR Component made with CSS and HTML, I want to ask if you see any opportunity to improve my code or any problem that you can see.

In this challenge i want to test myself by putting me a time limit of 1 hour.

Code

Please log in to post a comment

Log in

Community feedback

  • David•7,960
    @DavidMorgade

    Hello Pablo, congrats on finishing the challenge! great job

    I would like to give you some help centering your component in the middle of the screen, instead of using margins on your main class='card', try using flexbox in the parent element (body), it will get full centered, you can try something like this:

    body {
  background-color: hsl(212, 45%, 89%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

    Setting up the minimum height of your body to 100vh will make your body cover the full browser screen, and then centering with flex will center your main.

    Hope my feedback helps you!

    Marked as helpful
  • PhoenixDev22•16,830
    @PhoenixDev22

    Hi Pablo Rizzieri,

    Congratulation on completing this frontend mentor challenge. Your solution looks great. I have some suggestions regarding your solution:

    • You should use <footer>for the attribution. HTML5 landmark elements are used to improve navigation experience on your site for users of assistive technology.
    • In my opinion, the image is an important content. As you have used CSS for the image, it’s not accessible anymore. The only method that is truly accessible and supported by nearly all browsers is to use inline images instead of background CSS images to display non-decorative content. The alternate text is needed on this image. The alternate text should indicate where the Qr code navigate the user : like QR code to frontend mentor not describes the image.
    • In order to center the card on the middle of the page , you can use the flexbox properties and min-height: 100vh for the <body> add a little padding to the body that way it stops the card from hitting the edges of the browser.
    • height: 580px;, height: 95vhIt's not recommended to set height to component, let the content of the component define the height.
    • width: 375px; an explicit width is not a good way to have responsive layout . Consider using max-width to the card in rem instead .
    • Consider using rem and em units as they are flexible, specially for font size better to use rem. If your web content font sizes are set in absolute units, such as pixels, the user will not be able to re-size the text or control the font size based on their needs. Relative units “stretch” according to the screen size and/or user’s preferred font size, and work on a large range of devices
    • Remember a css reset on every project. That will do things like set the images to display block and make all browsers display elements the same.
    • Adding rel="noopener" or rel="noreferrer" totarget="_blank"links. When you link to a page on another site using target=”_blank” attribute , you can expose your site to performance and security issues.

    Overall, Excellent work! Hopefully this feedback helps.

    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