Skip to content
Submitted over 1 year ago

Mobile and Web Responsive QR Code Solution

Quincy Bulla•10
@dominionworkz
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

Hey, fellow Frontend Mentor community, hope all is well. Here's my first project, I feel like a success, with the results, however, it took me a while to code this out. Especially, when I was working on the CSS styling of the HTML.

In looking at the code base, is there anything I could've done better, easier? That's for both HTML and CSS.

You will see in the CSS I have some snippets commented out, this is how I had the code written before the changes in how it is now. What did I miss on the use of that concerning the QR code itself being n a div with a classification?

The other thing I am not sure of is how the CSS is applied to the body tag element, it's currently working, however, is there something I could've done better?

Lastly, does it matter in the CSS whether the properties on the selectors are in alphabetical order, from the viewpoint of specificity?

I look forward to any feedback. Thanks, Q

Community feedback

  • _nehal💎•6,710
    @NehalSahu8055Posted over 1 year ago

    Hello Coder 👋.

    Congratulations on successfully completing the challenge! 🎉

    Few suggestions regarding design.

    • Add align-items:center to the body to dynamically center the card .
    • For non-decorative images give meaningful and descriptive alt like alt= "QR code to frontend mentor website".
    • Use max-width or padding-inline for breaking up the line don't use <br>
    • Use responsive units(rem, em, %) from next project. Explore respective use cases on google.
    • Replace width with max-width to make your card more responsive.

    link.

    I hope you find this helpful.

    Happy coding😄

    Marked as helpful
    2
  • Darren•120
    @DarrenBerg1Posted over 1 year ago

    Hey great job on your first project! You did great.

    Some things that I would recommend doing is looking into mobile first or "responsive" CSS. _nehal💎 mentioned it as well, as in using em, rem, % and vh all help with increasing responsiveness within your site. This is important more than ever, as people are searching things on their phone rather than a desktop.

    again, great job! I will follow you to see you improve, as I do as well!

    Marked as helpful
    1
  • Quincy Bulla•10
    @dominionworkzPosted over 1 year ago

    I really appreciate the feedback from both of you, I will look into both suggestions. I also followed you all. The insight was helpful and confirmed what I've set out to do in joining Frontend Mentor and the path to take to get to where I desire to go. Thanks again for the help. QB

    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