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

Netoβ€’ 170

@deusdeteneto

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 am most proud of creating a clean and responsive blog preview card that adheres to best practices in HTML5 semantics and modern CSS techniques. Next time, I would focus on optimizing the CSS even further by minimizing the use of inline styles and exploring more advanced Bootstrap features.

What challenges did you encounter, and how did you overcome them?

One challenge I encountered was ensuring the card's responsiveness across different screen sizes. I overcame this by leveraging Bootstrap's utility classes and thoroughly testing the layout on various devices to ensure consistency.

What specific areas of your project would you like help with?

I would appreciate feedback on how to further optimize the CSS for better performance and maintainability. Additionally, insights on improving the semantic structure of the HTML would be valuable.

Community feedback

MikDra1β€’ 6,050

@MikDra1

Posted

CSS Optimization

  • Use CSS variables for consistent theming.
  • Adopt BEM naming to reduce specificity.
  • Leverage Flexbox/Grid for responsive layouts.
  • Minify and combine CSS files for faster load times.

Semantic HTML Improvements

  • Replace <div> tags with semantic elements like <article> and <section>.
  • Ensure logical heading levels (e.g., <h1>, <h2>).
  • Wrap images in <figure> with <figcaption> for accessibility.
  • Use meaningful link text instead of generic phrases like β€œRead more.”

These changes improve maintainability, performance, and accessibility of the project.

Hope you found this comment helpful πŸ’—

Good job and keep going πŸ˜πŸ˜ŠπŸ˜‰

Marked as helpful

1

Netoβ€’ 170

@deusdeteneto

Posted

@MikDra1 Thank you very much for the feedback. I will review my code and try to improve it even further.

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