Skip to content
Submitted 5 months ago

grid-basic-learn-to-handle-column-responve

react
IRON Michael•180
@Iron-Michael
A solution to the Four card feature section challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

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

i think i can use fonts better than never before

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

i struggle a little bit about grid but use my ai my copilot and then i can esily pass this

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

what do you think do you think do you have easy way to handle grid and make code cleaner than my code??

Code

Please log in to post a comment

Log in

Community feedback

  • P
    fringe4life•160
    @fringe4life

    Hi, this site suffers from what is called divitis. There is clearly a header, which is the static text at the top and then a main area which is the four cards.

    Yes grid can be much simpler then this. My solutuion was to have 6 columns at tablet sizes and 4 rows at larger sizes and 3 columns. Feel free to use dev tools on my live site: https://four-cards-frontend-mentor-typescript.netlify.app/.

    I would really recommend spending some time learning grid more by going back in the path and looking at some of the resources they provided in the learning part of this path as grid is basically necessary as a CSS tool nowadays.

    Your header text sizing is also clearly off and the margin above it is supposed to change at different viewports.

    I really hope you try this challenge again after you have spent some more time looking at css grid.

    Congrats on deploying a build version of react!

    Marked as helpful

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