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

Responsive design

Kendotcom 60

@Kendotcom

Desktop design screenshot for the QR code component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

@simon7195

Posted

Hi! It's not bad at all, the code is clean and the CSS is commented. The card is responsive and the font sizes in em which is good. You could do this to improve :

I'm not a pro, so take my advice with a grain of salt! Good Job!

  • Use rem instead of em so that the fonts react to the user's settings.
  • Use <h1> instead of <h2> to comply with the HTML agreement.
  • Put everything in a <main> tag like this <body><main>..content-here..</main></body>, again it's to better comply with the HTML agreement.
  • There are a few differences between the dimensions of the solutions and the original design (lengths, heights, border-radius). On Figma, you can control a specific element with CTRL (or CMD) key + LEFT MOUSE CLICK on it and view its characteristics in the right-hand panel (to check border-radius, for example). You can also check spacing by holding the ALT key + MOUSE OVER a selected element.

Good luck!

Marked as helpful

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