Skip to content
Submitted about 3 years ago

GRID / Responsive - Four card feature section

Fidget836•20
@Fidget836
A solution to the Four card feature section challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

I tried a solution with display: GRID, I would like to have your opinion if GRID was for you the best option or another solution would have simplified things and is my GRID semantically is good? Last question, on my sections is it better to put an ID or a class? Thank you, Have a good day !

Code
Couldn’t fetch repository

Please log in to post a comment

Log in

Community feedback

  • Bagas Defandi•170
    @bagas-defandi

    Hi Fidget!

    congrats on completing this challenge!

    to fix the Accessibility issues you can wrap <section id="secondeSection"> with <main> tag, and I think <section id="firstSection"> should be <header> tag.

    for styling things don't use ID because ID have a high specificity, I always use class or element it self to styling html.

    I also did this challenge with Grid I use grid-template-areas to make it responsive, you can see my solution here

    I hope it helps you :)

    Marked as helpful
  • Lucas 👾•104,160
    @correlucas

    Hello Fidget, congratulations for your solution!

    I did this same challenge and I've used Grid because I consider that was better to manage the columns, but I saw some person that finish this challenge using Flexbox, I think if you manage this challenge using flexbox you'll need to have much more div to hold the container.

    About your question about id and classes, I think id is stronger that classes when selecting properties/elements, but you can do everything with only classes in a simple page like this challenge, is better you use id for challenges where you'll use forms and Javascript.

    If you want to see how I built the same challenge heres my solution: https://www.frontendmentor.io/solutions/4-card-feature-section-vanilla-css-custom-design-glassmorphism-35MDUfOBdt`

    I hope it helps you, congrats for the challenge!

    Marked as helpful
  • Fidget836•20
    @Fidget836

    https://fidget836.github.io/ for see the good version. It shows here a responsive version so the result is not the same.

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