Submitted over 1 year ago

Mobile First Four Card Feature Section Using Grid Template Areas

Dimitar Radev• 930

@Mitko90

Preview site View code

This is a solution for...

Four card feature section

HTML
CSS

1newbie

View challenge

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

@Eileenpk

Posted over 1 year 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!

Let's connect on LinkedIn! - @Eileenpk

Marked as helpful

Dimitar Radev• 930

@Mitko90

Posted over 1 year 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

Please log in to post a comment

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