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

Responsive News home page , using Css grid, animation, JavaScript.

Oddisy 40

@Oddisy

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


Working on the responsiveness was a bit tough. I'm unsure if I needed to add functionalities to the News part of the page when you click on each item, it displays. Is there any best practice for using JavaScript for the News part of the page?

Community feedback

KiddAlexx 150

@KiddAlexx

Posted

Nice work. Looks good!

A couple of things I noticed

  • Your class and ID names could be more descriptive. I was a bit confused when seeing item-a, item-b etc, as its hard to know what they actually relate to. This is something I need to work on a bit too!
  • The font of Inter is not being applied. I personally have only used the <link> method with external style sheets, so am not as familiar with the @import method, but from checking your code, you have not applied the font anywhere. You could try adding font-family: 'Inter', sans-serif; to the body to start with, bearing in mind that some elements such as buttons do not inherit the font property. For those you can set font-family: inherit;
  • I don't think the news links were meant to be collapsible based on the design, but it would definitely be a nice addition and something new to learn. Here is a link on collapsible elements: W3schools-How TO - Collapse
  • The hover states for news links are working nicely :) You just need to do the same for the other links in the menu, and then "top stories" at the bottom + the read more button should change color on hover too. Double check the design images again to see the exact active states.

Hope this helps a little :)

Marked as helpful

0

Oddisy 40

@Oddisy

Posted

@KiddAlexx I'm overjoyed with your constructive feedback, I truly appreciate that so much, I'll work on all of your observations, and correct my mistakes.

Thank you bunches.

1

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