Instagram Homepage Clone Using HTML, CSS GRID and JAVASCRIPT

[Music] hello welcome back to seed media today we're going to attempt to clone the instagram home page and as you can see on the instagram homepage a couple of features that we're actually going to try to replicate first is the animation that is between the iphones as station on the center of the screen we also have the placeholder moves up when you type the password section and the username section we have a show and hide button to the right hand section of the password field and when the password and user i enter to the required field the login button becomes active there is a line that comes through a text that says all and we have a favicon at the top right corner we've already implemented that on our blank page and we also have the two icons that says get it on google play and app store and it puts at the bottom of the page we're going to try to implement that using html css and javascript without wasting much time let's get started let's head over to our code editor it's going to be visual studio code and start coding let me take time out before i start actually writing any single line of code or markup and explain what the folder structure looks like in the folder we have an instagram underscore html as a parent folder and under the instagram underscore html folder we have a css folder that houses three css files the animation.css the the css and the style.css each of these files are named as they are expected to perform for example the animation the css is going to hold the keyframe that's going to be responsible for the changing of the images within the iphone image responsive those css is actually going to make our website responsive and style.cs is going to hold the general styling of the website directly below the css file we have a fonts folder that is made up of two different fonts one is the roboto font with the bold and regular formats of the roboto fonts we also have the billabong fonts the bottom font is going to be used for the generous font of the entire website or the billabong font is going to be used to style the logo of the instagram page we also have an image folder that is made up of a folder that's called random the random folder is going to represent the images that will change within the front page of the website we have six images numbered from zero to five and each image has been cropped above a size of 240x425 so just in case you want to follow along in this tutorial you can get several images and actually crop them to that size we also have two images the android.png and the apple.png and those are the images we saw at the lower corner of the instagram website we also have a favicon. icon that was generated using one of the online free favicon generator tools online you can simply google them and you're going to see a lot of them you simply got an instagram image that had a transparent background and passed it to one of the online favicon generators the homeowner.png represents the two iphones that we're going to style our animated images in between and we have an index.html that currently just holds a link to the style sheets the favicon and the phone awesome library and also at the bottom of the body section of the html document we also have a link to the script.js the script.js is responsible for the logic of the website that we're going to make use of is going to save some parts of the website for interactivity between the user and the webpage so let's get started we'll open up the index.html and the first thing we need to do is create a d with account with a class of container and it's going to serve as the parent's disk and within the deal we create another div with a class of images that's going to house these six images that are going to use for the animation and let's create an image tag let's give that six we don't need the old section of this document let's give it a source of images slash random slash server yeah okay we print our reserve so let's just change the numbers to zero two three four five okay i remember we're going to be making use of the live server to preview our website and our default editor for this course is the mozilla firefox let's adjust the visual studio code so we can actually see some of the changes as they occur right now we have the six images that we just put are spread out across the web page in no particular format or style by the time we get to the css section of this site we're actually going to install it and make it look better so let's keep adding our html markup this is d with a class of login container and within the login containers we're going to have another team with a class of logo and a text that says instagram yeah you can see it right now because the images are covering it so we should stick to the instagram website and style our pages enter our markup based on what we expect each markup to actually perform on the website so we are doing this we've gotten the logo that says instagram we have a form we're only the action section of the form reform will be submitting anything let's give it div i have three d's well then we're not gonna need classes so i just created this right i'm putting those classes here the first div is going to house a span with an id of pass with an idea of user placeholder right yeah and within yeah you're gonna have a phone number a scene a username or email yeah it's gonna serve as the placeholder texture scene within the input element of the on instagram page next we're going to have an input for the type of text an id of username and on key attributes key up attributes that's going to call a function that says check input a function is yet to be created it's going to be created within the javascript section of the website the second div is going to have another span with an id of pass placeholder that's going to serve as the password placeholder and text of password and we're going to have an impute password elements don't need this with an id of password and an attribute on key up attributes of check input yeah i think we're getting good let's verify this a little bit and we don't think we need it sold what we need to talk d4 now before we do that let's add remember i told you that we have a show button so let's add the show button directly below the input element and the show button is going to be an a tag of a pound symbol telling that we don't want the a tag to link to any other page and it's going to have an event with on click events of height show that's what i call a high show function an id of an idea of hide show and the text of show save that as well and the last d is going to contain the submit button with an id of submits and a class of btr okay i'll move this down let's make the styling a little bit cleaner let's give it a type of submit let's save that and let's see what we've done so far on our web page okay you can see the other section we just created as the login section is pushed down as the images are just scattered about the page let's keep creating our markup for the html section of our website okay so be directly below the form elements we're going to have a h5 element it's going to have a spam tag that says oh we're going to use this to attempt to create the all section this section you're seeing within the instagram website that says that has two lines the right and left of the text that says okay and directly below that we're going to have another login right you give it an id of fb forgot maybe we forgot late traffic elements didn't go anywhere out in the area of element we want to put a font awesome icon for the facebook i'm going to have a class it's f a b f a facebook square i already know i've used this a couple of times so i know exactly what to expect with that and the text that says log in with facebook right here catholic we have another div the class of every forgot as the forgot password section that's just going to be a simple a tag that says forgot password the question mark yeah we save our work as we keep going okay the next section we need to develop now is the sign up section i can see that that dv is directly outside the login div so we need to come we can collapse our logins so no login controller exactly where it stops and create another div that says let's call it sign up link this is partner say don't have an account any tag elements links nowhere i'll say sign up yeah so directly below that we get another d outside that's called this mobile app you're gonna have a paragraph that says get the app okay and directly below that i'm gonna put input two images two image tags and the first one is gonna link to images slash android yeah let's call this on the second one it's gonna be so apple.png so don't need alternate tanks and last but not the least we create the footer section of the website and the filter section is going to come have a couple of a tag so i'm just going to pause the video or make the video a little bit fast while i fill in the remaining expected eight tags within this section directly after the eta we have a spam tag that says as a copyright 2020 instagram from c media yeah whenever i actually write instagram from facebook since it's actually a clue so let's save our work and view the page we've created directly on our browser you can see that everything is out here now we've we've gotten the entire structure of our html documents so even it doesn't look too pretty the next thing we need to do is head over to our style.css page stop imputing the general style for the website let's get started first thing we need to do is but first let's import our fonts front face font family i'm going to call this billabong and the source of that is going to be url fonts and we can just copy these out we're going to be importing two points and the circumference is robo tell fonts resource is going to be the roboto folder i've got to leave that so you can import all the files within the roboto font and the next thing i'm going to do is to declare a couple of variables that we're going to use for the entire part of the website first one is going to be called fb blue that's gonna have a variable of three eight five one eight five i'm gonna secondary gray we're gonna hash d b d b a b yeah the next one is going to be but agree it's going to just write three outs but let's just go with that active gear 5 six yeah if you're done with that now we want the each element or the entire element on the website have a border box sizing box sizing or border box reset the padding to zero and imagine to zero you can affect that yeah let's swear that effect let's comment this out and save it again and see yeah so i'm good to go then we give it a font size of 14 pixel and a font family of roboto save that we also give the body a background background color of f a f a f a a little bit of off-white save that then we head straight off to the container element and start our styling we'll fill the container limit we have a display property of grid and the grid templates columns is gonna be repeats four one fr that means we're gonna assign one fraction of the four columns equal size to each of the columns that we created we're going to have a grid row bit template row i'm going to repeat 7 100 pixel and you can see that automatically adjusted the website now we have four columns and seven rules if you want to see the green line of what you're working with you can right click on the web page click on inspect elements and under the layout tab you can click the overlay grid check it and you're going to see the grid numbers for each of the sections of the website now we have the grid numbers out let's keep typing our codes and let's keep styling our website now the container sort of images i'm gonna give a great column of two yeah great column of so that's these images are over here grid column of two you can see that grid column line two i'm gonna give it a pattern top of 20 pixel and a background image program image of url now we want to import the home on png image save that we can see directly just at the top corner of the the top section of this cart image you can see the background image iphone image is showing directly above that i'm going to use css to adjust it to make it show better okay so let's move this over here let's set the width property to four five six pixel and the height property to six one eight pixel plug in the margin or right at fifteen pixel you can see the image positioned out but it's a little bit pushed to the right hand side because of these large images on the left hand side as the google play and the iphone store image by the time we move it down it's going to readjust itself that's all we need for there so next let's target the login controller container i keep saying control i don't know why login container and let's give it perspective on the grid column column of three save that let's see if we can see it okay a little bit on this side here and the quick column of straight you can see it's run three and um with the border one pixel solid we call the variable secondary gray i'll give you the height a height of 350 pixels this content is going to look good and a width of 350 pixel we still here 350 pixel click imagine top of 40 pixel and align all the text pixel lines into the center of the of the div let's give the background color of fresh f i think we missed something out here the images are still moving around by now we should have found a way to move these images to stay within the iphone so let's target the images within the container dot images the img tag okay let's target it and let's give it a position of absolute i use a width of 240 pixel and a height of 427 pixel 7 pixel let's get a margin top of 80 pixel let's save that okay you can see all the images have aligned to the under themselves so let's give it a margin left of 150 so yeah so it's perfectly centered between the iphone image now we can clearly see our older images we still have the google icon on the play store icon pushing the other sections of the website to the far right of the page we're going to work on that and adjust that in a bit so let's also look at the login controller container i keep saying control i don't know why i get that from logging container dot logo okay and for the logo we're going to get funds family of billabong save that so you can see that immediately we save that it's supposed to change i think i spelt this out wrongly let's give it a padding will go back to the 20 pixel and um a font size of 50 pixel yeah but the font isn't changing why okay i didn't spell the font name well yeah that's it okay so but again what else do we think we can do to that yeah the image the logo is not exactly like the instagram logo i don't want to just cut this out and make use of it i think it's a custom font they're making use of a time this was actually the fonts the original fonts that the instagram website made use so i think it's fine just gives an illustration of what was done on the website so let's leave it at that so the next section we need to target now are the input elements directly below the logo well let's also align text center text align center yeah okay good so we can target the impute images now so that's a login container input i'm going to give it a margin of 3 pixel 15 pixel i give it a pattern of 10 pixel and the width of eighty percent of the entire container you get a border one pixel solid the variable of secondary gray yeah okay you know that's for the border of the input elements i'll give it a border radius of two pixels to make the edges a little bit rounded now we want to target also the input element when it comes under focus for that we're going to use the focus pseudo selector and we're going to say when it comes to that focus we want the outline because if you notice this now we click on the focus there's an outline so i want to say that when it comes to that focus we want the outline to be none i'm going to put importance so it overwrites any other previous styling that might be tied to it important only border or one pixel solid nine with nine c nine b nine b most of all these colors are colors i might watch that one points at the other so you can understand why i can get them off my head or get them based on research so you got a border radius and also so pixel on focus yeah so that looks good now okay so zero pixel i'll say it looks like yeah so one pixel is fine okay so next we need to move the show button to its proper position so that it doesn't displace the password input element i'm going to target the height show id for the position of absolutes absolute and will imagine of 5 pixel 0 0 minus 70 pixel and bring that into the principle now brings it into the input element with a border of zero we don't want any border at all and a padding of nine pixels outline of none and the cursor should be pointer through the background of transparence we don't want anybody to show when it's clicked and the font weight of board text decoration none to take out the underline that we have with it and the color of black i think we're good to go with that i think you have to accept that our pages page is starting to look like what we have over here so let's keep going and see how far we can get to actually recreate the initial the actual design of the instagram website placeholder starts the past list holder and the user place order as the spam dispen elements that holds the text password our phone number username or email the first one is font size i'm going to give it a font size with the font size of 14 pixel and um position absolute margin 16 pixel 0 0 25 pixel color we are border gray makes it look like it's faded the points are going to events gonna be none don't want any pointer event to affect it on a transition of 0.1 second ease in out okay so the image is actually it's actually squished up because of this image that's pushing it's pushing the other elements across it so it's not getting its appropriate spacing this is going to actually adjust itself the image is over here actually but the reason why is our screen way to hide this image is going to straighten out so let us start with the bottom of the button called we said i had a button go ahead and put a text login let's start a button i have a button submit i'm going to get um btn i'll give it a width of eighty percent eighty percent and then a padding of six pixel margin top 10 pixel background color of vr variable active blue border radius 5 pixel a column text color of white i'm also going to have a font weight of board border or one pixel solid transparent and close this up so you can have more space one pixel solid transparent and a custom typing custom of pointer yeah so let's try to let's what we're going to do next is create this section of it that says the two lines on the left and right and all text in between but for that we're going to target the h5 elements within the login controller h5 element login controller i'll give you the width of 80 as well a border bottom or one pixel solid a5 585 margin of 10 pixel 35 to 5 pixel and a 10 pixel and a line height of 0.1 frame pattern top of 10 pixel and color repeat this color here yeah to make it a little bit faded so now we're going to give this part element a span element within the h5 a background color of white to create the illusion that the lines are divided into two so let's say background of fff see that and give it a padding of 0 20 pixel i think we've done well so far so next we move on to the fb login icon fb login we're trying to start it so i'll give you the text operation of none give it a column yeah fb blue give the font size to 14 pixel iphone which on top of 20 pixel okay i will target the font awesome icon between the login div i'll give you the font size of 18 pixel and a padding of 5 pixels just to make it a little bit bigger let's go back and say font five bit login oh it's taking the code is fb forgot it should be fb login let's be login and this should ever be forgot yeah so i think we're good to go sorry so let's head over back to the fb login and the fb for that and give them a starting of padding of of true pixel yeah the next uh element the next d that we need to work on now is the fb forgot a tag but it takes decoration of none the color of vr has a fb blue and a font size of 12 pixel particular is good front side of soft pixel sign up link then put the sign up link to a grid column of negative three negative three grid row of five let's turn on the but let's turn on the grid overlay so you can see the grid columns we're making use what targeting right now negative three on five somewhere over here so let's save that okay moved over there so it moved over here takes a line sensor have a border of one pixel solid vl variable secondary gray and have a pattern top so my typing is off today adding top of 25 pixel height of 70 pixel and the width to match the login div of 350 pixel looking good with the font size of 15 pixels yeah let's see later background color of triple f yeah so it matches the so next we need to target the a tag we change the sign up link i'm going to give it a text decoration of none take out the underline here the color of vr active blue crosser pointer font size of 15 pixel on front switch on board save that okay there you go yeah i think that we've jumped a little bit further with our board and finally the mobile app that has been displacing other images within between the entire web page we move it to a grid column the grid column of minus three save that grid row of six text align center the width of 350 pixel and a font size of 15 pixel front weights normal yeah i think we are good to go we need to target the images that make up these two logos i will say it's that image tag i'll give it a width of 40 percent save that to make it smaller percent and padding top of 15 pixel just jump it up when it refreshes we'll sort that out in a border radius of five pixel okay i'll move straight off to the footer the footer elements and really padding so it moves a grid row of eight okay so first yeah it's refreshed it says okay now it shouldn't be having an extra space between the grid column or one that spans across to five then we give it text align center we can target the a charge within the footer directly and give them a padding of 10 pixel font size of titan pixel text decoration option of none and the color of seven six b and for the span elements that is the span target is built up within the foot so you can target that and give if it's a pattern left of 10 pixel font size of 10 pixel text declaration of none on column of 8088 here as a save yeah that's it okay so let's take a look at our website and yeah it will be the original instagram website i think we've gotten close to it what do you think let's close this up we've gotten close to it and input the inspect elements and see what it looks like let's see what the grid areas look like yeah i think we've gotten close to it not exactly the same but we're close let's see what the website looks like in chrome instagram.com on our lovely looking our website so coming here at first you might not necessarily just know the difference so let's move on to the animation section of the website so we're going to open our style animation.css probably a little bit faster with this i'm going to call the i'm going to target the image immediately images div an image tag and give the animation just name the name of changer animation the timing function i expected the animation to play out ease in out animation iteration count infinite that means you want the animation to keep running i give it a animation duration duration how long do you expect the animation to run once around for 19 seconds animation direction direction i wanted to run alternative alternate that's going to go both left from right and right to left the next thing we need to do is define tag the images that we want to be affected and what image image tag the end position of type one i'm gonna have animation delay how long you want the animation to be delete before it actually runs let's duplicate this new cages four five six seven you have about six images unless one for one more the first one to run for 16 seconds and one two to run for 12 seconds 12 seconds once three run for 10 seconds one four round four seven seconds one five one for three seconds and the sixth image is gonna be the starting image zero seconds we save that number changes it then we have to assign the keyframe i'll give it assign the name of changer that we assigned created here initially when we're calling the animation and we turn the keyframe the animation's going to run from 0 to 100 percent so we need to tell it what is going to do at each different percentage of the animation okay we're going to need about five of it we're going to take care of our five percentages it's going to be if it is going to be visible the opacity is going to be one at 25 percent the opacity is going to be zero that means the image is not going to that initial image is not going to show anymore and that will pass at 45 percent one opposition still will be zero after it lets you 65 percent you can play around with this until you get your desired results still zero and um 85 percent opacity is still zero and we go down to hundred percent and have an opacity of one beautiful it's unlike what we have here that's what we just did so let's move on to the responsive.css and see what we can do with that responsive.css is actually the shortest file within this project and all we need to do within the response of the css is the container property images and make the display puzzle so when we remember we set the media with max suites of emergencies now set the market of h75 so if we were to adjust this now so when it gets to in weight of 875 economically adjust it takes away the image and adjust it that's basically how it works just like the main page so that that's basically what we're doing so let's head over to our javascript section of the website and see what we can do over there so open our script.js file close the left panel first i'm going to declare a couple of variables const username and it's going to relate to this little house the document dot gets element element by id you just copy this out because i'm going to write this a lot once which critical username whenever we have a field called username that's the impute element with the id username so we're getting that element by its id username you don't play solo let's say that's yeah okay let's move this away since this work are going to be this way the changes are going to be reflected the first thing we need to do is declare on the window object to say window dot on load we want to call it function disable button we want to make sure that the login button is disabled and we also want the toggle button dot style dot visible accessibility is equal to hidden reason is not showing because the disable button function the table for button function is going to be quicker let's declare a function with the name disable button and we're going to have a submit button that's disabled repository submit button dot style dot console equals to autumn i submit button dot style dot background color call to hash b4 bffd save [Music] yeah i didn't get the background color properly so you can see when the window loads is disabled the color changes you see just like this this original second website color changes and we can't click on it the cursor is also this this black auto custom so we've gotten that right we also want the show preferred to hide this they show text to be hidden so let's take that out again so we're gonna have another function function called check input remember the function that was called when you type with your keys where your key goes up there with the attribute on key up within the impute elements on key of check compute yeah let's make this checking piece should be capital i right here check computes capital i uh check input i'm going to say if username dot value this and password dot value is not equal to an empty string that means if the boots contain a text or not just a text of new type submit button dot disable also false want to enable the submit button and submit button for style dot cos i make i'm doing basically just in the most procedural way possible so you can understand what i'm doing pointer this and submit button dot background column the background column record [Music] one f 95 f6 save that else call the function disable button function yeah so we do this with this enables if you clean that and clean that disabled back so next we need to check password values so if password dot value is not equal to an empty string by checking only the password value now toggle button dot style dot vcbt is also visible pass holder install dot imagine will record to 5 pixel 0 0 20 pixel and the pass holder your style dot font size goes to 9 pixel else disable button or return this back disable button i say let's go to hidden and let's make this 16 pixel 0 25 make the font for 10 pixel save i'm going to do the same thing for the user name i want to say check user name values okay so let's just copy all this out because practically almost going to be the same code by writing except with different names okay let's call this username and value it's not going to have the toolbar using the top of this let's change this to user holder savvy don't see so if you type this it goes up you come down typicals it's not working why username is not working let's say what mistake we made to username so mistaking place we appreciate should be user you got placeholder here so if you do this and do this now and do this show we can show okay not done the show but but yet okay let's do the show hide now it's gonna be outside this i'm gonna call this a function or show of hide show and if password checks for the password type or type should you go to the code of password you will type its password wants to go ahead and say password.type the call to check and also should toggle button.html close to hide else copy this password type equals to password probably you're going to record to show so let's see we have this this you can show a high show height because i think our text doesn't clean off when we reload so we can make sure it goes by saying the scripts we can see windows load we're gonna say username and password username dot value is a call to let me just shrink it yeah regular page when you type your characters for example it just shows the button i don't like i wanted to have a little bit of animation just to make it a little bit slick so let's go back up here and see on the check inputs function i'm going to give it the submit button a style dot transition close to zero points eight seconds here let's see how that looks i think it's gonna be better not just popping out the color directly so let's type this and yeah just come here so i thank you for sticking around this long it's been a very long journey but i think it was all worth it so let's take a look at the original instagram page and our cloned instagram page you can make adjustments to it make changes to each other tweak it the best way you can and send it over to me i would like to see a copy of what you got thank you don't forget to hit the subscribe button and i'll see you at the next video

Channel: Ceed Media

Views: 987

Keywords:

Id: _GCdK9jXUf4

Length: 44min 40sec (2680 seconds)

Published: Mon Aug 17 2020