Google Clone with Step by Step guide using HTML CSS JS (Fully Responsive!)

hello coding stars welcome to the google clone tutorial in this video we'll be using html css and just a little bit of javascript to clone the google website at the end it's gonna look something like this this looks like the real google website right we'll be implementing the little details like the shadows on the icons and the underlines on the links when we put our mouse on them when we search something like hello it's gonna redirect to the actual google search result so let's get it started looking at the project directory we have images folder and inside that we have the favicon and the logo images here we have the index.html file with the blank html template and the style.css file so let's start by linking our css file into the html file and then change the title to google and link to favicon as well change the rel attribute to icon and add the directory of the favicon now inside the browser tab we have google and our favicon image so this is the website we're going to make so looking at the website we can divide this website into three big chunks we have the header at the top the contents in the middle and the footer at the bottom so going back to the html let's get the big structure first so we have the header using the header tag and the contents using the section tag and the footer so let's get started with the header first so in the header we have the navigation bar let's quickly code up the navigation bar [Music] first [Music] here we want to use this menu icon right here for the icons font awesome is the perfect website so let's go to google and search font awesome and let's go onto the website let's click sign in and if you don't have an account you can sign up the free version of font awesome is enough for this tutorial so when you signed up let's click this user icon and click kits and click here and let's copy the kit code so going back to the html file inside the head tag let's paste the kit code and let's go back to the font awesome website and search menu this icon seems great let's copy it and go back to the website are in the html file and just simply paste it here and if you have a look at the website here we have the icon and let's continue now we are done with the header let's have a look at the contents part so looking at our website here is our contents part so inside the contents part we have this one big wrapper and inside the wrapper we have the logo and the search bar and the buttons and the language part let's go back to the html and code it up [Music] [Music] [Music] [Music] now we're done with the contents part let's have a look at the website for the footer part so inside the footer we have the upper footer and the lower footer and inside the lower footer we have the left side and the right side now let's go back to the html and code it up and then both upper footer and the lower footer we're going to add another class called footer contents [Music] now we are finished with the footer part and yes we are finished with the html i know this does not look so good but i promise you this will get better when we get to the css part okay let's get started with the css let's go into the style.css file looking at the website we really don't like the dots beside each of the list item and also we don't like to have the underlined and the purple colors for all the links which are the eight eggs so let's get rid of them so for all list items we want to disable the list style good they're gone and also for every a tag we want to disable the text decoration awesome for every elements in the html file we want them to have margin of zero and the padding of zero and also the box sizing property of border box so what does it mean box sizing property to be bought a box according to the mdn website the border box tells the browser to account for any border and padding and the values you specify for an element's widths and height so simply when you have some sort of element with the height of 100 pixel that means that height includes the padding and the border of the element so we want all elements in our html file to have the box sizing property of border box so returning to our css so we want our body tag to have the font family of sans serif and we want its height to fill the entire screen so we're going to make it display flex so we want this to be a flexbox and the flex direction column now let's start styling our header [Music] [Music] [Music] before we style the menu icon and the user icon if we have a look at the website we can see that there are shadow effects when we hover over them so let's go back to the html wrap the icons with another div tag let's give them the class name of circle shadow this looks good let's go back to the css file and continue styling [Music] do [Music] [Music] [Music] now we've finished styling our header so let's get rid of this red border this looks awesome now let's start styling the content section [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] now we've finished styling the content section it's looking pretty good now so let's get rid of these boxes the borders i mean now let's start styling the footer section of our website [Music] do [Music] [Music] [Music] [Music] [Music] [Music] do now we've finished styling our footer look at this this is looking fantastic however this is not the end have a close look in the footer when we resize our website to make it smaller oh look this is bad this is not responsive at all and also have a look at the search bar it's cutting on the side this is a bad design when it comes to mobile and tablets so let's have a look what we want if we have a look at the example website it is fully responsive the footer is relocating itself to match the view and the search bar is shrinking with the size of the window so let's go back to our css and work on the responsiveness so we are going to alter some css properties and their values only when the screen width is less than 650 [Music] pixels now the search bar is looking good and now the footer is looking good let's have a look at the website we created this is looking amazing but one more thing in the actual google website when we search a term like hello it redirects to the google search results let's implement that so going back to our clone website oh we don't like this we don't like the border when we click the search bar so let's go and remove that and the style.css file let's go all the way up to the search bar here it is this is looking better so let's implement the search functionality so we're going to create a new file called main.js and we will link this main.js to our html file so at the end of the head tag let's add a script tag with the source attribute and the main js and don't forget to add the differ attribute so the differ attributes make sure that the html page is loaded before the script runs so this prevents the javascript referring to the dom elements before they are loaded before we dive into the javascript let's add an id to our search input so id search input and let's go into the main.js file const search search input document query selector and let's refer to the element with the id of search input now let's implement the search function so what this line of code does is that inside the input constant we're going to store the value that's inside the input tag when we search something on google like hello we are redirected to a url that looks something like this so let's copy this and let's type window dot location dot href and paste it inside this quotation marks as a string have a close look in this url we can see that this part and this part contains our search term so let's alter this with the value inside the input [Music] there you go so let's add an event listener to our search input so what this block of code does is that whenever a key down event happens this function is going to run but the search function is only going to run when the event code of the key down event is the enter so let's go and see if this really works so we are back to our website let's try it so let's search hello yay it worked let's go back to our completed website and celebrate this completion good work before you go just a final one more thing after i finished recording i found out there is a little problem in the responsiveness of our website when it comes to small mobiles so i added a little more css and uploaded them on github so make sure to check out the source code in the description below thank you so much for watching this video and if you liked it don't forget to subscribe let's learn and code like a star

Channel: Coding Star

Views: 3,023

Rating: 4.9692307 out of 5

Keywords: Clone Codindg, Google Clone, Web Development Tutorial, HTML CSS JS, clone coding tutorial, google clone coding, google clone html css, responsive website, responsive web design

Id: _dozVhnTx3Q

Length: 32min 21sec (1941 seconds)

Published: Fri Apr 23 2021