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

3column preview card component using CSS flexbox and Media Queries

MZ1M4K 10

@MZ1M4K

Desktop design screenshot for the 3-column preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

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

@LeonardoMancilha

Posted

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
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