Blog preview card

Community feedback

• 

  P

  Øystein Håberg•10,390

  @Islandstone89Posted 6 months ago

  HTML:

  • "HTML & CSS" should be a <h2>.

  • I would replace the id with class.

  • The profile image needs a more descriptive alt text, for example "Headshot of Gary Hooper".

  CSS:

  • Including a CSS Reset at the top is good practice.

  • I like to add 1rem of padding on the body, to ensure the card doesn't touch the edges on small screens.

  • On the body, change height to min-height - this way, the content will not get cut off if it grows beneath the viewport.

  • Remove the width and height on the card. You should rarely set fixed sizes in px, as this prevents components from adapting to different screens.

  • Add a max-width of around 20rem on the card, to prevent it from getting too wide on larger screens.

  • I would use rem instead of em for font-size.

  • line-height should not be in px. Instead, use a number relative to the element's font size. For example, if the element has a font size of 16px, and you wanted a line height of 24px, then you would do 24 / 16, which is 1.5.

  0
• 

  Olga•190

  @cvtqxPosted 6 months ago

  Great job implementing this design! I love how you did the hover states on interactive elements with pointer cursor and transitions.

  One area of improvement I would suggest is to work on your class names. Its important to give descriptive and easy to understand names so that other developers working on your code in the future can read your code without problem. Here is a great article that can help: https://www.freecodecamp.org/news/css-naming-conventions-that-will-save-you-hours-of-debugging-35cea737d849/

  0