Responsive card component using CSS Flex and pseudoclasses

Community feedback

• 

  Luiz Felippe•80

  @luizfbnPosted about 1 month ago

  Good solution. I found some stuffs that you can improve.

  About HTML:

  • You can wrap your img with figure tag: https://www.w3schools.com/tags/tag_figure.asp
  • Inside content section, you can wrap the learning stuff and the publish date inside a header;

  About style:

  • The card shadow needs to be bigger;
  • On card hover, the shadow needs to expand (you can see this on Figma's prototype presentation) and cursor needs to be pointer;
  • The typography needs to be reviewed. For exemple, the card content paragraph have wrong font weight.

  Tips:

  • Always check if your solution is responsive, it's very important;
  • Avoid using width and height based on percentage, it is very situational and if you don't use wisely, this can break your style on different screen sizes;
  • Flex it's an awesome tool, but you don't need to use on everything. For this design, for example, you could use only blocks and inline blocks elements and you could be fine.

  Good job and keep studying! :)

  Marked as helpful

  1

  ---

  

  Marcos Valenzuela•100

  @MarcosAvgPosted about 1 month ago

  I have reviewed your points and have added them to my code, you were right with the use of flexbox, and thanks for the semantic corrections, I am still getting used to the units of measurement and it costs me a little not to use percentages, but over time I hope to use them better.

  Thanks for your review good day! @luizfbn

  1