Design comparison
Solution retrospective
I practiced a bit more on responsive layouts and I got to finally understand how to use the :nth-child
and :nth-last-child
Just discovered I don't properly use Semantic HTML elements so in my next project that's what I'll do differently
I got frustrated trying to change the color of the numbers in an ordered list but I managed to google out a few tricks
What specific areas of your project would you like help with?Making responsive layouts
Community feedback
- @geomydasPosted 3 months ago
For your file structure, I reccomend having an src folder where all of your CSS, HTML, JS and other code is contained. It makes it more organized and more maintainable. I dont reccomend putting them and mixing them with the other files in the root directory.
I don't reccomend having multiple CSS files for this. What you would do is use Sass partials and paired with the 7 in 1 architecture. Having multiple css files like this in your project makes it much more messy and you dont know what each CSS file does.
Using descendant / child / sibling selectors is typically a bad habit since it increases speficity which makes your CSS much more harder to override and the selectors are much more harder to understand.
To combat this, try using the BEM methodology in CSS. You might need to set a class name for every element and it is indeed verbose but it makes your CSS infinitely more readable.
For the media queries, use rem instead of px. Makes it more accesible and even if the user changes their default font size in the browser, it still looks good rather than having overflow. I don't reccomend using
px
for font-related properties such asfont-size: and line-height
. See why.Using the native CSS functions too much like min, max and clamp are bad habits and should only be used on specific things such as font-size or typically a property that can't have a max or a minimum. Use max-width or min-height instead.
You should also use a CSS reset. It basically makes your CSS look the same on any device. It's pretty simple since you only have to copy and paste it in your CSS file. It should be used in every project aswell. Most people use Andy Bell's or Josh Comeau's css reset
Marked as helpful0 - @MikDra1Posted 3 months ago
To make your card truly responsive I advice you to use this technique:
.card { width: min(600px, 90%) }
This ensures that the card won’t get bigger then 600px but on smaller screens it will be 90% of the viewport . The min() functions takes the smaller number.
It is the same as:
.card { width: 90%; max-width: 600px; }
Hope you found this comment helpful ❤️
Good job and keep going 😁😃😉
1
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