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

Four card feature section

J. Júnior 130

@jjuniorbrasil

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


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

I'm proud of using CSS Grid and Flexbox at the same elements, based on the user screensize. Basic stuff, but I've got really surprised with the result.

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

Firstly, I'm not used with the rows declarations along the CSS Grid. So I wen't through some articles and it became fluidly.

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

No specific area.

Community feedback

Ralph 190

@RalphPastel972

Posted

Hey,

That is really good work. Reading your code, I realize that I have still a lot to learn with grid: my solution just used grid-column-start: and I need to learn your approach.

You didn't respect the shade under the card but that is a detail.

I feel the break down you used in your media query is too big because just under 1000 px wide, it does not look super good.

Honestly I have not much to say. Good work.

Marked as helpful

0

J. Júnior 130

@jjuniorbrasil

Posted

@RalphPastel972 Thanks for your review. I think once you start using these shorthand properties (or even grid areas) you won't step back on them.

Didn't even realize the shade. To be honest, I'm using a pretty old monitor (actually, in it's last days) and can't notice shadow/shade effects.

Will pay attention to the next practices about media queries and these screen ranges.

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