Skip to content
Submitted about 2 years ago

Three Column Challenge - Newbie

Sarah•50
@SwankypantsSarah
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

I'm still new to CSS and HTML, but I felt like I got a little closer on this one. I'm still struggling with the responsive code, but I'm continuing my practice.

I appreciate any feedback on my overall code formatting and media query. I know this is straight forward, but I wondered if I could have done something better in terms of organization or code consolidation.

Thanks for taking a look!

Community feedback

  • Lucas 👾•104,340
    @correlucasPosted about 2 years ago

    👾Hello Sarah, Congratulations on completing this challenge!

    1.You made your html structure entirely with div blocks but these div doesn't any semantic meaning, for this reason is better you use a better html markup improving your code, for example for each vehicle card you use <article> instead of the <div>.

    2.To make your CSS code easier to work you can create a single class to manage the content that is mostly the same for the 3 cards (paddings, colors, margins and etc) and another class to manage the characteristics that are different (colors and icon), this way you'll have more control over then and if you need to change something you modify only one class.

    3.Add the correct color for the background, that in this case is background-color: #F2F2F2

    4.This article from Freecodecamp explains the main HTML semantic TAGS: https://www.freecodecamp.org/news/semantic-html5-elements/

    ✌️ I hope this helps you and happy coding!

    Marked as helpful
    0
    Sarah•50
    @SwankypantsSarahPosted about 2 years ago

    @correlucas Thank you! I appreciate the feedback and use it in my next project. Happy coding to you too!

    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