Skip to content
Submitted almost 2 years ago

Responsive 3 Column Preview Card with Bootstrap

bootstrap
Anthony Licata•170
@anthonyplicata
A solution to the 3-column preview card component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

This was the first time I completed a challenge within only a few hours with little issue. A bit of a turning point in how I feel about my progress and I'm pretty excited about it.

I would like some advice how I could do this without Bootstrap. Is Bootstrap an acceptable end all framework for a project in the professional space? I feel like in Coursera it said it was good for prototyping.

Also, would appreciate any help on unnecessary code, better alternatives, or mistake fixes. Thank you!

Edit: I did have some issues 😅 I made some fixes because I didn't look at the desktop example before submitting.

I also fixed the width of the cards to look more like the design. Ran out of generations though.

Code

Please log in to post a comment

Log in

Community feedback

  • Andre Ferreira•530
    @Namonaki0

    Hi Anthony, well done for completing the challenge. It looks really good.

    Is Bootstrap an acceptable end all framework for a project in the professional space? - Yes, tonnes of sites use it every day, and many of them for commercial purposes. You just might want to check the comparison between various licenses. You can check some of these websites.

    You can also get rid of any code that's commented out if it's not serving any purpose, like the attribution bit before the Bootstrap CDN, along with the CSS that was left in the <head>

     .attribution { font-size: 11px; text-align: center; }
 .attribution a { color: hsl(228, 45%, 44%); }

    You don't need to have different ids for each button. You can set the background-colour to transparent on hover which will then show the colour that's behind each one. I can see at the moment you have background-color: hsl(0, 0%, 95%) for each individual button id - #sedan-button, #suv-button, #luxury-button. Try to adopt the DRY principle and have the background-color: hsl(0, 0%, 95%) and border: 2px solid hsl(0, 0%, 95%) in the .button instead.

    You can also style the h1s all at once without the need to have an id for each one of them - #first, #second, #third.

    I hope this helps a little bit.

    Marked as helpful

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