ANIMATED-TEMPLATE - A Template project for making great landing pages with animations
↪️ Check this out! ↩️
🔭 The modern web is now based on components. Every webpage/webapp we come across are build with components. Some common examples are menu bar, search bar, navigation bar, share-ability to common social media platforms etc. Of course some of these components needs to be hooked up to bankend services to perform the desired tasks — thats another thing, but to re-create these components from scratch would be very tedious and time consuming.
Enter Tailwind CSS - A Utility first CSS Framework for rapidly building custom designs -- Where we leverage the power of pre-built components to make out webpages/webapps. ✅
Then we take it one notch higher — even the basic webpages (i.e landing page, profile page, shopping card page) have the same properties/functionalities these days — So why not leverage the power of pre built Template pages
Enter Creative Tim and their free Tailwind starter kit. I found some components for popular front-end frameworks like React/Angular/Vue etc -- that can potentially be connected to a backend service to update those components. 🔗
Lessons? - Don’t reinvent the Wheel! Build around it!! 🚀
🔈 A Huge Shoutout to Andrei, Jacinto and Zero To Mastery team for these resources!! You guys are BEYOND AWESOME!!! 🎉
This project demonstrates the ideas behind creating Reuseable UI Components which can potentially be hooked up to a backend webservice for dynamically generating/displaying the information in the Components
This project is implemented with the following steps
- Download the starter kit from the creative tim site.
- Find the html for the landing page -> get playful and try to get hang of how things are here (everything is foms and cards!)
- Comment on the HTML doc for better understanding
- Modify the local assets with some cloud asset pictures from the Unsplash Page
- Get Random user pics from RandomUser for the headshot/display pictures
- Impleted AOS(Animate On Scroll) animation library for scroll based animations (the CDN for AOS is implemented here)
- Get PLAYFUL!!!
- Font Awesome -> The one with those awesome icons!
- Tailwind CSS -> The one for rapidly building custom designs!
- Creative Tim -> The one with the Ready-to-Enhance templates!
- Animate On Scroll -> The one with the Animate on scroll library!
- Unsplash -> The one with those high quality free photos!
- Random User -> The one for generating random user properties!
- Try to optimize the Animations for better UX
- Download the REACT/ANGULAR/VUE components from Creative tim, hook it up to a backend webservice for the possible features
- Change the UI animations with your assets to make it your own!
- Make it more responsive/accessible for mobile devices.
- Enhance the performance of the page