Design comparison
Solution retrospective
It's not perfect but it's done! I haven't used a lot of grid prior to this challenge (maybe on two projects) so I really tried to use it in as many places as I could to get a better feel for it. This is also the largest project I've done so far, so I feel like my code got a little messy and inconsistent in some places. If you have any pointers for me I'd really appreciate it, as always!
Community feedback
- @ApplePieGiraffePosted almost 4 years ago
Hi, Nicole! 👋
Good job on this challenge! 👏 Your solution looks pretty good and is responsive. 🙌
I suggest,
- Increasing the height of the hero section in the desktop layout so that more of the background image can be seen (as in the original design).
- Darkening the background image of the hero section so that the text in that section stands out against the background a little more. You can do so by overlaying a
linear-gradient(that is colored black, with some opacity) on that section. - Adding a dark background for the mobile navigation (there currently is none, making the links in the mobile navigation a little difficult to read against the rest of the page).
- Taking a look at your solution report and trying to clear up some of the errors that are there. Make sure that the children of any <ul> tags are <li> tags. If you want to create a list of links, wrap the anchor tags inside <li> tags.
Hope those tips help. 🙂
Keep coding (and happy coding, too)! 😁
0@nicole-tuznikPosted almost 4 years ago@ApplePieGiraffe Thanks so much, I will work on fixing it up according to your suggestions! I do have a dark background under the mobile nav links though, I just double checked and it's showing up for me, so I'm not sure what's happening there. I really appreciate your feedback though, thanks again!
1@ApplePieGiraffePosted almost 4 years ago@nicole-tuznik
No problem! 😊
I took another look at your code, and there seems to be a style (
background: none;) that kicks in when the width of the screen is above 500px, but the mobile navigation appears at 700px and below. That means that for around the 200px (between 500-700px), the mobile navigation will be present but there won't be any dark background. Making sure the background appears at 700px and below (just like the mobile navigation) should fix that issue. 😉Have fun coding! 😄
Oh, and hey, if you found these comments helpful, an upvote would be appreciated! ;)
1@nicole-tuznikPosted almost 4 years agoThank you so much, I don't know how I didn't see that! 🤦♀️
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