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

Desktop only - QR code component

@rncentino

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?

I'm proud of how I handle some tricky css because its been a while since I stop coding and now I'm getting at it again. Hope I always have this motivation.

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

Centering div, since its been a while I find it difficult because I'm trying to remember it but then I googled it HAHAHA

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

None

Community feedback

P

@MihaiChirilov

Posted

Hello Ronie,

I really like how clean and simple your solution is. Great job on using minimal HTML and CSS elements to build this project. I only have a few minor comments/suggestions on how to improve it and make it closer to the original design:

  • The fonts are not imported so they do not display. I have used the @import on top of my .css file, like this: @import url('https://fonts.googleapis.com/css2?family=Outfit:[email protected]&display=swap');
  • I would also suggest using sans-serif after the font you use, just in case there is an error loading the font, like this: font-family: "Outfit", sans-serif;
  • I would remove the <p> tag which encloses the <img> tag, I find no reason to use it.
<p><img src="/images/image-qr-code.png" alt="image-qr-code"></p> - My last suggestion is to remove the height: 500px from the .wrapper class. .wrapper { height: 500px; } If the content is too short, it looks there is too much white space in the bottom part. Also the content may be dynamically added, so removing the height will make the height of the div flexible to accommodate longer content. Thank you.

Marked as helpful

1

@DhavalFatnani

Posted

It looks all good to me.

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