Build a Modern TailwindCSS website by using React JS & Framer Motion.

hi there welcome back to my YouTube channel in this video we're going to build a react application by using Tailwind CSS and framer motion so as you could see this is our web application that we will build throughout this video this website has awesome uiux design which is going to be excellent project for your personal portfolio let's open this web page in different devices there we go now now we have opened in tablet but still everything is nice then let's try to open this in smaller devices like mobile phones it is still pretty awesome for clients to visit your website so watch it until the end and build with me this website that has great scrolling animations and UI design and don't forget to subscribe and like the video to support me let's begin coding well first of all we should install initial codes of this project from my Google Drive the link is in the description of the video I have already downloaded these codes and unzipped them now I have opened it with Visual Studio codes and let's explore what is here well let's start by opening public folder inside of this you could see the index.html which has initial basic codes so let's move on to the SRC folder well inside of SRC folder we have the assets inside of which we have all the necessary materials texts videos and pictures that we're going to use throughout this video and then let's move on to the components there you could see the components of the project that I have already divided them and then utils where we have motion. Js there you could find the codes that that belong to the scrolling animations of the frame motion finally there are app jsx and then index CSS and all other packages now I'll speed it up the video to 6X and you can slow it down if you want and good luck watching the video and building the project and again if you have any questions or problems comment it down firstly we are going to start by installing node [Music] modules well then let's change some codes in [Music] appjs hey [Music] [Music] hey [Music] [Music] [Music] hey [Music] hey [Music] [Music] great job let's move on to navbar [Music] component [Music] [Music] he hey [Music] hey [Music] [Music] he [Music] he [Music] [Music] if you have any questions or problems comment it down let's move on to component home [Music] [Music] [Music] Js [Music] [Music] he [Music] [Music] [Music] he [Music] well done guys and girls next one is features component hey [Music] [Music] hey [Music] [Music] [Music] he [Music] [Music] [Music] he [Music] then there is a ward component let's do [Music] [Music] this [Music] hey [Music] [Music] he [Music] hey then there is games component but we also need to create a card component to map it in games [Music] [Music] component [Music] [Music] hey [Music] hey [Music] [Music] hey [Music] he [Music] [Music] hey hey [Music] [Music] hey [Music] [Music] next is about JS let's move [Music] on hey [Music] [Music] hey [Music] well done n9th is experience [Music] Js hey [Music] [Music] hey hey [Music] hey [Music] he hey [Music] [Music] [Music] well done 10th is work with us [Music] Js [Music] [Music] heyy [Music] [Music] [Music] he [Music] well guys and girls we almost complete only subscribe and footer components [Music] [Music] left [Music] heyy hey [Music] [Music] hey [Music] [Music] he [Music] he [Music] hey hey [Music] [Music] hey [Music] [Music] hey [Music] hey [Music] [Music] he [Music] there we go as you could see there we already complete the project and you can enjoy from the project you have done and again follow me if you would like to get other projects

Channel: Beha Coder

Views: 3,333

Keywords: tailwind, programming, Beha Coder, responsive, framer motion react, full website development tutorial, react tailwind project, react tailwind css, landing page, landing page react tailwind, tailwind css, scrolling animation website tutorial, react app project, react advanced projects, react advanced concepts, scrolling animation website, framer motion react tutorial

Id: -rbp1xztV_g

Length: 24min 4sec (1444 seconds)

Published: Fri Jan 05 2024