Skip to content
  • Unlock Pro
  • Log in with GitHub
Solution
Submitted over 2 years ago

News Homepage using React

react
Clinto Bean•130
@clinto-bean
A solution to the News homepage challenge
View live sitePreview (opens in new tab)View codeCode (opens in new tab)

Solution retrospective


Information about the project

Technologies Used

  • CSS: Grid, flexbox, pseudo-elements and pseudo-classes
  • HTML: Semantic markup
  • Javascript: React components for each section as well as navigation bar

Areas of Opportunity

  • 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?

Tools Used

  • VSCode
  • CRA
  • CSS, React documentation
  • NPM

Please feel free to leave any feedback that you feel may help me on my journey. I am getting very comfortable with react components, but still find CSS to be troublesome at times.

Code
Loading...

Please log in to post a comment

Log in with GitHub

Community feedback

No feedback yet. Be the first to give feedback on Clinto Bean's solution.

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

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner
  • Use cases

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License