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
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 challenges did you encounter, and how did you overcome them?

Any feedback?!

Community feedback

@DanCodeCraft

Posted

Hi @KaidoGad, that's well done.

Since you asked for feedback, here's mine:

Design: it's a bit too large for what the component is. While on the desktop it looks fine, when you make it mobile, you will see that it's completely out of proportion (you can achieve this by emulating the mobile view on your browser by pressing F12 or right click > inspect, and changing the view). I also feel the box-shadow is missing around the component. It's light and often hard to see, but it does exist and makes a difference in this kind of project.

Code: for accessibility purposes, consider using measures in rem, rather than pixels - especially for the font-size. This project didn't need any media query, but since you added it, use em for the query, and rem for the rest/where is fit (as mentioned above). To avoid having queries on small projects like this one, take the mobile-first approach.

Keep up the good work!

Marked as helpful

1

@KaidoGad

Posted

Hi@DanCodeCraft , thanks bro for your feedback. you definitely help me especially about rem and box-shadow(i didn't notice that) thanks for your words, i hope we help each in the future.

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