Reponsive Blog Preview Card With Hover Effect | HTML & CSS

Solution retrospective
What difficulties did you encounter while creating the project?
The main challenge I faced during the project was achieving a balance between visual elements and content while designing the card.
Which sections of your code are you unsure about?
Since my code is relatively simple, there are no specific sections that I'm uncertain about. However, I'm interested in finding a better way to organize my HTML and CSS files for better coherence.
Do you have any questions about best practices?
I'd like to learn more about the best practices for optimizing visual content on the web. Specifically, I'm interested in knowing which file formats and compression techniques to use to achieve high-quality images with small file sizes. Any advice or resources on this topic would be greatly appreciated.
Please log in to post a comment
Log in with GitHubCommunity feedback
- P@danielmrz-dev
Hello @ArdaBozan!
Your solution looks great!
I have a suggestion (about semantic HTML) for improvement:
📌 Don't skip heading levels - start with
<h1>
, then use<h2>
, and so on.Unlike what most people think, it's not just about the size and weight of the text.
- The
<h1>
to<h6>
tags are used to define HTML headings. <h1>
defines the most important heading.<h6>
defines the least important heading.- Only use one
<h1>
per page - this should represent the main heading/title for the whole page.
All these tag changes may have little or any visual impact but they make your HTML code more semantic and improve SEO optimization as well as the accessibility of your project.
I hope it helps!
Other than that, great job!
- The
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