Live Preview

https://radiansmile.github.io/yahoo-homepage/

Note

1. All frontend code is in App.vue, index.html and tailwind.config. I don't have time to improve readibility, so hope the code is not hard to understand so far! Tailwindcss is the styling framework, usage of all the classname could be found on its doc.
2. To fufil so layout and style is the first consideration, in order to fulfill the requirment: make it looks like what is given. Detail takes time a lot.
3. Because time is limited, to simulate interactions and layout on mobile view of tw.yahoo.com, Swipe.js is integreated. But this plugin is buggy, so the layout below could not fulfuilled at this assignment.

4. Fuction of switching tabs is not implmented yet on mobile, and there is still a lot of work to make best UX on mobile interaction.

Thanks for your time! Looking forward your feedback.

Run locally

npm install
npm run dev

Preview Image

Desktop

Mobile

Reference

Desktop

Mobile

TODO

Improve UI, UX on mobile.