Four card feature section (HTML and CSS)
Design comparison
Solution retrospective
I started learning frontend two months ago and now I have completed my first challenge. I had a hard time putting the cards in place (I needed some help). I am open to suggestions on how to improve not only this challenge, but my frontend skills in general.
Community feedback
- @tomzacchiaPosted about 4 years ago
Hey Gabriela,
Something that seems very minor but adds up in bigger projects is the order you place CSS properties. I've attached a link that has some useful examples. Personally I struggle to always stick to conventions when styling as quick as possible but getting better at it one project at a time.
Cheers, Tom
https://css-tricks.com/poll-results-how-do-you-order-your-css-properties/
0 - @rfilenkoPosted about 4 years ago
Hey Gabriela, congrats on your first submission. Just a few tips for you:
- use box-sizing:border-box (check what it does and how it's helpful);
- great to see you are using calc() and flexbox for layout😉;
- more semantic html tags;
- mobile-first appoarch is easier to implement and more maintainable, so cool you re using it (by the way - on tablet cards are too stretched);
- elements inside .card can be easily put into proper positons with flexbox or css grid.
Next to checkout - maybe grid or css variables.
Keep practicing, Roman
0 - @tarasisPosted about 4 years ago
👋 your looking really close on desktop. Just needs to go down a bit. Not on my laptop to see why it’s not centring vertically (will try and look a little later this evening)
You shouldn’t need to be using “ !important” to override the font size.
Mobile looks 👌
Congrats on your first solution!
🖖
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