Skip to content
Submitted about 2 years ago

Flex-direction and justify content

Grace Omoleye•30
@Graceomole
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

Community feedback

  • バレンタイン 😈•64,190
    @VCaramesPosted about 2 years ago

    Hey @Graceomole, some suggestions to improve you code:

    • To give you HTML code structure, you want to set up your code in the following manner (only did parent containers):
      <body>
      <main>
        <article>
          <article class="sedan-card"></article>
          <article class="sedan-card"></article>
          <article class="luxury-card"></article>
        </article>
      </main>
     <footer class="attribution"></footer>
    </body>

    The Main Element identifies the main content of the document.

    While the Article Element will serve as the card’s container, because the card represents a complete, or self-contained, section of content that is, in principle, independently reusable.

    Lastly, each card will be wrapped in their own Article Element because they too, are complete, or self-contained, section of content that is, in principle, independently reusable.

    More info:

    https://web.dev/learn/html/headings-and-sections/

    • The car images/icons serve no other purpose than to be decorative; They add no value. Their Alt Tag should left blank and have an aria-hidden=“true” to hides it from assistive technology.

    • The headings are being use incorrectly. For this challenge, each heading is equally as important. So best option, is to use <h2> Heading, because it will give each card the same level of importance and it's reusable.

    • The descriptions are not headings, they need be wrapped in a Paragraph Element.

    • Your "buttons" were created with the incorrect element. When the user clicks on the button they should directed to a different part of you site. The Anchor Tag will achieve this.

    Happy Coding! 👻🎃

    1
    Grace Omoleye•30
    @GraceomolePosted about 2 years ago

    @vcarames Thanks for the corrections.

    0
  • Lucas 👾•104,400
    @correlucasPosted about 2 years ago

    👾Hello @Graceomole, Congratulations on completing this challenge!

    Great code and great solution! I’ve few suggestions for you that you can consider adding to your code:

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

    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.

    ✌️ I hope this helps you and happy coding!

    0
    Grace Omoleye•30
    @GraceomolePosted about 2 years ago

    @correlucas Thanks for the feedback. I will make the necessary amendment.

    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