Web Development Tutorial | Front-end Development - HTML, CSS, JavaScript | Edureka

Key Takeaways

[Music] hello everyone and welcome back to ad's YouTube channel this is the third part of our web development tutorial Series in the first video we covered the basics of HTML CSS and JavaScript and we even built a form using these Technologies in the second part we kicked off our project street food Spencer where we built the homepage and the meal page today in this video we'll be veloping the card page checkout page contact us page and login register page and also stay tuned until the end because we will also dive into the basics of backend development to understand how everything works behind the scene before we begin make sure to subscribe to our YouTube channel and hit the Bell icon to stay updated on the latest tech content from Eda also don't forget to check out Eda website for our web developer master program the link is in the description box below let's just quickly recall what we we have built so far so here is the output of what we have built so far we build the navigation bar homepage our services section then we build this section and after that we build this crawler and our meal section best offer section and top trending along with that we have also built the footer section and after the home page we build the meals page and here is our meal page the navigation bar and the sections for breakfast lunch dinner and snacks so if we click on lunch and then dinner and then snacks that's it so now we will move on to our vs code and next what we have to create we have to create the card page so for that we'll make one card do HTML page and then we'll also include card. CSS page that's it and inside the card. HTML we are going to copy the navigation bar first so that we are going to copy from index. HTML so we are not going to add the scroller we'll just copy the navigation bar and we will paste it in card. HTML and after this we are going to add the card container section now here we have added the container section so we have just added the class container after that we have provided the heading as our cart and then inside that we have given the ID as cart items and we have also provided the class because we are going to because we are going to write the JavaScript for all these section so we have provided the ID and class both and after that we have given the heading as total price and we are going to change the total price as people add the items to the card so that's why we have included the ID also and after that what we have done we have created the button for the checkout that's it for the card page what we are going to do we are just going to add the footer and after that we'll write the script for our card page so again we are going to copy the footer from our index.html because it will be the same in every page so we want same footer for every page that's why we are going to copy it from index. HTML and then we are going to paste it on our every page so here is our footer we'll just copy this footer and we are going to paste it in our card. HTML that's it the footer has been pasted we will just close the body tag and the HTML tag now what we are going to do we are going to write the script code for our card page so whenever the user adds the item to the card the item gets updated so right here we have added the script for our card. HTML let us look at the script one by one first we have the render card function this function is responsible for displaying the items inside the card showing the price calculating the total price it also allows the user to remove the items from the card inside the render function we start by grabbing two elements of the HTML using the get element bu so we are having here cart items container and total price so the cart item containers will store all the items that are displayed and the total price will store all the total price of the item that are present in the card so now we have initialized the variable total price with the value of zero this will store the sum of all the items price after that we have retrieved the data from the local storage if the cart is empty we use an empty array as a fallback so we use json. pars to convert the stored string into the usable JavaScript array and after that before displaying the cart items we clear the container by setting inner HTML to empty string this ensures we don't duplicate any items every time we render the card then we Loop over each item in the cart using the for each method we create a new diff for each product and give it class as cart item and inside the div we add the items image name description and price we have also added a remove button with a data index attribute which stores the position of item in the card this is important for removing it later so now each item we Loop through will also update the total price by parsing the items price to the float and adding it to the total price so after we Loop through we update the total price displayed on the screen here we use two fix two to make sure that price show within two decimal places so now for the remove button functionality once all the items are displayed we grab all the button with the class removed from the card button we Loop over for each button and attach a click event listener right here we can see we have added a click event listener into the button the event listner triggers the remove from the cart which removes the item at the specified index of the cart finally after making any changes to the card like removing an item re update the card count in the navigation bar now let's look at the remove from card function so this function takes the index of the each item we want to remove then we retrieve the card from the local storage we use splice to remove the item from the specified index once the item is removed we store the updated card back to the local storage and call render card again to redisplay the updated card price so now we have update card function which is responsible for displaying the number of items currently in the shopping cart so first we retrieve the data from the local storage which we store as a JavaScript array if there is no data we can use empty array as a fall back then we use json. bars to convert the stored string into array items and after that we grab the element with the ID add to cart which represents the card button in the NV bar next we update the inner HTML of the element to display the number of items in the cart using the cart length this displays the count inside the parenthesis like cart 3 this function ensures that every time the cart is updated the count is reflected in the real time of the navigation a bar now after that let's move on to the checkout button so we have a checkout button with the ID checkout button when the user clicks on this button we want to take them to the checkout page we first grab the checkout button from the HTML using get element by ID we then attach the click event listener to the button this event listener listens for when the user clicks on the button when clicked the event triggers the window location HF property which redirects the user to the checkout page this is done using by URL checkout. HTML so that's it for the script of the card. HTML now here we have added the checkout. HTML so next page we are going to make is checkout. HTML so before moving to the checkout. HTML what we are going to do is we are going to style the card section so for styling the card section first of all we'll go to The nvar Styling and we'll copy that because we have the same navigation but we have copied it and we'll just paste it it card. CSS and after this we'll style our container let us go through the container styling so here we have created container in our card. HTML and we have provided the max width margin padding box radius box Shadow then we have styled The Heading one of the container then we have styled the cart items inside the container providing the display as Flex reflex direction as column Gap as 15 PX after that we have again styled the cart items and again we have provided the Border radius padding border alignment of items and the display then we will style the cart items images we have provided the width height and Border radius after that we have styled The Heading of the cart items by providing the margin and the flex grow then comes the total price and for that we have given the text alignment margin font size after that comes the checkout button so we have created one checkout button inside our card. HTML it has the background color as green color border border radius pedding font size cursor and transition after that we have made the checkout button as hover and then there is a background color provided to the hovering effect then again comes our footer styling which we have already gone through there are one more step we need to perform that we need to add the card. HTML to our navigation bar of card so here I'll just write card. HTML we save the code inside card. HTML we link the navigation bar card so here also I'll link the card. HTML that's it we'll save the file and then we will look at the output also guys don't forget to link your card. HTML with card. CSS so I have linked my card. HTML with card. CSS and now this is the output we have the homepage here then we design the mail section after that here we have the card section so this is the remove button which is functional and after that we are going to design this checkout page so we'll just go to meals and we'll just add this add to card and we'll just look how it works so I've have added these items into the card now just look at the card here so this is functional the items has been added the calculation has been done so now what we are going to do the next step is to design this checkout page so we'll move forward and we'll Design This checkout page the first thing we need to do is we need to make a file for the checkout page so we'll just make checkout. HTML and along with that we'll make one more file naming checkout. CSS so inside that checkout. HTML we are going to copy the navigation bar and that will copy from index.html or card. HTML let's say we are copying from card. HTML so we are just going to copy the navigation bar and we will just paste in checkout. HTML so one more thing we'll do is we'll connect the checkout. HTML to checkout. CSS so here it is connected and we'll save the file after this we are going to create form for the checkout page so now here we have created the the container for checkout and the first thing we did is we open the div section and we named it as container then we have added one heading and after that we have added one more class naming checkout grid so inside this we will create a checkout form we'll name it as shipping information and then we'll create a form inside it naming checkout form so again we know how to create a form we use label and input for different things like we created in the first part so if you are not familiar with this you can just go to the first part and watch how to create a form so we have added label and input for name and again for email address City ZIP phone and that's it so inside that form only we have created one more heading which is payment information and again for payment information we have created one more class for payment options and then we have given the label for payment options and inside it we have created a radio button so that can choose that it should be a credit card or cood so this is the creation of radio button here with two options credit card or Cod then we have closed the division of payment button after that we have included one more division for the payment information if the person is selecting card so here the person can enter the card details so for card details we have again label and input for card name card number expiry date and CVV after that we have have again closed this form and we have closed the checkout form so now one side is done the payment information is done now comes the cart section what the person has added in the cart so for that we have again created One Division naming it cart item section we have given one heading for cart items and then there is div ID for cart items container and we have also provided class because we are going to Target it in JavaScript after that we have given one more heading of order history then payment summary we have included some paragraphs for the total and the shipping charges so we kept $5 as the shipping charges and here we have included the total and the shipping charges so in JavaScript we are going to write whatever the total amount is just add $5 shipping charges into it and that will be the total price so then we have created one button that has a submit type and it is named as proceed so after that we have created one popup model we have created one ID so we gave the name as popup model and the class is model inside that we have created one more class naming model contact and inside that we have created a span of close button then we have added one image then we have given a thank you so this is basically the popup that a person is going to get so after that they will get a messages your order has been successfully placed thanks here we'll do thank you that's it so after that we have included the footer so this footer has been added in every page so after footer we are going to write the JavaScript of the checkout. HTML so the first JavaScript is for toggling the payment method Fields so we start by selecting the radio buttons that represent the different payment methods using query selectors right here we can see we have two payment methods like cod and the card options so here we are using the query selector to select the payment method as card or the cash on delivery we also grab the card details section elements to show or hide the credit card Fields based on the user selection this Loops through each payment method option we add an event listener to each radio button to detect when the user changes their selection so if the user selects the card option we display the card details section by selecting the style to block otherwise cash on delivery we hide the card section and then we have written the code for calculating the subtotal shipping and the total so here we have the calculate totals we have made one function named as calculate totals inside it we retrieve the card from the local storage and initialize the subtitle as zero right after this we add one fixed $5 amount which is the shipping charge to the subtotal then finally we update the subtotal shipping and the total amount in in the HTML using the inner text property after that we have rendering the cart items so the first step is to grab the container where the cart items will be shown then we retrieve the card data from the local storage and clear any previous content by setting inner HTML to empty string after that we Loop through card items and create a new diff element for each product inside this div we display the product's image name description and the price and finally we append each item to the card items container and then we have validating the checkout form so right here we validate the shipping information Fields like name email address City ZIP and phone number so if these fields are empty we show an alert message asking the user to fill all the details and now if the credit card payment option is selected we also validate the credit card details card names number expiry date and CVV so we assume that the card number has 16 digits and the CVV has three digits and both should be in numeric so right here you can see that after that we are showing the success model on valid submission if the form is valid we display a popup model to show the order was successful we also clear the card from local storage and reset the field after the successful order after that we have handling the Model Behavior so we have event listeners for handling the pop of model so when the user clicks the okay button on the model we hide the model and redirect the user to the homepage the model has one close button the X which hides the model when clicked we ensure that the model appears on the right moment and disappears when necessary giving users clear feedback after the order is placed so this is the script page of our checkout. HTML now we'll quickly style our checkout. HTML inside checkout. CSS and then we will look at the output so now here we are on the checkout. CSS so after the navigation bar styling we have created one container and then we have provided it Max width margin and padding after that we know we have created one checkout. grid and in this we have provided display justify content alignment of items and GAP after that we have created one form checkout form and cart item section in that we have provided width padding body radius background color block Shadow and animation after that we have provided labels to check out form and in that we have given display margin and font weight after that we have created the input for the labels inside that we have provided width padding margin border border radius and transition after that we have created checkout form input focus and in that we have added border color box Shadow and outline after after that comes the payment section inside that also we created a form for the payment information so for that we have given the styling for the S2 of the checkout form and then we have given the payment options for that we have given display margin and margin right again we have given the display alignment of items and the margin then the input of the payment selection which is the radio button for that we have given the margin top and after that comes the payment option and then we have the price summary and for that we have given the background color padding border radius text alignment and animation then price summary we have given again font size and margin then the total price summary where the total price will be displayed then we have that font size font weight and color then we have cart section so for that we have border left and animation again we have cart items so in that we have display alignments of item justify content margin pattern border and transition after that we have cart items hover we are making the cart items hover so we have background color and transform then we have the image inside the cart items so for the image inside the cart items we have given width height object Fit Body radius and transition then we are making that items hover so we have given the transform scale then we have styled the heading inside the cart items and then we have style the price inside the cart items and then we have finally designed the checkout button and the button which is the submit type button and we have provided The Styling to the button so you can just pause that video and you can go through this and if you have any doubt just comment down in the comment section after that again we are making the button hover so for that hovering effect we have provided the background color box Shadow and transform then comes the model the popup model so for that we have given this play none and then Z index position left top weight background color justify content and alignment of the items then comes the content inside the model content so that is background color border radius padding width text alignment and position then we have created one Clos button so that is cursor font size top right and position after that we have created one okay button on the popup model so that okay button has the background color color border back in cursor and the Border radius so we'll make that button hover with the background color and then we have the input of the hover so that is background color and the transition so after that we have added media queries so we already know about the media queries it is for the responsiveness of the website and if the device will be smaller or equal to 768 PX then the checkout grid and the checkout form and cart items will be adjusted as per the mentioned Style and then we have provided the key frames for the transition and then comes the foo section which we have already designed so we have successfully designed the checkout page now let us look at the output here we are on the homepage what we are going to do we are going to just add the items for example we are going to add the pancakes and let's say omelet and then again we are going to move on to the meal page so inside this meal page we are going to add add let's say french toast Greek yogurt and that's it and then we'll move on to the cart inside this card these items has been added and the totaling has been done so this is the styling and then we'll just click on the checkout so right here is the checkout page you can see we have the footer and then we have the navigation bar here and after that we have this checkout page this form that we have created and we have this radio button for credit card details and cod so if you are clicking on credit card we are getting this option and then we are clicking on COD then that credit card option has been headed so that we have done using JavaScript also here shipping charge are constant shipping charges are getting added to the total and then we have this proceed button and if you're clicking on proceed button we have this model popup so it says your order has been successfully placed thanks that's it and now we are getting redirected to the homepage after clicking the checkout so right here I'll just click and then proceed and just thank you and then again I have been redirected to my home page so this is what we have created so far we have created the homepage we have created the mail page we have created the card section and inside the card section we have also created the checkout page so now we are going to create the contact us page and after that we'll create the about us page and then we'll move on to creating the login page so now let us go back and we'll create the contact us page so we'll just create the HTML file first contact. HTML and then we'll create one CSS file and we'll also create the Javascript file for this you can also provide inline JavaScript or you can create a file so now we'll go to contact. HTML and here we'll copy the navigation bar as it is and then we'll create the page so now let's just quickly see the contact. HTML so first of all we have created our navigation bar and then we have opened the dev class naming container after that we have given it a header and then a heading naming contact us and inside that we have created one more class that is content and then we have provided a heading that is get in touch inside that we have written paragraphs so whatever we have to write like was it our agency or head office which is in strong that means bold and then we have given the paragraph for the location and then we have added a mail here using anchor tag and we have added a telone number using anchor tag and then again we have added one paragraph and we have closed the content info after that we have entered our map we use the iframe tag for that and inside that we have provided the source of the map and we have provided the inline styling for the map here you can see this is the inline styling for the map and this is the link of the Google Maps and after that we have closed the division and then again we have created one more class which is header and we have again created one form inside this class to leave a message so we have created this form so this form is basically for the information of the user so you can see the input here type is text and then we have for name for email for subject and then we have provided one text area so the user can write any text message so after that we have created one button that is of submit type and then we have again created one more class for the team contacts so we have provided our team heading and then we have given the class as team member then we have given the image we have fetched this image from online and then we have this class for information inside that we have given some information about that team again we have created one more team member and then one more team member so after that at last we have just added the footer now let us look at the contact us designing so inside this contact us designing first of all we have as usually designed our navigation bar and then we have designed the container which is Max width margin padding background color box Shadow and alignment of the items then we have designed the header and then the heading of the header then we have designed the content and then we have designed the contact information after that we have designed the contact information heading two then the paragraph of contact information then the Bold paragraph which we have created strong so then we have designed that and after that we have designed the information of the contact where we have provided the anchor tag after that we have given the hovering effect to that and we have just removed the underlight so after that we have provided this margin bottom which basically removes the margin from the last paragraph then we have styled the map and The Styling that we have given to the map includes the width Max width height margin border border radius overflow and the Box Shadow then again we have provided The Styling for the map I frames inside we have given the width height border and the Border radius after that we have provided the contact form styling and that includes display justify content Gap and margin then the heading inside the contact form then comes the heading three inside the contact form and then we have designed the form group and after that we have designed the form group input and after that we have designed the form group text area inside form group text area we have just provided the height after that we have designed the submit button and then we have made the submit button hover you can just pause the video and look at the styling techniques so after that we have designed the team contacts and the heading that has been provided inside the team contacts then the team member and then the image that we are providing inside the team member and then the information of the team member after that heading then paragraph and then comes the footer we have already styled the footer it is same for every page so now we'll just save our file and we'll save the HTML file now let us see the JavaScript for the contact us so right here we have included the JavaScript for the contact us page so this script prevents the default form submission using the event prevent default this stops the page from reloading and displays an alert to confirm the form was submitted successfully it's great for validating or processing form data with Javas script before sending it to the server if we are using the backend so right now we are not using the back end but so this will basically help us to prevent default so now let us save the file and we'll just look at the output before that right here inside my homepage I'm going to link my contact. HTML so I'll just save the file and we'll look at the output so before looking at the output what I have done here is I have provided the links here which were not included initially in my contact. HTML the links to my Google fonts and material icons and the JavaScript libraries so now we have connected the stylesheet and again we'll look at the output so right here we can see the contact. HTML so we'll just go to the homepage and here we'll click on contact us page and we are getting redirected to the contact us page so here we have navigation bar we have this box and then we have the map which is from the Google Maps and then we have our team and the footer that's it this is our contact us page and so far we have created the homepage the mail page the card page the checkout page and the contact us page so now the next thing that we are going to create is aboutou US page and lastly we'll create the login and register page so for creating the about us page we'll just make one HTML file liing about. HTML then again we'll make about. CSS and then about. JS we'll just quickly design about. HTML for that so first of all we are going to copy the navigation bar so from my contact. HTML I'm going to copy the navigation bar so that's it crl C and we'll just paste it in about. HTML so what we are going to do is we have linked the about. HTML with the button and then we are going to add the stylesheet here which will be about. CSS and now let us move and we'll just write about our platform inside the about. HTML now right here is the about. HTML so first of all we have as always included the navigation bar inside this we have attached the about. HTML and then after the navigation bar we have created one about us container and then we have given it a heading as about us we have provided this heading a class name that is about title and then inside it we have created one about section inside that we have created one about image and we have given some image ID and image source that we are going to that we are going to style in CSS so after that we have given got after that that we have given one class about description and inside the description we have mentioned the ID description and then we have mentioned the r Mission and then ID Mission and then the vision and the ID Vision that's it again we have this footer page so after that we'll just move on to the CSS of about us so inside this first of all we have designed the navigation bar we have also added the scrolling feature in the navigation bar of about us page so now after that we have designed the about us container then after that we have designed the about us title after that About Us section and the about us image then the about us description and then the paragraph of the about us description after that the heading of the about us description that's it we'll just remove this so after that we have designed the footer as usual so we are just going to save it so we'll just save about. HTML and and now we'll just move on to about. JS so now here we are on the about us JavaScript so first of all we have added the function update slide position so this controls the image slider it adjusts the position of the image wrapper by changing its horizontal translation based on the current slide index ensuring the smooth user experience so after that we have added preview slide and next slide so this preview slide and next slide handles the slide navigation they determine the number of slides and either move to the previous or to the next wrapping around when needed to ensure any infinite loop after that we have this read Moree function so this function displays additional information about the restaurant in the alert box when called preventing a quick way to ensure the details and then for the about a section JavaScript d dynamically loads the content like image description vision and the mission and then we have the about title animation so right here in the about title animation first the title fades in we set the initial opacity to zero then we use set timeout to delay the fade in effect by 100 Ms after that we apply 1 second transition to change the opacity from 0 to 1 making the title appear smoothly right after that the about us image animation next the image slides in from the lift initially it is shifted 50px to the left and hidden with the zero opacity after 300 Ms delay we Trigger 1 second transition to move it into the place and Fades in simultaneously after that we have about us description animation finally the description text fades in we start with the opacity set to zero and after 600 Ms delay we apply 1 second transition to bring the opacity to one and that's it for the about us page so basically in the about us page we have done some transition and it dynamically adds the content for the about us page like the food image description and the mission and here we have provide some transition for the aboutus page in the image description and all so that's it we are going to save this Javascript file and then we'll just look at the output so this is our about a space P here we'll just move on to homepage we have linked the about us page to our homepage and here you can see the transition which we are able to see is because of JavaScript we have applied all these transition this paragraph is dynamically being taken and this image is also being dynamically taken with the help of JavaScript and this our mission and our vision is also dynamically being taken with the help of JavaScript so this page has been kept simple and we have just applied transition and animation using JavaScript again here we have the footer so that's it about our about us page so right here we have built our homepage we have built the about us page so we have linked the contact us page with the aboutou US page we'll just fix that we have the cus page and now we are going to build the login page so we'll just move and fix that so inside the about. HTML what we have done is is we have not linked the contact us page so here we are just going to link the contact. htma that's it so what you have to do is you have to link every page in the navigation bar of every page like inside the index.html you have to provide this contact card about us every link same you have to do in about us same you have to do in card page and all so you have to provide every link to the every page so now if we go to about us page also and in about us page we'll go to contact us page we'll be redirected to the contact us page only so that's it so now we have to create a login and register page so again we are going to use HTML CSS and JavaScript to create the login page so here to create the login page first of all we'll make the login page HTML file we'll just write login. HTML and then we'll create l login. CSS and after that we'll create let's say we'll just name it as main.js and we are also planning to add one feature in our login page that would be user should be able to login with the email ID so for that also we are going to make one JavaScript page and that would be let's say login script.js so these are the four files that we are going to work on so first of all we'll work on login. HTML here we have written the login. HTML page first of all we have written the head section in which we have provided the title and then we have added the custom stylesheet link and then we have added the links after that we have created the navigation bar added the logo image and then again the material icons and the elements inside the navigation bar after that we have created one container we are going to create the login form here so for the login form we have given the ID class and onsubmit login event that basically we are going to add in the JavaScript and again we have given the heading that is login and label and input for the username and ID password so that is it this is required because user cannot move forward without filling that section after that we have created a submit button and then we have added one more paragraph which says don't have an account then you can register system so after that we have added one onclick function here and then we have added one paragraph which says register here so after that if the person doesn't have an account they can just click on register here and then the registration form will be visible so for that again we have created one form we have given a heading of register we have given the label input for the username email and password and then again we have created one submit button inside it we have also mentioned one paragraph that if you already have an account you can just you can just go to the login page again we have just added this on click function here which will show the login page and after that we have the simple button element wrapped with div this button is styled to have a black background and we are using font awesome for the Google logo icon which is added with it tag and the class of Fab fa Google this gives a nice recognizable Google login button so after that we have just added the script here we are going to use the login script.js and then we are going to use the main.js and then we have added the links for the Firebase authentication so we will just move on to the styling part and after that we are going to write the JavaScript which is the main part of the login page so this right here is the styling of our login page first we have have provided the global styling and after that we have styled our navigation bar the logo image the unordered list of the navigation bar and the every section of the navigation bar after that we have styled the items we have provided the hover effect to the navigation bar and then we have styled the icons so we are not using material symbols we are just using material icons so after that we have provided the additional styling and then we have provided the background image so so after that we have created one container and inside the container we have provided the background color padding border radius box Shadow width and the margin top and left then the form container in which the text alignment is Center then the heading two and then we have styled the label and the input after that we have styled the button then we have made the button hover and then we have styled the paragraph and the anchor tag then we have added the hovering effect to the Anchor tag and then just we have style The Heading that's it for the login. CSS and we'll just save this file now we'll move on to the main JavaScript and the login. JavaScript so inside the mean. JavaScript we will just give the code for the JavaScript for Firebase authentication so the person is able to login with their Google account and inside the login script.js we are going to provide all the type of form validations and everything that we are going to mention in our login page so let's just move on to login.js now so right here we have the JavaScript code for the login page this first section is basically to toggle between the registration form and the login form if somebody already has an account they can just click on to login form and the registration form will be hidden and if one doesn't have an account they can just click on registration form and the login form will be hidden after that we have this function so this function is basically to validate this username so the username here cannot have any number and if the username contains number they will just get the alert that username cannot have number they will just fet the username from login username and then they'll check it if the username is not valid they will just get this alert message so after that we have included this function to check the username and the password so if the username matches the username which is in the local storage and it will be validated and if the password also matches the local storage password then it will be validated and if not then user will get this alert message which says incorrect username or the password now that's it the password will be validated with the password the username will be validated with the username that's been stored in the local storage finally we have added some event listeners to switch between registration form and the login form we have added event listener to the button so that when you click on the registration button the registration button shows up and the login form hides similarly clicking on the login button will bring back the login form and hides the registration form that's it about the script of login page and here we have basically validated the username the password and we have added some event listener to toggle between the registration form and the login form so now what we'll do we'll just save this file and the last step is to add the Firebase authentication using login with Google so we will just quickly write main.js code and then we'll be looking at the output so this code is basically for the Firebase authentication we are going to add this feature into our login page that user will be able to log in using their Google accounts so first here this initializes your Firebase app with the configuration details and then we have this get authentication so this basically provides the access to the Firebase authentication Service and then we have this Google authentication provider this basically is used to configure the Google as a login provider and then we have sign in with popup so this handles the Google login popup process after that we have this Con Firebase configuration so this configuration object contains the Firebase project details these credentials are provided by Firebase when you set up your project so they are necessary for connecting your app to the Firebase services like authentication storage Etc after that we are initializing the Firebase and authentication so inside this we have this initialize app and Firebase configuration this basically initializes the Firebase app with the configuration that we have defined above after that we have get authentication app this basically initializes the Firebase authentication that will allow you to use the authentication features like login and log out so this basically tells the language and Ian basically stands for English so after that here basically we are setting up our login provider so this basically is used to set up the Google as the authentication method it defines the Google as the login provider that user can use to sign in after that here we are adding the event list to the login button so this Google login basically refers to our Google login button in the HTML code after that we have added click event listener and this basically adds the we click even listener to the button when the button is clicked the login process will start so basically we have this sign in with popup authentication provider this initiates the Google login popup when the user clicks the login button it takes two arguments we have mentioned here authentication and the provider so then in cat basically handles the error and the credential stores the Google credentials like ID token and after that we have the users and users basically contains the logged in users detail such as their email and the profile information after that we have console. log user so this basically prints the user details to the console and then on we have this window location reference this basically redirects the user to the homepage after the successful login and then we have this catch which basically handles the error if there is an issue during the login process such as if the user cancels or there is a network issue then error. code provided the error code and then the error do message contains the descript that's it we have included the Firebase authentication and we'll just save this file so after saving this file we are just going to go on login. HTML so we will not add the index.html here because we don't want the user to access the homepage without logging in so now that we have created every page so let us just look at the output here is our login page let's say I have not registered so I'll just register myself here I'll just write let's say we'll just give name as Ria and email ID will just write as 1 2 3 4 5 6 atate gmail.com and password will create 1 2 3 that's it we have registered and then we have our login page here the username was Ria and the password was let's say 1 2 3 we'll just click on login and then we are at our homepage and now we'll verify login with Google we'll just click on login with Google so actually I have already logged in with Google so my email address has been saved with Google so that's why I'm able to log in with the Google but if you'll integrate into your system then you will get your email IDs and then you'll be able to login with the Google so right here we have the homepage that we have created then on we have this about us page after that we have this mail page and then we have created the contact us page and then we have created the cart and after that at last we have created the checkout page and the last thing is to proceed right that's it this is our project we have successfully completed our project with the homepage about his page mail page contact us page login register page and the card page so this was our project using HTML CSS and JavaScript and further in the next video we'll study about the reactjs so let us just take a quick overview of react GS and then we'll just continue in the next video so let's have a look at some trending Frameworks so the first one we have is react meta developed react in 2013 it is a powerful Library that's been adopted by major companies like Facebook and Instagram then we have angular Google created angular in 2010 and it is another free teamw work trusted by big names such as PayPal and Samsung then on we have view ianu created view in 2014 and it has been adopted by big names such as Microsoft and Apple so there are so many front-end Frameworks in the market but react GS is widely used so after this let us see how react GS works so react GS basically is a open-source JavaScript library and react makes the development process faster and simple so it is used for building the user interfaces mainly the single page applications and also react allows the developers to create large web applications that can change the data without reloading the page so there are some reasons why do we use react so the first one is virtual Dom react uses virtual Dom to efficiently update and render only the components that change enhancing the performance next on we have development speed reacts reusable components and extensive life Library support significantly speeds up the development process then on we have stability with oneway data flow react ensures that the application updates do not unexpectedly affect the other parts then on we have interactive interfaces react makes it easy to create interactive user interfaces that respond seamlessly to the user input and then on we have component based architecture react component based architecture allows for modular maintainable and scalable code the then on we have server side rendering react supports server side rendering which improves performance and SEO for the web application then on we have SIMPLE to use react straightforward API and fast Community make it easy to learn and use even for the beginners then on we have flexible development so react flexibility allows developers to integrate it with various other tools and Frameworks adapting a different project needs so now let's take a quick overview of backend development so backend development mainly focuses on two components the web server and the databases on the web server we use server side languages like nodejs python or PHP to handle the requests we also need web server software such as Apache to host and serve our web applications lastly API integration allows different system to communicate with each other on the other hand with databases we have two types of databases relational databases like MySQL which store data in structure tables and laar relational databases like mongodb which store the data in flexible format it is ideal for unstructured or semi-structured data so that's it for this playlist in this playlist we have covered the HTML CSS JavaScript and then we built a form using HTML CSS and JavaScript and after that we created a full-fledged front- end project using HTML CSS and JavaScript so I hope you have enjoyed listening to this video please be kind enough to like it and you can comment any of your doubts 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