Skip to content
Submitted 3 months ago

Responsive QR Code Component using flexbox

P
Hosea Marcus Calalang•50
@Marcusgb21
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?

I am most proud of starting to do project-based learning because it reinforces my knowledge as well as gives me confidence in my development skills.

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

The challenges that I encountered were styling the card and container divs. I overcame them by using Google to search for resources and utilizing AI by asking questions and challenging AI instead of copy-pasting the code.

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

In terms of styling, I get quite confused about how many divs I should create, as well as styling them.

Code

Please log in to post a comment

Log in

Community feedback

  • Dev Truce•230
    @DevTruce

    Hey Hosea, great job on completing the QR code component challenge! You did great 🥳 Here are a few suggestions that might help you going forward:

    1. Use semantic HTML (section, main, article, etc) where it fits and fall back on div when nothing else makes sense.

    2. Each div should have a clear purpose, grouping content, applying layout or managing spacing.

    3. Don’t stress about the number of divs, focus on clarity and structure instead.

    4. Use layout tools like Flexbox or Grid to control spacing and alignment. Think of each section as a purposeful container.

    5. Check out the "text-align" CSS property, it will help you match the component descriptive text more closely to the design.

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