HTML, CSS, Display Flex

Community feedback

• 

  Raptor0x1•210

  @Raptor0x1Posted 4 months ago

  • First of all, don't keep your focus on just the component think of the bigger picture here, when this component is going to be used in blog websites there's going to be multiple components similar to this one.
  • Keeping the first point in mind, you can use min-height instead of height in the body. In a website there's going to be more content after this component min-height: 100vh makes the screen scroll if there's more content than the viewport height without overflowing. So it's better to use min-height.
  • Instead of absolute units (px) use relative units such as rem.
  • You can use margin to create some space between the screen and card in mobile view.
  • There is no need to use button element. In most of the websites cards are sorted using these tags in this case it is learning. They use javascript to do this. What I'm trying to say is learning is not a button just text, so use <p> , <span> or simply write this in a new div.
  • Instead of using Next-Sibling Combinator h2 + p you could have given a class to each element. Moving forward you will have to create larger projects and using these combinators will make things messy. Use classes instead.
  • Lastly, You haven't done the active states of the card.

  Marked as helpful

  1

  ---

  

  Abdulrahman Fathy•20

  @AbdulrahmanFa2hyPosted 4 months ago

  Thanks !

  • what did you mean with "active states of the card" ? @Raptor0x1

  0

  

  Raptor0x1•210

  @Raptor0x1Posted 4 months ago

  • Active states mean when you hover or click on the component or some part of component the styles changes such as color, box-shadow, underline, background-color etc.
  • When you hover over the card the box shadow radius increases and when you click on any part of the card it opens a link and the color of h2 tag changes to yellow. @AbdulrahmanFa2hy

  Marked as helpful

  0
• 

  Steven•310

  @Steven-AngPosted 4 months ago

  Looks good

  0