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 QR code component

@RevadiSundaram

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


Feedback are welcome.

Community feedback

@Bishalsnghd07

Posted

Hi, @RevadiSundaram

Good to see you on completing this challenge👏

Your project looks really amazing🎉

I have some suggestion about your code that might interest you.

  • There is an very useful browser extension called Perfect Pixel that allow you compare with the design image and that gives the exact dimensions to make your web page pixel perfect. I recommend it to you.

  • Use min-height of 100vh instead of height to the body element. Using height in your body, it will only break your layout, never ever use height in main landmark or in body of your layout, it gives disaster solution. You can use inside main component, if needed.

body { height: 100vh;❌ min-height: 100vh;✅ rest same }

I hope this suggestion is useful for future projects.

Once again Welcome to Frontend Mentor Journey❤️

0

@FernJBatista

Posted

The end result looks really good!

I would recommend you some things though.

  • Try to use an organized heading structure, you used an h4 here for the title, but it would be better to use an h1 and style it as you need.

  • Look up text size guides, in this case the text could be a bit small (I know, I know, one pixel is a bit too naggy). I think a good starting point is that paragraph texts are usually 16px or 1rem, from there you can also give your headings bigger size depending on their hierarchy.

Other than that you did great!

Happy coding, keep it up!

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