Design comparison
SolutionDesign
Solution retrospective
Any suggestions?
Community feedback
- @nuria1110Posted over 1 year ago
Hi! Looks like a great start, just a few suggestions:
- If you want to use a mobile-first approach, meaning you start writing your CSS for smaller screens first, your selectors do not need to be within a media query. You can write your base formatting as you did with the body selector and then as you increase your screen size, change your property values, same goes as for the rest of your selectors, e.g.:
body { font-size: 12px; } @media (min-width: 750px) { body { font-size: 14px; } } @media (min-width: 1440px) { body { font-size: 16px; } }
This can also be the other way around, you can write your initial formatting for bigger screens and then as your screen size gets smaller use media queries to change your values.
- If there are values you know you will be using more than once, you can create variables in your root CSS to avoid having to repeat yourself or make it easier to use them. I mostly use this if I have a number of specific colours I know I'm going to need:
::root { --light-lavender-color: hsl(242, 15%, 65%); } .container { background-color: var(--light-lavender-color); }
- If your border radius around your card is the same, e.g. 30px, you can just use
border-radius: 30px;
instead of repeating yourself:
border-top-left-radius: 30px; border-top-right-radius: 30px; border-bottom-left-radius: 30px; border-bottom-right-radius: 30px;
I hope this helps! I have also completed this challenge so feel free to have a look :)
Marked as helpful1@Cool-developer-975Posted over 1 year ago@nuria1110 Thanks a lot for your help !! I really appreciate it ! I will surely implement the things you mentioned above in my next challenge.
0
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