Skip to content
Submitted 8 months ago

QR code component

Craig Johnson•240
@craigdev937
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 try to use CSS whenever possible. I wanted to combine Grid with Flexbox.
Please leave a comment if you have constructive criticism.

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

I had to search Google for centering the element in the middle of the page with Grid.

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

Any tips on how to improve my Markdown file? Or if you have any constructive criticism.

Community feedback

  • Luna Nguyen•30
    @lunanguyenPosted 8 months ago

    Your code overall is well-structured and readable. You've used semantic HTML elements appropriately, which is great for accessibility and SEO. Here are some constructive feedback points: Semantic HTML: You've used <main>, <section>, <aside>, and <footer> tags appropriately, which is excellent for semantic HTML. However, consider using more descriptive class names than just "qr" and "qr__image" to improve readability and maintainability. Responsiveness: The layout seems responsive, as you've used max-width for the .qr__image class and max-width for the .qr class. However, you may want to consider using relative units like em, rem, or percentages for font sizes to ensure better scalability across different screen sizes and resolutions. Font Loading: You're importing a Google Font in your CSS file, which is good. However, consider adding a fallback font-family in case the Google Font fails to load for some reason. This ensures a better user experience even if the font doesn't load.

    Marked as helpful
    1
    Craig Johnson•240
    @craigdev937Posted 8 months ago

    @lunanguyen - Hi Luna, thanks for your suggestions. I will look into them going forward. 😉

    0
  • Luis Rivero•100
    @LJRiveroPastranaPosted 8 months ago

    do you use any framework?

    0
    Craig Johnson•240
    @craigdev937Posted 8 months ago

    @LJRiveroPastrana - I didn't use any framework like React. I just used Vite for local development.

    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