Skip to content
Submitted about 2 years ago

Four card feature section using HTML + CSS (FLEXBOX, GRID).

Dan•120
@Dan-raccoon-69
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Four card feature section
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Hi guys, I've finished the Challenge "Four card feature section". What do you think about my solution? Is there something wrong with my code? Am I using the best practices? I'd like you to give me feedback to improve please. Thanks!!!

Community feedback

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

    Hey @Dan-raccoon-69, some suggestions to improve you code:

    • The Article Element would not be the best choice to wrap each card, since they can not stand on their own. A great way to see if you can wrap something in article tag, is if you remove everything and that single component makes sense by itself.

    • To give you HTML code structure, you want to set up your code in the following manner (Matt Studdert recommend this layout)

    <body>
   <header></header>
   <main>
      <section>
            <div class="supervisor-card"></div>
            <div class="team-card"></div>
            <div class="karma-card"></div>
            <div class="calculator-card"></div>
      </section>
   </main>
</body>

    • The Blockquote Element is being used incorrectly and not needed for this challenge.

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

    • Using CSS Grid with Grid-Template-Areas will make things way easier when building the layout; it will give you full control of the layout.

    .card-container {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
    grid-template-areas:
      "supervisor team calculator"
      "supervisor karma calculator";
  }

  .karma-card {
    grid-area: karma;
  }

  .calculator-card {
    grid-area: calculator;
    align-self: center;
  }

  .team-card {
    grid-area: team;
  }

  .supervisor-card {
    grid-area: supervisor;
    align-self: center;
  }

    Happy Coding! 👻🎃

    Marked as helpful
    1
    Dan•120
    @Dan-raccoon-69Posted about 2 years ago

    @vcarames Thank you so much!

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

    @Dan-raccoon-69

    Glad I could help!

    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