@GerbenDol
Posted
Hey Diego, your solution is looking super nice! Love the switch in layout between desktop and mobile! 😁
One thing that would greatly improve your solution and also your future solutions would be: Try bundling all shared styles in one class. Right now you write the same common styles for each card on each individual class.
Try splitting that up by adding multiple classes in your HTML, so you get something like:
- A
.cardclass that has all common styles, such as box-shadow, padding, background-color, etc. - A more specific class, for example
.card-supervisorthat sets it's specific position, the border color, etc.
Doing this, and practicing this in other projects will help you:
- Maintain code. If the card needs to be changed now you will only need to edit 1 set of CSS, instead of do it for each card
- Reduce code size, as this simply saves you duplicate code
If you want to learn more about this try looking for keeping your CSS DRY (=don't repeat yourself) 🤓
Good luck on your next challenges! 💪🏻
@diegomouradev
Posted
@GerbenDol Thank you so much for the feedback Gerben. I will definitely research CSS DRY. I felt the need to do that but didn't know exactly how to group classes in the CSS or to think about adding multiple classes in the HTML. For my next project, I will dedicate extra attention to making that happen.
@GerbenDol
Posted
@diegomouradev Awesome, can't wait to see it!
