Responsive Blog preview card using html and css flexbox
Design comparison
Solution retrospective
I think I have sorted out the challenge and divided it part by part, that makes solving the problem much easier. I'll try the responsiveness differently next time.
What challenges did you encounter, and how did you overcome them?I had some challenge with readme file in github repo. searched youtube, watched a video tutorial and the problem was solved, as simple as that!
What specific areas of your project would you like help with?N/A
Community feedback
- @Mohammad-MoneerPosted 5 months ago
Hello there, You made a good solution 👍 Your HTML structure is clear and well-organized. However, I noticed that the
<img src="images/image-avatar.webp" alt="Image Avatar"> (also can be improved to be: alt="Avatar of Greg Hooper")img
elements do not have alternative text. Including descriptivealt
text is important for accessibility, as it helps users who rely on screen readers understand the content and purpose of the images. in my solution I have provided an alternative text as follows: HTML: <img decoding="async" src="images/illustration-article.svg" alt="Illustration Article">Your CSS is well-structured and easy to read. I noticed that you applied the border-radius directly to the image element rather than its wrapper. While this works fine, applying the border-radius to the wrapper can sometimes offer more control, especially if you need to manage overflow or apply additional styling to the container. Here's an example of how you could adjust your CSS:
CSS: .blog-img { overflow: hidden; border-radius: 10px; }
.blog-img img { width: 100%; }
This approach ensures that any overflow from the image is hidden and that the border-radius is consistently applied, which can be particularly useful for maintaining design integrity across different browsers.
Again, great job on your project! I hope you find this suggestion helpful.
1 - @nickdexterPosted 5 months ago
Looks great, just a little bigger than the design possibly due to the image size. Maybe try setting a pixel size for the image width instead of 100%.
Good work!
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