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 Web Design QR Code Component

@murdock33

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


What are you most proud of, and what would you do differently next time?

What challenges did you encounter, and how did you overcome them?

What specific areas of your project would you like help with?

Community feedback

@kinqbert

Posted

Great job! Your code looks mostly fine to me, but personally I'd suggest some fixes:

  1. Always consult with Figma file, if it is available (in this task it is available for free). It is so useful during front-end development process, as it allows you to see precise pixel sizes of different element, how they should be placed, etc. In your case, sizes seem a bit off, like overall card width and card paddings, for example. Figma's interface may look a bit confusing, but trust be, it is really easy to learn and even easier if everything you need Figma to is checking the design. It is widely used in this industry, so I definetely would recomend learning some basics.
  2. You shouldn't use <br> tags in your card description, as they are not really necessary there. Text will be placed properly without them with proper card width.
  3. I don't really see much profit into your usage of @media queries. If they are used to add some distance between card and page edges on screens with small widths, you should probably add paddings for the whole page.

Overall, I really like your solution! Code looks pretty clean and good. Great job!

0

@murdock33

Posted

@kinqbert Thanks for the suggestions bro, it's mean a lot for beginner like me, especially point number 3, never thought about it before and it is worked out.

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