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

[Music] hello everyone welcome to my channel I damit and today I have something really cool to show you in this video I'll teach you how to turn a beautiful design made in pigma into a working website using next days 13 and making it look amazing with Tailwind CSS ever wondered how designers and developers work together by the end of this video you will know how to make your designs come to life on the web before we start please click the Subscribe button and hit the Bell icon so you won't miss any of our web designing and development lesson and if you find this video helpful give it a thumbs up it's really helped to our Channel let's get going with our pigma to next days 13 and T CSS tutorial and remember if you like what you see consider subscribing and liking it's a small way to support our channel before we go into forward let's time to check what are the topics I'm going to cover in this video first of all we need to create dat reposit for our project by the end of this video I am going to deploy this project in vers for that's why I going to use jeub to publish my code in here you can see my J profile and you can see the repository section now you need to click on it after click on that you will navigate to this kind of page in here you need to click this green color new button for create new repository for the creating new repository you need to provide some details in here by default they are selecting your profile as owner now we need to provide repository name for the repository name you can use any kind of name in my case I going to use Christmas responsive web after that you need to provide some description about that that is optional one if you wish to add some description you can add otherwise no need to provide that description in here I'm going to use this as my project description after providing your repository description you need to select your repository type by default they are selecting as our repository type public if you wish to change you can change as private also after providing your reposit type you can add the read me file for your repository in here I'm not going to add that one after that you can see add G ignore file in here I am not going to add that one also because when I am creating the next days 13 project that will automatically include in my project after that you can select your license type in here I not going to select that one also after providing this all detail I'm going to click this green button for create my repository after click that button you will navigate to this kind of page now I'm going to show you how to create your local repository using your already created remote repository for that we need to copy our remote repository address by clicking this icon now we need to create new folder for our new project for that I'm going to create new folder in here and I'm going to name as my web now I need to open this my web folder by using my visual studio code for that I'm going to inside of this folder and right click I'm going to click this open with code yeah I think you can see my visual studio code window in here you can see the terminal you need to click on it and you need to click on this new terminal in here by default there are selecting my terminal as power shell in this time I'm not going to change about that and now I'm going to clone that my project to here now I'm going to use this command after this you need to provide your remote repository address I'm going to paste in here and now I'm going to press my Enter key in here you can see somewh because our repository currently is empty now I need to go to the inside of this my cloned folder it mean Christmas responsive web for that I'm going to use command CD and my file name after that I need to press my Enter key yeah now I am inside of that folder now we need to create our next J project for that I'm going to use next days get started code in here you can see this clipboard icon you can simply click on that it will automatically copy before we go into forward we need to check our note version for that go to your CMD it mean command PR and type node minus V in here you can see my not version is 2.5.0 in here one thing you need to keep in your mind that is next is 13 minimum node version requirement is 17.0.2 if you wish to use next J 13 you need to have node version higher than 17.0.2 now I'm going to create my next days project for that I'm going to change my terminal in here I'm going to use this git bash after selecting my terminal I need to go to inside of that my Clon and file for that I'm going to use command CD and my folder name after that I'm going to paste that nextjs 13 code and I'm going to provide in here full stop and for slash because I don't need to create folder inside of that my cloner folder in here you can see they are asking some question about our project would you like to use type script in here I'm going to select that as no and would you like to use es Link in here by default yes would you like to use Tailwind CSS yes would you like to use SRC directory no would you like to use app router yes would you like to customize the default import alas no it will take some time to create our project I think in here you can see this success message that means my project has been created successfully now I'm going to check that actually success or not for that I'm going to run my project for that I'm going to use npm run now my next G 13 project available on this Local Host 3000 now I'm going to click on it you can see the my sample project output now I need to push this code to GitHub PR for that first I am going to kill this terminal now I need to use get add command in here I'm going to add this all file that's why I'm using this full stop mark now I need to add commit for my project after that get Branch finally get push okay now you can see your project in your jeub remote repository I'm going to repace this in here you can see your project file our next step is we need to export this all images from our pigma file for that I'm going to create some folder as this section [Music] name [Music] [Music] now I'm going to sport this all images as SVG file [Music] [Music] [Music] [Music] [Music] all [Music] [Music] [Music] [Music] oh [Music] [Music] aah [Music] after exporting your images your image count be like this in celebrate folder one SVG image in fter four SVG images in gift five SVG images in giving three SVG images in header folder two SVG images in home one SVG image in message one SVG image in new arrivals for SVG images now I'm going to make one new folder Nam as images and I am I'm going to move other folders inside of this now I can easily add that file to my project now I'm going to drag and drop this images folder inside of this public folder now I am going to export and import this all images by using single file for that I'm going to create index.js file inside of this images folder in here I am going to import all [Music] images [Music] you can export image like [Music] this [Music] [Music] [Music] [Applause] [Music] after importing and exporting your all image your index.js y need to be like this now I'm going to doing some changes in in my tail bin config file in here I'm going to change my theme properties in here first of all I don't need to use this background image for that I'm going to delete that one now I need to add font style for my project now I am going to check what are the font style they are using in pigma you can check the font family by clicking in here you can see they are using as a font family 4 pins and font weight 600 and in here they are using 400 and in here they are using 500 now I'm going to import this font family for my project for that I am using Google font and I'm going to search that font style you can see that font style and in here I'm going to select that font weight I need to select 400 and 500 and 600 also after that I'm going to use import option because I'm using the tailin CSS in here I'm going to Simply copy that and I'm going to paste that in my Global CSS file like this and I'm going to remove other and I need to mention that in my Tailwind config JS file I'm going to make my primary font as poin for that I'm going to use Font family after adding the font family I need to add colors for my project for that I'm going to use colors like this and I'm going to get all colors from my pigma file now I'm going to add this all colors to my [Music] project [Music] now I'm going to add this dark [Music] colors after adding your old colors your colors section need to be like this after that now I am going to add screens for my project the purpose of this screen it mean I'm going to mention here my break points in extra small 175 pixel in the small screen 140 pixel and medium 768 pixel and large screen 1,24 and extra large screen 1,300 in here you need to mention pixel okay I have successfully added pH family and colors and finally screen for my project now we need to set up our project folder structure for that I'm going to add new two folder inside of this app folder for that first I'm going to add component folder inside of this app and I'm going to add another folder for here that called layout in here page.js file you can see some default template code I'm going to remove this all code in here because I don't need to that like this and I don't need to this one also after removing that default template you can see output like this now I'm going to create layout for our project for that I'm going to use this folder in inside of that I'm going to make my whole [Music] [Music] layout after that we need to mention render site in here I'm going to use client we need to mention that in our all layout files now we can import this all layout to inside of our page.js file here I'm going to import that all [Music] [Music] file now we can use that all imported file inside of this main [Music] tag after that you can see the your output like this now we can start our coding in this main I need to give some Style 1,920 pixels and margin next Auto and poison relative and over hidden and I need to give f as private in our design have dark mode and light mode then we need to create that for that I can use the npm package next themes in here you can see the next theme package and more details about that if you wish to read you can read that now I'm going to use that package for my project for that I'm going to Simply copy that and I'm going to paste that in my console first I need to kill this terminal and I need to paste in here and I need to press enter key now we need to configure that next theme npm package inside of our project for that I'm going to create new file inside of my components folder that name called as theme provider do GSX here I need to mention use client and I'm going to import team provider export function team provider I need to configure this theme provider inside of my project now I am going to use that inside of my layout file in here I don't need to use this and this one also now I'm going to import that t team provider in here and I'm going to wrap this children using that theme provider and I I need to add attribute and another thing you can change your metadata also in here I'm going to change that one and after that we need to change something in our Tailwind config.js file now I'm going to do that one we need to add inside of here dark mode class in our UI design you can see the dark mode and light mode button available on the that now bar now I'm going to first make that for that I need to use some other npm packages for the this button icon it mean this dark mode and light mode icon for that I'm going to use react icon package you can use this command to install that package my packages is successfully installed now I'm going to now B now in here I'm going to use to line for my icon and I need to use some other things by using this nextjs package this all code and I need to insert this okay now I can use this theme inside of my project now I'm going to use on click event in here like this now I'm going to use inside of this du my I team equal to do then need to show this and I'm with and height for that and white also 2 after that I'm going to give other icon in here and I need to add this one in here and in here I have BL mistake I think now everything is fine now we can run our project yeah in here you can see our icon and our dark mode and light mode now working well you can push your code to GitHub in here I'm going to use another terminal for that and I need to go to inside of my project now you can see in here main now I am inside of my project I'm going to use G at po stop press enter after that I'm going to add commit and enter and finally get push and press enter now you can see your code in your GitHub in this project firstly I'm going to complete this hero section in here you can see some images from this left side and some text and button from right side now I'm going to make this one now we need to go to Hero section jsx file in here you can see that in here now I know need need to use this hero section then I'm going to delete that one in here I have one main de now I need to another D inside of my main D now I need to make another main two D for left side and right side it mean images section and my another text and button [Music] section in here you can see I have added another two main de now I need to import my hero section image now I'm going to do that in here you can see my hero section image name as hero image now I'm going to copy that and I'm going to import that into my hero section in next days when I'm going to deal with image I need to import image from next J now I'm going to import that okay now I can use this image in my hero section now I need to provide SRC and ALT for this image I think now we can see the output after refreshing my this page in here you can see our output now I'm going to make some style for that I'm going to use class name now I'm going to check width and height you can see 5442 width and height that for large screen now I'm going to check small screen in here you can see 320 and 2 82 do now we can add that style to our project in here I'm going to provide extra small with 500 pixel and extra small height 442 pixel now I'm going to provide a small screen with and height 320 pixel and height 282 pixel now I'm going to check that now I'm in large screen now I'm going to check that within small screen I think you can see the difference now I am going to work with this two paragraph and this button for that I am going to use this D now I need three main do for [Music] that like this I'm going to use this D you can see the that text one text two and button inside of this our output first I'm going to make this Merry Christmas and happy New Year for that I'm going to copy this text and I need to add that one in here inside of P tag you can see that one in here and I'm going to add next text to my project this I'm going to copy that one and I'm going to add in here inside the paragraph tag like this you can see that one also in here now we need to add stle for this two Tex I'm going to do that one in here you can see they are using font size as 40 pixel in large screen I'm going to check with the small screen they are using 24 pixel and that font style font weight both are same you can see in here now I'm going to add all the style for that both [Music] T in here I have added t as 24 pixel in normal screen and I have added 42 pixel for the other largest screen and font same B and extra small with as 500 pixel and normal screen for 300 and leading type leading I have used for the my TCH line withd that mean between of two TCH now I'm going to check my output in here you can see and now I'm going to check with that I think you can see the difference now I'm going to add the style for this small text in here you can see they using font size as 15 pixel in large screen you can see the difference of this color they are using two colors for that in Dark theme and light theme now I'm going to implement that [Music] part [Music] in here you can see the that changes now I'm going to check that with dark mode you can see the difference in dark mode and light mode now I'm going to make this button first we need to get some idea about that button in here you can see in the Border radius 64 pixel and background this color like this now I'm going to make that [Music] one inside of this de I'm going to give the that button name in here you can see that butn name now I'm going to add the style for that [Music] in that 16 pixel 4 largest screen and 15 pixel for normal [Music] screen I think you can see the my button output in here in here I have added rounded mean my border radius as 64 pixel and with fit and height Auto and background color and padding X12 and padding y 5 and normal screen text 15 pixel and larger screen text 16 pixel and font medium and text color as white and margin top 10 and cursor as pointer now now I'm going to do some changes for making this better in smaller screen and larger screen for that I'm going to add some style for this first I'm going to add some style for my second main [Music] de now I am going to add margin y aop of my right side main de and I need to add some another style for my paragraph tag main do now I'm going to add that [Music] one I'm going to copy and paste in that for my next paragraph like this now I'm going to add another [Music] style okay I think now we can see our output in here you can see my output now I'm going to check that what about our responsive you can see like that I'm going to change this as iPhone se you can see like that and iPhone XR like this I'm going to check that with iPad Mini like this and I'm going to check that with this one you can see now it working fine we can check with that in dark mode and light mode I'm going to check that also here you can see that is working better now I'm going to move my next part giving section in here you can see giving section have main title and three images and three title and three description now I'm going to make this one first I need to go to that giving section in here I don't need to use this giving section now then I'm going to remove the that one in here I have one main de add need to another main de inside of this de I'm going to add that one like this now I need to add another main de for my giv section main title now I'm going to add that one now I'm going to copy and paste that title inside of here then I can easily understand like this you can see in here that title now I need to add that three images to my giv section now I'm going to do that now in here also I need to add next image okay now I can use that image inside of this my my given section first I'm going to create this single card after that I can create another two by using array okay let's go to do that now I need another main de inside of this main de I'm going to make another du inside of this du I need another three D for two paragraph and one image now I'm going to add that one like this now I'm going to add some dummy data for here first I'm going to add image I think you can see the output put like this now I am going to add some style for this my main title in here we can see the title style they are using font size as 24 pixel in larg screen in small screen they are using 20 pixel and font style normal and large screen also they are using font style normal and font weight 600 now I'm going to add that all things to my project in here I think you can see the output like this now I'm going to make array for this card now I'm going to map this data now you can see output like this now I'm going to add some style for this now time to add our image style I am going to check that width and height right and here you can see 120 and0 in large screen in small screen they are using 100 I'm going to add that one like this and I need to add title style also now I'm going to check that in here you can see font size large screen for 20 pixel and font style normal and font weight 600 in a small screen they are using 16 pixel for phone size and other thing also same I'm going to add that one now I need to add this description style also in here they are using in a small screen 13 pixel and large screen for they using 14 pixel and others same font style normal and font weight 400 after that I need to add some more style for my second main de like this now I'm going to check my output in here you can see my output like this now I'm going to check with that in small screen I'm going to check that with iPhone se you can see like that as our Sigma file after completing by section if you wish to push your code you can push your code to GitHub like this now I'm going to change my terminal as bash and in here you need to add git add full stop and enter after that you need to add your com finally get push okay now you can see your code in your jiub repository now time to start our next section we can call as celebrate [Music] section In Here Also I don't need to use this celebrate section text now I'm going to remove that one I'm going to use this D as my main for my celebrate section in fig file you can see left and right side in left side we have this text and this text and we have finally one button and right side you can see one image for that I am going to use two main D for my left side and right side now we can create [Music] that in this left side we have two text and one button now I'm going to make three du element for [Music] that like this I'm going to use do element in here also we need to import image and our celebrate section image now I'm going to do [Music] that now we can use this image inside of our celebrate section I want to use that image in my right side main [Music] de now we need to add some style for our image in here large screen you can see they are using 450 pixel for width and 450 for height now I'm going to check with that in a small screen in here you can see they are using in small screen 280 pixel and height for the 280 pixel now I'm going to implement that in my [Music] code [Music] now you can see the output like this our right side is now finished we need to continue with our left side now I'm going to add the two text to my Corde you can see the output like this now we need to add some style for celebrate with a lot of love our main title now I am going to check what are the style they are using in that main title in this you can see they are using in dark mode this font color and they are using font size as 20 pixel and font style normal and font weight 600 now I'm going to check with that in larg screen they are using this title color as font color and font size as 24 pixel in larg screen and font weight also same as the our small screen 600 now I'm going to implement that all in my call and in here you can see they are using in large screen text justify start and small screen they are using justify Center we need to implement that [Music] also now we need to add our justify style for our this main [Music] de I think you can see the this output now time to move our next paragraph now I'm going to check what are the style they are using in that in here you can see in small screen they are using this dark text color and font size as 15 pixel and font weight as 400 and larg Screen they are using 16 pixel for font size and font weight as 400 and they are using this as the text color now I'm going to implement [Music] [Music] that [Music] [Music] I think you can see the my output In Here Also I need to add justify style in my du [Music] element okay now we can start to implement our button now I'm going to check what are the Styles they are using in our design in here you can see they are using border radius as 64 pixel and they are using this first color as background color and in here they are using also 64 pixel for the Border radius and other things also same asch to the our large screen now I'm going to implement [Music] that [Music] [Music] [Music] now in here we need to add our button text in here also we need to add our justify style in our DU [Music] element you can see the output like this now we can add the style for our main D in here you can see in large screen they are using Flex as row and and in small screen they are using Flex as column we need to implement that for our both large and small screen now I'm going to implement that one by using my main du [Music] element [Music] in here you can see our final output like this now I'm going to check that with smaller screen and large screen in here you can see that within large screen in here now you can see that with in the small screen screen like iPhone SE I think in here I need to mention some text color for my this main title now I'm going to implement that [Music] [Music] part yeah I think now everything is fine now we can start this there gift section in here you can see some card and in here you can see inside of this small heart icon and they using one image in here and you can see some price and some text in here first I'm going to make array for this one card and I'm going to map that one that will easy to use okay now time to do that one I need to add some images from my image folder and in here I hope to use some react icon for this heart [Music] icon [Music] for this heart icon I'm going to use react icon in react icon you can search your icon what you want now I'm going to search like heart for the result you can see lot of result in here I'm going to use some suitable icon for my design I'm going to use this two icon for that you need to Simply click on that in here you can see it name will be copied after that you can import that icon to your project like [Music] this now we can use this two icon inside of our project now I am going to make array for storing this all data [Music] [Music] [Music] [Music] In Here Also I don't need to use this gift section text I'm going to remove that I can use that as my main du element inside of this main de element I need another one de element for this my title and I'm going to add that one inside of this I need to add this share gift title for that I'm going to use P Tex now we need to add some style for our pag now I'm going to check what are the Styles they are using in here in here you can see they're using text color and font size as 20 pixel and font weight as 600 now I'm going to check with that in large screen in here you can see they're using title color as text color and 24 pixel for the font size and 600 for font weight we can add that to our [Music] [Music] code now I'm going to check our output in here we can see our title in here I'm going to create one single card for that I need another one D element after that my main do element inside of that main de I need another de in here my main de I need another three de element for this heart icon and for this image and for this both text now I am going to add that three Dev [Music] element [Music] in here you can see I have a two text for that I'm going to insert two de element inside of this D element in here firstly I'm going to work with this bottom to text for that I'm going to check what are the Styles they are using in here you can see they are using font size as 13 pixel and font weight as 500 in the small screen in large screen they are using font size as 14 pixel and font weight as 500 and text color and font color as this text color and in here they are using 20 pixel for large screen and normal screen they using 16 pixel now I'm going to implement that [Music] part [Music] now I'm going to check my output in here you can see this price and this title now I'm going to add that image to my this du [Music] element now we need to add some style for our image now I'm going to what are the style they are using inside of our design in here you can see they are using in large screen 120 pixel for width and height in small screen they are using 100 pixel for width and height now I'm going to use that one [Music] [Music] I think in here you can see the that image in here need to change as text now I'm going to add icon for our project now I need to add another du inside of this my icon D now I'm going to add that one inside of this de I can can use my icon name in here I need to add some style for my icon I'm going to check that in this you can see they are using width and height as 20 pixel for this heart icon in large screen in small screen also they are using 20 pixel for width and height now I'm going to add that style for my project [Music] now I can add this border radius and background color for this card now I'm going to add that all things to this [Music] card [Music] [Music] now we can take cover output in here you can see our car like this I need to add some style for this heart [Music] icon [Music] now I'm going to use map function for this card [Music] [Music] [Music] okay let's go to check our output in here you can see our output like this I think we need to add some style for [Music] this [Music] [Music] okay let's go to check our output I think in here you can see output like this in here we can see some margin we need to reduce that before fixing that I need to add some functionalities for this heart ion now I'm going to implement that part before the changing this margin issue first I need to use use state for that one I'm going to make that [Music] one [Music] in this 49 line initialize a state variable named as faav and its corresponding State updat function set fav using the use State hook the fav state is intended to keep track of whether each gift item is marked as favorite in here gift section data. length represent the number of gift item in the gift data array and array gift section. length. fill FS creates an initial array of fals values with the same length as the gift data array now I need to create handle click function [Music] in this handle click function is defined to handle the users click on a heart icon associate with the gift item the function takes an index parameter which indicates the index of the click gift item this fav state is an array that keeps track of whether each gift item is a favorite or not this handle click function is used to toggle the favorite status of a specific gift item by creating a new array and updating the state accordingly this mechanism allows users to Mark and unmark gift items as favor it by clicking on the associate heart icons now I can use this handle click function with on click event [Music] now we need to change our icon according to this handle click [Music] event [Music] [Music] now I'm going to check my output in here you can see my heart ion is working better now we need to fix this extra margin [Music] issue [Music] now I hope everything is working perfect now I'm going to check my output yeah in here you can see this and I'm going to check with that in small screen yeah in here we have some issue with this small screen now I'm going to fix that one also [Music] now everything is working better on small screen and now I'm going to check with the large screen that also working fine in here you can see we have complete our hero section and giving section and celebrate section and give section and finally message section in here we have two remaining parts one is new gift section and footer section now I'm going to show you how to complete our footer section now time to check out our UI design in here you can see they are using four column in this footer first of all I'm going to create that four column inside of my footer section let's go to do that one in here also I don't need to use this footer text then I'm going to remove that one first inside of this de I need another two main D I'm going to add that one now I need to add four column for that I'm going to add another four de inside of this my last de now I need to import images for this footer [Music] section [Music] [Music] now I'm going to use that images inside of this my footer section first I'm going to use use that [Music] logo to use this image tag I need to import that one also now I'm going to add some style in here and now I am going to add this text and I need to add some style for [Music] that [Music] [Music] [Music] [Music] you can see output like this now I'm going to wrap this image and paragraph by using du tag like this and I need to add some style for this both image and paragraph now I am going to add this paragraph in here for that I need another du and I need to add some Style [Music] [Music] you can see output like this now I going to add this column for that I'm going to use this D in here you can see one heading and inside of that three sub headings now I'm going to at that all for that I'm going to add four de inside of [Music] [Music] this [Music] [Music] now we need to add some style for this column [Music] [Music] [Music] [Music] [Music] you can see output like this now I'm going to add this support column for that also I'm going to add four de inside of this [Music] de [Music] [Music] in here I can use that same style for this column [Music] now I'm going to check my output I think I have do some mistake now I'm going to correct that one [Music] [Music] [Music] I think now everything is fine now we can move to our last column in here also you can see they are using one heading and two images now I'm going to implement that [Music] one [Music] [Music] [Music] [Music] [Music] now I need to add some style for this available on [Music] text [Music] [Music] now I'm going to check my output you can see my output like this now we need to add this two bulb for our photo [Music] section [Music] [Music] inside of this de I'm going to add two Dew for my two [Music] image [Music] now we need to add some style for [Music] this [Music] [Music] I have created this part for the bulb in small displays you can see the difference in this pigma in here you can see they are using different position for the small screen size for this two bulb in large screen they are using another different position for this bulb now I'm going to create that large screen bulb position for that I'm going to use another DE after the this de [Music] [Music] [Music] now need to add some style for this two [Music] bulb [Music] [Music] e [Music] [Music] this part for the large screen bulb position now I am going to add some another style for this my Hooter section [Music] [Music] [Music] in here you can see a small screen output like this now I'm going to check that within large screen I think I need to add some style for this green bulb in here I have do a small mistake now I think everything is fine yeah in here you can see my green bub also in here now our photo section also fully completed now time to create this beautiful Carol first I'm going to add this text for my new gift section In Here Also I don't need to use this text then I'm going to remove that one inside of this I'm going to add another de for adding this new gift text now I need to add some style for this [Music] text [Music] now I am going to create new file for creating this single card for that I'm going to create new file inside of my component folder now I'm going to import this single card to my new gift [Music] section okay let's go to create this single card in here I need to import next image and I need to add two icon for this card now I'm going to import that and I know need to use this single card text then I'm going to remove that one I'm going to add another two D inside of my main de now I need another three D for this image and for this text and for this icon now I'm going to import one image for [Music] this [Music] after adding our image we need to add this two text for our single card section [Music] now we need to add style for [Music] this [Music] [Music] after that we need to add some onclick method for this icon first we need to import use state for our single card [Music] [Music] [Music] now we can use this handle click inside of our on click [Music] [Music] [Music] you can see output like this now we need to add this background color for our [Music] card [Music] for [Music] [Music] [Music] [Music] you can see our card final output like this now we need to add this card for the carousel to create that carouso I'm going to use this react multi Carol package first I'm going to install that one so that I'm going to copy this by click on this icon [Music] now we can use that multi carouso inside of our project now I going to create another component inside of my this component folder [Music] now I'm going to implement my carouso in here now I'm going to copy and paste this in my image carouso component we need to add this responsive also you can adjust this responsive as you wish I'm going to change little bit now I'm going to add my card details in here first I need to add image for [Music] this [Music] now I'm going to create our [Music] data [Music] [Music] [Music] [Music] now I am going to calculate my array length [Music] now I'm going to map this array and I'm going to pass that all data as a prop for my single card component [Music] [Music] [Music] [Music] now I can use this all data inside of my single card [Music] component [Music] now I'm going to use this Caro [Music] [Music] now I can use this image carouso inside of my new gift [Music] section let's time to check our output I think something went wrong let me check yeah in here I have do some mistake yeah now everything is [Music] fine in here you can see our [Music] carouso [Music] [Music] now you can see our all parts are complete but we have some remaining part that is our navigation bar let's time to start create our navigation [Music] bar in here I'm going to remove this for a while now I'm going to add two de inside of this my main de inside of this last de I am going to add another [Music] 3D in here I need to add two icon for this open and close button and I need to add this bulb image and this [Music] logo [Music] and another thing I need to import image from next first I'm going to create this logo and this Christmas text for that I'm going to use this first [Music] du [Music] you can see output like this now I am going to create this dark mode and light mode icon and this open close icon for that I going to use this my second [Music] de [Music] [Music] [Music] [Music] [Music] [Music] now time to create this [Music] menu [Music] [Music] [Music] [Music] [Music] now I'm going to use new npm packages for create this menu for that I'm going to use this react scroll I'm going to copy this and I'm going to kill my terminal for a while and I'm going to paste in here my packages has successfully installed now I'm going to use that [Music] one in this time I need only this link now I am going to create links for my menu it mean this [Music] menu [Music] now I'm going to use that links [Music] [Music] [Music] you can see output like this now I am going to add dark mode and light mode button for large [Music] screen [Music] [Music] now I'm going to add some transation style for [Music] this [Music] e [Music] [Music] [Music] [Music] [Music] now I'm going to add another style for my main de [Music] [Music] now we need to add color for our main [Music] page I think here is some style is missing now I'm going to complete that [Music] [Music] one [Music] yeah I think now everything is [Music] fine but still didn't work this react is called for that I need to add some ID for my [Music] Cod [Music] [Music] now everything is perfectly complete now time to push our code to our jitb reposit now I'm going to push this code to my jitb Repository [Music] [Music] now you can see your code in your GitHub repository in here you can see my all code and my jitb repository now I'm going to show you how to deploy this project by using vers in here you can see versal website in this window you need to click on this login button after that you need to click on this continue with GitHub because our project is now available on GitHub after that you will navigate to versal dashboard in here you need to click on this add new and in here you need to click on this project after that you need to import your project in by default you can see my recent project is in here they are showing if you unable to see your project you need to use this search option in here now I'm going to click on this Import in here you need to give your project name if you wish you can change by default they are selecting our framework after that you need to click on this deploy button in here you can see our deployment is now [Music] start [Music] after completing our deployment you can see this kind of window by click on this you can navigate to the your website in here you can see our website you can use this URL for share your website with your friends and guys this is the end of this video if you have any doubt you can put that in comment section I really like to help to you and special thank for BDM code to provide this beautiful amazing UI design if you are really like to this video give it me a thumbs up and don't forget to subscribe my channel thank for [Music] watching

Channel: CodeCrafterHub

Views: 1,636

Keywords: Build With Next 13, Getting Started With Next 13, Install Tailwind CSS in Next.JS, Next 13, Next 13 App, Next 13 Development, Next 13 Project, Next 13 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: KuNSV2xdYMw

Length: 145min 27sec (8727 seconds)

Published: Mon Dec 04 2023