Four card feature section

Community feedback

• 

  Matthew Szanyi•35

  @Szanyi95Posted over 4 years ago

  One thing that stood out to me from looking at your code is how often you repeat the same styles in your card's CSS section. You could create a class for properties that are repeated such as width and height and then have that as a secondary class in your code.

  Also where you have border-top and then border-top-color, there is no need for the color property, you can just include this in your border-top like you'll see below.

  For example:

  HTML:

  div class="red card"

  CSS:

  .card { width: 350px; height: 250px; background-color: #fff; border-radius: 5px; box-shadow: 3px 3px 10px 5px rgba(0,0,0,0.1);

  .red { border-top: 4px solid hsl(0, 78%, 62%); grid-column: 2; }

  .orange { border-top: 4px solid hsl(34, 97%, 64%); grid-column: 2; grid-row: 2; margin-top: 30px; }

  You get the idea!

  You haven't done these bits wrong. It will just make your life easier and save so much repetition. It looks great though well done! Keep going.

  1

  ---

  

  Ayaka•195

  @Ayaka0Posted over 4 years ago

  @Szanyi95 Thank you so much for explaining a lot about that. When I built them, I was almost crazy about repeat...lol Now I understand. Next time when I create new project, I will be careful about that:)

  0
• 

  temidayo•80

  @temideewanPosted over 4 years ago

  Well you could try a little trick I learnt from jonas schmedtman..... You set the font size on your HTML tag to a particular percentage of the default size (usually 16px)... So for instance font-size:100% would translate to 16px.... But I prefer using 62.5% which translates to 10px... And then I use REM units for the calculation of sizes.... So when I target a smaller breakpoint I just reduce the font size to say 50% and it fixes a lot of the problem so you have less components to apply media queries to.... You could chat me up to explain better if this doesn't cover it

  0

  ---

  

  Ayaka•195

  @Ayaka0Posted over 4 years ago

  @temideewan Thank you very much for giving me feedback. I have not understood the calculation of the font-size and so on. I recheck about font-size :)

  0

  

  temidayo•80

  @temideewanPosted over 4 years ago

  @Ayaka0 yeahhhhh things that would probably help is knowing how font size affects the rem units..... MDN provides a good resource for understanding it

  0

  

  Ayaka•195

  @Ayaka0Posted over 4 years ago

  @temideewan Thank you so much for the resource. I will check it!:)

  0