Solution of Blog preview card "html & css only"

Community feedback

• 

  Andrés Gutiérrez Ramírez•2,470

  @AGutierrezRPosted 11 months ago

  Hello there @RizqiSugiarto 👋. Good job on completing the challenge!

  I have some suggestions about your code that might interest you.

  General Structure and HTML:

  • Wrap the primary content within the <main> tag instead of using it as a standalone component like a <div>.
  • All the content should be contained within landmarks. Every page minimally needs a <main> element.

  CSS and Styling:

  • Replace the 100vw from the height on the body for a 100vh. You are using the wrong unit. This will center the card on the screen
  • Remove the width: 100vw on the body, you dont need it.
  • Remove the width: 340% on the .card, you dont need it.

  Accessibility and Semantic HTML:

  • The icons/illustration images are decorative, so their alt text must be empty: alt="".
  • Profile image could benefit from a more descriptive alt text, like alt="Headshot of Greg Hooper" or you could leave it empty alt="".

  I hope you find this helpful 😁. Most importantly, your submitted solution is fantastic!

  Happy coding!

  Marked as helpful

  0

  ---

  

  RizqiSugiarto•50

  @RizqiSugiartoPosted 11 months ago

  @AGutierrezR Thank you very much🤩

  0
• 

  John Carruthers•310

  @techyjcPosted 11 months ago

  Great Job!

  Change the body CSS height from 100vw (view width) to 100vh(view height).

  Otherwise all good!

  0