Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

qr component

nikasana 40

@nikasana

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


reupload of solution (v2)

Community feedback

Shawn Lee 560

@OGShawnLee

Posted

Hey. You did well!

  1. Your text is a little larger and/or the witdh of your card is narrower.

  2. No. I don't think so. As far as my eyes can tell.

  3. It looks mostly fine. You should wrap your content inside of a main tag and give the image an alt attribute where you give a description of the image.

About the styling:

  1. You should used the body to center the card instead of giving it margin-top. You can correct it by displaying the body flex, add align-items: center; justify-content: center; and give it a min-height of 100vh.

  2. Use rem units instead of pixels. Maybe the box shadow is ok with pixels, I use pixels there as well :D

  3. I don't think a nested container was needed nor giving it and the text a fixed width. I would have used a flex column container for the whole card and an inner container with padding for the heading and text.

Hope this helps. Have a good one!

Marked as helpful

1

nikasana 40

@nikasana

Posted

@OGShawnLee Thanks for the detailed feedback! It is very helpful!

1
Shawn Lee 560

@OGShawnLee

Posted

@nikasana Your welcome! Happy to help :)

1

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