Skip to content
Submitted almost 2 years ago

Mobile First Four Card Feature Section Using Grid Template Areas

Dimitar Radev•930
@Mitko90
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

That's my take on this challenge.

I used mainly CSS grid and more-specifically grid-template-areas

My two questions are about the HTML:

  • Did I use the <header> correctly?

  • I used

<main>
    <section class="cards">
      <div class="card"> </div>

should I have used

<main class="cards">
    <section class="card"> </section>

As always a big thank you to anyone who takes time to look and correct my code.

Community feedback

  • Eileen dangelo•1,600
    @EileenpkPosted almost 2 years ago

    Hi Mitko, your code looks good, you used the <header> tag correctly as well as the <section> tag. The <section> tag is used to group related content together, and in this case, the group of cards is related to a specific section of the webpage, which makes sense for it to be grouped together.

    One thing that to think about adding is meaningful alternative text for images: The alt attribute for the images should be filled with a meaningful description of the image, which can help with accessibility and SEO.

    Hope you found this helpful!

    Marked as helpful
    1
    Dimitar Radev•930
    @Mitko90Posted almost 2 years ago

    @Eileenpk Of course I found it helpful. Thank you for looking at my code and for the remarks. I'm pretty new to linkedin and completely lost there but sure, let's connect

    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