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 card section using CSS Grid

@ryancalacsan

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


I usually default to flexbox so using grid was a nice change. Any feedback would be appreciated!

Community feedback

@pikapikamart

Posted

Hey, awesome work on this one. Site looks good in desktop, though you could have used more of the screen's size to display the desktop layout, the mobile layout starts from 1000px going down which seems to much to be used by mobile.

You already got a great feedback, just going to add some little ones:

  • The first two text should be using a single h1 element, both text are just one phrase so you don't need to use separate heading for each one.
  • Lastly, the alt for the icons on each card should be left empty alt="" since those are just decoration.

Again, awesome work on this one.

Marked as helpful

0

@ryancalacsan

Posted

@pikamart thanks for the feedback! I think I was just moving along quickly and for some reason thought to make the text two different elements instead of just styling the line separately. Will definitely make the change. Thanks again!

0

@tesla-ambassador

Posted

Hey, this is so flawless, the alignment and all is just right! Kudos! Incase you want to eliminate that accessibility issue, consider using the header tags in a sequential order (h2, h3, h4...) It improves your site's accessibility more so for people that need to use screen readers this issue came about because you used the h2 tag before h1. I like your solution and this is some really good work! Keep on coding.

Marked as helpful

0

@ryancalacsan

Posted

@tesla-ambassador Thanks will make those changes. Accessibility is definitely one of the things I am trying to be better about.

0

@tesla-ambassador

Posted

@ryancalacsan You're welcome!

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