Design comparison
Solution retrospective
My 6th challenge. This one was a little more tricky. My CSS got a little messy especially when creating the navigation.
- I learned how to create a nav-bar
- learned how to animate on hover states and button clicks
Community feedback
- @Ibarra11Posted over 1 year ago
Overall, your solution to the challenge looked great. One thing I noticed in the article list section is that you are using margin-right: 10px on each item. You could add gap: 10px to the where you define display: flex. On desktop, the last article item is not aligned to the right because it has margin-right: 10px. You could fix that by not adding 10px to the last item, but gap handles that for you it only adds space between items not at the ends. Also, in the article list you are transitioning from display: block to display: flex where you can just do something like this
display: flex; flex-direction: column; gap: 30px; @ media(desktop size){ flex-direction: row; gap: 10px } ```;Marked as helpful1
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