Skip to content
Submitted 3 months ago

Responsive QR Code card using Flexbox

py-code314•340
@py-code314
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...QR code component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

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

I was able to make good use of Flexbox to center the card and make it responsive

What specific areas of your project would you like help with?
  1. I wrapped card image, title and text in individual divs. Is it advisable to do it this way or is there a better way to do it?
  2. Tried to use BEM nomenclature for class names. Please let me know if I made any mistakes!
  3. Little confused about the use cases of margins and padding. Is there any good resource out there which explains their proper use?
  4. Any alternatives to media queries so that I don't have to write them for every screen size?

Community feedback

  • AlvaroPrates•130
    @AlvaroPratesPosted 3 months ago

    I'm fairly new to web-development, but I think I can leave a little feedback.

    When I've done this project, I forgot to add the box-sizing: border-box CSS property and had some trouble to adjust the width. So, nice catch implementing it!

    Regarding the topics that you need help:

    1. Instead of wrapping the image, title and text within normal divs, maybe you can use the <article> and/or <figure> HTML semantic tags.
    2. I didn't use any media queries to this project. Do you really need any?
    Marked as helpful
    0
    py-code314•340
    @py-code314Posted 3 months ago

    Thank you. I've changed the <div> to <article> as it makes more sense semantically.

    I've noticed in the figma file that title text has 'Drop shadow' in Desktop version and the Mobile version doesn't. That's why I had to add @media in there

    1
  • Afeni Samuel Oluwatimilehin•10
    @TimTech5Posted 3 months ago

    Basic ui design with the use of HTML5 syntax , it is responsive and the layout looks good on a range of screen sizes

    0

Please log in to post a comment

Log in with GitHub

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