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?
Community feedback
- @danielmrz-devPosted 10 months ago
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!
1 - For semantic reasons, use
- @BlackpachamamePosted 10 months ago
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
1 - To improve the semantics of your HTML, you can change your
- @owlbuntPosted 10 months ago
Well , you don't need to make pixel perfect it's all about learning here so do your best and keep going š
1
Please log in to post a comment
Log in with GitHub
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