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?
@kaamiik
Posted
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 .";
@matbac85
Posted
@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.
@kaamiik
Posted
Thanks Scrimba is great. I should watch it. @matbac85
@pnarne148
Posted
Very nicely done
I didnt understand how you managed the width of sections, can you please let me know. I sorta struggled with it
@matbac85
Posted
@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 :)
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
