Design comparison
Solution retrospective
Thrilled that I've finished this challenge!
What I found difficult: the layout, especially inside the cards and overall making sure the content doesn't overlap with other parts of the app etc. It took me a LOT of tweaking and adjusting before I got it right. Before building that project I had only used CSS Grid in a very limited way, this really allowed me to explore its full potential.
Which areas I'm unsure of: the CSS classes for each icon might be a little bit too hard-coded, even though I'm assigning them dynamically to the cards. I couldn't figure out another way to match the icons to the cards.
Such a great project overall. Really made me feel more confident about tackling other challenges of the same level.
Community feedback
- @SheeloveDolPosted about 2 years ago
Congrats on the end results!
I really like the fade-in animation you've added to the cards. And I must say that I'm quite impressed with the structure of your app in terms of how neat and readable it is. I hope to get to that level soon lol. So I'll be referencing your code here and there for my next project if you don't mind.
There is a part where when we're sizing down to smaller screens where the profile card is uneven with the activity cards but once you reach the mobile resolution it works perfectly again. So that might be something to look into but overall I don't think it is a huge deal.
Again, job well done!
1@aweliegoPosted about 2 years ago@SudZero848 Thank you so much for your kind comment! I'm very flattered of course if that inspired you and helps you 😊
Indeed between the wide and smaller screens (the tablet styles if you will) there is a state where the sidebar does not have the same height as the cards (if that's what you meant). After many attempts to try and fix this, I actually decided to leave this alone since it was just a few pixels and the design was more about the computer and mobile views. 😆 But well spotted.
It's the first time I looked into that kind of animation, I was surprised by how simple it was to add it, just pure CSS!
As for the structure: if that's of any interest for you, this approach of really breaking down every thing in as many components as possible and keeping the CSS and JS files of each component together was the one taught in the React projects of Codecademy, so I just kept on using the same pattern since then. In my README I also referenced a video tutorial from John Smilga, in there all the CSS was in one single file but the way he breaks down the components was really inspiring too. So I can recommend these two resources if you're looking to get to that kind of structure. :) That being said, I also saw another solution to this challenge where they were only two components and one CSS file and thought it was quite a clear and readable solution as well (I even bookmarked it), so I do think other approaches are valid!
Cheers again!
1
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