Skip to content
Submitted 6 months ago

QR code component using HTML and CSS

Omair Majid•100
@BigO-Dev
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 thought this was a simple, straightforward project, ideal for beginners. If I had to do things differently, I would try to organize my CSS better.

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

The challenge was making sure it was responsive. I was able to achieve this by making the width of the card a percentage and by using rem units.

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

I'd appreciate any feedback on how I could improve and advice on using best practices.

Community feedback

  • Sardor Akmalovich•190
    @akmalov11cPosted 6 months ago

    Hi there! Great job on completing the challenge!

    Your solution looks well-structured and visually appealing. Here are some suggestions to enhance your project further:

    HTML:

    1. You've used appropriate HTML elements to structure your content, which is fantastic. However, consider adding semantic elements like <header>, <main>, and <footer> for better organization and accessibility.
    2. Don't forget to add descriptive alt attributes to your <img> elements for better accessibility and SEO. Instead of simply "qr-code", you could provide a brief description of what the QR code represents.

    CSS:

    1. Your use of CSS variables for colors and typography is a smart approach, making it easy to update styles across your project. Consider using more descriptive variable names for better clarity and maintainability.
    2. You're applying media queries effectively to make your layout responsive. Perhaps you could fine-tune the spacing and typography for smaller screens to ensure optimal readability and usability.

    Overall, your code is clean and well-structured. Keep up the good work, and don't hesitate to experiment with new techniques and seek feedback from peers to continue improving. Happy coding!

    Marked as helpful
    1
  • Jamie Reed•120
    @jreed-11Posted 6 months ago

    Code attepemt and very smilimar text need to be a bit larger but all in all a god attempt

    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