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

hey everyone welcome back to code cter Hub in this video I'm going to show you how to build an deploy this beautiful web application by using verel to build this I'm going to use next DS 14 with typescript tailin CSS and figma and another special tool called spin.io that is for alternative to figma De mode so let's go to do that [Music] and guys we post daily programming question in community tab it's a fantastic way to challenge yourself and stay sharp with your coding skill subscribe now hit the like button and check out our daily programming question in community tab first of all we need to create jop repository for our project so now I'm going to show you how to do that one first you need to Lo log to your JB account I have already completed that step in here you can see my dashboard to create new repository you need to click on this green color new button now I'm going to click on that in here you can see our new repository window to create new repository you need to provide first your repository name now I'm going to provide repository name in here if you wish you can provide some description about your repository otherwise you no need to provide that one I'm going to use a small description about my [Music] repository after providing your description you can select your repository type I'm not going to change that one because they are selecting my repository as by default public and and in here you can see you can add read me file for your repository I'm not going to add that one and in here you can add Theo file for your project I am not going to add that one and you can select your license type in here also I'm not going to add that one I think you unable to see this kind of things in your GB account you don't need to worry about that because I have added some application that's why it will appear in here after that providing your all details you need to click on this create repository now I'm going to click on that we have successfully created our remote repository now we need to create local repository using this remote repository address for that first I'm going to copy this remote repository address now we need some folder to create that local repository for that I I have already created this folder now I'm going to open this with my favorite text editor vs code for that now I'm going to right click on this folder and I'm going to click on this open with code in here you can see my visual studio code now I'm going to open a new terminal and now I'm going to change my terminal type in here I'm going to use this jit bash now we need to clone our remote repository for that I going to use jit clone after that you need to paste your remote repository address in here after that you need you need to press your Enter key in here you can see some learning you don't need to worry about that because our remote repository as currently empty using CD command we can go to the inside of that our local repository you need to provide your local repository name after that you need to press your Enter key in here you can see our Branch as main so guys now is the time to pay the attention for this UI design in here you can see this desktop design and this is the mobile design in this pigma account currently I am using free plan in that pigma free plan they not provide the dev mode for that we need to use some another alternative way to use that Dev mode first I'm going to make the copy of this desktop design and mobile design now I'm going to rename that one as desktop in here you can see our desktop design and mobile design after that I'm going to log to the my zipline account for that you need to click on this login button and in here you can use this login with figma and you need to provide this allow [Applause] [Music] access after log to your account you will automatically navigate to this workspace in here you need to click on this create project and you need to select this web and you need to click on this create now I'm going to export my design from figma to this zipline doio website for that I need to install this zline doio figma plugin for that you need to go in here and you need to click on this plugins and manage plugins and you need to search that zipline doio plugin and you need to select on this and you need to click on this run after that you need to click on this sign up with pigma after that you can close this tab and you can export this to our zipline doio website before the exporting you need to select your design first I'm going to use this desktop for that I'm going to select that one and just you need to Simply click on this export button and in here you can see our project my project name as Untitled so that's why in here it will appear and you need to click on this export [Applause] after completing your export you can close this now I'm going to export this mobile design after completing your export you can close this window now I'm going to check my zip line project in here you can see our two design by click on this element we can see this element Style now we need to export the image from our design now I'm going to show you how to do that one for the exporting image I'm going to use P file that is easy to export image from my design you can use this left side design file explorer section to select our image first I'm going to select this image for the example to show you how to export image from this pigma file in here you can see our image has been selected after that you need to go in here and you need to select this export section and in here you can see by default our image type has been selected as PNG if you wish you can change that one I'm not going to change that one after that you need to click on this export Hero 1 button you can see our exported image like this using that method we can export all images from our design I have already exported all images in here you can see my all images after exporting our all images we need to focus about design font style in here you can see they are used just font style with font weight medium and here also you can see they use just font style with font weight with regular in here you can see they use just font style with font weight as B so we need to find that font style with font weight unfortunately Google font not provide this just font style for that we need to find that one in here you can see I have already downloaded that font style then now I'm going to use that one now I have all required things that is font and images so now I can start my project in here you can see now I am in the nextjs website to create nextjs project I need to use this command first of all I am going to copy that one and now I'm going to paste that in my terminal and now I'm going to add full stop and forward slash because I don't need to create another new folder for my project before to run this command now I'm going to show you my current node version in here you can see my current node version is 18.1 18.0 when we are dealing with next days that not version is very important now I'm going to press enter key in here I'm going to use typ script then I'm going to select that as yes and Es link also yes and tailin CSS also yes I don't need to use this SRC directory then no and app router yes and import Alias no it will take some time to create our project in here you can see our project has been successfully created now I'm am going to check that by using command npm run de we can see our project in locally Local Host 30004 yeah in here you can see our next days project now I'm going to add this assets for my public folder I'm going going to just drag and drop this my assist to this public folder in here you can see my all assets in here now I'm going to kill this terminal for a while after that now I am going to push this all changes to my remote repository for that now I'm going to use command jit add after that jit commit finally jit push now we can see our changes in our remote Repository in here you can see our commit now I am going to remove some unwed things from this project first I'm going to remove something in layout. dxx file in here I don't need to use this font and this and I'm going to remove this class now I'm going to update the metadata and now I'm going to remove some unwanted things in page. txx file I don't need to use this then now I'm going to remove this all after that I am going to remove something in global. CSS file now I'm going to Define font in here now I need to configure this with my tailin config dots file In Here Also I don't need to use this background image then I'm going to remove that one I'm going to configure that font style like this and also I'm going to configure the screen sizes in here now I am going to create folder structure like this for that I need to create another new folder name call as components now I'm going to create page. txx file for this now we can import this all to our main page. txx file now we can check the output by using nbm run de command in here you can see our all section now we can start to build this naar section for that I need to use react icon library for this icon and for this icon now I'm going to install that one now I'm going to copy this command and I'm going to paste in my terminal I'm going to kill this terminal for a while and now I'm going to paste in here now I'm going to find three icon from this for the menu I'm going to use this one now I need to find another icon for close I'm going to use this one and I need another icon for that I'm going to use this icon and I need to import this logo also and I need to import next image now I'm going to convert this D as section and I'm going to remove that one I need some style for this section tag width as full and position as fixed and I need to add some top and lift top Zer and left zero and I need to add another style that is called iset index I'm going to Define that as iset 100 now I need to configure this with in my Tailwind config file flex and justify cender now I need another two de I'm going to add some style for this D and I need to Define Max withd and with full now I'm going to add some another style for this D now I'm going to check what are the font colors they are using in here you can see they are using this font color and you can see they using just and font weight as 500 and font size as 16 pixel in here I have defined Flex small screen also flex and medium screen also Flex now I'm going to add the logo and that menu icon open and close before that I'm going to do some changes I'm going to remove that one and now I'm going to run this project there is no any changes you can see now I'm going to set my browser in here then you can easily catch what are the changes I am doing [Music] now I'm going to create that open menu and close menu for that I need use state I'm going to use some classes in here and now I need to use on click method I'm going to use the same style for my open menu we can check our output before that we need to use this use client in here you can see our close and open Button now I'm going to create this two button for the tining need to check some style font weight as 500 and text size as 16 PX and this text color and you can see they are using this one border PX and this border color now I'm going to create that one in here I'm going to use that world icon now I'm going to create that sign up button [Music] now I'm going to create this middle menu now I'm am going to create array object for links now I need to map this [Music] [Music] [Music] in here you can see our menu now I'm going to create small screen menu [Music] now I'm going to add some custom style for this I need to add two buttons below to this list now I'm going to do that one [Music] so guys as the first step we have successfully completed building our now bar now I'm going to push this change to my remote repository for that I'm going to kill this terminal for while and I'm going to push this code to my remote reposit for that I'm going to use jit add command next I'm going to use jit commit now I'm going to use jit push now we can start to create this hero section first I'm going to check what are the style they are using in this hero section in here you can see they are using just font style with font weight 500 and text size as 80 pixel for this they are using same font style but that font size is different now I'm going to build this first I'm going to import that image to this hero section and I need to use image from next and I'm going to to change this du as section I need some class for this [Music] section like this and I need another two de inside of this my section I'm going to add some style for this [Music] de [Music] in this du now I'm going to Define my screen [Music] size and now I need another two de for that text section and that image section first I'm going to create this text section [Music] in here you can see my text in here you can see my paragraph now I'm going to create this two button now I'm going to add some margin bottom then you can easily catch what are the changes I am doing [Music] [Music] now I'm going to create this four image section sh [Music] [Music] [Music] [Music] in here you can see my completed hero section now time to start build this feature section before that I'm going to push my changes to my remote Repository and guys if you are really like to this video consider subscribing and liking that is a small way to help my channel in this feature section you can see some box shadow in figma free plan we unable to get that code for that I am going to use this feature section for zl. iio website by using that we can easily generate this box Shadow code now I'm going to build this feature section first I'm going to remove this text and I'm going to convert this D as section after that I need to add image for this feature [Music] section [Music] inside of my this section tag I'm going to add another two d and now I need another four de One D for that text section and another three D for that card section [Music] [Music] [Music] now I am going to add that box Shadow now I'm going to copy this and I'm going to paste in my global. CSS file and I'm going to use this class [Music] [Music] [Music] [Music] e [Music] [Music] in here now I'm going to do a small change now you can see our feature section final output like this now I'm going to show you this mobile out now we can move to our next section before going to the forward now I'm going to push my changes to my remote Repository now I'm going to show you how to build this benefit section in here you can see they have used some background color in large screen but in small screen they haven't used any background color so we need to focus about that and in here you can see there are background color this color we need to use that one let's go to implement this [Music] part first I'm going to remove this text and I'm going to convert this du as section and I need need to import that image this one first I need to import image from [Music] next now I am going to add some style for this section type I need to add that background color in here for that I going to use some custom CSS now I need to provide color in my CSS file I'm going to use some media query in here now I need another two de in here I think you can see that change now I'm going to add some style for this [Music] [Music] [Music] [Music] [Music] [Music] now time to work with this image [Music] you can see final output like this in desktop mode now I am going to show you final output with mobile window you can see mobile window like this now I'm going to push this changes to my remote repository now I'm going to show you how to build this pricing section in here you can see we have some carouso in here for that I'm going to use this npm package first I'm going to install that one after installing our npm package we need to import that to our section now I'm going to do that one and now I am going to remove this and I'm going to convert this D as section first I'm going to create this text now I'm going to create this toggle button for that I'm going to use some custom CSS classes now I'm going to paste some style for this toggle button and I need to use some use state for this now I'm going to create that one now I'm going to create on change event for this I need to import this use client you can see my toal button like this now I'm going to add another du that for my card before the creating this three card now I'm going to create this arrow button for that Arrow Mark I'm going to use SVG now we can create our price card for that I need to use use ref and use effect and I am going to add this two icon this green color one and this red color one and I need to import next image and I need to use event object from carouso now I need to create array object before that I am going to Define interface now I'm going to create my array object like this we need to create another tool for this Advan and premium like this now I need another use state for set the active index and another one US state for set the item for this use State I am going to pass jsx element now I'm going to create use effect and I'm going to map this all detail card to this set item now I'm going to add this box Shadow now I can use this class in here I'm going to map this package details now I am going going to set this map item to my set items now I'm am going to add the carouso I need to pass some props for this carouso now I'm going to past my card value using this use state and I need to pass active index and I need to pass responsive prop also now I'm going to create this in here I need to Define my display sizes and I need to pass the ref prop and now I'm going to Define that one now I need to set the active index now I need to Define on slide change now I'm going to pass the test prop now I need to create my button now time to check our output in here you can see our card I think I have do small mistake now I'm going to check that one I need to change this as 340 I think now everything is fine yeah in here you can see our card now I'm going to show you mobile window preview now time to start building this discount section before that I'm going to push my changes to my remote Repository first we need to import that image and we need to import image from next now I'm going to remove this textt and I'm going to convert this D as section [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] you can see the output like this now I'm going to show you the small screen output you can see small screen output like this now I'm going to push my chain to my remote Repository [Music] now time to start build our photo section in here you can see we need to use different type of logo in small screen and larger screen first I'm going to import that image now I'm going to remove this text and I am going to change this D as section now I'm going to add some margin bottom then you can easily find what I'm doing in here you can see this subscribe button now I'm going to create this three menu now I'm going to add this large logo now I'm going to add this horizontal line now I am going to provide some style for this class we can see our horizontal line like this now I'm going to remove that added margin bottom now we can finalize our homepage now we can check our final output for the final output you can see like this now I'm going to show you this mobile previe you can see like this I think in here I have do some mistake now I'm going to fix that one in here I need to change this two as three and I need to add some margin bottom also in here I think now everything is fine now time to push our final changes to our remote repository guys now is the time to host our project in versal for that you need to log to your versal account after log to your account you will automatically navigate to the dashboard after that you need to click on this add new under that add new you need to select this project after that we are going to import the git repository for that you need to select your repository in here you can see my recent repository in here now I'm going to click on this import and you can Define your project name I'm not going to change that one after that you need to click on this deploy button by click on this window you can see your hosted web in here you can see our website thank you so much guys watching this video don't forget to hit the like button and don't forget to subscribe my channel see you soon with another new tutorial thank you

Channel: CodeCrafterHub

Views: 2,959

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: Veoh7kMIGO4

Length: 106min 53sec (6413 seconds)

Published: Thu Feb 29 2024