QR code component using HTML, CSS , also some Css variables
Design comparison
Solution retrospective
I'm proud to finish the challenge, i think next time with more experience, i can make the styling shorter.
What challenges did you encounter, and how did you overcome them?I had a hard time deciding how to center the QR code, i made some research, saw a lot of samples, and proceed what i think would be the more flexible solution.
What specific areas of your project would you like help with?I'm still new on deciding how to approach styling, it would be best if i could have some help deciding the simplest methods.
Community feedback
- @irthifaPosted 2 months ago
Hello there, Nice effort on this challenge!
I tried viewing your code to give you specific feedback but unfortunately, the link doesn't work. Hence, I decided to drop some general styling tips.
-
Having all of the common styling first in the stylesheet is a good idea. This means all the styles which will generally apply unless you do something special with that element. You will typically have default rules set up for:
body
p
h1, h2, h3, h4, h5
ul, ol
table
andlinks
-
We could define a few utility classes. If you have a few styling choices you know you will want to apply to lots of different elements, they can be put in this section. For example, a class that removes the default list style for lists we're going to display.
/* || UTILITIES */ .nobullets { list-style: none; margin: 0; padding: 0; } /* … */
- Include CSS for specific things, broken down by the context, page, or even component in which they are used. Example :
/* || STORE PAGES */ .product-listing { /* … */ } .product-box { /* … */ }
By ordering things in this way, we at least have an idea of which part of the stylesheet we are looking at.
- Avoid overly-specific selectors If you create very specific selectors, you will often find that you need to duplicate chunks of your CSS to apply the same rules to another element. Example :
article.main p.box { border: 1px solid #ccc; }
If you then wanted to apply the same rules to something outside of main, or to something other than a <p>, you would have to add another selector to these rules or create a whole new ruleset. Instead if you use below,
.box { border: 1px solid #ccc; }
This will apply your rule to any element that has the class box. But, remember there will be times when making something more specific makes sense; however, this will generally be an exception rather than usual practice.
You can read more about this here
I hope you find this useful!
Happy coding!
Marked as helpful0 -
Please log in to post a comment
Log in with GitHubJoin 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