Tailwind CSS: Build and Deploy a Fully Responsive Burger Website || Light & Dark Mode (2023)

you are watching this video so I am sure you are excited to see what exactly are we going to build today we are going to build a beautiful landing page of burger website using Tailwind CSS keep in mind this website does not have to be just about Burger website you can convert it into any other high-end business in this video you will learn how to make different sections for your website like hero section category and promo section About Us section menu section review section contact and footer section we will show you how to design them in a way that looks great and makes sense this video will show you how to create a light mode and a dark mode for a website this means users can choose between a light and dark background it's helpful for those who prefer a darker screen at night the tutorial will teach you how to add this feature to your website so users can switch between the two modes easily also in this video tutorial you will learn how to create two important features for a website an active link and a scroll up button the active link is a visual cue that highlights the current page or section of the website being viewed making it easier for users to navigate and understand where they are on the site the scroll up button is is a handy feature that allows users to quickly and easily return to the top of the page without having to manually scroll this is looking great and it is completely mobile responsive it's going to work for tablet devices as well as the mobile devices and it's going to look great on all of them which means that it can adjust its layout and content to fit the screen size of the user's device this feature is important as more and more people are accessing websites through their mobile devices a mobile responsive website ensures that users can access and navigate the site easily without having to zoom in or scroll accessibly this website works well on all devices so users can enjoy the content no matter what device they are using finally our website will be deployed to netley file ons we deploy our website to netify we will get a URL this URL can be easily shared with friends and others so they can visit and explore our website online so let's dive straight into the video foreign [Music] editor I am going to use Visual Studio code editor or DS code editor you can use whatever you want to get started with our Burger website we are going to start as we always do by creating a new empty folder on our desktop called Burger website once you created you can drag and drop it to your empty Visual Studio code window inside of here Now open up a new tab and go to the Tailwind css.com website and click on this docs Button as you can see to install Tailwind CSS you are gonna need some steps here but don't worry it's really easy firstly we are gonna install Tailwind CSS so open up terminal first thing we want to do is type npm in8 Dash y hit enter so that will initialize a package.json file so you should see that here by the way if you don't have node.js in your computer make sure that you install that fast otherwise you would not be able to install any Library using npm so you can download it from here and install it to verify whether you have installed node.js or not you can check by typing node Dash V I am currently using this version your version may be different from mine so don't worry about that now we are going to install Tailwind as a Dev dependency so let's copy this command and paste it right here hit enter next we want to run this npx Tailwind CSS in it which create a config file like this one so let's copy this command line and paste it here hit enter and you should get a tailwind.config.js file up here and it's going to look like this by default and here you can add like any custom colors or whatever any customization you want next I am going to copy all of this by clicking this icon and paste it right here now save it and close it up if we look down here it's saying to create a source folder and then input.css file so let's do that back to our code in this directory let's have a new folder called source and inside it let's have a new file called input.css okay then I want to add these three lines so let's copy these lines and paste it right here now we have the base the components and the utilities save it and close it up I will scroll down now it's telling us to run npx Tailwind CSS Dash I which is short for input file and then the input file dot slash Source slash input.css which we just created and then Dash o that means the output and the output will be dot slash dist slash output.css and then dash dash watch so let's copy this command back to our code let's go into the package.json file and I want to add that command line in here let's change this test to watch now save it and finally it's telling us to create index.html file so let's copy this index.html file by clicking this icon first we have to create that file so in here let's say index dot HTML and paste it right here now save it now we have to run this command line so let's type npm run watch hit enter and you should see up here list folder and then output.css file with all of our Tailwind staff now we need to install on extension to run our HTML file so open up extension panel by clicking this icon and search for live server here is the extension I am talking I have already installed it if you don't have it just install it and close it up now right click and choose open with live server and you can see Hello wall text which is bold and underline that exactly we specified here now I want to add a couple of things that we are going to be using first of all I am going to add image folder inside this Source folder as you can see I have already added some images to the image folder that we will be using next we want to add assets folder inside this directory inside this assets folder we have the starting HTML and JS file so let's copy this starting HTML file and paste it right here first I want to add Fab icon so let's say link colon Fab now hit enter and the href value will be image slash Fab icon dot PNG now save it and you can see the Fab icon and the title next we want to add font awesome link open up a new tab and go to cdnjs.com website and search for font awesome here is the font awesome click on it and you can copy this link by clicking this icon and paste it right here next we need to add remix icon again open up a new tab and go to the remix icon.com website click on this GitHub icon I will scroll down let's copy this CDN link by clicking this icon and paste it right here now the question is how can we collect the icons well let's go to the remix icon website and search for let's say menu as you can see our menu icons let's say I want to choose this one so I can simply click on it and we can copy the itag by clicking this icon I can paste it wherever I want let's say I want to add right here now save it and you can see the icon similarly let's go into the font awesome website and click on the search icon and let's search for droplet click on this free icon let's say I want to choose this one so click on it and then you can copy code from here let's paste it here now save it and you can see the droplet icon right here so that way you collected the icons I have already collected the icons that we will be using in this project I will put a link in the description below so that you can easily access this file now I want to show you how Tailwind works for example I want to create an app bar so let's get rid this icon and here let's have a header tag inside it let's have a nap tag inside the snap tag let's have an anchor tag inside this anchor tag let's say home let's duplicate this anchor tag in here let's say about now if we want to create using only CSS then we need to add here a class name like class equal to header also in here let's say class equal to navbar now we need to add CSS property so save it let's go into the input.css file and here let's target header class background color will be blue width will be 100 percent Position will be fixed top 0 and left 0. below that let's target navbar maximum width will be 1024 pixel background color let's say hashtag 0f004a below that margin Auto height will be 56 pixel color white display Flex justify content Center align item Center and finally Gap will be 20 pixel now save it back in the browser now here is our number now the question is how can we add CSS property in Tailwind says back to our code let's copy this background color back in the browser let's go to the Tailwind CSS website and search for background color and you will find the corresponding property simply click on it as you can see on the left side are the utility classes of Tailwind CSS and on the right side are the corresponding CSS details so they start with BG which is short for background and then the color or you can go to the Tailwind components.com cheat sheet and search for background color you will find the corresponding property right here click on it and you will see the utility classes or background color so you can just copy from here or here similarly you can search for width let's say with and then click on it and you can see all the Tailwind CSS property on the left side and the corresponding CSS property on the right side and that way you can easily learn telu in CSS property now let's test this out for the header tag we have to add background color with position and mode first of all in telwyn CSS let's remove this class name and in here let's say BG Dash and you will see all the Tailwind properties because I have installed an extension called Tailwind CSS intellisense so let's go into the extension panel and search for Tailwind here is the extension I am talking telwyn CSS intellisense just install it and close it up so in here we can set the background color to BG Dash blue dash 700 now save the changes back in the browser and you can see our background color is blue let's change it blue to Red save it and then you can see our background color is red however if Tailwind says does not provide the exact color we are looking for we can add our custom color to achieve that let's go into the tailwind.config.js file and inside this theme object and inside this extend property add a new property for your custom color so in here let's say colors colon curly brackets let's say primary color colon hashtag 0 1 0 a5e of course you can name the color whatever you prefer like my color or my favorite color or whatever you want but in this case I will choose primary color now save it let's go into the index.html file delete this red color and in here let's say primary color now save it and you can see our primary color very nice I am going to add some colors inside our colors property that we are going to be using in this project so as you can see I have added some colors that we are going to be using now save it let's go into the index.html file now we can add more CSS so in here I want to add position fixed so in Tailwind says we can write just fixed top will be 0 and left will be 0. width will be hundred percent so we can write w Dash full I want to add Z index so Z dash 50 now save it nothings is changing that means it's working perfectly back to our code let's go into the input.css file for the neighbor class we need to add maximum with background color margin height and more properties so let's try this out we don't need this network class anymore so remove it in here I want to add container container is a Tailwind utility class now save it it's broken but container does not automatically put in the middle position okay let me show you what I mean temporarily I am going to give this a background color let's say BG Dash rate Dash 700 and let's say maximum width 5xl now save it all right so you can see that it's not in the middle position so we have to do that ourselves so I want to add margin horizontally by writing MX Dash Auto mx-auto is going to be on the x-axis so it's a margin on the left and right now if I save that it's going to be put our container in the middle and you will see that the container is in the middle position additionally we can add some padding to The Container by using p dash 6 save it this will provide some spacing around the content however there is another way to Center our container we can modify our Tailwind configuration file so let's go into the tailwind.config.js file and below this extend properties I will add a new property called container colon curly brackets in here let's say Center true also I can add some padding by default that will be on RAM and for the small screen and app padding will be 1.5 Ram now save it we will remove the previous class name in the HTML file so let's remove MX Auto and padding now save it still you can see the container is in the middle position one more thing I want to show you that responsive design Tailwind CSS follows a mobile fast approach when it comes to break point that means any utility class you will add initially apply to mobile device and then you can use breakpoint system so the question is how can we add a breakpoint okay let me show you what I mean let's move our screen for example let's say we want to set the background color to Blue for the medium size screen so what can we do is write MD colon which is short for medium screen and then color so let's say BG Dash blue dash 700. now save it now if I resize our screen to a medium sized viewport you will see that the background color turns blue because this is our breakpoint similarly we can add styles for large screen by writing LG colon BG Dash green Dash 700 also we can increase our font size by writing LG colon takes dash for excel now save it let's move our screen and there you go you will notice that the background color becomes green and font size increase on the large screen however we have the flexibility to customize and create a new breakpoint with as needed to achieve that let's go into the tailwind.config.js file and inside this theme object up here let's say screens give it here a comma SM colon which is short for small screen will be 480 pixel for medium screen width will be 768 pixel and for the large screen width will be 1024 pixel now save it [Music] okay let me look at the reference design I set them side by side basically it's consists of a logo on the left side and some navigation links along with a theme changing button on the right side when we resize the screen you will notice that on smaller screen the navigation items will be hidden instead you will see the hamburger icon and if I click on this hamburger icon you will see the close icon and reveal the navigation items so let's focus on it first we will focus on Mobile screen so let's get rid this entire nap tag and inside this header tag let's have a new NAB tag inside it now I am going to create two dips first on for the left side logo and the second one is for the right side navigation links in the left side we have the logo so I am gonna create an anchor tag inside it let's say bar and then spend tag in here let's say girl below that and inside this div I am going to add an UL tag inside it let's have a list item and finally inside it let's have an anchor tag href will be hashtag home that means home section and in here let's say home let's have a link for the about us menu review and finally for the contact we have also a close button so let's add that below that UL tag let's have a new div inside it I am going to add close icon so let's go into the assets folder and then icon dot text file let's copy this icon that means I tag and paste it right here now I want to add this Moon icon and the hamburger icon I will scroll down and below this diff and before the nap tag let's have a new div inside it let's add the moon icon so let's go into the icon text file and copy this Moon icon and paste it right here below that let's have a new div inside it I want to add hamburger icon so let's copy this hamburger icon and paste it right here now save it and you can see our raw content let's add some style first I am going to add the text color and the background color so I am going to add text color and background color inside body tag so let's go into the input.css file we don't need this number class and the header class so I am going to remove them and in here let's say layer curly brackets and then body curly bracket now you can here use if you write here color equal to White NOW save it it will work however if you include apply like this you will be able to utilize Tailwind utility classes so inside this body element I am going to add utility class of Tailwind so let's say x dash white color and this white color is coming from here and don't forget to add semicolon now save it nothing is changing that means it's working let's say I want to add background color so let's say BG Dash primary color now save it you can see our background color I want to add later spacing so let's say tracking order save it and you can see the letter spacing let's go into the index.html file I will scroll up first we will focus on the mobile screen so let's target the snap tag give it a class equal to container Position will be relative I want to add some height with age 14 display will be Flex justify content will be space between align items will be Center so let's say item Center save it now let's focus on this burger logo so in here let's say class equal to I want to add font size with text to excel text transfer will be uppercase give it here a class name equal to text color will be secondary now save it it's looking nice now I want to add our font family so open up a new tab and go to the fonts.google.com website and search for DM here is the font I am looking for just click on it I will choose 400 I will scroll down 500 and 700 I will scroll up back to the previous page let's search for Nonito I will choose this one and select regular medium semi bold and bolt back to the previous page again and let's search for OS Alt click on it I will scroll down and select regular medium semi Bold and the bolt now click on this icon and then select import let's copy this URL let's go into the input.css file and up at the top right here just paste it now save it let's go into the tailwind.config.js file I will scroll down and below that container property and inside this theme object I am going to add a new property called font family curly brackets let's say Oswald square bracket and inside it let's say OS Alt comma send Sharif and then below that let's say DM sends colon square bracket in here let's say DM sense comma send serif now we can add this font so let's save it now we want to add this font so let's go into the input.css file in here let's say font Dash DM sense now save it and you can see our DM sends font let me look at the reference Design This font family is was world so let's add this font let's go into the index.html file and in here let's say phone Dash assault we need to remove this space now save it and you can see the us all font now let's focus on this menu items so give it here a class name equal to Position will be absolute top 0 left 0 with hundred percent that means with full I want to add some padding vertically so let's say POI 14 give it a background color so let's say BG Dash primary color I want to add border bottom so let's say border Dash B and then border color so let's say border the secondary color now save it well let's add more CSS give it a class equal to display will be Flex Flex column text Center Gap 5 save it now I want to Target anchor tag so let's say class equal to text color will be secondary color I want to add hover effect so the question is how can we add hover effect so to achieve that we have to write hover then colon and then the text color so let's say text Dash secondary color now save it Well for now let's remove this text color save it again let's test this out it's working perfectly let's copy this class name and paste it for the every single item now save it let's test this out and it's working perfectly also we can add some transitions so in here let's say is in and then duration will be 200 now save it let's test this out now it's looking good now let's focus on this close icon I will scroll down give it here a class name equal to Position will be absolute top Dash square bracket 0.7 Ram write 4 I want to add increase font size with text Dash to excel cursor will be pointer now save it now it's looking nice for now we want to hide this navigation bar so to achieve that I will scroll up and let's target this div and in here let's say hidden that means display will be hidden now save it now let's focus on this Moon icon and the hamburger icon I will scroll down give it here a class name equal to display will be Flex item Center and Gap 5. now save it in here let's say cursor pointer I want to add margin left so let's say ml-4 and then I want to add icon size so let's say text Dash Excel let's copy those class names and paste it right here we don't need this property so let's remove it and save it now it's looking very nice let me look at the reference design as you can see when I click on this hamburger icon it opens the navigation bar and you can see a close icon and the navigation items and if I click on this close icon it closes the navigation bar additionally if I click on any nav item like that as you can see it's also closes the navigation bar so how can we make that happen well to achieve that we need to use JavaScript to achieve that first I want to Target this hamburger icon to Target the hamburger icon in here I am going to add an ID equal to hamburger now save it I will scroll up first we have to understand how it works now right here if I remove this hidden utility class now save it you will see the navigation bar now if I add the hidden utility class now save it you would not see the navigation bar so basically we have to do is we need to add JavaScript function so that when I click on this hamburger icon we want to remove this hidden like this so that you can see the navigation bar and if I click on this close icon we want to add the hidden property so let's do that I will scroll down and in here I want to add script tag and the source will be main.js save it let's create main.js file inside our source folder so let's say main.js first I want to Target this hamburger icon so in here let's say cono stand hamburger equal to document dot get element by ID and then hamburger which is coming from here below that let's say Hamburger dot add event listener and the event will be click and then Arrow function now we have to Target this div so give it here an ID equal to let's say nav Dash menu now save it let's go into the main.js file and below that hamburger variable let's say constant nav menu equal to document dot get element by ID and then nav Dash menu in here let's say navmeno dot class list and then I want to remove hidden class now save it let's test this out and it's working next we want to close this navigation bar by clicking this close icon so first I want to Target this close icon so let's go into the index.html file I will scroll down and in here let's say ID equal to nav Dash close now save it let's go into the main.js file in here let's say constant close icon equal to document dot get element by ID and then nav Dash close below that let's say close icon dot add event listener and the event will be click Arrow function let's copy this line and paste it right here in this case I want to add hidden class let's save it let's test this out and it's working perfectly again we want to do same thing which is to add the hidden class to every single nav item to achieve that we need to add the same class name to every single list item in order to Target them okay let me show you what I mean let's go into the index.html file I will scroll up and in here I want to add a class name called nav underscore underscore link let's copy this class name and paste it for the other links now save it let's go into the main.js file and below that I want to Target the list item so let's say constant nav link equal to document dot in this case we have to Target query selector wall and then in the class name so make sure you add Dot and then the class name below that let's say nav link dot here I want to Target them individually by applying for each and then we will get each individual link Arrow function and then let's copy this function and paste it right here let's change close icon to link which is coming from here now save it let's test this out and it's working perfectly let me look at the reference design now we can focus on our medium screen on our medium screen we want the navigation link to see it on the same line also you cannot see the hamburger icon so how can we make that happen well back to our code let's go into the index.html file I will scroll up below this burger icon div right here I want to Target medium screen and app by writing MD colon and then I want to add display and that will be block Position will be static I want to add remove padding vertically so let's say p y 0 I want to remove border so let's say border none with will be Auto and margin left will be Auto now save it we want the navigation link to see it on the same line so in here let's say MD colon Flex Dash row save it we want to hide this hamburger icon and close icon so I will scroll down in here let's say MD colon hidden and finally give it here a class name equal to MD colon hidden now save it now it's looking very nice one thing I noticed that the Oswald phone is not working so let's check this out let's go into the tailwind.config.js file and in here that should be household now save it again let's go into the index.html file I will scroll up let's cut this font class and paste it right here now save it now it's looking nice and in this position our neighbor is complete [Music] let me look at the reference design now we can focus on our hero section essentially it contains a beautiful Burger image on the top and then we have the title paragraph some icons with level and the learn more button so let's write the HTML for that now below this header tag and inside this main tag right here let's have a section tag with ID of home inside it let's have a div and inside it let's have one more div for the burger image and finally inside it let's have an image tag source will be dot slash image slash home Dash image dot PNG and the Vault will be home image below this tip let's have one more div inside it let's have an H1 tag I am going to copy this title and paste it right here below that let's have an empty div because of this separator below that let's have a paragraph tag I will scroll down let's copy this paragraph and paste it right here below that paragraph tag let's have a div inside it let's have one more div inside it I am going to import the icon so let's go into the icon txt file let's copy this icon tag and paste it right here below that let's have a break tag and that should be self closing tag and below that let's say delicious let's duplicate this div so I am going to copy the entire div and paste it below two more times let's go into the icon dot txt file let's copy this icon and paste it here let's change this text to fresh again let's go to the icon.txt file let's copy this icon and paste it right here and the delicious should be organic I will scroll down finally we need to add button tag So Below this div let's have an anchor tag href will be hashtag and in here let's say learn more now save the changes and you can see our raw content let's add some style I will scroll up first let's target this div give it a class equal to container display will be Flex Flex column items Center Gap 10 save it let's target this div give it a class equal to I want to add margin horizontally so let's say MX Auto now I want to Target this image stack give it a class equal to I want to add some width with w60 now save it now I want to add some padding to the top and bottom of every section so to do that let's go into the input.css file and below this body tag element I want to add section tag in here let's say apply first I want to add padding top so PT 16 and padding bottom so pb4 and on the medium screen and app padding top will be PT 20. now save it and you can see some padding to the top and the bottom nice let's go into the index.html file next I want to Target this div so give it a class equal to text align will be Center save it let me look at the reference design since we will be using almost same title in many areas on this website like this one this one this one and more let's create a reusable class for it so let's go into the input.css file in here let's say base and below that let's say layer utilities curly brackets let's say home underscore underscore title curly brackets and then apply I want to increase font size so let's say text 4XL found us all font bold text transform uppercase and for the large screen and app text will be 6xl now save it now we can use this class name so let's copy this class name let's go into the index.html file give it here a class equal to home underscore underscore title now save it now our title is looking good similarly I want to create a reusable separator so give it a class equal to let's say separator let's copy this separator class and paste it below let's say apply I want to add some width so let's say w Dash 28 I want to add some height H dash square bracket and then inside it let's say to pixel give it a background color so let's say BG Dash secondary color finally I want to add margin vertically so let's say m i Dash 5 now save it let's go into the index.html file and in here I want to add margin horizontally so let's say MX Auto Now save it nice let's focus on our paragraph give it here a class equal to let's say paragraph let's copy this paragraph class let's go into the input.css file I'll scroll down and below that separator class let's say dot paragraph curly brackets and then apply I want to add color so let's say text Dash paragraph color text extra small give it a line height so let's say a leading Dash 5 now save it okay let's go into the index.html file also save it here now it's working let's focus on this area and give it a class equal to text will be based display will be Flex item Center justify Center Gap 4 py10 now save it below that div give it a class equal to text will be Center and in here let's say text secondary color and text for excel now save it I will scroll down let's copy this class and paste it here and here let's copy these classes and paste it right here and here now save it finally we want to focus our button so I'll scroll down we want to create a button component so in here let's say class equal to BTN space BTN primary now save it let's go into the input.css file and above that utilities let's say layer components curly brackets let's target the BTN class in here let's say apply display will be inline block text is small I want to add padding vertically and horizontally text transform capitalize text align will be centered cursor will be pointer I want to add border radius with rounded medium and finally I want to add transition so let's say is linear and duration will be 200 and then semicolon below that BTN class let's target BTN primary class [Music] let's say apply I want to add text color so let's say text black color background color will be secondary color and I want to add some hover effect so let's say hover colon opacity 75 now save it now it's looking very nice on our mobile device and hover effect also working so on our Mobile screen is looking very nice now we can focus on our medium screen and large screen let me look at the reference design on our medium screen and app we want to see them side by side so let's go into the index.html file I will scroll up first let's target this div for medium screen and app Flex direction will be row let's say MD colon I want to add Flex basis so let's say basis dash 50 percent and for the large screen and app Flex basis will be 40 percent so let's say 2 fifth I want to increase image size so let's say MD colon width will be 100 so let's say with full save it it's not looking good so let's add more CSS in here I want to add Flex basis so let's say MD colon basis will be 50 percent and text start also for the large screen and app basis will be 60 so let's say three fifth in here let's say MD colon mx-0 I will scroll down and below that paragraph div let's say MD colon justify content will be start and then Gap will be 20. now save it now it's looking very nice let me look at the reference design as you can see the animation makes the burger move up and down infinitely so let's create the animation to achieve that let's go into the tailwind.config.js file I will scroll up and inside this extend object and just below that colors I want to add a new property called keyframes curly brackets inside it let's say move colon Kali brackets at the 50 percent transform will be Translate y minus on RAM below that keyframe let's have a new property called animation curly brackets I want to add animation called moving y in here let's say move to Second linear and then infinite now we can use this animation name so let's copy this animation name let's go into the index.html file I will scroll up in this image div I want to add animation so let's say animation Dash and then the animation name moving y that should be animate now save it and it's working perfectly so in this position our home section is complete [Music] now we can focus on this category section so let's have a section tag with the ID of category inside it let's have a div inside the div let's say card one below that let's have a div inside it let's have one more div and then inside it let's have a image stack Source will be image slash Burger one alt will be category image below that div let's have one more div inside it let's have a div and then inside the div let's have an H4 tag in here let's say food below that is for tag let's have a paragraph tag let's copy this paragraph and paste it right here and below that div let's have an anchor tag href will be hashtag in here let's say buy online now save it I will scroll down and you can see our raw content let's add some style first I want to Target this div give it a class equal to container display will be Flex Flex Direction column Gap 5 now save it below that div give it a class name equal to background color will be secondary color so let's say BG Dash secondary color display will be Flex I want to add some padding vertically and then border radius so let's say rounded Dash LG overflow will be hidden save it next I want to Target this div so give it a class equal to I want to add Flex basis so let's say basis dash one third position will be relative then let's target Ms tag so in here let's say class equal to Position will be absolute I want to add some width so let's say w Dash 28 I want to add some bottom so let's say minus bottom Dash 4 and minus left Dash 4 save it we can't see the image so reload it and then you see the image sometimes it's happened next let's target this div in here let's say class equal to I want to add some margin bottom so let's say mb-2 let's target this H4 tag give it a class equal to I want to add a custom class so let's say card underscore underscore title save it and let's copy this card title let's go into the input.css file I will scroll down and inside this utilities object I want to add home title utility classes to the card title so in here let's say comma Dot and then paste that card title now save it okay I want to decrease the font size so below that let's say Dot card title curly brackets apply text Dash Excel now save it now it's looking nice let's go into the index.html file let's target this paragraph give it a class equal to takes Dash extra small save it finally I want to Target this anchor tag let's say class equal to text color will be black color and cursor will be pointer now save it now our category card is looking good now I want to create two more cards so let's copy this entire div and paste it below in here let's say card 2 this card will have a red background color so in here let's say BG Dash red color and then I want to change the image so Source will be image slash snack one again let's copy this entire div and paste it below this card will have a green background color so in here let's say BG Dash green color and I want to change the image so the source will be image slash beverage 2 dot PNG now save it let me look at the actual design it's looking very nice but we want to change the link color that should be Card 3 and in here let's say text Dash secondary color also in here let's say text Dash secondary color now save it it's looking great now we can focus on the medium screen and app keep in mind we want it as a row on the medium screen and app just like that so I will scroll up and in here let's say MD colon Flex direction will be Flex row now save it let's target this first card in here let's say MD colon Flex dash one let's copy this utility class and paste it for the second card and for the third card now save it now it's looking very nice on the medium screen and up also on the mobile screen in this position our category section is complete [Music] let me look at the reference design now we can focus on the promo section basically we have two cards each with an image and then a subtitle title description and a buy online Link so let's write the HTML for that let's have a section tag with the ID of promo inside it let's have a div and inside it let's say card one below that let's have a div inside it let's have an image tag and the source will be image slash promo one dot PNG and ALT will be promo image below that let's have a div inside it let's have a paragraph tag let's copy the subtitle and paste it here below that let's have an H3 tag let's copy this title and paste it here below that let's have one more paragraph tag let's copy this description and paste it here below that paragraph tag let's have an anchor tag href will be hashtag and in here let's say buy online now save it you can see our raw content let's add some style first I want to Target this div so give it a class equal to container display will be Flex Flex column and GAP 5 save it give it a class equal to I want to add background color with BG Dash primary color light display will be Flex Flex Direction column I want to add some padding and Border radius save it you can see the background color padding and Border radius now I will Target this image so give it a class equal to I want to add some width MX Auto save it now let's focus on this area so let's target this tip give it a class equal to I want to add some space horizontally so let's say space Dash Y dash 2 pt5 save it in here let's say class equal to text extra small and text color will be secondary color I will Target this H3 tag give it a class equal to in here I will add a custom CSS called title which we have already created inside our input.css file so save it next let's target this paragraph so give it here a class equal to paragraph and finally I want to Target this anchor tag so let's say class equal to text will be extra small and text color will be secondary color now save it and finally it's looking very nice now I want to create one more card so let's copy this entire div and paste it below in here let's say card 2 and the image will be promo Dash 2 now save it I will scroll down and you can see our second card let me look at the reference design as you can see when I hover the animation makes the burger move up and down infinitely so let's add the animation we already created the animation inside our tailwind.config.js file in here so let's add the animation I am going to Target the first image and in here let's say hover colon animate Dash moving y now save it let's test this out and it's working let's copy this hover effect and paste it here save it let's test this out and you can see the hover effect next we can focus on our medium screen and app first I am going to Target this div so on the large screen and app Gap will be Gap dash 10 and flex direction will be row save it nice let's target this card number one on the medium screen Flex direction will be Flex row item Center and on the large screen and app Flex direction will be Flex row reverse and flex 1. let's copy those properties and paste it for the second card let's target this image on the medium screen and app I want to add margin horizontally so let's say MX-5 let's copy that utility class and paste it right here now I want to Target this div let's say MD colon pt-0 let's copy it and paste it right here now save the changes and as you can see it's look very nice all on screen and in this position our promo section is complete foreign essentially it contains an image and after that some content so first let's write the HTML for that so below that promo section let's have a section tag with the ID of about inside it let's have a div and inside it let's have one more D and inside the div let's have an image tag source will be image slash about dot jpg alt will be about image below that div let's have a deep inside it I am going to create an H2 tag a div with the class name of separator a paragraph tag an unorder list and inside that unorder list I am going to create four list item and finally inside this div I want to add an anchor tag hit enter let's copy this title and paste it here let's copy this paragraph and paste it here copy these text and paste it here copy these text and paste it here again and finally Health protocol and in here let's say about us you can see the check icon so we have to add inside this list item so let's go to the icon.txt file I am going to copy this icon and paste it inside the list items now save it I will scroll down and you can see our raw content let's focus on our actual design I will scroll up first let's target this day give it a class equal to container display will be Flex Direction column Gap 10 save it let's target this div give it a class equal to Flex 1 Let's copy this class and paste it here now save it I will Target this image let's say class equal to I want to add border radius so let's say rounded LG save it next let's target this Ace to tag give it a class equal to I am going to add a custom class so let's say section underscore underscore title and let's copy this custom class and save it let's go into the input.css file I want this utility classes so in here let's say comma dot section title save it I want to decrease font size so below that let's say dot section title curly brackets apply text Dash 3XL now save it now it's looking good let's go into the index.html file now we can focus on our paragraph So in here give it a class equal to paragraph save it now we can Target our on order list so in here let's say class equal to display will be grid great columns 2 I want to add some padding vertically and some space vertically now save it let's target the list item give it a class equal to text extra small and text color will be paragraph color and the icon color will be secondary color now save it I will scroll down let's copy this class of list item and paste it for the every single list item again let's copy this icon color and paste it for the every single check icon now save it now it's looking nice next we want to focus on our button so in here let's say class equal to BTN and then BTN Dash primary now save it we don't have the space between the list and the button so I am going to move the anchor tag below that unorder list now save it now you can see some space now let's focus on our medium screen I will scroll up and in here just add MD colon Flex Dash row now save it now it's looking good on the medium screen so in this position our About Us section is complete [Music] let me look at the reference design now we can focus on our menu section first let's focus on this area so below that about section in here let's have a section tag with the ID of menu inside it let's have a div with the class of container inside it let's have on more deep and inside that div I want to create an ace to tag plus deep with the class of separator plus a paragraph with the class name of paragraph and finally on more div hit enter copy this title and paste it here copy this paragraph and paste it here inside the div let's have an unorder list and inside that unorder list I want to create four list item hit enter in here let's say all this one will be food this one will be snack and finally this one will be beverage now save it I will scroll down and you can see our content let's add some style first I want to Target this div so give it a class equal to I want to add maximum with 448 pixel so let's say Max Dash W Dash MD then I am going to add margin horizontally so let's say MX Auto and text will be Center now save it now I want to Target this title so in here let's say class equal to section underscore underscore title save it also I want to Center this separator so in here let's say MX Dash auto save it now let's target our tab let's target this evil tag so give it a class equal to display will be Flex Flex wrap justify Center Gap 3 and finally I want to add padding vertically so let's say POI 10 now save it give it here a class name equal to BTN space BG Dash primary color light now save it let's copy this class and paste it to the other list items save it let me look at the reference design notice that when the foot button or snack button is click it becomes active with the background color changing to secondary color and the text color changing to Black so how can we make that happen well to achieve that we need to use JavaScript so first I want to Target this list item to Target the list items I need to add a class to this div so that class will be tabs underscore wrap and in here I want to add a custom class let's say active now save it let's go into the input.css file I will scroll down and at the very bottom right here let's say dot tabs underscore wrap and then UL Ali first I want to add hover effect so let's say hover and then I want to add active class so let's duplicate this line and in here let's say Li DOT active curly brackets apply I want to add background color so let's say BG Dash secondary color also I want to add text color so let's say text Dash black color now save it now you can see our active class and the hover effect now what I am going to do is I am going to add a JavaScript function so let's go into the main.js file I will scroll down and in here let's say constant tabs equal to document Dot query selector all because I want to Target four list items and in here let's say dot tabs underscore wrap space ul and then Li below that I want to Target them individually by applying the for each method so let's say tabs dot for each and then tab Arrow function now we will get each individual link so in here let's say tab dot add event listener and the event will be click comma Arrow function now when I will click on this list item we want to remove the active class from every single list item so in here let's say tabs dot for each then tab Arrow function so to remove the active class in here let's say tab dot class list dot remove and then active class and then add the active class where I click so below that in here let's say tab dot classlist dot add and then active class now save it and as you can see it's working perfectly next now let's focus on this menu list area first I want to write HTML for that so let's go into the index.html file and below this div right here let's have a new div inside it I want to create an UL tag and inside that evil tag let's have a list item hit enter inside this list item let's have a div inside that div let's have an image tag The Source will be image slash burger1 and the Vault will be food image below that div let's have a new div inside it let's have one more div and inside it let's have an H4 tag with the class of card underscore underscore title plus a paragraph tag with the class of paragraph hit enter now let's copy this title and paste it here let's copy this paragraph and paste it right here below that div let's have a paragraph tag with the class name of text Dash secondary color let's copy this price and paste it right here now save it now you can see our raw content let's add some CSS first I am going to Target this evil tag so let's say class equal to display will be grid grid columns 1 Gap pipe next let's target this day so give it a class equal to I want to add some height display will be grid Place item Center I want to add background color so let's say busy Dash primary color light let's add some border radius so rounded 3XL I want to add some hover effect so let's say hover colon BG Dash secondary color transition will be is linear and duration will be 200 now I am going to Target this image stack give it a class equal to I want to add some width so let's say w Dash 40 then I want to add hover effect so let's say hover colon scale Dash 110 is linear duration will be 200 now save it let's target this div give it a class equal to pt-5 in here let's say class I want to add margin bottom so let's say mb-2 now save it now we can focus on the large and medium screen first let's target this evil tag in here let's say MD colon read columns will be 2 and for large screen and app grid calls will be 4 and GAP will be 12. in here let's say LG colon I want to add some height so let's say H dash 40 let's target this image in here let's say MD colon with 48 and for the large screen with 24. now save it now it's looking very nice let's add four more food images so in here let's say food comment out now let's copy this list item and paste it below four more times I will scroll up this image source will be Burger 2 this one will be Burger 3 this one will be Burger 4 and finally Burger 5. now save it now it's looking very nice on our large screen also on our medium screen and finally on our Mobile screen now let's add our snack item so below that list item in here let's say snack comment out I am going to copy on list item and paste it below let's copy this title and paste it here in here let's say snack one dot PNG now save it I will scroll down and at the very bottom as you can see our snack item I am going to copy this list item and paste it below 5 more times I'll scroll up this one will be snack to snack three Snap Four snack five and finally snack six now save it and you can see our snack items below that I want to add beverage items so let's say beverage comment out let's copy on item and paste it below in here let's say beverage one let's copy this title and paste it here let's copy this list item and paste it below four more times I will scroll up and in here Source will be favor S2 Beaver is 3 waiver is 4 and finally waiver is 5. now save it I will scroll down and you can see our beverage items very nice now one thing I want to show you that if I click any tab such as snack it will filter the snack items similarly if I click on this food tab it will filter the food items so to achieve this functionality we need to add JavaScript again so first I want to Target all the items so I will scroll up and in here let's say class equal to item underscore rap and then I will Target the food item because this is our food list so in here let's say food let's copy this class and paste it below to the other list items again I will scroll down let's target these list items and paste that class and let's change the food to snack again I will scroll down let's target this beverage list items paste that class and let's change it to beverage now save it now the question is if I click on this tab then how will I know that I have clicked on this tab so I am going to add on more property inside our this list items called Data Dash tabs equal to this one will be all similarly this one will be food this one will be snack and finally this one will be beverage now save it let's go into the main.js file and below that right here let's say constant tab valve equal to tab dot get attribute data Dash tabs below that let's say console.log tab Val now save it so what we have done is I will scroll up and then let's go to the inspect role and then console now if I click on any tab that gives us the data tab value so let's try this out you can see food which is coming from here let's change it to food dot dot dot now save it let's click on it again and you can see food dot dot dot similarly if you click on the snack that gives us the data tab value that means snack now what we will do is now let's go into the main.js file now I want to Target all items so let's say cono stand all equal to document dot query selector wall in here let's say dot item underscore rap which is coming from here again I want to Target food items so let's duplicate this line in here let's say Foods and class will be fourth then let's duplicate two more times in here let's say beverages in here let's say beverage and finally let's change it to snacks and in here let's say snap now what we will do is I will add if else condition so let's say if tab valve equal to food then first I want to remove all items so let's say all dot for each item Arrow function itm dot Style dot display equal to none and then I want to show only food items so let's copy this for each method and paste it right here this one will be foods and display will be block else if let's copy this one and paste it here else if travel will be snack then I want to show only snack items similarly else if tab Val equal to beverage then I want to show only beverage items else I want to show all items now save it now let's test this out and you can see it's working perfectly very nice and in this position our menu item section is complete let me look at the reference design now we can focus on our review section as you can see the sweeper animation to achieve that we will need to import the sweeper link so open up a new tab and let's go to the sweeperjs.com website and click on this getting started button I will scroll down let's copy this CDN I will scroll up and paste it here let's copy this script tag I will scroll down and paste it right here now let's write the HTML for that review section so in here let's have a section tag with the ID of review inside it let's have a deep with the class of container now notice that we have already done this style okay let me show you what I mean I will scroll up the style of this area and the style of this area are the same so what I am going to do is let's copy this entire div and paste it inside this container div let's copy this title and paste it here we don't need this div anymore so I'm going to remove this div now save it I will scroll down and it's looking nice below that div let's have a new div with the class of sweeper inside it let's have an UL tag with the class of sweeper Dash wrapper inside that UL tag let's have a list item with the class name of sweeper Dash slide inside that list item let's have a div inside the Deep let's have a paragraph with the class name of paragraph hit enter in here let's say lore M 17 hit enter below that paragraph tag let's have a div inside it let's have an image tag plus one more div inside the div let's have a P tag and below that on more P tag hit enter image source will be image slash review on and the Vault will be review image inside this P tag let's say John Doe and in here let's say designer let's go into the icon.txt file let's copy this icon and below that deal let's paste it here now save it let's add some style first I want to add the background color so I will scroll up let's target this section tag give it a class equal to BG Dash primary color light I want to add some padding with py-20 save it and you can see the background color now I am going to Target this div in here let's say POI 10 then I am going to Target this div so give it a class equal to display will be Flex Flex Direction column Gap 5 BG Dash primary color border radius will be rounded select the large one and finally I want to add some padding with e-6 save it I will scroll down let's target this diff give it a class equal to display will be flex and itm Center give it here a class equal to I want to add some width with W dash 12 and height is dash 12 and Border radius will be 50 so let's say rounded full now save it next in here let's say class equal to I want to add some margin left with ml-2 let's target this paragraph give it a class equal to font family will be assault text transfer will be uppercase leave it here a class name equal to paragraph now save it I want to increase the font size of this icon so in here let's say text Dash 4XL and text color will be secondary color and finally email Dash Auto Now save it now the review card is looking very nice let's copy this list item and paste it below four more times I will scroll up in here image source will be reviewed Dash 2 this one will be 3 this one will be 4 and finally this one will be 5. below that you will tag let's have a div with the class name of sweeper Dash ination hit enter now save it now I want to add animation so let's go into the sweeper documentation here I'll scroll down and then as you can see initialize sweeper I am going to copy this code I'll scroll down and below that let's have a script tag and inside that script tag paste that code right here we don't need this property so I am going to remove it also we don't need this now this sweeper class is coming from here and also this super pagination class is coming from here now save it let me look at the actual design and you can see in the pagination I want to add more properties of the sweeper so let's go to the API page I will scroll down let's copy this property and paste it here in this case space between will be 30 again I will scroll down let's copy this autoplay property and paste it below delay will be 3 second below that let's say disable on interaction will be false I will scroll down let's copy this breakpoint property and paste it below in our case in here let's say 640 pixel that would be 640 pixel in here let's say 768 pixel and finally in here let's say 1024 pixel we don't need this space between property so I am going to remove it because we already mentioned it up here in here let's say slide Square view will be 1 in here will be two and finally in here will be three inside that pagination object I will add one more property let's say clickable will be true now save it let me look at the actual design now it's looking good I want to add more property so below that pagination let's say grab will be true now save it now I can grab them also on our Mobile screen it's looking nice so in this position our review section is complete now let's focus on the contact Section I will scroll up and in here let's have a section tag with the ID of contact inside it let's have a div inside that div let's have one more div inside the div let's have an ace to tag class a paragraph tag hit enter let's copy this title and paste it here let's copy this paragraph and paste it right here below that div let's have one more div inside it let's have an input tag plus an anchor tag hit enter input type will be email placeholder will be email address in here let's say subscribe let's go into the icon.txt file let's copy this icon and paste it here now save it you can see our raw content let's add some style I am going to Target this section tag give it a class equal to BG Dash secondary color I want to add some padding so let's say py-16 in here give it a class equal to container display will be Flex Flex Direction column Gap 5 for medium screen and app items will be Center and flex will be row save it let's target this div give it a class equal to I want to add some space vertically so let's say space Dash Y dash 4 for the medium screen and app Flex one let's target this title give it a class equal to section title text color will be black color let's target this paragraph give it a class equal to text will be SM now save it now I want to Target this div so in here let's say class equal to display will be Flex Flex direction will be column Gap three for the medium screen and app Flex direction will be row and flex 1. I am going to Target this input in here let's say class equal to I want to add some padding with p dash 2 text color will be black color rounded LG outline none and for the medium screen and app width will be full now save it finally let's target this anchor tag give it a class equal to display will be Flex align items will be Center so let's say item Center justify content Center so let's say justify Dash Center Gap to BTN then I want to add background color so let's say BG Dash black color and I want to add some hover effect so let's say hover colon opacity 0.75 pixel now save it now it's looking very nice on the mobile screen and also on the large screen so in this position our contact Section is complete [Music] let me look at the reference design now we can focus on our footer section so inside this footer tag let's have a section tag with the class name of footer inside it let's have a div with the class name of container inside it let's have an UL tag with the class name of grid calls on items start Gap 5. pb-5 for the medium screen and app grid calls will be 2. hit enter inside that UL tag let's have a list item inside it let's have a d with the class name of space Dash Y dash three inside it let's have an anchor tag with the class name of text Dash 4XL font or sold and text transform will be uppercase inside it let's say bar and then span tag uard in here give it a class equal to text will be secondary color below that a tag let's have a paragraph tag with the class name of text extra small let's copy this paragraph and paste it here now save it let's go into the actual design and you can see the burger and the paragraph below this list item let's have one more list item inside it let's have a div with the class name of flex Flex column and Gap 3. inside it let's have an H3 tag with the class name of text large uppercase and font will be ushold hit enter let's copy this title and paste it here below that H3 tag let's have an anchor tag with the class name of text extra small let's add some hover effect text will be secondary color and we want to add 4 anchor tags so in here let's say asterisk and then 4 hit enter let's copy this FAQs paste it here let's copy this privacy policy and paste it here again let's copy this term and condition paste it here and finally contact now save it and you can see our support area which is looking good next below that list item let's have on more list item give it here a class equal to space Dash Y dash 8 inside it let's have a div with the class name of space Y dash 2 inside it let's have an H3 tag with the class name of text LG text transform uppercase and font will be OS Alt in here let's say form below that S3 tag let's have a paragraph tag with the class name of flex item Center Gap 2 and text extra small inside it I want to add a phone icon so let's go into the icon.txt file let's copy this phone icon and paste it here below that in here let's say plus 1 triple zero triple zero double zero double zero now I want to duplicate this tape so let's copy the entire div and paste it below in here let's say email I want to change the icon let's go into the icon.txt file I am going to copy this icon and paste it here and in here let's say Burger dot info email.com now save it now you can see our phone and email area now we want to change the color of this icon and also we want to increase the font size so in here and here let's say text large and text color will be secondary color now save it now this area is looking nice now let's focus on this address and follow us area so let's duplicate this list item and paste it below in here let's say address let's copy this paragraph and paste it here in here let's say follow us we don't need this paragraph so I'm going to remove it in here I want to add a div with the class name of space Dash x-3 inside it I want to add these icons so let's go into the icons dot txt file let's copy these three icons and paste it here let's add some styles for those icons so text will be large cursor will be pointer and text color will be secondary color I want to add some hover effect so let's say hover colon minus Translate y 1 is in duration will be 200 now save it it's looking good but we need to change the icon of this address so I will scroll up and in here let's say location dot now save it now you can see the location icon finally we can focus on this copyright area so I will scroll down and below this you will tag let's have a d with the class name of flex Flex column item Center border top border color will be primary color light I want to add some padding horizontally with POI Dash 5 for medium screen and app Flex direction will be Flex row and justify content will be space between so let's say justify between inside it let's have a paragraph with the class name of paragraph let's copy this paragraph and paste it here let's duplicate this paragraph again let's copy this paragraph and paste it right here now save it now it's looking nice now our footer section is looking very nice let's focus on large screen it's not looking good back to our code I will scroll up and inside this evil tag let's say for the large screen and app read columns will be 4. now save it back in the browser now it's looking very nice so in this position our footer section is complete [Music] now we can focus on this scroll up button when I click here it takes me to the top and the button disappears but when I scroll down the button reappears now the question is how does this work well let's go to the inspect tool now select this scroll up button here is the anchor tag now if I scroll you will see the bottom property changes where the ID is scroll up again if I scroll down as you can see the bottom property is changing let's see again to achieve that we need to add JavaScript back to our code first Iron to create scroll up button so in here let's have a anchor tag href will be hashtag give it a class equal to Position will be fixed right for bottom four I want to add background color so let's say BGE secondary color Shadow is small display inline block I am going to add padding horizontally and also vertically rounded full text large text color will be black color I want to add Z index so let's say j dash 50 and then I want to add hover effect so let's say hover colon minus Translate y1 and then I want to add transition so let's say is in and duration will be 200 and inside this anchor tag I am going to add Arrow up icon so let's go into the icon.txt file let's copy this icon and paste it right here now save it back to our code let me look at the actual design here is the button now if I click on this button it takes me to the top but it happened quickly back to our code let's go into the input.css file and inside this base object let's say HTML and then apply and in here let's say scroll will be small now save it Let's test this out if I click on this icon it's working smoothly very nice now I want to add JavaScript back to our code let's go into the index.html file at first in here I want to include bottom minus 50 percent so let's say minus bottom and then 50 percent that means half which means the scroll button will disappear now save it now you can't see the button now I want to Target this anchor tag so to Target this anchor tag I am going to add an ID and the ID will be scroll Dash up now save it let's go into the main.js file and right here I will say window dot add event listener and the event will be scroll and then I am going to add a function called scroll up now let's create that function in here let's say constant scroll up and then Arrow function first I want to Target scroll up button so let's say constant scroll up button equal to document dot get element by ID and then scroll Dash up and this ID is coming from here below that let's say if this Dot scroll y greater than and equal to 250 then first I want to remove this utility class so in here let's say scroll up BTN which is coming from here dot classlist dot remove and then minus bottom 50 percent so this line will remove this utility class like this now let's duplicate this line and in here I want to add bottom for utility class now this line will add this utility class just like this but at the very first time I want to keep it like this else let's copy these lines and paste it right here and here I want to add this utility class and remove this utility class now save it back in the browser now you cannot see the scroll up button but if I scroll down you can see the scroll up button right here and if I click on it it takes me to the top very very nice and I will do the same thing for the header section that means if I scroll down you can see there is a border and if I scroll up there is no border so to achieve that let's copy this entire code and paste it below we need to change the function name in here let's say scroll header then we have to Target the header section so let's go into the index.html file I will scroll up you can see the header ID in here so let's copy this ID let's go into the main.js file and paste it right here and let's change it to header in this case this dot scroll y greater than and equal to will be 50 let's go ahead and change this scroll up button to header which is coming from here and in this case we need to add border bottom also we will add border colors so let's say border Dash secondary color else we want to remove utility class so let's copy this utility class and paste it right here and this should be scroll header so let's copy this function and paste it right here now save it now let's test this out if I scroll down you can see the border and if I scroll up there is no border very very nice [Music] as you can see on this website there is a moon icon over here if I click on this Moon icon a couple of things will happen the website will switch to dark mode and the moon icon will change to a sun icon the dark class will be added to the HTML tag and let's go into the application as you can see the dark mode will be set in the local storage again if I click on the sun icon it will turn the website back to light mode the sun icon will change to a moon icon the light mode will be set in the local storage and finally the dark class will be removed from the HTML tag to achieve those things first I want to go to the Tailwind CSS documentation and search for dark mode now click on it I will scroll down as you can see it mentions adding dark mode colon class inside the config file so let's go ahead and do this let's copy this line back to our code let's go into the tailwind.config.js file I will scroll up and below that content property paste that dark mode property now save it and close it up additionally we can include a utility class like this and then we need to add JavaScript so back to our code let's go into the input.css file and inside this body tag in here let's say dark colon and then I want to add background color so let's say BG Dash dark color and this dark color is coming from here now say we next we have to add JavaScript so let's go into the main.js file I will scroll up and in here first I want to Target HTML tag so let's say conostand HTML equal to document dot query selector and then HTML below that let's target theme button so let's go to the index.html file and inside this header section I will scroll down here is the icon tag so give it an ID and ID will be theme Dash toggle now save it let's go into the main.js file now I am going to Target that Moon icon so let's say cono stand theme button equal to document dot get element by ID and then in here let's say theme Dash toggle below that let's say theme vtn dot add event listener and the event will be click then Arrow function first I want to add dark class inside this HTML tag so in here let's say HTML dot classlist dot add and then dark class next I want to change the moon icon to the sun icon so let's say theme BTN dot classlist dot replace let's go into the index.html file and let's copy this Moon icon class and paste it right here so we want to replace moon to Sun so in here let's say RI Sun line and finally I want to set dark mode in the local storage so let's say local storage dot set item and then more comma mode will be dark now save it back in the browser Let's test this out if I click on this Moon icon it switches to the dark mode the icon changes to a sun icon let's go to the inspect tool the dark class is added to the HTML tag and finally the dark mode is set to the local storage very nice now if I reload it the dark mode is gone to solve this problem we need to add if condition okay let me show you what I mean up here below that theme button let's say if local storage dot get item in here let's say mode equal to dark then I want to add these things let's copy these lines and paste it right here now save it and you can see the dark mode if I reload it you will still see the dark mode very nice now what I am going to do is when I click on the sun icon it will turn the website back to the light mode and the icon changes to the Moon icon and I want to set light mode to the local storage and finally I want to remove this dark class from the HTML tag so let's go ahead and do that first I want to organize our code so in here let's say constant dark mode equal to Arrow function let's cut those lines and paste it right here now I want to call this function in here so let's say dark mode similarly let's get rid these lines and call the dark mode function let's go ahead and in here let's say if local storage dot get item mode equal to light then I want to call dark mode function otherwise I want to run light mode function similarly in here let's say else we want to run light mode function we don't have this function so let's create it I am going to copy dark mode function and paste it below in here let's say light mode we want to remove dark class from HTML tag so in here let's say remove then we want to change the sun icon to the Moon icon and finally we want to set light mode to the local storage now save it back in the browser now click on it well it's not working let's go to the inspect tool and then console okay cannot access light mode before initialization back to our code in here I am not going to be using Arrow function so I am going to remove it and in here let's say function dark mode parenthesis and then curly bracket similarly in here let's say function light mode parenthesis and then curly bracket now save it let's try this again if I click on this Moon icon it's working and then if I click on the sun icon it turns the website back to the light mode perfect now I want to add more CSS properties to the dark mode to make it look more attractive first let's focus on the number back to our code let's go into the index.html file I will scroll up in here let's say dark colon BG Dash dark color let's copy this utility class and paste it right here now save it now our header is looking nice I will scroll down let's focus on our promo cards I will scroll down in here and in here let's say dark colon BG Dash dark color light now save it now it's looking very nice I will scroll down in here we should add a separator so in our about section that should be separator now save it now you can see the separator very nice I will scroll down let's focus on our menu section I will scroll down first I want to Target this list item so in here let's say dark colon BG Dash dark color light now let's copy this utility class and do the same thing for each list item I will scroll down I want to Target this list item in here also I want to add busy dark color light also I want to add hover effect so let's say dark colon hover colon and the background color will be secondary color now let's copy those utility classes and do the same thing for each list item now save it now our menu section is looking great I will scroll down now let's focus on this review section back to our code I will scroll down let's target this section tag in here let's say dark colon BG Dash dark color light let's go ahead and I will scroll down let's target this deep in here let's say dark colon BG Dash dark color let's copy this utility class and do the same thing for each list item now save it now our review section is looking nice the contact Section already looks good so we don't need to add any CSS properties now let's target our footer section we need to change border color I will scroll down and in here let's say dark colon border Dash dark color light now save it now our footer is looking good and in this position our dark light mode is complete [Music] let me look at the reference design now we can focus on our active link if I click on this about a snap item it turns secondary color and it takes me to the about a section similarly menu section review section contact Section home section so let's do that back to our code I will scroll down and in here I am going to add active link function so let's say constant active link and then Arrow function first I am going to Target each section tag so let's say constant sections equal to document dot query selector wall and in here let's say section similarly I am going to Target each enabling so let's duplicate this line let's change it to links and in here let's say dot nav underscore underscore link which is coming from each anchor tag below that let's say let current equal to home below that I am going to Target each section so in here let's say sections which is coming from here and then I am going to Target them individually by applying the for each method and inside this for each method let's say section Arrow function constant section top equal to section dot offset top below that let's say if this dot scroll y greater than equal to section top minus 60 then current will be section dot get attribute in here let's say ID after that I am going to Target each nav link so let's say nav links dot for each item Arrow function first I am going to remove text color from each link so let's say item dot class list dot remove and then in here let's say text Dash secondary color then I want to add text color to the current section so below that let's say if item dot href dot includes current which is coming from here then I want to add secondary color so let's copy this line and paste it right here and then let's change it to add and finally let's say window dot add event listener and then event will be scroll and the function name so let's copy this active link function and paste it right here now save it let's copy this text color let's go into the index.html file and at the very first time I want to add secondary color to the home link so paste it here now save it back in the browser now let's test this out if I click on this About Us section hit on secondary color and it takes me to the About Us section very nice similarly menu section review section contact Section home section it's working perfectly [Music] let's go to the final design now I am going to add the animation to achieve that I am going to import scroll reveal Library so open up a new tab and go to the scroll reveal.js.org click on this guide button let's copy this script tag I will scroll down and paste it right here now save it I will scroll up first I am going to Target home image so I am going to add a custom class called home underscore underscore image now save it let's go into the main.js file I will scroll down and in here let's say constant Sr equal to scroll reveal and then inside it let's say origin will be top in distance will be 60 pixel duration will be 2.5 second And Delay will be 400 that means 0.4 second below that let's say Sr dot reveal and in here I am going to use that custom class so let's say home underscore underscore image now save it let's test this out I am going to reload the page and it's working now let's focus on this content section let's go into the index.html file and in here I am going to add a custom class called home underscore underscore content now save it let's go into the main.js file let's duplicate this line and let's change it to home underscore underscore content and then in here I want to add origin Property so let's say origin will be bottom now save it back in the browser just reload the page and you can see the animation beautiful similarly let's focus on our category section first let's go into the index.html file I am going to add a class to each category card called category underscore underscore card let's copy this class name and save it let's go to the main.js file and below that let's say Sr dot reveal and then the class name that means category underscore underscore card and then I want to add interval property so let's say interval 0.3 second now save it and it's working similarly we can create animations for the other sections so back to our code first I am going to add custom class so let's target this card and in here let's say promo underscore underscore card one let's copy this class and paste it here and in here let's say two below that let's target about section I am going to Target image div so in here let's say about underscore underscore IMG let's target the content so in here let's say about underscore underscore content below that let's target the menu section I will scroll down and give it here a class equal to menu underscore underscore items let's go ahead and Target the review section in here let's say customer underscore underscore review and finally I am going to Target footer we already have the footer class so we don't need to add any class now save it let's go into the main.js file first I am going to Target promo section so let's copy this line and paste it below in here let's say promo underscore underscore card dash 1 and the origin will be left let's duplicate this line in here let's say promo card 2 and let's change it to write below that I am going to Target about a section so let's duplicate this line in here let's say about underscore underscore IMG and the origin will be bottom let's duplicate this line in here let's say about content and the origin will be top next I am going to Target menu items so let's duplicate this line and in here let's say menu underscore underscore items origin will be left next customer review so in here let's say customer underscore underscore review and the origin will be right and finally I am going to Target footer so in here let's say footer and let's delete this property footer will be using our default properties that means these properties now save it back in the browser reload it and you can see the animation [Music] now we are going to learn how to deploy a website to netley file so open up a new tab and go to netlify.com website netlify is a cloud-based platform that allows you to deploy and manage static websites quickly and easily create a netify account I already have an account once you have login you will be taken to the netlify dashboard click on the site tab now we have to drag and drop our Burger website folder to deploy our Burger website on letify we need to make some changes to the file structure initially we will move the index.html file from The Source folder to the root folder Additionally the image folder input.css file and main.js file will also be moved to the root folder since we don't need the source folder anymore we will delete it also we don't need this node modules folder so I am going to delete it one final thing we have to do is let's go into the tailwind.config.js file we don't need this Source folder so let's remove it now save it open up terminal and press Ctrl C now type npm run watch okay we are getting error let's go into the package.json file we don't need the source folder anymore so let's delete it now save it and type again npm run watch now click on this go live button now our website looks good so we are ready for deployment now I am going to drag and drop our final folder inside here now click on this open production deploy button and there you go we have successfully deployed our Burger website on netlify now we can change our URL so let's go into the netlify website now click on this options button and then deploy settings then domain management I will scroll down click on these options and then edit site name let's change it to light code Burger website now save it and you can see our new URL just click on it and you can see our new URL so in this position our website is complete thanks for watching this video hope you enjoyed it please give it a thumbs up and hit that like button your support means a lot to me also I would love to hear your thoughts and feedback in the comment section below let me know what you liked about the video or if you have any suggestions for the future content if you have not already I highly encourage you to subscribe to my YouTube channel by subscribing you will stay updated with all the latest videos just click that subscribe button and turn on the notification Bell so you never miss an update thanks again for watching and supporting my channel I appreciate each and every one of you see you in the next video

Channel: Light Code

Views: 19,217

Keywords: tailwind css cdn, tailwind css card, tailwind css tutorial, tailwind css templates, tailwind css components, tailwind css cheat sheet, tailwind css vs tailwind ui, tailwind css, learn tailwind, web development, javascript, how to use tailwind, tailwindcss tutorial, tailwindcss 2023, tailwind css 2022, tailwind tutorial, responsive design, deployment, tailwind, tailwindcss, css, tailwind css project

Id: qjch8tt7Vyk

Length: 142min 58sec (8578 seconds)

Published: Mon Aug 07 2023