Web Development Tutorial | HTML, CSS, JavaScript Project | Edureka

Key Takeaways

[Music] hello everyone and welcome back to ura's YouTube channel this is the part two of our web development tutorial series and in the previous video we have covered the basics of HTML CSS and JavaScript we have also built a simple form using these Technologies and now in this next part we are going to take things to the next level by creating an exciting project that will be a fully functional food ordering website we will be combining everything that we have learned so far with new Concepts to make this project so before we get started make sure to subscribe to our YouTube channel and hit the Bell icon so you never miss out on latest tech content from Eda also remember to check out Eda website for our training and certification courses the link is in the description box below so now let's get started with the development of our website so our first step is to open a folder into our Visual Studio code here I have opened my first project folder in my visual studio code and the next thing I have done is I've have added all the images that I'm going to need to create this project so I've added all this images into this file so now after adding all the images into the file the next step is to create the index.html where we are going to write the HTML code so here I have created the index.html so here is my index.html the next thing I'm going to do is I'm also going to create my stylesheet so this is my CSS file and inside index.html we'll start our coding so here I have added the head section so inside the head section the first thing I've have added is the title tag this is the title that we have given to our website okay the next thing that I've added is the links so these are the links that will help us to you know custom the fonts or choose the icons or you know apply the animations and transition in our web page so let's go through the links so the first link is from Google itself it is used to custom the fonts again the second link is from Google itself it is used to give material icons like whenever I want to add any kind of icon in my web page I'm going to fetch that icon from materials icon so the third link is also for customizing the fonts as it says awesome fonts so this will also help us to customize the fonts now the third link and the fourth link these are basically the JavaScript libraries and they will help us to provide the animation and transitions to our web page the elements that we are going to create will add some animations and transitions from JavaScript library and the last link is our custom style sheet so that's it for the head section these are the things that I have added in my head section so after the head section we will create our body section inside the body section the first thing that we are going to develop is navigation bar because that will be the header of our web page so for developing our navigation bar I have opened a n tag here I have given the ID after that we'll add the logo and this is my logo so basically I have given the reference from here from this images so this is my logo and the alt attribute that we are going to provide is the website name right after that in navigation bar we are going to add some elements for that we have to open a unordered list tag so inside the unordered list we have created One Division for the home section and then we have added this span tag so this span tag will basically fetch the icon that we have written here from the materials icon so I'll just do it as home now the list icon will be home as we know we know there is list and then they come the list item because we have already covered these all things in our first part of the video so here I have given the index.html reference because whenever the user will click on home they will be redirected to the index.html page only so that is where we are going to create the navigation bar and everything so they'll be staying on that page only where they are clicking so the first element on the navigation bar will be home like that only we'll create the About Us section so when whenever I'll be creating the About Us section I'll just add here the link till then I've added hashtag again after about a section we are going to create the meil section whenever I'll be creating the meal section I'll be adding the page here again we are using the span tag here similarly we'll be doing it for Reserve table and then again for contact us and then again for the card value so like this we have added these many elements in our unordered list so so after this we'll be closing our unordered list and then we'll be opening one more div tag and I have provided some inline styling here so this diff tag will be basically for the login button I also want One login button on my navigation bar right here so for that also I have created one span and I'll be adding the login page once we'll be creating the login page so after this now the navigation bar development is completed so till here we have completed the navigation bar development so you can just pause and go through the code and if there is any down you can comment that in comment section so after that I have added one JavaScript function so the function that I want to add in my web page is whenever user Scrolls the home section there should be a transition in the navigation bar so for that I have created one function here so this basically says that scroll function will be added to the navigation bar when the user Scrolls the screen more than than 50 pixel then it will be added and if the scrolling is less than 50 pixel it will be removed otherwise it will be added to the NV bar so this is what it says we have to add this code function to our navigation bar and these are the conditions that we have kept here so that's it for the navigation bar now we'll move to CSS and we'll style our navigation bar so here is the styling of the navigation bar so first of all I would like to add one Point like we all know about the styling features now we are familiar with the basic styling feature what is Box model and display and Alignment background colors and colors so now apart from this styling techniques you can also learn some more styling techniques by experimenting with styling techniques just Google The Styling techniques you want to add to your web page and just learn how to apply them so again for our navigation bar I'll show that from here our navigation bar styling starts so as always we have added display as Flex the alignment of the items in the center we have added the background color color and padding the position we made sticky we have added the Z index th000 and the transition of the background this basically will smooth all the changes whenever the user is scrolling the navigation bar so after that we have added the styling when the user will scroll the navigation bar what are the changes that it is going to make so it will change the background it will change the color of the the content the padding and the Box Shadow so here are some reasons here I have explained why these styling techniques has been applied so now we will Design the material icons that we have added and the color for those icon will be black and the transition will be 0.3s so now togetherly we'll style the navigation bar when it is scrolled and the material icons so the color of both will be white so now comes the logo image styling the height we have given here is 50px and you can adjust this styling as per your necessity then comes the unordered list of the navigation bar again the display is flex list styling is none pedding and marging is zero and the margin left is zero just to align the list to the left Direction then individually we are styling the navigation by items here the display is flex the item alignment is in center and the margin right is 20px again we have applied this styling because we have provided the anchor tag to item of the navigation bar so here text decoration is none because we want to remove the underline from the hyperlink and then the color is black we have padding 10 and the transition as it is to smoothen the transition process then again we are applying the hover effect to the navigation items so whenever we provide hover effect to the navigation items there are two basic techniques that we apply which is color and the background color here we have also applied the Box radius now after the user Scrolls the navigation bar what will be the item and the anchor tag styling we will just change the color right and then again we have provided the hover effect after the scrolling again we have provided color and the background color after that we have styled the navigation bar and unordered list we have given the margin as Auto then we have provided the transition to the items and then comes the login section so in login section we have provided the display as flex and the alignment as Center and the margin as Auto then we will be providing anchor tag to our login button so for that reason we have provided the text recordation none color white padding text and transition 0.3s so this is the styling when we'll be hovering on the login button so the color will be yellow the background color will will be yellow and the Box radius will be 25 PX and these are some additional stylings that we have provided just to make the item shift to a left side so now we'll just save the CSS code we'll just save the HTML code and we'll run our document so here is the navigation bar we have created this navigation bar we have this logo here we have home section about section meal Reserve table contact test card and the login button so this is so far what we have created this is the navigation bar now after creating the navigation bar we'll be moving on to creation of our homepage so right here we have created our homepage so for the creation of our homepage first we'll start with the section tag so we have given the class name as hero we have already covered why do we need to give class Name ID name and what is inline styling and everything so we have given here inline sty in to the section now after this we are going to open one div class and we'll be naming it as hero content so inside this div class we're going to provide one heading in italic using a Break Tag which will be food Zone after this we'll be opening one more diff section with inline styling and inside that diff section we are going to write one paragraph This paragraph says welcome to street food Spencer with a Break Tag and best offer limited time only so now after this we are going to close this div section and outside this div section we are going to provide one heading which says free delivery and number so now comes the important part so we are going to create one form for the search bar so we are basically going to create one dropdown for the locations right so to create our dropdown first we'll open one form tag then we'll provide one div class we'll be naming it as location drop down and then we want user to select any kind of location so we'll be opening the select tag and we'll just provide the name as location so inside that select tag we are going to follow the syntax we'll just provide the options with the value and the name of the location and we'll be closing that option tag here so this is the syntax after providing how much ever locations you want you can just close the select tag that's it then we'll be closing our div tag the drop down has been created here so after creating one dropdown I have added one image we'll be seeing what is that image so to add that image first of all I have provided the inline styling to it and then I have added the source of the image along with the alt attribute of that image after providing that image what we are going to do we are going to design one search bar so for that search bar we are going to open one div class we'll just name it as search input and then we are already familiar with this input type and placeholder everything as we created a form in our last video then we'll be creating one button and then we'll be adding one material icon so I want this material icon to be fished from this link so I've added this reference link and the material icons so then button tag and the search input tag will be closed and here we'll be closing our form tag so this is the creation of form right so I guess you understood this much and after creating that form I want some items in the left side of my homepage so for that I have created One Division class I have named it as item container so after that also we have opened one more div class naming item content so I have created three item content because I have added three different kind of images three different kinds of items on my homepage so for that first thing we are going to do is we are going to provide the image with the alt attribute you can write anything if you want to write inside the alt attribute and one paragraph and then we'll be closing our div section what we'll do we'll just copy this code and we'll paste it how much every time we want so here I have just changed the image and the paragraph tag and again I have done the same thing so we have added the homepage we have added the items we have added the navigation bar and we have added the form delog so now after this what we are going to do we are going to create some div classes to style it further like we'll understand it when I'll style them into CSS so for that we are going to open diff section div section and div section so we'll be styling these in the CSS that's why we have just given them a class and after this we are going to add one image so with the alt attribute we are going to add this image so after that we are going to close the home section that's it and now let us move on on to CSS for the styling of the home now from here the styling of the home section starts first we have targeted the hero section and we have given the height display and position after that we are targeting The Heading one of the hero section and we have given the margin and the font size after that we are targeting the paragraph of the home section and we have given the font size and the margin then comes the search bar again the margin display and the margin left after that we have created the form so we are targetting in search form and in this we have Justified the content and display is flex and the margin has 30px stop after this we have designed the location drop down in that we have kept the display as Flex the alignment of the items as Center and the margin right is zero so then we have style the location drop down select so you can see we have provided the padding font size border border radius outline width and height again after that comes the search input again the same styling we have provided display will always be Flex alignment of the items will maximum time it will be Center border radius we have given overflow is hidden and box Shadow we have provided with the color after that comes the search input input the input inside the search bar so the padding will be 3 PX font size will be 14 PX border will be none border radius also no and the outline will be none and we have provided the than the height so that it is smaller than the drop- down then comes the button of the search bar so the padding we have provided as 5px we have given the background color we have given the color we have given the border and cursor we have made as pointer and the font size The Heading and the Border radius after that comes the background color which is maroon this is the button hover color you just keep that in mind the button hover color is maroon after comes the main content so inside the main content the display will be Flex justify content will be space around and margin will be PX and Z that we have styled the food items the text alignment is Center and the max width is 300 P then we have style the food items images and then the heading of the food items and then comes the paragraph of the food items and then comes the hero background color so I told you we'll be styling this section in the CSS this is the section that we are styling in CSS currently so we have provided background color width height Z index and position again the plate Shadow we have done so we'll be providing position width margin margin bottom heading border radius background color and the Box color again comes the background color so we'll be providing position with height opacity and and margin bottom then comes the background so we have provided width height display alignment of items and justify content so now comes the content inside the homepage so these are the things that we have provided justify content will be spaced between and padding width Z index position is absolute and after that comes the heading one of the content so these are the techniques that we have given in the heading one then comes the paragraph and then comes the line of the content then item container and the item content so we have created an item container so this is the item container and then we created three item contents so these are the styling that we are going to give to the three item content then the content image height and width has been fixed then the paragraph of the image and then we have added the key frames for scrolling animations so we'll just save this file and we are going to run it so we have saved this file and this look at the output so this is so far what we have created we have created the navigation bar and now you can see the scrolling effect right so I'm scrolling my homepage and my navigation bar is changing so this is the paragraph that we have provided here we have added Brak tag so it is getting into the next line so this is the image that we have provided and we have provided the in line styling to it and here is the drop down which we have provided so these are the places that we added and we have done the inline styling for this so so far we have created our homepage so next we'll create the other section of our homepage so now let's move on to the other section for moving on to the next section what we have done we have just added some animation using JavaScript so we have added some animation from the gsap an animations to our elements so the first animation that we have added is to the hero section the opacity is zero it's just like CSS but it is kind of Animation the items will move and we'll be providing them the time frame in which the animation has to start and end we'll look at the output after this so you'll understand it correctly so we have provided these features to the hero sections and then after that we are going to trigger the scroll function from gsap so this is basically the additional plugin that is used to trigger the scroll function so on the food items we have provided so these are basic styling techniques that we have provided so here toggle action play none none none it means that the animation will only play once when the user is first time visiting the page after that it won't play after that if you will you know you'll go forward you'll go backward that won't play so after that we have applied this gsap animation on the content items too so now again we have applied this scrolling feature on the content item again we have added the toggle action and everything so now let us see what is the output of adding the animations so we'll just save this file and then we are just going to look at the output so here you can see so as I clicked on the homepage I saw the animation wait I'll just show you again and just look closely what are the animations that we have added so here you can see the moving items they are coming one by one and these are the animations that we have added so now that I told you that the thing that we wrote play none none none so now you can see I'm going forward and backward the items are not moving but if I'll Port this again then I can see that animation will play only once so now you can see the animation has played so that's it we have added this to our homepage now finally we'll move on to the next section so after that we have created the service section so again for the service section we'll open one section and we'll give it the ID name as service container then we'll add one heading of our services I'm going to give three services box here so I'll just give ID as services I'll just give three of the boxes as same class so The Styling will be easy so inside this class I have provided the image heading and the paragraph same we have done for the three boxes We have basically copied this code and pasted for the three times we have just changed the images and the paragraphs for it so this is how we have created the our services section so after creating our services section I have created one more section that says top restaurants around you so for this I have again opened one section I've named it as reviews and then top restaurants around you so inside this I have created one container so inside that container I have added six reviews so the review one will be division class the name of the restaurant and the image of the restaurant and the paragraph that we have provided to the restaurant so this is the first restaurant that we have going to show and then the second Resturant as it is all you need to change is the name of the resturant the image and the paragraph for the resturant same it goes as it is for the review three Review 4 review five and review six that's it after this our review section gets closed so this is our services section you can just pause and go through the whole goal so this is the paragraph all we have done is we have provided images headings and paragraphs so if any doubt you can just comment down the doubts in the comment section below and again for this section we have just opened the div class and we have provided class images and paragraph that's it so we'll just quickly style this section so from here the styling of our service section will get started so inside the service container first thing we have added is padding background color and the text alignment after that comes the services for that we have added display as Flex we have Justified the content as the space around so there will be space outside the boxes then the flex wrap is wrap this allows you for the responsiveness after that the mix width is 1200 pixel after that we have provided styling to these services in this we have given display as Flex justify content Flex WP maximum width and the margin after that comes the Box section in the box we have provided the background color the Border radius box Shadow margin padding transition transformation and width and the max width and the max height so that's it for the Box section and then comes the Box image so for the Box image the maximum width we have kept is 80% so it helps in the responsiveness right so after that we have kept height as 120 pixel and water radius as 10 pixel so after that becomes the hovering effect on the boxes so transformation is minus 5px that will slightly lift the box and the Box Shadow is provided here with the Box Shadow color so after that we have styled The Heading so it is font size of 2 em then we have provided this color so after that we have one secondary heading so the heading is of 1.5 em and the color is this after that comes the paragraph inside the boxes so paragraph inside the boxes has font size color line height and the margin after that we have provided some responsive style so that means if the screen size is smaller than 768 pixel this will work properly then the width will be adjusted to this and if the screen size is lesser or equal to 180 pixel then the Box width will be adjusted to 100% so this basically is the responsive design Style so now what we'll do is we'll create one more section of meals and then we'll look at the output the next section that we are going to create is a scrolling section like what's in your mind Ive named that section as what's on your mind so in this section we are just going to add some food images and we'll add one scrolling feature into it so I have opened one div tag here I've named as scroll container after this I've opened one div class naming it as a food items and inside that food item we have to just add the images and the alt attribute to that image so what we have done here is we have added one image and we have added the all attribute to that image along with that we have also added the class of that image so we have added the class of that image because we want to style every image which will be in this section togetherly so again it is very basic thing so we have just copied this div section and we have pasted it again again for North Indian for South Indian for pizza for burgers for cakes and rolls and then Sushi and then lastly for tacos so what we have done here is the code is same for every section you are just going to change the image the paragraph and the all attribute that's it rest you have to copy paste this section and then you just have to change the image and the paragraph and the alt attribute that's it this section has been created now just quickly look at the styling of this section so first we'll Target the scroll container and in that we have given the display as Flex overflow xcess auto scroll Behavior as smooth then padding we have provided 20px and no wrap and we have given the gaps between the item and the padding bottle we have provided after that the food items that we have included in them so we have given the display inline block so you can see here is a class name food items that's what we are targeting so we can see every item has a same class because we have copy pasted all this code so now we are targeting all this class so the food items this styling will be applied to every image and every food item so display will be inline block minimum width will be 200 pixel maximum width we have given 150 pixel text alignment is Center we have given the background color padding border radius Shadow at transition transform so now we can see here that we have given the same class to every image that is image placeholder so now we are going to style this image placeholder here and we have provided these styling techniques withth height background color margin border radius overflow this basically ensures that the image does not overflow the circle so the display will be Flex justify content as Center and alignment of the items will be Center so now let's come to the image that we are going to provide in the placeholder the width will keep as 100% height will keep as 100% object fit will cover so you can see here that will ensure that image covers the entire area while maintaining the aspect ratio so it won't be leaving any border around the boxes like the image will fully fit in the box and the B radius will be 50% that ensures the circular shape now now we have given the hover effect to those items the hover effect here is translate so it will slightly rise up the boxes now we are provided the Box Shadow then the scrolling button we have designed so the text alignment here will be Center the margin will be top and the buttons inside the scrolling button so we have given the background color color border padding cursor border radius margin and the font size after that last it will hover so it will just change the color that's it we'll just save it we'll just save the so now let us just look at the output so right here we can see our output we have a perfect navigation bar we have everything we have our services section we have added just now it is hovering next on we have top restaurants we have also just added it now so you can see the images are properly sized and then we have this what's in your mind section so we have added one scrolling effect and you can see the transition and you can see the hover so this is what we have created so far so the next section that we have created here is pick up your meal section so for this section again we have started one section tag naming meal section then we have given one heading and then again we have started one meal container inside that section tag so we have created four meal containers first is breakfast lunch dinner and snack so what we are going to do is we are going to write the code for one section we will be including the class Meal box class meal info and then we'll be giving the image alt attribute and the class meal image just to style the image after that we'll provide one hyperlink so when we'll make this meal section page we'll be linking that meal section page to this meal container right so after that we'll be given one paragraph and then we'll close our meal info and outside the meal info will also be given one paragraph then we'll close the meal boox so basically this is one meal boox inside this meal boox we have provided the meal info the MH the hyperlink the paragraph and then again one paragraph outside the box and after that we are just going to copy this code we are just going to paste it for lunch section so again all we need to change is the paragraph and the image that's it we'll also be changing both the paragraph and the image again same for the dinner section everything will be same we'll be just changing the paragraph and the image and same for the snack section so that's it the meal section is ready let's just look at the styling so this is the meal section of our website so first we have targeted the meal section we we have provided the padding and the background color then we have given the meal section heading so which is H2 so for that we have given text alignment as Center and font size as 2 RM we have also provided the margin bottom again after that we have given the meal container display Flex display wrap we have given wrap we have Justified the content as space in between again then comes the meal boox width will be 22% you can adjust according to your need and the background color I have given is white the Border radius is 10 overflow is hidden and then we have box Shadow we have box margin box alignment position and transition again we'll make these meal boxes hover so we have given the Box Shadow transform and this will slightly lift the box then next is meal info the position of that will be relative then comes the meal image so the width will be 100% height will be 220 pm object fit will be covered so that it fits into the box and again we have provided the transition after that comes the Meal box over and meal image so Meal box should be hovered along with that meal images should also be hovered so for that we have also provided the transform then comes the meale info with the heading four so these are the styling that we have provided you can just see position bottom you know width color color font size background padding text alignment margin and transition so these are only you know most basic styling techniques that you provide every time so then we have the hover effect of meal boox over H4 then here we have background and after that we have meal info the position is relative the bottom width color these are all the styling techniques that we have provided in the meal info paragraph after that comes the hovering of the paragraph so we'll just change the background color and the bottom so then comes the display of the paragraph and then we have added one responsive design so we know the meaning of this responsive design now if the screen size will be smaller than 768 PX then the meal boox width will be adjusted to 45% and if the screen size will be smaller or equal to 480px then the meal boox width will be adjusted to 100% now let us just save this code and we'll be looking at the output so you can see here we have given the pick up your meal section we have breakfast we have lunch we have dinner we have snacks so this is the section that we have given so now let's design the next section so the next section will be best offer section so like every section we'll start this section with a section tag which says best offer section we will provide one heading of best offers and then we'll create a class of menu items we are also going to give this Division and ID that says menu items so now we are going to write this section using JavaScript because we have to add the add to card functionality into this section so first of all the data will be first from the menu items and then we'll write the data here so here data has been written in the array form so it contains the name description price image and offer so I have provided our name and then description then price and then image link we have directly used this image from andash and then we are going to give the offer so like this we have created one section and we are going to copy paste it like we want here is the second French toast section then the third omelette section and then the fourth Biryani section so I've added these four items into my best offer section now we will work on the card section so right here we have created one JavaScript function so what this function does so basically this add to card function retrieves the current card from the local storage and converts it from a Json string back to an array so if there is no data into the cart it initializes the card as empty and then the item passed to the function is added to the array so this is what basically this JavaScript function does we have created one show menu function we can see here we have created one show menu function so let us know what is this function doing so this show menu functions clears the menu container and Loops through the menu data array to create HTML element for each food item it creates a div for each item including the items name image description the price offers and then abends a button to add to cart item to the cart so this basically dynamically displays the entire menu on the page right then again we have added one even listener to the add to card so whenever somebody is clicking add to card that add to card button gets triggered and the item gets added to the card so basically this code will select the add to card button from each menu item and adds The Click event listener to it so basically this code selects the add to card button from each menu item and then adds a click event listener to it so whenever the button is clicked the add to card function is called and then item is added to the shopping cart so this is what this function does so that's it we have added one show menu here so whenever the page loads the menu is visible now we'll just style this section here is the best offer styling section so first thing that we have targeted is best offer section and we have added text alignment and margin after that we have targeted the menu items for that we have added display Flex Flex wrap Gap and padding then we have targeted the food items in that we we have added border border radius overflow width background color box Shadow and transition so after this we have targeted the food item we will make that hover to the scale of 1.05 then comes the imag in the food item the width we have given we have given the height object fit and the Border bottom then comes the heading that we have provided in the food item so for styling that heading we have provided margin font size and the color then again comes the paragraph that we have given in the food item for that we have given the font size of 0.9 mm and color padding and the margin bottom then comes the price that we have provided so that will be having the font size of 1.2 em and font weight will be bold color and the margin bottom after that we have styled the offer here so for that it is background color padding font size font weight margin bottom border radius box shadow text alignment text Shadow position and animation and at last we have provided the key frame so this is basically for the transition and animation and after that we will style the add to card button so add to card button will have background color color and border border radius padding font size cursor will be pointer here transition margin bottom and that I to card button will also hover and then again we have provided the responsive design if the screen size will be equal to or smaller than 1024 PX then food item width will be get adjusted to 45% same as when the screen size will be less than or equal to 768 PX then the menu items and food items Flex Direction alignment of items and width will be get adjusted so now we are done with the CSS part now let's have a look at the output so here is the output we have created the best offer section and if we are clicking on add to cut this is function and here we can see the item has been added to the cut so that's it and it has this transition and hover effect and everything so we have created this much so far now let us add one more section and then we will be adding the footer next we have created the section of the top trending places so here we have added the section again we have named named it as collection section and the heading will be top trending places then again we have added one paragraph and after that we have opened one div class collection grid and inside that we have created one collection box so inside that we have provided one image and we have given the alt attribute as newly opened places so again we have opened one diff and then we have provided one heading inside that heading we have provided one anchor tag which is the official website of McDonald's India and then we have provided the inline styling to it and we have given the name as me the India so same as the previous one we have again created one collection box inside this we have provided the image and then we have given the official website link of KFC and again we have given the name as KFC and given the inline styling so same as the previous one we did the same for Burger King and then at last for the p Z hard so that's it this will be included in the trending places now let's see the CSS of this section so for the CSS of this section first we have provided the pedding and the alignment to the collections section and then for the H1 inside it we have given the font size and the margin then for the paragraph inside it we have given the font size and the color and then we have this section called collections grid and inside this we have given the styling as display grid display template column Gap and margin top so after this we have done the collection box we have given the position as relative border radius and overflow is hidden and the Box Shadow we have provided along with the Box Shadow color then comes the image of the collection box we have given the width as 100% height as 300 PX object fit as cover and the Border radius as 15 PX then comes the collection box info we have given the position as the absolute bottom left right zero pedding as 10 and the background color and the color then we will make those boxes hover so we have given the transform scale and then we have given the Box Shadow after that we have written one heading so for that we have given margin and the font size and then we have included one paragraph for that we have given the margin and the font size again there is a responsive design that we have created so now let's save this code and we'll save the HTML code and we'll look at the output so here are the top trending places now one exciting feature that we have added is the anchor tag so we'll just click on the MD and we are getting redirected to the McDonald's website likewise we'll click on the KFC and will'll be redirected to the KFC website and that goes same for Burger King and the pizza so that's it for the home section now we are going to create the footer section so we have so far created the whole homepage of our website and now we'll be creating the footer and then we'll be moving on to the next page we have created the footer section let us go to the footer section quickly so we have provided the class as section one and then we have provided the division class as call so inside it we have added one heading as contact and then we have provided the contact detail details using paragraph tag so here we are closing the div call and then again we are adding a div class named call so inside this we have given the heading as about and we have added some anchor tags we'll just connect it when we'll be making the about us page delivery of information or privacy policy or terms and condition and contact us page so we won't be making any page named as terms and condition privacy policy and delivery information but we'll be linking the about us and the contact us page so again we have created one div call and we have added one heading my account and we have provided some anchor tags here the sign in the view card my wish list and all so in order to just make our footer look more interactive and visible we have added so many things and then again we have provided one more class as div install so we'll just say to install our app we have given the heading as install app and again we have given the paragraph and inside it we have created one more diff and we have given the images of Google Play Store and the Apple Store so after this we have given the paragraph as secure payment gateways and inside it we have given the image source as any payment Gateway so after this we have just added the copyright class and these are the paragraphs that we have added and that's it about the photo section now let us move to the style of the photo section so here we will just first of all reset all the global margins that we have provided on the top of our CSS file so for the footer sections there will be other Global margins such as marging will be zero padding will be zero and the background color will be kind of grayish after that we'll move on to the footer and we'll just keep the display as Flex Flex wrap as wrap margin bottom margin left margin right justify content and padding so we know now we are familiar with all these terms and we keep adding all these terms over and over again so I think you have a good practice of this now so after that we have footer call then margin top we have added display as Flex Flex Direction column and Alignment item as Flex do after this we have added foter heading so font size and the padding bottom then forter paragraph again font size and the margin then the anchor of the footer tags it will have font size text decoration because we have to remove the hyperlink line and then the color and then the margin bottom then the image styling the images that we have added of Apple Store and the Google Play store and they will have a border radius and then one more image we have we'll just give it as margin then we'll make all these footer and all hover so we'll just add the color and then again we have foter copyright we'll just give styling as width 100% text alignment margin pattern margin top and margin top so after that we have done the hge primary that means the heading that we have provided we'll just give as font as Bri serif and font size as 3.8 R and padding as 12px then the other heading that we have provided font family font size and pedding and at last the buttons that we have provided that will have the pedding of 6px border border color color margin and everything the cursor will be pointer then button link and then the text alignment will be Center so that's it for our homepage we'll just save the file and we'll have a look at the homepage now we have completely built our homepage so first we have navigation bar we have this search we have this drop down and everything here is functional you can see the navigation bar every everything here is functional so after that we have this our services section then on we have this top restaurant section after that we have this what's in your mind section and then after what's in your mind we have this pick your meal section I've just changed the color here so we have this pick your meal section these contain hyperlink so we have not currently added when we'll create the breakfast page We'll add it here and then lunch and dinner and this snack section then on we have best offer section here these are functional you can add them to card when we'll create card these things will be added to the card after that we have top trending places we have this and then on we have this footer this footer is looking nice and it is looking functional and everything we have this hover effect on these links so we have successfully created the hom page of our website so now that we have created this home section the next step is to create the meal section we are going to create this meal page we have already created this homepage and now we are going to create this meal page so we'll be creating this and then in next part of the video we'll be creating contact us page card page login page and we'll be also creating about us page either in this part or in next part so now let us move on to the creation of our mail page so for that what I'm going to do is I'm going to add one more file here that will say add dot HTML and along with that I'll create one more file that will say add do CSS and same for the JavaScript add. JS that's it so inside the HTML page the first thing that we are going to do is we are going to copy the navigation bar and the header from the index. HTML right so we'll be just copying the navigation bar footer and the header section from the index.html so here we can see till here is our header section we'll just copy it to add. HTML so with this the navigation bar on the ms. HTML and the index.html will be same so after this what we are going to do is we are going to create one more section now here we have created one more section so we have given the ID as home and class as home container because we'll be using Dom manipulation on our meal section so we have provided ID as well as class so with this ID we are going to Target it in JavaScript again we have added one more division naming background image so here we'll be adding some image so the image 1 and image 2 and image 3 so these two images are been taken from our image section and this is the link of any online image we have provided the alt attribute here in case that image does not load and then we have provided the class to this image so we want these three images to look similar so that's why we have provided the same class so we will edit one image and then all three of the images will be similarly styled so after this let me just link this image again I'll go to images and then the image that we added was this I guess yes and then we'll just again add this image to so in images we'll just go to it was something like 5 DP yes this image that's it we have added and we have to remove this from the all attribute that's it so the next heading we are providing is our food menu and then we'll add one paragraph So I have added this paragraph you can take a look I've added Break Tag and break tag so anything you can add after that we have added one more division naming class background button and then after adding one more division we have added one anchor tag and inside this anchor tag we have linked the menu item which we created in index.html so here is the menu items that we have created in index.html and this we have linked to add. HTML so now after this we are just closing the home background button and the background image and the section so one more section here we'll open and that we will name as menu container inside this section we'll also open one more Division and we'll just name it as menu categories to so then we'll create one button so we are going to create four buttons for breakfast lunch and dinner and snacks so we want all these buttons to look similar so we have added the same class to all those buttons you can see so after that we are going to add this on click because the button type will be on click and we are just adding the show menu so this show menu is from JavaScript now we have added the breakfast lunch dinner and the snack menu so here we have also added the class to the icons because we have to style them so I have added the SVG icon as a class name so again we have added these images in our breakfast lunch dinner and every section so again we are going to style this images similarly so it will be easy for us to style all these images similarly so I have added the same class here and then we have added this names as breakfast lunch dinner and snacks that's it after that we have closed the button we have closed the division and we have closed the section so how these items will be displayed so I have written here one statement that food items will be displayed here dynamically that means we are going to use the concept of Dom manipulation to display the food items here so this is it about the ad. HTML and after after that we are just going to add the footer so first we'll close the body and HTML and inside this we are going to add the footer so again footer we are going to take from index.html so I'll just copy the footer section that's it and contrl c and add HTML we'll just add the footo section that's it we have saved the file now we'll quickly style it and then we'll move on to the JavaScript first we'll just copy The Styling of navigation bar from our style.css first we are going to add this navigation bar styling as it is to the add. CSS because we want the same styling on the both pages so we'll just go to add. CSS and we'll just paste it after that comes the home section so we have already added the images in the home section in our HTML we are just going to style it before providing The Styling to the homepage what we are going to do we are going to add the JavaScript for that page because everything will be included in the JavaScript so we will be understanding the JavaScript code first and then we'll be moving on to the CSS so this right here will basically select the data from the menu items with the help of Dom manipulation so further we can manipulate the items that are present in menu items with the help of Dom manipulation so right here the menu data is basically going to store everything from the menu items so this menu data will basically have four items into it breakfast then after breakfast it will have lunch and after lunch it will have dinner and then snacks so this menu data will contain four items breakfast lunch dinner and snack and inside every item like inside breakfast lunch dinner and snack there are items present which have four properties such as name description price and image so this image is directly been taken from unsplash and the prize we have written manually and we have given one description so the first one we have provided is for pancakes and likewise we have provided for french toast omelette Greek yogurt avocado toast smoothie we are just changing the images prices and the description you can add as many as items you want to add so I have added these many items into my breakfast section after that same goes for lunch we'll create one array and inside that array we'll just store every item with their description so again in lunch section we have the grilled chicken salad spaghetti and all so all these things we are just going to change the description price and image and we have added all these things into our Lun section now same goes for the dinner section so inside the dinner section we have added this sweet and Sal pork and like this we have added so many items into our dinner section and then same goes for the snack section so inside snacks also we have added some items and that's it so we have added these many items into our breakfast lunch dinner and snack so now let's see add this code which is basically for the add to card section now this L of code basically retrieves the card from local storage and converts it from Json string to an array so if there is no data into the card it initializes the empty array right now this line of code basically defines a function add to card that takes item as an argument next on we have this so this again retrieves the card from the local storage and passes it into an array same as the initialization now this line of code will basically put push the item into the card now again we have local storage and now this line of code basically converts the updated cart array back into the Json string and stores it in a local storage and then we have the alert function so alert function will basically display this message so now basically we are working on the function of show menu so this basically will help you to clear the current contents of the menu item container and it will re res set the menu display and again this will retrieve the menu items from the specified category from the menu data array and after that this line of code basically iterates through each item in the selected menu and then we have this and it basically creates a div element for each food item and adds the class food item for any of the styling purpose and then on we have this so this basically inserts the HTML content inside the item element including the items image name description price and add to card button that's it now we'll move on to the next section now this line of code will basically select the add to card button within the item element using the add to card BTN and then on we have the next line of code so this basically adds a click event listener to the add to card button when clicked it triggers the function and then on we have this so it defines the cart item object containing the item name price description and the image and then we have add to cart cart item so this basically calls the add to cart function passing the cart item object to add the item to the cart and then we have menus container append so yeah this appends the created item element to the menu item container to display it on the page so now let's move further so this show menu breakfast will basically call the show menu function passing the argument breakfast to display the menu items categorized as breakfast now we have toggle sidebar so this basically defines the toggle sidebar function which selects the sidebar element by the ID sidebar and then it toggles the sidebar visibility by checking if its display style is set to block if so so it hides the sidebar to none and if it is hidden it shows the sidebar to block and then on we have the sidebar so the sidebar that we have created so this function basically defines the sidebar it selects the sidebar element by the ID sidebar and then it hides the sidebar by setting the display style to the none and now we'll move on to the CSS part and then there we'll style all the buttons and images and everything we have added to this page so now here we have added the styling of our at. HTML and .js so first of all we have home again we have included here margin Max width height overflow position top Z index display alignment of the items and justify content so these are basically all the styling techniques that we have provided to our home section then we have added one background image so the position we have made it as sticky the top is 0% the width is 100% the the display is flex alignment of item is Center and the flex direction is common then again we have one more image we have added the position as absolute the top is minus 40% left is 50% transition again to add the animation is 50% and height and Z index so again the image 2 again the same styling we have provided just we have added different width and Z index and again we have the image 3 same styling we have provided Again The Heading of the image one so we have the position as relative Z index as five top 45% font size will be 60px color will be some grayish and then we have added the font family so again we have the paragraph of the background image so the paragraph of the background image has the position relative Z index top 47% text alignment as centered width as 70% font size color and font family now again we have have home background button position Z index and top then we have home background button when anchor tag will be included in that so these are all the style that we have provided so that is padding background color border border radius color text transform text decoration cursor and again we have font weight font size font family letter spacing and transition after that we have the hover effect on the button so for that we have added background color and the color then we have the menu section so for that we have added the margin and the pattering so after that we have the containers in which all the items of breakfast lunch dinner everything will be displayed so that container are flex and and position is relative so after that we have created the toggle sidebar button in the JavaScript for that we have the position absolute top is 20% left 20px background color color padding border font size and everything we have for the toggle sidebar so toggle sidebar will also have the hover effect so these are the techniques that we have provided in the hover effect after that we have the sidebar so in sidebar also we have provided the same techniques as toggle sidebar and we have changed some values now again we have the sidebar show so for that display is block and that we have right now added in the JavaScript and the animation we have added here again here we have added the key frames for the animation and the transition then on we have menu categories and in this we have added the display as Flex Flex direction as column Gap as 20px and marging as 6px we have category button so all the styling techniques that we have provided ins sidebar is basically provided in the category button like background color color padding border and everything so then we have the category button hover so for hovering we will just add the background color transform and the Box Shadow and then after that we have the menu items so for menu items the position will be relative display will be Flex Flex wrap will be WRA justify content is Center and background color is white animation is faden up in 1 second so the Z index is 1 and again for the food items we have background color color and every styling technique right then we will make the food item hover for that we have added the Box Shadow then we have added the image to the Box item and here is the styling and then we will make that image H so for that we have added the transform so then after that we have the heading to the image item and then we have the food item paragraph and then we have the food item price and then we have the add to cut button so we have styled this add to cart button like we have added all these things the cursor is pointer here and transition and text alignment everything has been added so now we also want the add to card button to hover so we have added these styling techniques to make it hover again we have added some key frames to make the transition and the animation ease out now that's it and again here is the footer Style styling which is same as the style. CSS so now we have done all these things we have created our meal section the only thing left is to link our meal section with the ad. HTML and we will also link our JavaScript section with the add. HTML so now we are just going to add our add. HTML to the mail section so we'll just go to the mail section and here we are going to add the source so here'll just I'll provide the link that is add. HTML again add. HTML then here we'll provide add. HTML then on we'll provide it in here so that's it again we are going to provide it in the navigation bar so in navigation bar we have already given the add. HTML here so I'll just save it we are just going to save the add. HTML and we will look at the output one more thing we need to do we need to add the Javascript file to the HTML file so for that we are just going to go to the ad. HTML and right here we are going to add the Javascript file so above the footer we are going to provide the JavaScript tab so so we'll just write script and this inside this we are going to add the link so we have added the JavaScript link here so one more thing is left we have to add some script code for the scrolling of the item so we missed that so now we'll be adding that now here after the body section I have added the script tag and there are some features that we need to add through JavaScript so this line of code basically registered the gsap basically the green sock application platform plugin allowing the animation to trigger based on the scroll position so this line of code basically adds the gsap animations and transitions into the items so now after that we have this so This defines the animate on scroll function which contains the animation triggered by the scrolling after that we have images document so this basically selects the home BG image 1 and home BG image two elements from the document for the animation after that we have this styling which is done through the JavaScript so this basically Loops through the selected images and applies the animation which are present here for example Yus 50 that moves the images down and above then it is opacity zero which basically starts the image visibility and then we have rotation minus 20 which rotates the image slightly and then we have scroll trigger which will basically start the animation when the image reaches the 80% of the top viewport after that we have this so This basically selects the doome BG image3 element and applies the scaling effect like scale 1.01 with a duration of 0.5 seconds the animation trigger when the image is 80% from the top of the viewboard so these basically are The Styling feature of glass talk animation platform and we have applied it through JavaScript this basically is a library of JavaScript that is used to apply the animation and the transitions so after that we have this and this selects all the h1p div elements inside the dot background image container for the animation after that we have this styling technique and this basically Loops through selected elements and animates them and again we have provided all the same styling techniques the Y opacity duration scroll trigger and everything and then on we have this window. onload animate on scroll this basically calls the animate on scroll function after the Dom is fully loaded ensuring all the elements are ready for the animation that's it so here we have closed the script tag so now we have added everything we'll just save this and we'll run the output so we'll just Port the index.html and we'll just go live and here is our homepage and we have created the meal page so here we can see our meal page we have breakfast we have lunch we have dinner and we have snacks we have the footer we have created the homepage and the meal page so that it for this video I hope you have enjoyed listening to this video please be kind enough to like it and you can comment down any of your doubt and queries and we will reply to them at the earliest do look out for more videos in our playlist And subscribe to Eda channel to learn more happy learning