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 flexbox mobile first, HTML , CSS

P

@DexterDick

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


Any feedback is welcome and appreciated.

Community feedback

P
Grace 27,630

@grace-snow

Posted

Nice work

A few bits don't quite match the design (left aligned heading text, background gradient, cards hitting side of screen on mobile) but the code and outcome looks good.

Very very minor points would be:

  • I don't think you can max width html. If you want to apply a max width do it lower down the dom, like on a main layout wrapper where you could also margin auto the sides.
  • card-images don't need filled in alt attributes. That alt text isn't adding anything, so just leave the alt attribute intentionally blank so assistive tech knows those images are decorative.

All good otherwise! Really nice semantically structured html and easy to understand css 👍 👍 👍

Next step is to learn/try css grid, which would allow you to remove the additional 'column' wrappers you've had to add to make this work in flexbox.

1

P

@DexterDick

Posted

@grace-snow Thank you Grace I made some of the changes recommended. Thank you for your help.

1

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