Build & Deploy a Fully Responsive Financial App Landing Page with Modern UI in React with Tailwind
Build & deploy a React JS app using Tailwind CSS. A fully responsive financial app landing page using React JS and Tailwind CSS! In this tutorial, you'll embark on a journey to create a sleek and modern user interface that adapts seamlessly across various screen sizes. You only need a prior understanding of HTML, CSS and JavaScript to start this video.
What You'll Learn:
React JS, Tailwind and TypeScript.
Vite, Node, JSX.
You'll learn how to create a navigation bar with a link to Google Play for easy access.
Implement smooth scrolling to a card view showcasing the app's features upon navigation button click.
Refactor code and extract them into React Components.
Craft visually appealing sections to highlight collaborations.
Incorporate a dynamic reviews section with a working carousel for user testimonials.
Learn how to craft a footer with page links and social media integration for enhanced engagement.
Prerequisites:
Some prior experience in HTML, CSS, and JavaScript.
You are eager to dive into React and Tailwind.
Throughout the tutorial, you'll grasp the fundamentals of React and Tailwind, and get introduced to TypeScript for added type safety in your projects.
Tools and Technologies Covered:
Version Control: Utilize GitHub for seamless collaboration and project management.
Github Desktop: Efficiently update your repository with ease using Github Desktop.
Code Editor: Leverage Visual Studio Code as your primary code editor for enhanced productivity.
Deployment: Learn how to deploy your website for free using Netlify, making it accessible to users worldwide.
✅ Finished Code Link: https://github.com/Ade-mir/kobodrop-app
✅ Deployed site: https://kobodrop.netlify.app/
Install VS Code
• How to Install and Setup VS Code on Mac
Setup Prettier Code Formatter
• How to use Prettier in VS Code - Code...
Build your next awesome project
https://www.tubebuddy.com/quicknav/la...
GitHub: https://github.com/
GitHub Desktop: https://desktop.github.com/
Visual Studio Code: https://code.visualstudio.com/
Netlify: https://www.netlify.com/
Node: https://nodejs.org/en
Vite: https://vitejs.dev/
React: https://react.dev/
Tailwind CSS: https://tailwindcss.com/
TypeScript: https://www.typescriptlang.org/
Timestamps:
00:00 - What we are building / Finished Landing Page
00:58 - Tools / Software we are using
01:15 - Creating a React App using Vite as our local development server
05:24 - Guide to our React App project files
09:46 - Installing Tailwind CSS in our Vite React app
13:33 - Installing Extension we will use
18:37 - Downloading assets
20:08 - A mini crash course to React & TypeScript
24:19 - JSX & JavaScript components explained
32:15 - Navigation menu
01:06:15 - Refactoring the Nav menu
01:25:05 - Hero section
01:33:59 - StoreLink component
01:40:57 - StoreLinks component
01:53:46 - Features section
02:14:10 - Partners section
02:21:14 - LogoWall component
02:28:42 - Reviews section
02:35:29 - Carousel component
02:51:48 - Footer section
03:02:35 - Refactoring StoreLinks
03:08:17 - Deploy with Netlify
Figma Desing by Promise the Designphysicist
https://www.figma.com/community/file/...
