Skip to content
Submitted about 1 month ago

QR component

vicky785•30
@vicky785
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?

so I've done it from scratch, even though it is a small task but It helped to build basic understanding as well as boosted my confidence. I would like to follow some best design patterns for my next challenges.

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

so the part where I've to use the google font in my application was little bit tricky, but was able to apply the font in my application. I've gone through the documentation and it helped me to understand easily.

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

so I'm not sure about the responsive design of my application, I've just tried to produce the exact output without much focussing on the responsive design. so I would kindly seek any advices/suggestions regarding how to follow the responsive designs and also any reviews regarding my work is much appreciated.

Community feedback

  • Huy Phan•2,320
    @huyphan2210Posted about 1 month ago

    Hi, @vicky785

    I checked out your solution and I have some thoughts:

    • Your .card appears too large on bigger screens and too small on smaller ones. This happens because you’ve set width: 20%, which means it takes up 20% of the body (since the .card is a direct child of the body). While it's technically responsive, I imagine that’s not the effect you're aiming for. I suggest using min-width and max-width for better control over its size. You might wonder, "What values should I use?" The best approach is to experiment with different widths and set a range that works well for your specific challenge.
    • When I think of "responsive design," I interpret it as making the website adaptable to as many screen sizes (or viewports) as possible with minimal effort. It’s worth exploring concepts like media queries, CSS relative units (such as %, em, rem), and built-in functions like calc() and clamp(). Mobile-first approach is also a popular way when building responsive websites.
    • Lastly, consider refining your HTML to make it more semantic. This means using HTML elements according to their meaning, like using <header>, <article>, or <section> instead of just <div>, which improves both accessibility and SEO.

    Hope this helps!

    Marked as helpful
    1
    vicky785•30
    @vicky785Posted 14 days ago

    @huyphan2210 Thank you so much for taking your time and providing a detailed feedback.

    1
  • Khadijah Kabir•30
    @devbydijahPosted about 1 month ago

    The solution demonstrates a solid understanding of HTML and CSS fundamentals, with a clean and organized structure, including the use of Google Fonts and a favicon; however, consider using more semantic elements like <main> and <footer> to enhance document structure and accessibility, adding ARIA roles and landmarks for better accessibility, using rem or em units for font sizes instead of vw for better scalability, and combining percentage and max-width for the .card element to improve responsiveness, while grouping related CSS properties and using more descriptive class names for better readability and maintainability.

    Marked as helpful
    1
    vicky785•30
    @vicky785Posted 14 days ago

    @devbydijah Thank you so much for taking your time for reviewing my work and providing feedback.

    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