Design comparison
Solution retrospective
This is my fourth solution submitted here. To build this project I had to use everything that I know and a lot more because it wasn't enough. I learned a lot of things that I didn't know and every time that I've tried to change something or to make it better I had to search and learn something different. It was very challenging but I still think that there are a lot of room for improvement. I spent a lot of time searching for answers and ways to better translate what I was thinking to code and was able to build something acceptable. I still continue to change every little detail that I think could be better executed. The variety of layouts for different screen sizes made me understand so many things about css. It's so rich of functionalities, and I know that there's so much to learn yet. I made a mistake about the use of classes and had my first conflict with css across my components. That made me realize things that I had heard or read before, but didn't really comprehend. To work on the desktop layout I had to use Grid to achieve something similar to the figma layout. It took me so much work to get it done and I still have a feeling that it requires improvement. I need to keep working with the different hooks on react to fully understand them. And something for my next project is that I want to use styled components just to see the usefulness and learn. I've been able to use flexbox in a satisfying way, but I can't say the same about grid layout, so I'm gonna work on that. Anything you might think that is useful for me to know, please be free to share. Thanks, in advance.
Community feedback
- @NatGlassPosted almost 3 years ago
Overall you did a great job recreating the design. I'd highly recommend adding a max-width and margin-x auto to a container around your app to avoid the content floating away on large screens.
Also, I'd recommend you look up NavLink for adding styling to the active link, it's much easier than your current method.
Marked as helpful1@WillwfPosted almost 3 years ago@Visibyte Could you elaborate more? Should I set both max-width and margin-x to auto in order to prevent the content behaviour? Adding them to the app component is enough? Your feedback is so welcomed, I'm still learning and anything that could help me improve is very appreciated.
I didn't know the existence of NavLink, and it could've saved me a lot of time. Thanks for the tip.
1@NatGlassPosted almost 3 years ago@Willwf Yes, I'd recommend creating a div to surround your entire app and add a max-width of 1280px or so (up to you what you want to set the max width as) and a margin of auto will keep the content centered.
Marked as helpful1@WillwfPosted almost 3 years ago@Visibyte Thank you. This will help me a lot. ;)
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