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 Website using CSS Grid

@PranavReddy2703

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

P

@thibault-deverge

Posted

Hi, overall your solutions are great! I do see a few areas for improvement:

Try to use CSS properties instead of <br> tags, as the spacing is purely decorative (refer to the separation of concerns principle). Use more semantic elements instead of simple <div> tags (e.g., <section>, <main>, etc.). For instance, using a <main> tag would be better than a simple <div> in this case. Your solutions are slightly narrower than the original. You can see this in details like the text alignment, which is off. Additionally, the padding and spacing aren't quite the same overall. Figma is usually free for this project, so if you can learn to use it (spoiler: it's not too hard), it will greatly enhance your ability to translate design into code. This also applies to your box-shadow, which is a bit harsher compared to the original design.

This might seem like a lot, but these are small details. Overall, your work is really good. Well done, and good luck with your next project! :)

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