Design comparison
Solution retrospective
Hi, thanks for having a look at my work!
It's my 5th challenge on this website.
It took me 1h40min.
- HTML structure: 20 min. -Mobile version: 40min.
- Desktop version: 35min.
- Harmonization: 5min.
Almost missed the daily challenge because I had family matters to attend to, but I took this one which looked pretty easy and I made it quickly !
I supposed I could have used some grid stuff to make sure it would fit well for all screen sizes, but I wanted to make it quick :)
This project is my 5th one of my 365 serie for 1 project per day :)
Feel free to share any way I can improve it, see you !
Community feedback
- @grace-snowPosted almost 4 years ago
Hi Thomas,
This looks pretty good. I'd still recommend you revisit it and use css grid - it's so perfect for practicing that, and if you used grid areas I think would be quicker than flexbox.
I'd add some more space between your cards - can do this with the gap property and lose your margins if you like.
This would also be more responsive if you leveraged flex properties instead of width. Think flex grow shrink and basis 😉
I hope these are helpful ideas. Keep on coding!
(and as I've said to others, if a new challenge everyday is too much - which I think it is - don't be afraid to return to old challenges to refractor and improve as you learn more. That's time we'll spent tol!)
1@tboittinPosted almost 4 years ago@grace-snow Hi Grace, thanks for the reply.
Concerning the 1 project per day, I actually planned to refactor previous projects on the week end, trying to explore better ways to do so. I think it still counts as a project haha.
So yeah, today I'll use flex-grid on this one :)
Have a great day !
0@tboittinPosted almost 4 years ago@grace-snow
I used flex-grid, the improvement is awesome and the code is so clean!
Couldn't edit the solution, looks like FrontEnd Mentor is working on the edit page but the preview site is updated.
1
Please log in to post a comment
Log in with GitHubJoin 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