Skip to content
Submitted 4 months ago

QR Code Component Solution using HTML and CSS

vladyslav-shulhach•170
@vladyslav-shulhach
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'm proud that I was able to use HTML and CSS to accurately reproduce this design. It was a great learning experience to see how code and design come together, and I'm pleased with the way it matches the original layout. Next time, I want to deepen my knowledge of HTML and CSS and learn more advanced techniques. My goal is to write code that looks professional and polished.

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

I didn't encounter any major challenges during this development, but I did have some struggles with using Flexbox. I'm still working on mastering it to better understand how to align elements precisely and make sure they display well with clean code.

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

I'd like to learn more about the better CSS techniques and how to use Flexbox effectively for better layout and alignment.

Community feedback

  • P
    Rahexx•900
    @RahexxPosted 4 months ago

    Hi great job with this challange!

    Your HTML file looks great but I recommend you to read about BEM. This is a methodology for naming classes. It is helpful because it allows you to structure your project with clean and organized class names. This approach will be especially useful when you start using preprocessors like SASS.

    Another thing I noticed is your use of the alt attribute for your img tag. This attribute is important for accessibility, as it helps people who are visually impaired or experiencing difficulties seeing. The text "qr_image" might not be clear or intuitive for screen readers and could cause confusion. In this case, a more descriptive text like "QR code" would be more appropriate and effective.

    For you flexbox practice check these links, flexbox froggy is a classic for learning flex. Flexbox froggy Flexbox playground Flexbox bean

    Marked as helpful
    1
    vladyslav-shulhach•170
    @vladyslav-shulhachPosted 4 months ago

    @Rahexx Thank you very much! I'm happy to receive your feedback. It really helps me improve and refine my code. I'll look into BEM and Flexbox practices - it's definitely something I want to learn!

    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