Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Blog-preview-card

@Tanuja0530

Desktop design screenshot for the Blog preview card coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


What are you most proud of, and what would you do differently next time?

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

P
Steven Stroud 4,160

@Stroudy

Posted

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 helpful

0

@TedJenkler

Posted

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 GitHub
Discord logo

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