Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Your session has expired please log in again.
Your session has expired please log in again.
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

QR code component

dyl25 10

@dyl25

Desktop design screenshot for the QR code component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


  • Is the CSS reset a thing that we still use in modern CSS ? Are there other better way to do it?

  • Did I use the correct way to center verticaly and horizontaly the main div (see .container class)?

  • Line height correct for the text below the QR code?

Community feedback

@Fasunle

Posted

Hello dyl25,

This is a really good solution. I would like to suggest that you use .container class on the main element instead of creating another element (div).

Also, wrap img in a container like 'image-container' class. This is required for uniform rendering on some versions of internet explorer. It is also considered a best practice.

img element must have attribute alt="description of the image". This is displayed if the image could not be loaded. However, if the image intended to be used just for design, empty string should be used instead. For example, <img src="my-image.png" alt="my profile picture"> or <img src="background-image.png" alt="">. This is also good for accessibility.

I hope you find it useful.

Marked as helpful

0

dyl25 10

@dyl25

Posted

@Fasunle

Hello,

Thanks for your feeback! I will take it into account for my next try and next challenges.

0

Please log in to post a comment

Log in with GitHub
Discord logo

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