Blog preview card

Community feedback

• 

  P

  Moa Davou•310

  @moadavouPosted 7 months ago

  Great work on this challenge! Here are a few suggestions for improvement:

  • Use semantic HTML. Use <main> instead of <div> for the container and use <article> for the card.

  • If you have a <h2> on your page, you'll need a <h1> above it. If you don't want it showing, add a visually-hidden class.

  • Don't write your font-size in px. You want to use rem so that your site adapts to the user's settings.

  • To fix the active and hover effects you'll need to add:

  h2:hover, h2:focus {
  color: var(--yellow);
  }
  

  .container:hover, .container:focus {
  box-shadow: 20px 20px;
  }
  

  :hover is a pseudo-class that gets applied when the user hovers over the element. :focus is a pseudo-class that gets applied when the user focuses on the element, for example when the user navigates the site by using the keyboard.

  You have used the :active pseudo-class which represents an element (such as a button) that is being activated by the user.

  Marked as helpful

  3

  ---

  

  Earll•50

  @Earllgits23Posted 7 months ago

  @moadavou thanks! Ill take a note on that. I used :active because i though "active-states" uses the :active pseudo-class 🤣

  1