Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Responsive Four Card Feature Section made with CSS Grid

@mbdelarosa

Desktop design screenshot for the Four card feature section coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Hello! Just wanted to know if my usage of the section tag here is appropriate?

Any other feedback is also welcome, thank you!

Community feedback

P

@gumrahsindar

Posted

The decision is completely up to you, but the main convention is to use <header> <main> and <footer> (if any). After that, you can organize your main area with different <section>, <article> or <aside> tags. It both effects accessibility and SEO. Also I recommend to read this: Document and website structure

Marked as helpful

1

@mbdelarosa

Posted

@gumrahsindar Thank you so much! Will be keeping this in mind

0
P

@gumrahsindar

Posted

Hi there 👋 You can use two sections. One for hero f.e. <section id='hero'> and one for cards f.e. <section id='cards'>

1

@mbdelarosa

Posted

@gumrahsindar Thank you for the suggestion! Do you have further readings or examples on when is it best to separate parts into different sections like in this challenge, or how does one usually make the decision to group certain parts of the page into sections? Is it more of a readability issue or does it also concern accessibility?

0

Please log in to post a comment

Log in with GitHub
Discord logo

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