Design comparison
Solution retrospective
I’m most proud of completing this project and creating a clean, responsive blog preview card using HTML, CSS. The design closely follows the Frontend Mentor challenge specifications, and I managed to implement a well-structured layout with great attention to detail in terms of spacing, typography, and responsiveness across different devices. The component-based structure is easy to maintain and update.
What would I do differently next time?
Next time, I would focus more on optimizing the CSS by exploring CSS Grid more thoroughly to better handle layout control.
What challenges did you encounter, and how did you overcome them?Challenges encountered:
One of the main challenges I encountered was ensuring the blog preview card remained fully responsive across different screen sizes. Balancing the layout and typography to look good on both small mobile screens and larger desktops required careful use of CSS Flexbox. Another challenge was working with the design's spacing and alignment to ensure it matched the Frontend Mentor specifications precisely, which sometimes meant fine-tuning padding and margin values.
How I overcame them:
To overcome the responsiveness issue, I leveraged Flexbox properties to adjust the layout dynamically for different devices. Testing the design on various screen sizes helped refine the responsiveness. For alignment and spacing, I broke down the layout into smaller components and used browser developer tools to inspect and adjust the design iteratively. These tools allowed me to fine-tune elements until they aligned perfectly with the challenge's requirements.
What specific areas of your project would you like help with?Specific areas I would like help with:
I would like help with further optimizing the layout, particularly in refining the CSS to ensure a smoother, more consistent design across all screen sizes. I’d also appreciate guidance on how to improve the project’s overall performance, such as using best practices for image optimization and lazy loading. Additionally, I’m interested in learning how to incorporate more advanced CSS techniques, such as animations or transitions, to enhance user interaction and engagement. Feedback on making the codebase more modular and maintainable would also be valuable.
Community feedback
- @grace-snowPosted about 2 months ago
When you do single component challenges like this, I encourage you to try and imagine you are building a component that will end up being used in a real site. As soon as you do that, a few things come up:
- this card would go inside a
mainlandmark, it wouldn't be the landmark - this card component wouldn't be used for the page title. It would be placed below the main page heading, so it shouldn't have a h1. Use a lower importance heading level like h2.
- it's likely multiple blog cards would be used on a page, each pointing to different blog posts. So youd to think about those image alts. Are the images decorative? Or are they serving a meaningful purpose, valuable content? I expect they are probably decorative and should have empty alt.
- Most important of all: how would anyone actually access this blog when you've not included a link? The link needs to be inside the heading wrapping the text (the blog name).
The css looks really good though. Only a couple of improvements to suggest:
- the max width on the component should be in rem not px. That way the layout will work for people who change their default text size setting in their browser or device.
- font size must always be in rem not px. https://fedmentor.dev/posts/font-size-px/
Marked as helpful0@Manuel7070Posted about 2 months ago@grace-snow Thanks for the feedback, I was looking forward to it, let me get to work and implement your suggestions.
0 - this card would go inside a
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