Skip to content
Submitted 9 months ago

Four card feature section

matbac85•600
@matbac85
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Four card feature section
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

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

I find that the result is very close to the model. What I would change: I forced myself to use grids, but I wonder if I should have tried with flex boxes for this one.

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

The organization of the in desktop version with the 4 sections that are at different heights. I went back several times to websites that explain how to use grids because it wasn't obvious. Not sure if my h1 is an h1. I didn't find an alternative.

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

The grids. I would like to practice on other challenges. Which ones do you suggest?

Community feedback

  • Kamran Kiani•1,280
    @kaamiikPosted 9 months ago

    That's great Mathilde I have a small question using dots here mean nothing?

     grid-template-areas:
      ". t ."
      "s t c"
      "s k c"
      ". k .";
    0
    matbac85•600
    @matbac85Posted 9 months ago

    @kaamiik

    Thank you !

    Yes, a dot means a blank space. I saw that here : SCRIMBA. There is a one hour free course about grids. It's quite interesting and not too time consuming.

    0
    Kamran Kiani•1,280
    @kaamiikPosted 9 months ago

    Thanks Scrimba is great. I should watch it. @matbac85

    0
  • Pranay Narne•90
    @pnarne148Posted 9 months ago

    Very nicely done

    I didnt understand how you managed the width of sections, can you please let me know. I sorta struggled with it

    0
    matbac85•600
    @matbac85Posted 9 months ago

    @pnarne148

    Thank you so much! I hope I'm not misleading you, because I'm a beginner too.

    For the width, I did two things:

    • I used the max-width property on the <main> element to set the size to 68.75rem on widescreen.

    • I used grids in the <main> element to organise and position the different sections correctly. For the width of the columns (which determine the width of the sections), I've used the units of measurement fr which means that the width of the columns is identical and will horizontally fill the space of the container (<main>)which is blocked by max-width.

    I hope this helps :)

    0

Please log in to post a comment

Log in with GitHub

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