Skip to content
Submitted about 2 months ago

Responsive blog preview card layout

MiloosN5•190
@MiloosN5
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Blog preview card
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

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

I'm proud of my eagerness to improve with each challenge, especially in terms of organization. I'm looking forward to refining it even more next time.

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

The required items to complete this task were not a problem. However, a challenging aspect of the task is organizing everything in a way that is clear to everyone while also preparing for the potential growth of the website.

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

Despite being satisfied with my progress, I still believe that the code can be organized even better. For instance, by splitting it into smaller components, using clearer BEM naming conventions, and implementing other simplifications.

Community feedback

  • MikDra1•6,920
    @MikDra1Posted about 1 month ago

    Well done, here are some things to review 😊:

    • Using px for everything: Instead of px for fonts and layouts, try using relative units like rem or em to make your design more adaptable to different screen sizes.

    • Forgetting alt text on images: Don’t skip the alt attribute. It’s essential for accessibility and helps search engines understand what your images are.

    • Poor use of Flexbox and Grid: Be careful not to mix Flexbox and Grid unnecessarily. Each has its strengths—use the right one based on the layout needs.

    • Not testing across browsers: Don’t forget to check how your site looks in different browsers like Firefox and Safari. Cross-browser testing is super important.

    • Ignoring accessibility: Focus on features like keyboard navigation, contrast ratios, and ARIA labels. They make your site usable for more people.

    • Using fixed heights for elements: Setting fixed heights can cause overflow issues. Use min-height or allow content to expand naturally to avoid problems.

    • Not using responsive images: Be sure to use srcset or the <picture> element to optimize images for different devices. This improves performance, especially on mobile.

    Hope you found this comment helpful 💗💗💗

    Good job and keep going 😁😊😉

    0
    Steven Stroud•11,870
    @StroudyPosted about 1 month ago

    Hey @MikDra1, How did you lose so many points? Almost 1500 😮

    0
    MikDra1•6,920
    @MikDra1Posted about 1 month ago

    @Stroudy

    I was banned for posting one and the same comment. For me it’s not fair be abuse I help beginners and I put the comment once per account but I can’t do anything with that 😭😢

    0
    Steven Stroud•11,870
    @StroudyPosted about 1 month ago

    Hey @MikDra1 l, That sucks, You can still help beginners, refine your process per solution 💪 see you on the battlefield

    0
    MikDra1•6,920
    @MikDra1Posted about 1 month ago

    @Stroudy

    I’ll try my best 😄

    0
    MiloosN5•190
    @MiloosN5Posted about 1 month ago

    @MikDra1 Thank you :)

    0

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