Blog Preview Card [HTML + CSS]

Community feedback

• 

  Sardor Akmalovich•190

  @akmalov11cPosted 7 months ago

  Hi there! Great work on your project!

  HTML:

  1. You've effectively used semantic HTML elements like <main>, <div>, and <p> to structure your content. It's clear and organized.
  2. It would be beneficial to include more descriptive alt attributes for your <img> elements to enhance accessibility. Instead of "Card illustration" and "Author avatar", you could provide specific descriptions of the images.

  CSS:

  1. Your use of CSS variables for colors and typography is a good practice, making it easy to maintain and update styles throughout your project.
  2. You've implemented media queries to ensure your layout is responsive across different screen sizes, which is excellent. Consider adjusting spacing and font sizes further for improved readability on smaller screens.
  3. The box-shadow property on your .card class adds a nice touch of depth to the card. However, you might want to consider reducing the spread and blur radius slightly for a more subtle effect.
  4. It seems you've missed adding a transition property to elements where you want to animate changes. Adding transitions can create smoother visual effects, enhancing the user experience. For instance, you could add transitions to hover effects on elements like .title for a smoother color change.

  Overall, your code is well-organized and visually appealing. Keep up the good work, and don't hesitate to experiment with different techniques to further enhance your skills. Happy coding!

  Marked as helpful

  1