Skip to content
Submitted 2 months ago

HTML and CSS solution

AlexxxMasonn•100
@AlexxxMasonn
A solution to the QR code component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

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

Most proud of: border, I was working to get the best fit for it and achieved it.

Would do different: adding an image to the tittle tab, I was not able to make it.

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

css flex, visited https://css-tricks.com/snippets/css/a-guide-to-flexbox/ and had a clear guidance

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

images within tittle tab

Code

Please log in to post a comment

Log in

Community feedback

  • Leet Coder•20
    @I-Nurture

    You're off to a fantastic start—well done! It’s clear you’re moving in the right direction. I went through your code and have a few ideas that might help refine it even further:

    1. Set a fixed size for the card container to keep it from expanding unnecessarily. For this particular component, max-width: 320px works well to match the design intent.

    2. Use <main> instead of a regular <div> to wrap your card. It’s a semantic HTML element and communicates to browsers (and screen readers) that this is the core content of the page.

    3. Consider using rem or em units instead of px, especially for font sizes and spacing. It makes your layout more adaptable across different screen sizes and improves accessibility.

    If you're used to working with pixels, a good shortcut is to build everything using px first, then convert it at the end using a VS Code extension like px to rem, or an online tool like cssunitconverter.

    1. Add a favicon to the browser tab by placing the following inside the <head> section:
    <link rel="icon" type="image/png" href="./images/favicon-32x32.png">

    Hope that helps — keep up the awesome work and happy coding! ✨

    Marked as helpful

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