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
Desktop design screenshot for the Blog preview card coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


What are you most proud of, and what would you do differently next time?

基线

What challenges did you encounter, and how did you overcome them?

基线对齐

Community feedback

@Saoud2021

Posted

Your effort in creating the blog preview card is commendable, demonstrating a good start with the foundational structure. However, there are several areas for improvement. The HTML should incorporate semantic elements like <article>, <header>, <section>, and <footer> for better accessibility and SEO. Ensure all images have descriptive alt attributes to enhance accessibility. The card is currently not responsive, so using media queries and a flexible layout system like CSS Grid or Flexbox will help it adapt to different screen sizes. Adding hover effects and shadow depth changes will meet the design requirements, and Lastly, improve the readability and reusability of your code by adding comments and modularizing the CSS. Keep up the good work and continue refining these details!

0

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