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 card preview

Satyam Jha 150

@satyamJha002

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

Daniel 240

@Flashdaniel

Posted

Hi Satyam. Great work. There are few places I like to point out. You should not pust texts on <div> and <span>, because they are used for grouping element not for texts. Put your text in the right element tags like <p> element tag can help in responsive design. Also you should know that screen readers don't read texts on <div> and <span>.

Make use of semantic HTML <time> tag when working with time not <p> tag. It include the datetime attribute to translate dates into machine-readable format, allowing for better search engine results or custom features such as reminders.

In your Stylesheet don't add both max-width and width at a time. Is either you are using one not the two or you can use min-width and max-width. When added Line height I saw that you forgot to add the unit. I recommend using responsive units like rem, em when working with font-size, margin, padding, width and use px when working with border and border radius . If responsive units was used In the project, you wouldn't need to use media query. Overall You solution is great!

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