Responsive blog-preview card using HTML and CSS
Design comparison
Community feedback
- @xStephxPosted 7 months ago
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 (alt
attribute) 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 thedatetime
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 from100
to900
or keywords likenormal
andbold
. You're usingfont-weight: 500px
andfont-weight: 800px
, which are invalid. Usefont-weight: 500;
andfont-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 helpful19@DUMBLEDORE01Posted 7 months agothank you so much for your valuable suggestion @xStephx
1
Please log in to post a comment
Log in with GitHubJoin 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