Four Card Section responsive layout HTML + CSS

Community feedback

• 

  Gerben Dol•3,115

  @GerbenDolPosted over 4 years ago

  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 .card class that has all common styles, such as box-shadow, padding, background-color, etc.
  • A more specific class, for example .card-supervisor that 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! 💪🏻

  1

  ---

  

  Diego Moura•105

  @diegomouradevPosted over 4 years ago

  @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.

  1

  

  Gerben Dol•3,115

  @GerbenDolPosted over 4 years ago

  @diegomouradev Awesome, can't wait to see it!

  0
• 

  Amapakabo omieibi•60

  @MieibiPosted over 4 years ago

  Hey Diego, I love the transition of the webpage from desktop to mobile view really smooth. Good job 💯.

  0

  ---

  

  Diego Moura•105

  @diegomouradevPosted over 4 years ago

  @Mieibi Thank you! I had to review the Html before being able to create a responsive version. Learning every day about the import relation between Html and CSS.

  0