2 attemp Four card feature

Community feedback

• 

  Lucas 👾•104,400

  @correlucasPosted about 2 years ago

  👾Hello @guisepit, Congratulations on completing this challenge!

  Great code and great solution! I’ve few suggestions for you that you can consider adding to your code:

  1.Improve the semantic replacing the <div> used for the four cards and use instead <article> that is a better tag, remember that <div> doesn’t have any effective meaning is just a block elements, so for big block of elements use semantic tags.

  This a good resource to understand more about semantic tags: https://www.w3schools.com/html/html5_semantic_elements.asp

  2.The box-shadow is a bit too strong, this is due the opacity and blur. The secret to create a perfect and smooth shadow is to have low values for opacity and increase blur try this value instead: box-shadow: 12px 7px 20px 6px rgb(57 75 84 / 8%);

  If you’re not familiar to box-shadow you can use this site to create the shadow design and then just drop the code into the CSS: https://html-css-js.com/css/generator/box-shadow/

  ✌️ I hope this helps you and happy coding!

  Marked as helpful

  0

  ---

  

  Luis Guisepit•40

  @guisepitPosted about 2 years ago

  @correlucas Thank you very much for the suggestions, I am starting in this wonderful world of programming. In the next few days I will make the corrections you indicate and I will also read the files (links) to have better semantics in my code.

  0

  

  Luis Guisepit•40

  @guisepitPosted about 2 years ago

  @correlucas Hello, I have already made the corrections you mentioned, I await your response

  0

  

  Lucas 👾•104,400

  @correlucasPosted about 2 years ago

  @guisepit I saw that and its much better now! If you want to boost the solution. You can use this tool to reduce your CSS file and improve the performance of loading your page you can use a tool called CSS minify that reduces the CSS code by removing the unnecessary characters. You can use a VSCode plugin called minify css or this website tool to reduce your code: https://www.toptal.com/developers/cssminifier

  0