Submitted 20 days ago

Four Card Feature Section challenge

Mateus Lima• 230

@mts-ml

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Four card feature section

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

Had a hard time trying to align the cards using only display: flex;, so I decided to learn Grid for this challenge, proud of that.

What challenges did you encounter, and how did you overcome them?

This challenge was difficult for me because I couldn't get the design right using only display: flex;, so I had to learn Grid in order to display the cards correctly.

Also, I don't have access to Figma files, so some sizes might be off.

What specific areas of your project would you like help with?

Constructive criticism and tips will be appreciated.

Community feedback

VictorGerfaud• 210

@JamesLaviron

Posted 17 days ago

Does the solution include semantic HTML?

Yes it does, a lot. Maybe you could have used article or section tags but overall it's nice!

Is it accessible, and what improvements could be made?

Yes it is.

Does the layout look good on a range of screen sizes?

Yes it does look very good. Good job.

Is the code well-structured, readable, and reusable?

Well, no. Selectors are poor-performance/not reusable as no classes are used. I will advise you to look at the BEM methodology. It will make you understand how to make your CSS readable and reusable :)

Does the solution differ considerably from the design?

Not at all. GG

Marked as helpful

Mateus Lima• 230

@mts-ml

Posted 17 days ago

Hey @JamesLaviron!

Thanks for the feedback, will check this BEM methodology.

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