Build & Deploy a Fully Responsive Financial App Landing Page with Modern UI in React with Tailwind
Vložit
- čas přidán 7. 06. 2024
- 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: github.com/Ade-mir/kobodrop-app
✅ Deployed site: kobodrop.netlify.app/
Install VS Code
• How to Install and Set...
Setup Prettier Code Formatter
• How to use Prettier in...
Build your next awesome project
www.tubebuddy.com/quicknav/la...
GitHub: github.com/
GitHub Desktop: desktop.github.com/
Visual Studio Code: code.visualstudio.com/
Netlify: www.netlify.com/
Node: nodejs.org/en
Vite: vitejs.dev/
React: react.dev/
Tailwind CSS: tailwindcss.com/
TypeScript: 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
www.figma.com/community/file/...
What video would you like to see next? 👇
Next js , tailwind, typescript Frontend project. Give a try ❤
@@SK_Covers Awesome suggestion! I've noted it down!
Real estate frontend
@@ShahidAli-ch7rm Great idea! Like a real estate browsing app where you can see properties for sale / for rent etc?
@@howtobecomeadeveloper yes kind of , one more thing can you use 3d components too for this
Hey man I just wanted to say I appreciate you and the content you’re putting out, it really has helped me learn tremendously as I try to grow into a frontend developer at the age of 30😅.
You keep it simple and don’t over complicate things… keep the tutorials coming!
Such a perfect timing for me I was learning react and got your video It would be helpful for me thanks
Amazing, I love when that happens! 🤓
Very clean design ❤
Happy you like it!
Great tutorial, thank you
My pleasure!
Awesome Tutorial.. An irrelevant question tho, how is the Tech Scene in Norge? Compared to mainstream countries like Germany, Sverige and the Netherlands?
awsome. thank you
Very happy to share it!
very helpful video thanks to you man.
(why did not you use html? I am beginner i did not understand that)
Thanks
My great pleasure!
It would be amazing a video of a podcasting platform with transistor fm API and paddle js to manage suscriptions....
Awesome, thanks for the suggestion! Noted ✅
Which projects make more sense for someone who wants to be a frontend developer, such UI projects or fullstack projects that can be done using Next JS?
Great question! I would start with more UI focused projects to really grasp the JavaScript, design and UX skills. Then I would move on to full-stack projects to understand API's, databased and authentication.
Hello, Love your videos. I know html, js & css. I want to go into React, my friend said I should learn Reactjs, Nextjs, Tailwind, Bootstrap, Typescript and Firebase. should I learn all? Please what is better to learn to become a great frontend developer, thank you.
Thank you! I would agree with your friend that those skills are a very good direction! React/Next is very popular, and Tailwind is growing fast. Bootstrap I have the impression is on the decline. TypeScript is also an "easy" step since you already know JavaScript. Firebase is also good! I would focus on only one of these things for the next period and build some projects with it. For example React. Then when you feel you have an OK grasp of React, expand on it by using TypeScript, or TailWind. Then you learn the next thing that interests you / is useful. Ultimately the stack you know and learn will depend on what you build. There are many other frameworks/languages / tools that teams use that work great. But React is a safe next step! Hope it helps 😊
@@howtobecomeadeveloper Well said. Thank you for your insightful knowledge. It has been greatly appreciated.
Are you using typescript or JS please?
TypeScript