Blog-preview-card solution

Community feedback

• 

  Ineke•80

  @Ineke84Posted 2 months ago

  Hello Tatiana,

  Good job on finishing the challenge. It looks spot on in the comparison.

  I recently (during the same challenge) learned some things that might also be interesting for you:

  • Use semantic html (with tags like <main>, <article> etc) , that way you can make a webpage more informative for browsers and search engines.

  • I also missed it at first, but the hover not only changes the color of h1, but also creates a bigger dropshadow.

  • You could also use global variables for the font-sizes. I created 3 variables with font-sizes. With 'clamp' as I used it you have a linear scale from small to bigger font-sizes. But if you use media-queries you also only have to define what the size is for each media query and you don't have to set the font-size for element seperately again (you wouldn't need h1 and .description in your media query).

    --font-size-heading: clamp(1.25rem, 5vw - 1rem, 1.5rem);
    --font-size-medium: clamp(0.875rem, 5vw - 1rem, 1rem);
    --font-size-small: clamp(0.75rem, 5vw - 1rem, 0.875rem);
    

  Hope you find it usefull!

  Ineke

  Marked as helpful

  0

  ---

  

  Tatiana•20

  @PavlinovaPosted 2 months ago

  @Ineke84, thank you so much for expanded feedback. Oh, i did not noticed dropshadow too! Thank you :) And especially thanks for climp, i didn`t hear about this 😀

  0
• 

  aurel0123•60

  @aurel0123Posted 3 months ago

  I like

  0

  ---

  

  Tatiana•20

  @PavlinovaPosted 3 months ago

  @aurel0123 , Thanks

  0