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

QR Code Box

@Danieljamespm

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?

Centering everything. To center the box itself I used margin: auto;. To center the image and text inside I used flex at first but realized I just needed text-align: center;.

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

Getting the HTML and Body to take up the whole space of the page. I assumed they would fit the container automatically.

html{ min-height: 100%; margin: 0;

}

body{ min-height: 100vh; margin: 0; background-color: var(--slate-3); }

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

I am hoping my solution isn't too much and could have been accomplished with way less code.

Community feedback

@LuccaMauroMolina

Posted

esta bueno, fijate que en el responsive no se ajusta muy bien, en algunas partes se cortan, pero en general esta bastante bien el codigo

0
capiste 40

@capiste

Posted

Good Job on your work! It looks great.

Just some key points to take note of. Make sure to double-check the view of the website on both desktop and mobile view to see if the web elements fit into the view. I did a quick check of your sample code using the mobile view and some parts were cut off. But aside from that, everything else looks good to me. Great work once again!

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