Skip to content
Submitted almost 3 years ago

3-column preview card component

Michael Godfrey•340
@michagodfrey
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...3-column preview card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Here I wanted to focus on

  1. using grid layout and making it responsive (I hope it's positioned properly)
  2. BEM naming methodology - first time using this convention, would appreciate feedback on my CSS class names.
  3. minimizing accessibility issues (expecting a warning for no <h1> element - I can't see a use for it in this challenge)

Community feedback

  • Grace•31,090
    @grace-snowPosted almost 3 years ago

    Hi

    Just a quick point on your BEM naming as that’s what you say you’re practicing. Mostly ok, but this one isn’t BEM: main__card__btn. There you’ve done BEE Block__Element__Element.

    It’s a common mistake when first learning bem to do things like this. Don’t be afraid to start a new block.

    On this I would use the card as a Block. So you’d have card card—-sedan then card__btn On the anchor tag

    Marked as helpful
    1
    Michael Godfrey•340
    @michagodfreyPosted almost 3 years ago

    @grace-snow thank you for this feedback and great explanation. I understand BEM better now when you put it as BEM/BEE. I'll read more and check out more examples of BEM before submitting the next challenge.

    Thanks again! I sincerely appreciate people taking the time to look at my code to help me improve.

    0
  • Chamu•13,130
    @ChamuMutezvaPosted almost 3 years ago
    • some content is cut off from the screen between 768px and 930px.
    • the learn more buttons should be anchor elements. Those are links to external pages or sections
    • A heading element h1 is considered important in a site - what i would do is having an h1 element maybe with text such as My favorite cars but visually hiding the content from the display.

    Happy coding

    Marked as helpful
    1
    Michael Godfrey•340
    @michagodfreyPosted almost 3 years ago

    @ChamuMutezva Thanks a lot for those great points. I see what your mean on each one and I'll adjust going forward.

    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