Responsive landing page using CSS Grid

Community feedback

• 

  Travolgi 🍕•31,400

  @denieldenPosted over 2 years ago

  Hi Thendo, great work on this challenge! 😉

  Here are a few tips for improve your code:

  • add main tag and wrap the card for improve the Accessibility
  • add descriptive text in the alt attribute of the images
  • to make it look as close to the design as possible use the google font of challenge -> read here
  • add text-decoration: none to the a of title for remove the underline text
  • centering a div with absolute positioning is now deprecated, it uses modern css like flexbox or grid
  • remove all margin from .base class
  • use flexbox to the body to center the card. Read here -> best flex guide
  • after, add min-height: 100vh to body because Flexbox aligns child items to the size of the parent container
  • You can add the effect :hover creating a div that appears on hover. I used tailwind but you can still see and understand which css properties you can use to do the same. Look here -> my solution
  • using <hr> for the line is not the best way because this tag have a semantic meaning... in this case use div with border-bottom because this line is decorative
  • add transition on the element with hover effect
  • instead of using px use relative units of measurement like rem -> read here

  Overall you did well 😁 Hope this help!

  Marked as helpful

  1

  ---

  

  Thendo•40

  @Thendo-TPosted over 2 years ago

  @denielden Thank you Daniel. This was detailed and very helpful. Your help is much appreciated 🙏

  1
• 

  Vanza Setia•27,775

  @vanzasetiaPosted over 2 years ago

  Hi, Thendo! 👋

  Congratulations on finishing this challenge! 👏 Good effort on this challenge! 👍

  About the box shadow for the card, I had done this challenge and I added solid box-shadow to it and in my opinion, it looks similar to the design.

  Now, some suggestions on this solution.

  • I would highly recommend writing the file path in a consistent format. In this case, I notice one that is using back-slash and the others use forward-slash. So, the consistent format will make your code more readable and as a result, make it easier to understand by other developers (including your future self).
  • Use CSS border property to create the line. hr element has a role as a separator. In this case, the content below the line should not be separated.
  • Always use classes to reference all the elements that you want to style. Using id is going to make your stylesheet have high specificity (hard to maintain).

  That's it! Hope you find this useful! 😁

  Marked as helpful

  1

  ---

  

  Thendo•40

  @Thendo-TPosted over 2 years ago

  @vanzasetia Hi Vanza Sentia 👋

  Thank you for the encouragement and the ideas/hints to completing and making the challenge code easy to read. I will implement your input into my code, much appreciated.

  0

  

  Vanza Setia•27,775

  @vanzasetiaPosted over 2 years ago

  @Thendo-T You're welcome! 👍

  0