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 using React

@clinto-bean

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


  • CSS: Grid, flexbox, pseudo-elements and pseudo-classes
  • HTML: Semantic markup
  • Javascript: React components for each section as well as navigation bar
  • Most struggles were with styling, specifically positioning and active states
  • Unable to create responsive navbar with Javascript, instead used :active/:focus-within pseudoclasses in order to create navbar, which resulted in being unable to properly close the navbar and posed further challenges for responsivity.
  • For some reason the attribution footer seems to have disappeared. Is this because React prefers the only visible element be the #root div?
  • VSCode
  • CRA
  • CSS, React documentation
  • NPM

Community feedback

Mukwende 1,370

@mukwende2000

Posted

Looks like your repo only contains production ready code.

1

@clinto-bean

Posted

I will fix that, whoops!

I have moved it into a folder within the repo called 'code'.

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