Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

News Homepage Solution

Truman Ho 80

@Trumanchho

Desktop design screenshot for the News homepage coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

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

P

@Ibarra11

Posted

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 helpful

1

Truman Ho 80

@Trumanchho

Posted

@Ibarra11 thanks for commenting! I'll give it a try.

0
Truman Ho 80

@Trumanchho

Posted

Any feedback welcome!

0

Please log in to post a comment

Log in with GitHub
Discord logo

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