Build and Deploy Fully Responsive Web Application | NextJS 14 | TailwindCSS | Tutorial

hey everyone welcome back to code crafter [Music]  Hub in this video I'm going to show you how to   build this beautiful web application and how to  deploy this on Vel to build this I'm going to use   nextjs 14 with typ script tailin CSS for styling  and frame motion for naar animation figma and zipl   IO that s. iio for figma mode alternative  solution finally I'm going to use versal   for deploy this web application first of all we  need to check our design in here you can see two   different kind of design for desktop mode and  mobile mode and we have eight section for this   both desktop mode and mobile mode design first one  is nowar and second one is hero section and third   one is feature section and fourth one is this  testimonial section to build this testimonial   section we need to use some Marky for this and we  have another section called FAQ section to build   this FAQ section we need to use some accordian  after that we can see plan section and we can   see this CTA section and finally we can see this  footer section now we need to collect our assets   before that I'm going to make the copy of  this both design first I'm going to create   new figma draft file for that I'm going to click  on this design file and I'm going to click on this draft and now I'm going to copy this both design   and I'm going to paste within my new  design file copy and paste in here here copy and I'm going to paste in here  now I'm going to show you how to export   images from our fig file for the example  I'm going to show you how to export this logo first of all we need to select our logo for  that we can use this file explorer section in here after selecting our logo we need to click on this export in here you can see we have  four different type in this time I'm   going to use this SVG and after that  selecting your file type you need to   click on this export logo by click on  this you can see your logo like this to export all images take some time so I already  exported all assets now I'm going to show that in here you can see my all exported  images in here we have all required assets   then now we can start to build our  project first I'm going to make new   repository for my project in here you  can see now I am in the jiub dashboard   in this dashboard you need to click on this  green color new button for the create new repository in this new repository  section we need to provide our   repository name that repository  name need to be unique I'm going to use new landing page and we can provide some description about our   repository that is optional one I'm  going to use this for my description after that we need to select our repository type  in here we have two option public and private   in this public mean anyone can view clone  your repository if you have selected your   repository type as private can view clone  your repository only you and authorized collaborators in this time I'm going to select  this my reposit type as public after that we need   to add read me file for this I'm  not going to add that one and we   can add jno file for our repository  I'm not going to add that one also   and we can select our license type I'm  not going to select my license type in   this time after that we need to click  on this create repository green color button in here you can see we have  successfully created our project Repository   now we need to create local repository  for our project for that I need to copy   this remote repository address for that  I'm going to click on this clipboard icon in here you can see I have a folder Nam  as my project in my desktop to create local   repository I'm going to use this folder  my project first I'm going to to open   this with my favorite text editor vs code  for that I'm going to use this open with code now I'm going to open new terminal and now I'm going to make the clone   of my that remote repository for  that I'm going to use jit clone and our remote repository address now need to press enter key in here you can see our local repository like  this that is currently empty now I'm going to show   you how to create our next js14 project before  that I need to show you my current node version in here you can see my current node version  now we are in our local repository folder   now I'm going to create my project inside of  this for that I'm going to use this command full stop and forward slash we need  to use in here because we don't need   to create another new folder  inside of our local Repository [Music] [Music] our project has been successfully  created now I need to add   two packages for my project first  I'm going to add react icon for my project for that I am going to copy this  command and I am going to paste in my terminal now I need to add another package  for for Mari for that I'm going to use this I'm going to copy this  and I'm going to paste in my terminal now I'm going to push my  changes to my remote repository   first of all I'm going to change my  terminal I'm going to select jit Bash I need to change my directory for that I'm going   to use CD command and my folder name  and now I'm going to use command git add and P stop now kit commit now get push now we can see our changes in our  remote repository I'm going to check that in here you can see our all  changes with this commit let's go   to create our folder structure in earlier  you can remember I have already mentioned   we have a eight section in our design I'm  going to create folder structured as that 8 section for that first I'm going to create   new folder inside of that my app  folder name called as components now I'm going to create eight folder  inside of this mic components folder now I'm going to create page.  TSX file for this all folder [Music] now we can link this to our page. DSX file first I'm going to remove this all [Music] now we can check our output before that  I'm going to remove something in this   global. CSS file I'm going to remove this  all thing because I don't need to use them now we can run our project  by using nbm rund new command you can see our output like this we can start to build our navbar section  but in frma free plan they not provide Dev   mod to us so we need to find some alternative  solution for that the the solution is zipline   you need to log to your zipline account after  that you need to click on this create project   button for create a new project in here you need  to select this web and you need to click on this create they provide some information to  how to export our design from figma to   this zipline account after that you need to  go to your figma file and you need to select   your design and right click and go to this  plugins in here you can see this zip line   if you unable to see that you need to click  on this manage plugins and you need to search   that zip line in here you can see I already  added that so now I'm going to click on that and you can see message running zipline after that you need  to Simply click on this export and in here you can see our project  Untitled now I'm going to click on this export now we can see our design in our zipline account in here you can see our desktop design  now I'm going to export this mobile design also   for that I'm going to right click on this  mobile and I'm going to select that zip line plugin and I'm going to click  this export and this export now we can see our mobile  design also in our zipline account you can see our mobile  design also by click on this   text we can easily find what are the  style they use to create this design now we can start to build this nabar section in here you can see they are  using this in font style and this medium we need to use that inter font style   for this whole design let's go  to build this now bar section still we didn't add our image to our  project now I'm going to add that one now we can start to build our naar section I'm going to remove this text now I'm going to insert  this two logo to my project I need to import next image now we can start to build that  first I'm going to convert this du2 section inside of that my  section tag I need to use   some classes for The Styling purpose  class name I need to set with as full and flex and justify Center inside of this D I  need to use another three main D first on for logo this one for this menu this one for mobile now I'm going to use some style for  this main de class name I need to   use some margin left and right  in large screen I need to use mx20 and normal screen I need to use MX5 and I need to Define Max with 1,536 pixel and withd as full and I need to set margin top and bottom I'm going to use six and flex now I  need to Define my screen sizes in my Tailwind file I don't need to use this background  image I'm going to remove that one we can Define our screen size in here now we can use this all screen sizes in our project now I need to add  some style for the this du   now I'm going to add this logo inside of this du element I need to add that logo in here when I need to Define width and  height I'm going to provide that as 0 0 and in here I'm going to provide that width  and height for the large size I'm going to set   width and height 35 pixel and a normal screen  I'm going to set width and height as 45 pixel in here you can see my logo now we need to add  this menu for that I'm going to Define this menu now I'm going to add another du inside of this I'm going to add some style for this flex and large screen justify between  and with full and justify end in normal screen and In Here Also I need to add some margin  top and bottom it mean margin top and bottom Auto and I need to add some margin left I need to show this in a large screen  and I need to hide this in small screen now I'm going to add unorder list in here inside of that unod  list I need to map that links and in here I need to add link from next now I'm going to check what  are the style they are used in here in here we can see they are  using 16 pixel for font size and   font weight as medium and this text  color now I'm going to use that in here you can see my menu now I'm going to create this one for  that I'm going to add another de in here and I need to add some classes Muto that means margin top and Button Auto and click after that I'm going to add this span and I need to add link In Here Also I think they are using same style I'm going to Simply copy and paste in below after that I need to add that icon now I'm going to add some with and height for   large screen and normal screen and  I need to add some margin right for this in here I need to add some classes and I need to show in this  large screen and I need to hide in small screen and I need to add some style for this now I need to add close button and open button  for mobile now bar I'm going to use some icon   from react icon now I'm going to paste in here  that like this and I need to add use state from react now I am going to use that in here I need to add some classes large screen hidden and normal screen need visible and on click method now I'm going to create this on click method he here I'm going to check that in here I need to set that two icon I need to provide some style for that now I need to add next icon I'm going to copy and paste this style now we can check our output we have some issues we  need to use use client in our page we can see our large screen now bar like  this now I'm going to check with small screen you can see our button like this  now I'm going to create this mobile nowar for that I need to use another npm package   for the animation I'm going to use frame  motion for that we need to install that our package has been successfully added to  the our project now we can use that frame of motion in here I need to add frame motion  I'm going to import two package from frame motion we can use that inside of this project in here we need to change this  p as capital this one also Capital I'm going to add some classes for this D and I'm going to add in here  animate presence from frame motion and in here we need  to check our menu open or not in here I'm going to use motion class I'm going to add some class name for this for this I'm going to use some custom Style I need to Define this now container I need to add some style in here in here we need to add that close button and on click meod now we need to add menu in here and we need to add some classes now I need to Define this now we can map that link [Music] I think we can check our output we need to add some style for this first I need to style for NABA now we need to add some style for Now list I think we can see our output like this in large screen like this in  a small screen like this I think we   finish our nabar section we can move to our hero section now we can start to build our hero section  in here you can see we have one heading and   paragraph and two button and in here we can see  large image and we have this logos and some color gradient in Mobile screen also we have that  same elements that mean mean heading paragraph   two button and image and this logo section  and this color gradient let's go to build this before that I'm going to push my changes to  my remote repository for that I'm going to use jit add now J commit now get push first we need to import  images to our hero section now need to import image from next I'm going to convert this div section and I'm going to remove this text and I'm going  to add another two D inside of this section tag now I'm going to add some style  for this section tag and both D tag now I need another one mod de in here and  I'm going to add some style for that one also in here we can't use directly this apostrophy  Mark so we need to find some alternative method so that I'm going to use this now I need to add some style for this  H1 tag and this paragraph tag and this both   button now I'm going to do that one before  that I need to check what are the style they use in here 64 pixel for the font  size and font weight as semi bold   and this font color and in here 32 pixel  medium for this 16 pixel and this font color in here 18 pixel and this  font color in here also they are   using 18 pixel and 18 pixel now I'm  going to apply all style for this [Music] for this Arrow Mark I'm going to use directly SVG code like this and for this background  color I'm going to use custom CSS we can see output like this after this two button we can see this image  and background gradient in here you can see they used image for this but  I not going to use image for that   I going to make this using CSS let's go to do that I'm going to add some class for this now I'm going to add that background gradient now I need to add some Shadow for this both image now we can start to build this logo  section in here you can see we have   two different style for this  desktop mode and mobile mode I need to add one media query for this our hero section final output like  this I think now we can move to our   next section that is features before that  I'm going to push my changes to my remote repository now we can start to build this  feature section in feature section we have   three main section and in have some  title and some heading this paragraph   and this list and this button and we  have three images let's go to build this first I'm going to import that three images and I need to import image from next now I'm going to convert this D as a section and I don't need to  use this text I'm going to   remove that one and I need another three main de and inside of this last de I need another 3D now I'm going to add some style for this [Music] [Music] [Music] for this Arrow Mark I'm  going to use direct SVG code [Music] now I'm going to create this button [Music] now I'm going to going to add image for this [Music] [Music] in Mobile design we have separate view  now I'm going to show you I think you   can identify this difference  now I'm going to create that one for that I'm going to use this VI [Music] our feature section first part is now  completed let's start to our second   part in here also you can see we need to  use some image and we have that title and   this heading and this paragraph and this  list and this button let's go to build this now I'm going to use some  another media quy for this I'm going to copy and paste this in here I do some mistake  now I'm going to correct that one now I'm going to add some  another style for this de now I'm going to create this list for  that I'm going to use previous code base now time to start build this last section I think in here you can see our output now we can move to this testimonial section now time to start this  testimonial section before the   start this I'm going to push my  changes to my remote Repository now we can start to build our testimonial section first we need to add our image to this we need to import image from next now I need to add Marky  for this in previous step I   already added added that now I'm going to import that I'm going to copy this and paste to my project and we need to set this  data I have already created that   data set then now I'm going to use that one in here you can see I have used two  data set because in here you can   see we have three Marky 4 in here  now I'm going to build this Marky section first I'm going to  convert this du as section [Music] now I'm going to create this card n now I'm going to make two copy of this Mary now we can check our final output we can see our final output like this in a small screen we can see our output like this now I'm going to push  this changes to my remote repository now we can start to build  this FAQ section for this we need some   accordian for that I am not going to  use any packages let's go to build this first I'm going to convert this d section and I need two do inside of this now I'm going to add some style for this now I'm going to create that accordion  in custom way for that I need to insert   this data I have already created  that then now I'm going to paste in here now I need another new folder now I'm going to create  that inside of this component and I'm going to make two  file inside of this accordian folder now I'm going to import that two in here and I'm going to pass that data in here I need to do some  changes now I'm going to do that now I'm going to create this accordian item now in here I'm going to map now I'm going to import this accordion item in here now I'm going to pass this data as Pro and I need to create on click method in here now I need to create this handle click before that I need to use use state in here I'm going to use zero in here  because I need to always open my zero index now I'm going to create this handle click now in here I need to Define open now I need to get this  all data from my accordion item in here I need two icons and next  image I'm going to import that now I'm going to create that accordian item [Music] now our effect PQ section also  completed now we can move to our   plan section before the moving that now  I'm going to push my changes to my remote repository now I'm going  to create this plan section [Music] [Music] [Music] [Music] now I think you can see this plan section final output now I'm going to push this  all changes to my remote Repository now I am going to start build this CDA section  to build this we need to use color gradient first I'm going to convert this D as  section and I'm going to add another two do now I'm going to add some style for this in here you can see our CD section final output   like this now I'm going to push  my changes to my remote Repository now we can start to build this food   section in here you can see they are using some  accordion in Mobile window but in desktop mode   they didn't use that kind of thing we need  to consider about that let's go to create this first of all I'm going to  make a copy of this accordian and I'm going to rename this and now I'm going to start put  a section first I'm going to remove   this and I'm going to convert this as section I need to import some logos in here  and I need to import next image now I'm going to paste I  already created fter links in here now we can use this foter  links in our fter section now we need to create mobile footer in here you can see our photo section also now  completed now time to deploy this before that   I need to push my all changes to my remote  repository now I am going to do that one now we can see our all changes in our remote repository in here you can see our  final commit message in here now I'm   going to deploy this by using versal  you need to log to your versal account after that you need to click  on this add new and this project after that in here you need to select your   repository in here you can see my repository name  new landing page now I'm going to click on this import you can select your project name also in   here I'm not going to change that  finally I'm going to click on this deploy by click on this window  you can see your final output thank you so much for watching this video  don't forget to subscribe my channel

Channel: CodeCrafterHub

Views: 2,459

Keywords: Build With Next 13, Getting Started With Next 14, Install Tailwind CSS in Next.JS, Next 14, Next 14 App, Next 14 Development, Next 14 Project, Next 14 Tutorial, Next.js, Next.js Development, Next.js Tailwind CSS, Next.js Tutorial, Next.js Web App, Tailwind CSS, Tailwind CSS Next.js, Tailwind CSS Tutorial, next js, next js project, next.js, next.js tailwindcss, nextjs, nodejs, tailwind css next.js, tailwindcss next.js, use Tailwind CSS in next.js, use tailwindcss in next.js

Id: HnE2out-O2A

Length: 133min 54sec (8034 seconds)

Published: Wed May 01 2024