Skip to content
Submitted 2 months ago

Blog preview card using CSS

Nathan Perkins•80
@nathan-perkins
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 am proud that I was able to pick an area to focus on improvement and make progress in that area. In this project, I focused on being more organized with my CSS, and I think I accomplished this by using Kevin Powell's convention for organizing CSS properties, as well as using BEM to name elements' classes.

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

I would like to know if there are other things I should consider when it comes to organizing my CSS or just improving my CSS in general. I know that this smaller project doesn't necessarily require as much organization, but I wanted to aim for organization as if this were a much larger project.

Community feedback

  • Johann Maldonado•100
    @Johann-AlphaPosted 2 months ago

    Hi Nathan, I hope you are doing well. I will briefly describe some things that you can consider for future projects:

    1. Using semantic tags. Your design very closely reflects the mandatory design. I would just only comment that in addition to giving the footer a class called card__footer you could have actually used a footer tag there, so that you improve the accessibility of your page.
    2. Using unitless values for line heights. This one was advised by someone that commented my code. He said that I should stick to 1.5 (with no units) to ensure smooth adjusting of the letter sizes and better catering for the user's browser's preferences.
    3. Responsive design. I noticed that you didn't account for the mobile view. I realise that you thought that properties had the same value for the desktop view and the mobile view. The thing is that font sizes, some borders, etc., had different values for the mobile view. For that reason, it would have been useful to use @media so that you could add those different values.

    I think your coding was excellent, and you definitely succeeded at implementing the BEM model. I'm clearly taking that away from you.

    Marked as helpful
    0
    Nathan Perkins•80
    @nathan-perkinsPosted 2 months ago

    Thank you so much for this feedback, Johann! I will take these things into consideration for future projects. I'm planning to focus on responsive design for the next challenge, so thank you for bringing that up!

    1

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