Blog Card Project using React-Vite-Tailwind

Community feedback

• 

  haquanq•1,675

  @haquanq

  Posted 12 months ago

  Hellooooo @RappyProg 👋👋👋

  Nice work on the challenge, it look similar to the design!!

  Here is some other things that can be improved:

  • Each page should have one main landmark which means wrap you most important content of the page inside it (there are other landmarks).
  • Using more semantic HTML markups and keep your HTML simple like article, section, time,.. . For example you can wrap entire card inside article or just it's content (except image).
  • figure is being misused here, figure is often used along with figcaption and wraps around contents to give it extra details/explanations (SEO and accessibility improvement ) - could think of it simply as a label/caption (not only for images, can be a list, a long paragraph,... ). Here you are using figure for an image with zero context and it is redundant, leave only the img alone is fine.
  • Consider add some transition to your hovering events:

  transition-property: properties name (color, background-color, outline, border,...)
  transition-duration: time of ms (micro-second)
  transition-timing-function: ease/ease-in/... (transition behaviors)
  
  /* shorthand it looks like this*/
  transition: color 200ms ease;
  

  There is a small detail that you may have missed, when you hover the title the black shadow will move!!! You can check out my solution to see (don't look at my code and try to build it yourself, it's interesting)

  Hope this help 🙀🙀

  00