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.
Nat
@NatGlassAll comments
- @WillwfSubmitted almost 3 years ago@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 - @roman02021Submitted almost 3 years ago
I would just like to know, what is the best way to make the line that goes from menu to logo in desktop resolution. I think my way is very messy.
@NatGlassPosted almost 3 years agoI'd recommend setting a max-width to the header container, you've got the right idea but I think it'd be easier to only show it when the screen is above a set width. This will also make the header look better on very large screens, as the logo floats off and the nav background extends infinitely while the page content is centered which looks odd.
Overall you did a great job.
Marked as helpful0