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

Responsive blog-preview card using HTML and CSS

@DUMBLEDORE01

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

Steph 500

@xStephx

Posted

Hi, congratulations on completing the challenge!

Your solution looks great, I will give you some suggestions for this project that you can use for better practice.

About your HTML in this project: You're using <div> elements to wrap different sections of your content. You can use semantic HTML elements where appropriate, such as <article>, <header>, <footer> and other. Make sure to add appropriate alternative text (altattribute) to your <img> elements for screen readers and in case the images fail to load for better accessibility and SEO. The date is currently within <br> tags. Instead, consider using the <time> element with the datetime attribute for semantic markup of dates and times.

About your CSS style in this project: You have .container defined twice. It's better to styles into one block to avoid redundancy and make your code easier to maintain. In CSS, font-weight typically takes numeric values ranging from 100 to 900 or keywords like normal and bold. You're using font-weight: 500px and font-weight: 800px, which are invalid. Use font-weight: 500; and font-weight: 800; instead. You can add comments to your CSS code to it easier for you and others to understand your styling decisions and the structure of your code.

To improve even more in this area, do more projects, ask for feedback, communicate with other developers, and keep dedicated!

I hope it helps you!

Have a nice coding!

Marked as helpful

15

@DUMBLEDORE01

Posted

thank you so much for your valuable suggestion @xStephx

1
YasserAO 330

@YasserAO

Posted

Keep going

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