Basic blog preview card with basic frontend tools
Design comparison
Solution retrospective
One thing about this project is that I was very focused on details. I wanted to focus on exact sizes to the pixel, which meant I went back and forth a lot. The problem is that the desktop design is for 1440p resolutions while I am working on a 1080p monitor. I haven't found a good solution to manage this size difference and count it in for the sizes in the code. What would be a more efficient way to tackle this problem?
Please log in to post a comment
Log in with GitHubCommunity feedback
- P@danielmrz-dev
Hello @DarkGamerXDOFF!
Your solution looks great!
I have a suggestion for improvement:
- For semantic reasons, use
<main>to wrap the main content instead of a<div>.
📌 This tag change does not impact your project visually and makes your HTML code more semantic, improving SEO optimization as well as the accessibility of your project.
I hope it helps!
Other than that, great job!
- For semantic reasons, use
- @Blackpachamame
Greetings! you have done a great job 😎
📌 Some accessibility and semantics recommendations for your HTML
- To improve the semantics of your HTML, you can change your
<div class="container">to a<main class="container"> - You have put text in a
h2heading when it is obviously ap - You can apply
display: blockto the image to remove the white space generated underneath. Although visually in this case it is irrelevant, it helps you better calculate the space with other elements
- To improve the semantics of your HTML, you can change your
- @owlbunt
Well , you don't need to make pixel perfect it's all about learning here so do your best and keep going 😉
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