Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Blog Preview Card [HTML + CSS]

@msmachado89

Desktop design screenshot for the Blog preview card coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

@akmalov11c

Posted

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

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord