Skip to content
Submitted 6 months ago

QR Code Component Using HTML and CSS

Ahmed Mahmud•70
@dDevAhmed
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 am most proud of learning new techniques to center an element using Flexbox. This method is more modern and versatile compared to traditional position properties. Next time, I would like to explore using CSS Grid for layout management, as it offers more control over complex designs.

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

One of the main challenges I encountered was centering the QR code component card using position properties. Initially, I struggled with making the card perfectly centered both vertically and horizontally. To overcome this, I used Flexbox, which made the centering process straightforward and responsive. The properties justify-content: center and align-items: center were particularly helpful.

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

I would like help with receiving constructive feedback on the overall design and code structure of my project. Specifically, I am looking for feedback on:

  1. The effectiveness of my use of Flexbox for layout.
  2. Suggestions for improving the responsiveness and accessibility of the component.
  3. Any advanced CSS techniques that could enhance the visual appeal and performance of the component.

Community feedback

  • Alexis•30
    @AlexisVari127Posted 6 months ago

    Hey Ahmed, I like your solution for this challenge. The code is well-structured. One thing you could improve could be the semantic html. So instead of using divs for everything, you may try using <p>, <span> or <h2> for text elements. But from a design perspective, it looks similar to the exmaple that's been given. Good job!

    Marked as helpful
    2
    Ahmed Mahmud•70
    @dDevAhmedPosted 6 months ago

    @AlexisVari127

    Thank you for your feedback on my QR code project! I appreciate you taking the time to review my code and offer suggestions.

    I understand the importance of using semantic HTML for better accessibility and SEO. I'll make sure to replace some of the <div> elements with more appropriate tags like <p>, <span>, and <h2> for the text elements. This will definitely improve the structure and readability of my code.

    I'm glad to hear that the design looks similar to the given example. I'll continue working on both the semantic structure and the visual design to make my projects even better.

    Thanks again for your constructive feedback!

    Best regards, Ahmed @dDevAhmed

    1
  • nafsonig•20
    @nafsonigPosted 6 months ago

    Well done, this is a great solution well replicated. 👍

    Marked as helpful
    1

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