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 using Tailwind/React and Atomic Design

#tailwind-css
Vivek Alhat• 190

@VivekAlhat

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


This one was a fun challenge. I started with React and Tailwind. This time I used the atomic design pattern for components. I also used Framer Motion for animating the mobile menu.

Community feedback

Aimal Khan• 2,260

@Aimal-125

Posted

In your CSS code, increase the height of body element to 120 or 150vh by using media query with max-height: 400px; so that your solution look good on screens with small heights.

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