Skip to content
Submitted over 2 years ago

3column preview card component using CSS flexbox and Media Queries

MZ1M4K•10
@MZ1M4K
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

Is my use of flexbox correct? Is it ok to refer in CSS to specific elements by using Class instead of ID? It feels cleaner and simpler. Is there any bad practice in my code that I should be aware of?

Thank you

Community feedback

  • Leonardo Mancilha Machado•100
    @LeonardoMancilhaPosted about 2 years ago

    Hello, @MZ1M4K! It's better to use class instead of ID like you said it's cleaner and more straightforward. But you should use ID only to select a specific element (1 only). For example:

    <!DOCTYPE html> <html> <head> </head> <body> <p id="para1">Hello World!</p> <p>This paragraph is not affected by the style.</p> </body> </html>

    Only the first paragraph has the color red; Your file only can have 1 ID and not more. Use ID only for specific cases even choose to always use class.

    Talking about your code don't put space for example here:

    <div class=" item-sedan item">

    You should put:

    <div class="item-sedan item">

    And as for the rest of your code I think it's ok.

    Marked as helpful
    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