Product preview card using HTML, flexbox, and custom CSS

Community feedback

• 

  Lucas 👾•104,400

  @correlucasPosted over 2 years ago

  Hello Major, congratulations for your solution!

  For this challenge I don't think you can get rid of the media queries because the desktop card is horizontal and the mobile version is vertical. In other cases there's a flexbox property that can help you automatically break the elements as the screen become smaller, the flex-wrap: wrap;.

  For sure bootstrap is a good resource, it come with a lots of tools and pre-made classes and you don't have to worry about creating the whole CSS and think about responsivity. Although isn't a good fit if you're a newbie like me for example, because you don't really learn and understand what is happening, why one property is better in a situation than the other... so if you want really learn CSS I think you should stick to Vanilla CSS, that's the normal CSS and them you can use a framework as bootstrap or tailwind, to build big applications/lading pages for example, this is only my personal opinion. But anyway you reached a great result using bootstrap, looks very cool!

  Consider also look the solution report panel, there's some issues there, you'll learn a lots about semantic fixing these errors, its a great Frontend Mentor tool to use!

  Happy coding!

  Marked as helpful

  0

  ---

  

  Major•50

  @PandaMajorPosted over 2 years ago

  @correlucas Thanks for the insight! For this project I didn't use any bootstrap, and it's done using pure CSS! For a previous project I used bootstrap and was told it was a bit overkill for small projects, so I wanted to try to complete this one using just CSS!

  1

  

  Lucas 👾•104,400

  @correlucasPosted over 2 years ago

  @PandaMajor Ah ok! I get it wrong, congratulations, even better if you did with just CSS!

  0