Design comparison
Solution retrospective
I’m most proud of successfully implementing a responsive design that works well on different devices. It was a great opportunity to put into practice my understanding of CSS Flexbox and media queries, ensuring the layout remained clean and visually appealing across various screen sizes.Next time, I would focus more on optimizing the code for better maintainability. I’d use more CSS custom properties (variables) to make it easier to tweak styles globally and explore using a CSS preprocessor like SASS to organize the stylesheets better.
What challenges did you encounter, and how did you overcome them?I encountered challenges with getting the card layout to adjust smoothly across different screen sizes. Initially, the text and images would overlap or become misaligned on smaller devices. To overcome this, I revisited my understanding of Flexbox and experimented with different flex properties and media queries until I found a solution that maintained the design’s integrity. It was a valuable learning experience in responsive design.
What specific areas of your project would you like help with?I would appreciate feedback on how to further optimize my CSS for performance and maintainability. Specifically, I’m curious if there are more efficient ways to structure my styles or better practices for handling responsive design. Additionally, any tips on improving accessibility would be highly valuable.
Community feedback
- @StroudyPosted 3 months ago
Great job with this challenge, One thing I noticed,
- box shadow on the card
- no
<main>
tag for SEO - no
alt=""
tag on your<img>
- missing
<meta>
description tag - CSS should have a modern reset Modern CSS Reset
Just a few there for you to take a look at, using google dev tools lighthouse will highlight some more minor issues, but apart from that you finished it and didn't give up great job, happy coding!
Marked as helpful0 - @TedJenklerPosted 3 months ago
Hi @Tanuja0530,
Nice project! To improve, consider using the <time> tag, for example:
<time datetime="2024-09-02">September 2, 2024</time>
This would enhance your project's SEO and accessibility. Also, make sure to use heading tags (H1, H2, H3, etc.) in a hierarchical order. Start with H1 (used only once per page), then use H2, H3, and so on. Use CSS to style these headings rather than relying on the heading tags themselves for sizing.
Keep up the great work!
Best, Teodor
0
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