Submitted over 1 year ago

Mobile and Web Responsive QR Code Solution

Quincy Bulla• 10

@dominionworkz

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

QR code component

HTML
CSS

1newbie

View challenge

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

@NehalSahu8055

Posted 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

Darren• 120

@DarrenBerg1

Posted 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

Quincy Bulla• 10

@dominionworkz

Posted 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

Please log in to post a comment

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