Build Responsive Design For Figma Design || Figma to HTML (2022)

hi welcome to my course convert a sigma design to a real website in this course you'll learn how to turn this figma design into a real website using html css and javascript here's the demo of the website that will be designing it is a single page website and you can use the same knowledge to design the other pages of the website and we also have this animation for the different elements of this website for making it look even better and modern the design is responsive so we also have a mobile version of the website and here's the mobile version of the completed website we also have the animation for the mobile version now the prerequisites for this course are a basic understanding of html css and javascript but in this course i'll write every single line of code on screen and i will explain them as you write them so even if you're a beginner you'll be able to understand what we are doing the next thing you need to have is a figma design which i'll be providing as a resource for you to download and then you need to have a computer or a laptop that can run the code editor that will be using in our course which is vs code and also the figma application so if you are ready i invite you to join me in the process of designing this website from in this video we will set up the project so we'll get everything ready for getting started with the code now the first thing you have to do is download figma so just go to figma.com and this is the homepage of figma now we have the figma design as a reference so we have to install figma to open the design so just go to figma.com and create an account they also have a free plan so you can go ahead and sign up for free and then if you scroll down you will find a link for the downloads so here we can see in resources we have downloads or you can directly go to figma.com forward slash downloads and now you can go ahead and download the desktop app for windows or mac after downloading figma just go ahead and install it and once you open it you will find a screen something like this now the next thing you have to do is open the design in figma now i have provided the figma file as a downloadable resource in this course so you can just go ahead and download it so here's the file animatedhomepage.fig now the next thing you have to do is open it in figma it is really simple you can just go ahead and drag this file over here into the figma browser and we can see that it is being imported and the file has been imported successfully so in this way you can open the figma design so i'll just delete it because i already have the design and then just double click on this file and you will get this design right here so this is the design that we're going to convert into a real web page now the next thing you have to do is download a code editor if you don't already have one in this course i'm going to be using this code editor called visual studio code so you can just go to code.visualstudio.com then download vs code for your operating system and then just go ahead and install it now let's open our project in vs code so i have created this folder called animated home page so you can just right click over here and click on open with code and here we can see that our project has been opened in vs code now let's create the files that we need so let's click on new file and we'll just name it index.html and we'll create one more file and we'll name it style.css and then we'll create one more file and we'll just name it main.js and we'll also need a folder to store the images so let's go ahead and click on new folder and we'll just name the folder images all right all the files that we need are created now let's go to index.html and let's write some boilerplate code now it is really easy in vs code you can just type exclamation and press tab and you'll get this boilerplate code for html5 let's go ahead and change the title to animated home page you can add your own title over here and we'll also link our style.css file so let's type link and press tab and in the edit you'll just type style.css so we have linked our style.css file to the html and we'll also link our javascript file so let's type script colon src tab and we'll just type main.js now the next thing we have to do is add the link of the phones so let's go to our figma file and let's see which are the phones being used so double click over here and we can see that the font is called oleoscript slash caps and the other font that we need is open sans so let's go ahead and download these two phones so you can just go to fonts.google.com so let's search for oleos script slash cabs so this one right here let's click on that and we have all these fonts over here let's select the regular one so just click on select this style and we also need the open sense font so let's go back and search for open sans so let's click on open sans and let's add this font as well so if you go back to our figma file i think this is the bold version of the phone so this is the bold version here we can see so we need to download the bold and the regular versions of the font so let's select the style for regular and let's also select bold all right so here we have audio scripts flash caps and open sans bold and regular now here you can see we have the link so you can just copy this link from here and paste it in your html so let's go back to our html file and i'll just paste the link over here so the phones have been added to the html now the next thing we will do is we will create some variables in css for the colors so let's go to stylo.css and we'll create all the variables inside the root so that we can use it anywhere in our website so i'll just type colon root and in curly braces we will add the variables so let's go back to our figma file let's scroll up and here we can see all the colors that we need so let's select the first color and here is the hex code for the first color so let's copy this now to create variables in css you have to type hyphen hyphen and then the name of the variable so for the dark color we'll have the name dark color and here we will add the hex code so just type hash and paste the code over here so we have created this variable for the dark color now let's copy the hex code of the other colors so the next color is this pink color so let's copy this and let's name it pink color and then the last color that we need is this light color so i'll just copy this and we'll just name it light color all right that's it with the css for now now the last thing we need to do to set everything up is to export the images from the figma file so let's go back to our figma file and here we can see for our design we have some images that we have to export to use it now i'll just show you how to export a couple of images and then you can export the rest of the images so we'll first of all export this logo so just double click over here and we can see that logo is selected now you have to make sure that you're in the design tab and then scroll down and you'll find this option called export just click on the plus icon and here we can see a preview so this is the image that we're going to export now since this is kind of like an icon and it's not a photograph so we can export it as an svg file now the benefit of an svg file is that even if you increase the size of the image the quality will not reduce so if you have some basic shapes that you want to export then you can export it as an svg so let's go over here to the file type and let's select svg and we'll leave everything as it is and click on export logo right here i'm in my project let's go to images and let's save it as logo and i'll just click on save now if we go back to our vs code we can see inside images we have this logo.svg file now in the same way you can go ahead and export all the other images also don't forget to export these icons for the mobile version these two icons from here don't export the whole container just export this icon from here we'll create this container using css so just export this icon and also this close icon right so i have exported all the images inside this images folder in the previous video we set up our project and here we have the three files index.html style.css and main.js file and we also have exported all the images inside this images folder so everything is ready for us to get started with the code so let's get started we will start with the html so let's go back to our design and this is our design and we'll create a container division to hold everything so let's create a division with a class of wrapper and you can create a division by typing div and you can give it a class of wrapper but there is an easy way to create a division with the class so you can just type dot and the class name and press tab and you'll get this division with the class name so this is a shortcut that vs code has by default because it has an extension called emit already installed in it now let's open this in our browser so for that i'm going to be using an extension so you can go over here to extensions and you can search for an extension called live server so here i have it installed already so this is the extension by ritwik day so just go ahead and install the extension and then you can directly open this html by right clicking over here and clicking on open with live server now the benefit of using live server instead of directly opening the html file is that you can just add any content over here for example if i type hello and if i just save it and go back to the browser you will have hello displayed over here so we don't need to refresh the browser every time so it can save you a lot of time so let's go back over here and delete it now let's go back to our design and here we can see on the top we have the logo on the left and then we have the navigation menus and then we have this button over here on the right so for that we just create a nav element so we can just type nav and press tab and we have this nav element in html5 so in that let's create a division to hold this logo so let's type dot logo tab and in this division we'll add an anchor tag and we'll just type hash over here and in the anchor tag we will add the image now we are adding the anchor tag over here because if you want to add more pages to this webpage then you can use this logo as a link to go back to the home page so in place of hash you can type the url of the home page so whenever the user clicks on this logo they'll be taken to the home page of your website so here let's create an img tag and in the src we will just type the url of the image so just have images slash and i have this image called logo.svg so let's go back to our webpage and here we can see our logo is being displayed right so let's go ahead and add the other elements which are the menu items and this button now for the menu items we'll create an unordered list so let's go over here and get outside this logo division and let's create an unordered list so we'll just type ul and in this will have a list item and in that we'll have an anchor tag and in the anchor tag we will type the menus so the first one is home then we have testimonials features downloads and then we have this contact button so let's type home and i'll just copy this list item and paste it four more times all right the next one is testimonials and then we have features and then we have downloads and lastly we have contact now contact is a button so here we can see it has a different styling so let's add a class over here as well so just type class equals and we'll just give it a class of btn and there are two types of buttons in our design so here we have a light button and here we have a dark button so for this light button we'll also give a class called light and we'll style all of this using css but for now let's continue with the html so we have written the code for the logo and the menu items let's go back to our web page and here we can see we have the logo and the menu items let's go back to our design and the next thing we need to have is this image on the left so for the image and for this text over here we'll create a container division so let's go back to our code and let's go outside the nav and here i'll just add a comment now to add a comment you can press ctrl and forward slash and i'll just type end of desktop navigation right now let's create a container division for the hero elements so we'll just create a division with the class of hero wrapper and on the left we have the hero image so just type hero image and in that we'll have the image so i'll just have img and i have stored the image as hero image dot svg now i didn't export this image with this ground so here we can see that we have the image but we don't have the ground we'll be creating that using html and css now if you exported this image with the ground then you can go over here and click on this arrow and just click on the hero image and we can see it is just the image and then you can just export that right so we have added the image and now for the ground we'll create a division and we'll just give it a class of hero ground and that's it we'll style it using css now let's move on to the other part of the hero section which is the text so let's create a division with the class of hero text and in that we need to have a heading so the heading is learnt to design awesome websites so i'll just copy this and i will create an edge one and let's just paste it over here now here we have added the heading in two lines learn to design in one line and awesome websites in the other line now let's go back to our browser and here we can see that it is all in one single line so in html you cannot just add a line break like that to add a line break you have to add a tag called br so you have to type br and now let's go back to our browser and here you can see we have the heading in two different lines all right now the next thing we need to have is this text so let's copy this and for this we'll create a paragraph so after the heading let's create a paragraph and we'll give it a class of subheading and we'll just paste it over here alright so here we have the heading and the subheading now let's go back to our design and now we need to have this learn more button so let's go back and for that we'll just create an anchor tag so here we'll just type a and we'll give it a class of btn and here we will just type learn more right so here we have the button now the next thing we need to add is this group of social media icons so for that let's create a division with a class of social icons so let's go outside the hero wrapper and we'll create a division with a class of social icons and we'll create anchor tags for all the icons because we want to link it to some page so let's type a and here you can add your own social media links i'll just type hash for now and in the anchor tag we will have the image so just type img and here we will just type images slash and the first image is instagram and then we have facebook and twitter so let's type instagram logo.svg let's just copy this and paste it two more times and the next image we want to have is facebook and then we need to have twitter where the images have been added and we can see the logo is being displayed over here now the next thing we need to have are these three images here on the left and this background image here on the right now for all these left images we'll create a wrapper division with a class of hero bj left and for this one we'll create a division with a class of hero bg right so let's do that so let's go outside the rapid division because we want these images to be around the corners of our design so here we are outside the rapid division this is the start of the wrapper division and this is the end so he will create a division with a class of hero bg right and we'll just type img images slash hero bg.svg and we'll create another division with the class of hero bg left and we'll have three images over here images slash and i have named these images bg left one two three so let's add all of these images i just duplicate this line of code two more times so you can just press shift alt and press the down arrow and let's change this to two and three all right that's basically it with the html for the desktop version let's go back to our browser and here we have the logo the menu items we have the hero image the heading the subheading this button and these three social media icons and then we have the background images so we have all the images and the elements ready for us to get started with the styling so that's it for in the previous video we wrote the html for our home page and this is our code so we have written all the html for our design and this is how it looks in the browser so now let's start with the css now in this video we will style this navigation menu so we will have the logo on the left and the navigation menu on the right and the contact menu will be a button so here you can see so let's start with the css for the navigation so let's go to style.css and here we have already declared the variables for the colors now first of all let's add some css to reset some of the values of the browser so let's type asterisk and this will target all the elements inside the webpage and let's set box sizing to borderbox now this line of css makes sure that when you add padding and border to your elements they will be included in the width of the element for example if you have an element with a width of 100 pixels and if you add a padding of 10 pixels to the left and the right then the total width of the element will be 100 pixels plus 10 on the left and 10 on the right which makes it 120 pixels wide but if you add this line of code then the total width including the padding will be 100 pixels so that will make it easier for you to calculate the width and the height so we'll just add this line of code box sizing of border box and we'll also set the padding to zero and the margin to zero and if we take a look at our browser we can see that all the padding and the margin has been removed all right now let's add the font family so if i take a look at the design we can see that most of the design has the font of open sans so you can see it is open sense and even these menu items have a font of open sans only this heading has a different font so let's go over here to our stylor css and here we'll type body and for the whole body we will have a font family of open sans and we'll have sans serif as a backup phone right now if we go back to our index.html file we can see that everything is included inside this division called wrapper now let's go back to the design and here we can see that we have a set width for our navigation menu so let's click on this and we can see we have a width of 1152 pixels and all the other elements are included inside this width except these background elements so we'll set the width of the wrapper division to 1152 pixels so let's go back to styloid css and here we'll type wrapper and we will set the width to 1152 pixels and we'll bring everything to the center so we'll just type margin and for top and bottom we will type 0 and for left and right we'll tap auto so now this will bring everything to the center now here we can see we have a width of 1152 pixels and everything is in the center i'll just add a background color and you'll be able to understand so here we can see it is in the center all right now let's move on to the navigation menu so let's target the nav element inside the rapid division so we have this nav element and in that we have the logo and the unordered list so let's target the nav element we'll just type nav now here we can see we have the logo on the top and all the nav elements below the logo now if you set the display of the parent division to flex then all the elements will be one next to the other so let's type display of flex and now you can see we have the logo on the left and the menu items on the right now we want them to be on the extreme left and on the extreme right so for that you can use a property called justify content and we'll add a value of space between now we can see that the logo is on the left and the menu items on the right now we also center it vertically so here you can see that the logo is on the top so for that we can just type align items to center and we can see now they are vertically centered now we will add the display of links to the unordered list as well so that there will be one next to the other so let's type nav ul and display of flex and now we can see that all the menu items are one next to the other now let's go back to our design and if we click on this navigation menu and press the alt key and hover over this we can see that we have a spacing of 42 pixels at the top so let's go over here and for the nav we will add a padding top of 42 pixels right now we can see we have a spacing of 42 pixels at the top now we want to remove these bullets from all the list items so let's go back to our code and here in the ul i'll just type list style to none and now we don't have the bullets and now we need to have some space between these menu items so let's target the list items inside the ul so we can see inside the ul we have all these list items over here so let's type nav ulli and now let's see what is the spacing between the menu items so let's go back to our design and let's double click over here and if you press alt and hold over this we can see we have a space of 60 pixels so let's add a margin of 60 pixels so here we'll type margin 0 for top and bottom and for left and right we will type 30 pixels now let's go back to the browser and here we can see we have 60 pixels in between we have 30 pixels on the right of this list item and 30 pixels on the left of this list item so in total we have 60 pixels in between all of these list items all right now let's target all the anchor tags in the list items we have the anchor tags so let's type nav uli a and let's go back to our figma design and let's double click over here we can see we have a font size of 16 pixels and the font weight is set to bold and we have the dark color and the pink color and we don't have any underlines so let's go back to style.css and let's set the font size to 16 pixels and we'll set the font weight to bold and we'll set the color of the text to var dark color and we'll remove the underlines by typing text decoration to none now we can see all the menu items are being displayed over here now the first menu item should have a pink color so here you can see it is the active page so we have a pink color over here so let's go back to our html and in the first anchor tag we will add a class so just add a class of active and let's go back to our css and we'll target that class over here so we'll type nav uli a dot active now make sure that you don't have any space between a and dot active because we want the element which is an anchor tag and also has a class of active so if we have this element then we have to set the color of the text to pink so just type var pink color so now you can see for home we have pink color and for all the other menu items we have the dark color now let's style the contact button so let's go back to our design and let's double click over here here we can see we have a border radius of 8 pixels and if you double click over here and press alt and hold over these sides we can see for left and right we have 24 pixels of padding and for top and bottom we have a padding of 8 pixels so we just add those properties and see how it looks so let's go back to our css and let's type a dot btn so this is the class that we have for the button let's go back to our html and here we can see for the contact we have this class of btn so let's type border radius of 8 pixels and a padding of 8 pixels top and bottom and 24 pixels left and right all right now let's go back to our browser and we can say there's not any change over here in the contact button because we haven't added the border so let's go back to our css and in the html we can see that we also have one more class called light now for the button with the light class we want to have a dark border and for the button with the dark gloss we want to have dark background color and light text so let's go back to our styloid css and here we will type a dot btn dot light so this will target all the buttons with the light class so let's type border of one pixel solid and we'll type war dark color and here we can see that the button is being displayed just like we wanted but we also have a button over here called learn more so we have to style this as well so let's add some more properties to this button so we have to remove this underline from here and we also have to make it bold so in the button let's type text decoration to none to remove the underlines and font weight to bold now we need to add some more styles to this button but in this video we are just focusing on the navigation menu so we have this navigation menu almost complete i'll just add a hover effect so when we hover over this button we want to have the dark color for the button and we'll change the text color to white so let's go back and here we'll type a dot btn dot light colon hover and when we hover over the button we want to have the dark background color so let's type background and i will type var dark color and reset the color of the text to var light color all right now let's hover over this button and we can see that we have the dark background color for the button will also make it a smooth transition so let's go back to the button and for the button we'll just add a transition of all to 400 milliseconds right now let's hover over this and we have this transition all right so that's basically it for this video in this video we will start with the css of our hero section so the hero section contains of this image right here and these elements including the button so let's go back to our design and here we can see the image is on the left and all the text content is on the right so we will add a display of flex to the container of these two elements so that there will be one next to the other right now it is one below the other so let's go back to our code and let's go to style.css and here we can see after the navigation menu we have this division with the class of hero wrapper and it is the container division of the hero image and the hero text so let's target this division right here so here i'll just add a comment hero section and here we will type hero wrapper and we'll set the display to flex now let's go back to our webpage and here we can see the image is on the left and the text content is on the right now let's bring them to the center vertically so here we will type align items to center and we can see everything is centered vertically now we'll just add a background color to this hero wrapper and see what is the height and the width so here i'll just type background color of red and we can see this is the height and the width of the hero section now we want it to extend to the end of the page so we want to set the height to 100 viewport height so here i'll just type height to 100 viewport height now we put height is the height of the browser so here we can see now it has a larger height and now if we scroll down we can see that it extends a little bit more now that is because we have this menu on the top and it is adding this height to the 100 report height that we added over here so first of all let's find out the height of this now menu so i'll just right click over here and click on inspect and here we can see the nav is selected let's hover over this and we can see for the now we have a width of 1152 pixels and a height of 89 pixels so we have to subtract 89 pixels from the 100 report height so let's go back over here and we will add a calc function so here i'll just type calc and in parenthesis we will type 100 viewport height minus 89 pixels which is the height of the navigation menu right now let's see whether we have the correct height so now let's scroll down and we can see we have the perfect height for the hero section right now i'll just remove the background color now we'll style this h1 so let's go back to our design and let's double click over here and we can see for the h1 we have a font of oleoscript slash caps and the font size is 60 pixels so let's go ahead and add that over here so here i'll just type h1 and here we'll type font family of olio script slash caps and the backup font will be cursive and the font size is 60 pixels so i'll just type 60 pixels over here now we don't want it to be bold so here we can see the font weight is set to regular and we also want to set the line height to 100 percent so here you can see line height is set to 100 so let's go back and do that we'll set the font weight to normal and we'll set the line height to 100 right now it looks fine now let's also check out the color of the text so here we can see we have the dark color for the text so let's add the color over here we'll just type color to var dark color and we'll also type hero wrapper and hero text over here so that only the h1 inside this section will be affected all right now let's target the subheading this line of text over here so let's go over here to our design and uh here we can see the font size is 16 pixels and we already set the default phone to open sans and we have a line height of 200 percent and we also need to have a specific width so if you scroll up we can see we have a width of 489 so i'll just round it to 490. so let's go back to our code and here i'll just type hero wrapper hero text and let's go back to our html and see what is the class so here we can see we have a paragraph with the class of sub heading so let's type p dot sub heading and we'll set the font size to 16 pixels and i will set the line height to 200 percent and we'll set the width to 490 pixels let's see how it looks it looks fine but we also need to have some margin top for this paragraph so let's add a margin top of 16 pixels all right it looks fine and we'll also add a margin bottom so that we have some space between the subheading and the button so let's add a margin bottom of 20 pixels all right we have this button over here but we don't have the correct styling for the button let's go back to our css and if we scroll up we have added some styling for the buttons so here we can see these are the styling for the button and we have added some styling for the light button now let's go back to our html and here for this button we will add one more class and we'll type dark so this will be the dark button so let's go back to our style.css and here we will add some styling for the dark button so i'll just type a dot btn.dark and let's go back to our design here we can see for the dark button we have the dark background color and the light text color so let's go back to style.css and we'll type background to var dark and color of the text to var light color let's go back to our web page now for this button we will add a little bit more padding so let's go over here to css and here we will type padding of 16 pixels for top and bottom and 32 for left and right and now we can see that we don't have a lot of space between the paragraph and this button that is because this button is an inline element so the margin is not being applied to it so let's go back to the code and we'll just make it display of inline block so now we can see we have the margin between the text and the button now we'll also add a hover effect so here we'll type a dot btn dot dark colon hover and when we hover over the button we want to have background color set to the light color so we'll just type var light color and we want to have a border of one pixel solid dark color and the text color will be dark so let's go back to our website and let's hover over this and we can see that the button has the horror effect but we can see when we hover over this a little bit of extra spacing is being added that's because there was no border on the button before we hover and when we hover over this we have the border so it takes up one pixel of space so let's go back to our dark button over here and here we'll just copy this border from here and paste it right here right now let's hover over this and we don't have any problems now we have to give a little bit more space to this image right here in the design we can see we have a lot of space between the image and the text so let's go back to our css and here we'll target the hero image so just type hero wrapper hero image in our html we can see we have this division with the class of hero image we're targeting that and in flexbox you have this option to type flex and you can type any value over here so if i type one it will take up the maximum space it can take so we can see that the image has the complete space for itself but we want to have a little bit more space for this text so we can target that over here as well so let's type hero wrapper hero text and here i'll just type flex one point let's say 1.3 and now we can see both the sides have enough space right now the last thing we need to add in this hero section is the ground for the image so in our design we can see we have this ground for this image so let's see what is the height and the width of the ground so let's select the ellipse and we can see we have a width of 359 and height of 100 so let's try that and see how it looks and if you go back to the html we can see that we have a division with the class of hero ground so we'll use this division as the ground so here i'll just type hero wrapper hero image hero ground and first of all let's add a background color and see whether it is being displayed so i'll just type width of 360 pixels and height of 100 pixels and border radius of 50 which will make it round so we can see that the ground is being displayed over here now the only thing we need to do is position it correctly below this image now we'll position the ground relative to this image right here so let's go over here and for the hero image we will add a position of relative and for the ground we will add a position of absolute and now we can set the bottom left top and right positions so i'll just type bottom to zero and here you can see the ground is being displayed now we want to have the ground behind this image so let's type z index of negative 100 so another ground is behind this image i think we have to increase the bottom value a little bit more so i just right click and inspect and let's select the hero ground and just change the bottom value over here so i think this looks fine so we'll set the bottom value to 18 pixels all right now we need to have the light background color and we also need to have a box shadow so let's select the ellipse and go to inspect and if you scroll down we can see the css code is being displayed over here so let's copy the background color and the box shadow from here and we'll paste it in the hero ground right now let's go back to our web page and now we can see that we have the ground and the image so that's basically it with the hero section of our website in the next video in this video we will style the social media icons and these background shapes so let's go back to our web page and this is how it looks right now and we have the social media icons over here and we have the background shapes over here now let's position all of them correctly so let's go over here and here we will just type a comment i'll just type social icons and if you go back to the html we can see we have a class called social icons and in that we have the anchor tags with the images so let's go back to our css and we'll target that so i'll just type social icons and we have to position it to the bottom of our screen now we will position these social icons relative to the wrapper division so if you go back to our html we can see we have a division with a class of wrapper which contains everything except these background shapes over here so our social icons are inside the wrapper division so we will add a position of relative to the wrapper so let's go back to our css and let's scroll up and here we can see we have added some styles to the wrapper division let's also type position relative right now let's scroll down and for the social icons we will set the position to absolute and now we'll set the bottom position to let's say 48 pixels right now you can see we have these social icons over here let's bring it to the right so just type right zero and now it is in the right now let's add some space between these icons so if i double click over here and press alt and hold over this we can see that we have 60 pixels space between these icons so let's target the anchor tags inside social icons and we'll type margin 0 for top and bottom and for left and right we'll have 30 pixels so 30 pixels on the left and 30 on the right so it will add up to 60 pixels and let's remove the underlines so just type text decoration to none and let's see how it looks right now it looks all right now let's also add a hover effect so when we hover over this we want to change the scale of these icons so let's type social icons a column hover and let's type transform scale and we'll change the scale to 1.2 and we'll also add transition of all to 400 milliseconds for smooth animation now let's go back to our web page and let's hover over this and the scale is not working because the anchor tags are inline elements by default so we have to change it to an inline block element so let's go back and for the anchor tags we will type display of inline block now let's hover over these and we can see that the scaling is working all right right now let's position these background shapes so let's go back to the html and for the right one we have this division with the class of hero bg right so let's target that i'll just add a comment bg shapes and let's target hero bg right and we'll set the position to absolute and we'll set the bottom position to zero and the right position to zero so that it'll be on the bottom right so here you can see the background shape is being displayed over here correctly but it is on top of these uh social media icons so let's add a z index we will add a negative z index so i'll just type negative 200 and now the shape is behind the social media icons right now let's bring the other shapes to the top left so let's target that we have a division with a class of hero bg left so here we will type hero bg left and we'll set the position to absolute we'll set the top to zero and the left to zero and we'll also add a z index of negative 200 over here right now we want all the images inside the hero bg left to be on the top left as well so here we can see we have these three images inside hero bg left let's target that so we have these img tags so let's type hero bg left img and we'll set the position to absolute top position to 0 and left position to 0 and we'll also give it a height of 100 report height all right now we have the images in the correct position but we have to reverse the order of the images so this image right here should be at the bottom and the bottom image should be at the top so let's go back to the html and we'll just move the third line to the top so i'll just press alt and press the up arrow and we'll move the second image to the middle all right now this should work so let's go back to our web page and now we can see that everything is working all right we don't have any problems so that's basically it with the styling of the social media icons and the background shapes now in the next video we will see how to animate all of the in the previous video we completed the design of the desktop version of our website and this is how it looks and we have styled every element of our website now in this video i'll show you how to animate these elements so let's start by animating these background shapes over here so these are the first three things we are going to animate we will animate it from the left to the right so let's go to the css and here we'll create a new comment we'll just type animation and let's target all these images so they are inside a division called hero bg left so let's go ahead and target that hero bg left img so this will target all the images inside hero bg left now to create an animation in css you have to type animation and then you have to name the animation so i'll just name the animation move right and then you have to specify the duration of the animation so let's set it as 1000 milliseconds which is one second right now let's create this animation called move right so we'll be moving these images from the left to the original position so initially we have to move it all the way to the left so here i just type transform translate x and we will set it to negative 100 now we can see that all the images are on the extreme left we cannot see it on the screen and now we're going to animate it and bring it to the original position so to create the animation you have to type at keyframes and then the name of the animation so we have named the animation move right so let's type it over here and here you can specify the percentage of the animation frame so you can type zero percent and then type something over here and then type maybe 50 and type something over here and in this way you can type from 0 to 100 and then you can add whatever properties you want in all of these blocks but for now the images are already set on the extreme left so we just have to have one frame which is the last frame so we can type 100 and then you can just reset the value of transform so you can type transform translate x 0 and let's refresh the page and we can see all the elements are moving from the left to the right now after the animation completes it goes back to the first frame so which is to the extreme left now to prevent that from happening you can just type four words over here so it will stay on the last frame of the animation now let's reload the page and we can see that all the elements are moving from the left to the right now let's add different delays to these three different images so first we will have this image and then we'll have the next image and then we'll have the next image so let's add some animation delay so let's go over here and to add the animation delay we can type animation hyphen delay and add the delay now we want to add the delay to the second and the first elements so this is the second image and this is the first image so here let's type hero bg left img colon nth of type and here we can type 2 to select the second image and we will just add an animation delay we'll set it to 200 milliseconds now let's target the first image so just type hero bg left img first child so this will target the first image and let's type animation delay and we'll set a delay of 400 milliseconds right now let's test it out so let's reload the page and we can see that all the elements are animating just like we wanted now we can add easing to the animation so let's go to hero busy left img and here after four words we will add one more keyword which is ease in out now the animation will start slow and end slow and in between it will have the normal speed so let's refresh the page now if you want to create your own custom cubic function then you can go to this website called cubicbuzzier.com and then you can go ahead and tweak this curve over here and then you can just click on go to preview the easy down here is a normal easing and this is our custom easing that we just created so in this way you can just copy this from here so you can just click on copy cubic bezier and then go over here to the animation property and just add it over here and let's reload the page and we have a different easing for the animation now i have generated my own custom easing so i'll just add that over here so if you want to have the same easing as mine then you can add these values as well so the values are 0.07 0.37 0.19 and 1. all right so let's test it once more all right now the easing looks fine for our design right now let's animate the other elements so next we will animate this heading the subheading and this button so let's go back to our css and uh let's target them now for all these three elements we will have an animation where they will appear from top to bottom and we will fade them down so in the beginning it will have the opacity set to zero and when it comes to the original position it will have the opacity set to one so let's target these three elements so let's go back to our index.html and see what are the classes so here we can see in this division with the class of hero text we have the h1 and a paragraph with the class of subheading and then we also have this anchor tag as the button so let's type hero text h1 comma hero text p dot sub heading comma hero text a dot btn all right now let's add the animation so i'll just copy this line of code from here and i'll also copy the translate x so i'll just copy these two lines of code and paste it over here now we will have the animation duration set to 2000 milliseconds and we will name the animation to fade down and i'll set a different value for the cubic bezier so i just have 0.07 0.37 0.19 and 1.08 and instead of translate x we have to type translate y because we are moving it vertically so we'll set the translate y value to negative 80 pixels so it will start from here and then move down to the original position so let's create this animation called fade down so just type keyframes fade down and we also need to set the opacity to zero by default so i'll just type opacity zero over here now at fifty percent we will have the opacity set to zero from zero percent to fifty percent the opacity will still be zero and when it goes to one hundred percent we will set the opacity to one and transform translate y to zero and instead of hundred percent you can also type two and instead of zero percent you can type from so you can type hundred percent or two whichever you like all right so now let's go ahead and test it out right let's refresh the page and we can see that the animation is working but we also need to have delay for all of these elements so we want this heading to be displayed first and then we want the subheading and then lastly we want the button to be displayed so let's add some animation delay so we'll just type hero text p dot sub heading and we'll add an animation delay of 200 milliseconds and for the button we'll type hero text a dot btn and we'll type animation delay of 500 milliseconds right now let's test it out all right the animation is working all right for these three elements now let's target this image and this ground division and we will have a fade in animation from the left so it will have zero opacity at the beginning and then when it comes to the original position it will have opacity of one so let's add animation for the ground first and then we'll add the animation for this image so let's go to index.html and here we can see we have this hero image division and in that we have this division with the class of hero ground let's target that so here we'll just type hero image hero ground and let me just copy the code for the animation and paste it over here and for this we will have the animation name as fade right and we'll set the same duration for the animation and the same value for the cubic bezier and instead of translate y we will set it to translate x and we will set it to negative 100 pixels and we also add an animation delay because we want the ground animation to happen after all these animations so we'll set an animation delay of 800 milliseconds and let me just copy this keyframes animation from here and i'll just paste it over here and i'll just rename this to fade right and we'll set the translate x value to zero alright that's it with the fade right animation for the hero ground let's test it out and the animation is working all right now let's animate this image so it is pretty much the same code so i'll just copy this and paste it over here and here i'll just type hero image img so this will target the image now we'll change the translate x value to 180 pixels and we'll set the delay to 1200 milliseconds now you can go ahead and experiment with different delay and different values right now let's test it out once more so i'll just reload the page and we can see that all the animation is working all right now let's animate this logo and the navigation menus so let's go back to index.html and here we can see we have this nav and in that we have this division with the class of logo and then we also have the unordered list and in that we have the list items so let's target them i'll just type nav dot logo and let me just copy this and paste it over here and we'll have the fade right animation for the now so we already have the animation declared over here now for all the menu items we will have a fade in animation where it will have zero opacity at the beginning and one opacity at the end so let's type nav uli and i'll just copy this and paste it over here and we'll just name it fade in and for the logo we will set animation delay of 1000 milliseconds and even for the list item we will set an animation delay of 1000 milliseconds and we don't want to have a transform for this animation so let's delete this from here we just want the navigation menu to stay there so i'll just copy this and paste it over here and we'll change the name to fade in and we don't need to have 50 over here we'll just have the last frame and we'll set the opacity to one and we don't need to have the transform as well so i just delete it and we'll have the same animation for the right image as well so this one right here so let me just copy this and let's type hero bg right and paste the lines of code i'll just set the animation delay to 1500 milliseconds all right now let's test it out all right now the last thing we need to animate are these social media icons we will have a fade right animation for the social media icons so we already have an animation set for that here we can see we have the fade right animation so let's just add the social media icons over here so we'll just type social icons a img and i'll just copy this and paste it over here we'll just set the duration to 1000 milliseconds and we just set the translate x to negative 10 pixels and we'll set the delay to 1006 pixels right now let's go back to our website and see how it looks let's reload the page i think we can add a little bit more translate x to these social media icons so let's go back to our css and here we'll just type negative 50. now let's test it out once more so we can see that everything is being animated correctly and that's basically it with the animation of the desktop version of our website now you can go ahead and play with these different values over here you can change the animation delay you can change some of these properties over here and you can create the animation that you want these are all the values that i found to be good for this website but you are free to go ahead and change all of these values and see how it looks we have completed the design of the desktop version of our website and we have also added animation to all the elements so let me just refresh this page and the animation looks great so now let's go ahead and make it responsive that is we will create a mobile version for our website now we'll display the mobile version if the width of the browser is less than 600 pixels now if you want to know what is the width of the browser right now then you can go ahead and right click over here and click on inspect i'm using the chrome browser and just minimize this and now if we resize the browser we can see the height and the width of the browser window on the top right corner of the screen and we can see right now it is 628 pixels so let's set a width of less than 600 pixels so i'll just keep it right here right now let's go back to our design and if we scroll down we can see that we have the mobile version of the design now the first thing we'll do is we'll remove the background shapes so these are the three shapes that we have on the left and then we have the shape on the right all this is for the desktop version but now for the mobile version we have to hide all of that and we will export these images from here and we will add it to the mobile version so i have already exported these images so you can go ahead and click on this and then go to export and then click on preview and once you see that the preview is correct you can go ahead and select svg from here and then export the image to the images folder of your website so i have exported both these images from here so let's go to our css and to create a mobile version of less than 600 pixels you have to type at media and then in parenthesis you have to type the max width so the max width that we need to have is 600 pixels so if the width of the browser is less than 600 pixels then whatever css we have inside this block will be added to the webpage so let's go ahead and hide all these background shapes so let's go back to the html and here we can see we have this division with the clouds of hero bg right and hero bg left so let's hide them from the page so we'll just type hero bg left and hero bg right and here i'll just type display none and now we can see that the shapes are not being displayed but all the other content is being displayed now i'll just disable all the animations for now later we will add it so i'll just select all the code for the animation and i'll just press ctrl and forward slash and it will comment all those lines of code so this code will not be executed in our webpage as of now right so now the next thing we'll do is we will decrease the height of the wrapper so if we scroll up we can see that we have a wrapper and it is the main division that contains everything except the background shapes so here we can see we have wrapper and in that we have all the other elements so in our style css we have set a width of 1152 pixels now in our mobile version we will set a width of 100 of the screen so let's type wrapper and we'll set the width to 100 and let's see what is the padding that we have for the mobile version so let's go back to the design so we'll click on this element and press alt and hold over this side and we can see we have a space of 32 pixels so let's go back to our css and we will add a padding of for top and bottom we will just add 16 pixels and for left and right we will have 32 pixels of padding we'll also decrease the size of this logo a little bit so let's target that so you will type logo and we have the image inside the logo division so just type img over here and we'll set a height of let's see what is the height and the height is 36 pixels let's see how it looks it looks alright now we have to hide all these navigation menus from here and we have to add this navigation icon over here so let's hide all these elements which are inside the unordered list so here we can see inside the nav element we have an unordered list which contains all these and now menu items so let's hide that so here i'll just add it over here we'll type now ul and now we can see all the nav menu items have been hidden right now let's target the hero section so here i'll just add a comment hero section to add a comment you can just type control and forward slash alright so we'll target the hero rapper division so this is the hero rapper division and in that we have the hero image and the hero text so right now they are one next to the other so let's type hero wrapper we have already added the display of flex to the hero wrapper so here we can see we have display of flex now let's change the flex direction so here i'll just type flex direction to column right now we can see the image is on the top and all the text is at the bottom right now let's decrease the size of this image a little bit so i just type hero image img and we'll set a height of pixels and we also have to remove this hero ground from here so in our design we can see that in the mobile version we don't have the hero ground so let's target that hero image hero ground we'll just remove it from here and add it to the top so here we'll just add a comma and add the hero ground over here right now the ground is not visible now let's change the font size of this heading so let's go back to the design and let's select this heading and we have a font size of 32 pixels let's add that so let's type hero wrapper hero text h1 and we'll set the font size to 32 pixels it looks alright i think we can increase the line height a little bit so just type line height of 120 percent now i think it will look better if you text align everything to the center though we haven't added this in our design but uh i think it will look nice so let's go ahead and do that so i'll just type hero wrapper hero text and here i'll just type text align and reset it to center and it looks alright no problems now let's also decrease the padding of this button a little bit so let's type a dot btn and let's set a padding of 12 pixels top and bottom and 32 for left and right i think it was 12 pixels already so let's change it to 8 pixels and the padding is not being added correctly that's because the anchor tag is the display of inline so for the dark button we have added the display of inline block so let's add the padding to this a button dark so here i'll just type dot dark right now it's working now i think we can bring this image to the top a little bit let's target the parent division so we'll just type hero image and here we will type margin top of some negative value so i'll just type negative 100 over here and maybe negative 60 pixels all right this looks fine now let's check how are the social media icons styled so they are in the center of the screen so if you go back to the desktop version we can see we have added a position of absolute to the social media icons and we have set a bottom position to that i will remove the position absolute from here so let's type social icons and we'll just set the position back to static and we'll text align to the center and here we have the social media icons we have a lot of spacing between all these elements so that's because we have added some flex values in the desktop version so if we scroll up we can see that for the hero image we have a flex of 1 and for the hero text we have flux of 1.3 so whatever height this image has the text section will have 1.3 times the height of this element so let's remove the flex from both these elements in our mobile version so here i'll just type hero wrapper hero text and we'll set the flex to unset and we'll do the same with the image so we'll type hero wrapper hero image right now we have the correct height now let's also add a margin top to these uh social media icons so here i'll just type margin top of 100 pixels or maybe 40 pixels all right that looks fine right now let's add the mobile background shapes so let's go back to the html and let's add that over here first of all so after the hero bg left division i'll just create an img tag and we'll type images slash and i have saved them as bg left mobile and uh bg bottom mobile right now both the images have been added over here in the webpage and let's also add a class to this img tag so just type class and for this one we will add a class of bg left mobile and then for the other one we will add a class of bg bottom mobile right now let's style this in our css so let's go back over here and so let's target that we'll just type bg left mobile and i will set the position to fixed and we'll set the top position to zero and we set a z index of negative now we have a lot of space above this logo so let's try to go here and inspect and if we go to the nav element we can see that we have added a padding top of 42 pixels let's decrease that a little bit and i think 16 pixels would be all right so let's change the padding top of nav to 16 pixels so now padding top 16 pixels i think we can decrease the size of the logo a little bit more so let's scroll up over here and here we have the height of the image let's set that to for example let's say 28 pixels or that looks alright and now let's position this image right here so let's target that here we'll just type bg bottom mobile and we'll set the position to fixed and we'll set the bottom position to zero and the right position to zero and we'll also set a z index of some negative value right now it is behind the text and everything looks alright now just right click over here and click on inspect and i'm using the chrome browser so if i click on this button called toggle device toolbar then we can select a device from here and it will show us how the website will look on that device so right now it is showing how it will look on a pixel 2 xl and we can see that the subheading has a width higher than the width of the screen so if you scroll up and if you go to the css for the subheading so it is inside the hero section and this is the css for the sub heading and we have set a width of 490 pixels so here we can see that the width of this pixel to excel is 411. now for our mobile version we will set the width to 100 so let me just copy this selector from here and we will go to the media query so here inside the code for the mobile version i'll just paste the selector over here and we'll set the width to 100 right now we can see that we have the correct width for our subheading and we have already added a padding to the wrapper so we have this padding over here let me just open another device and see how it looks so we'll just open iphone 10 and this is how it looks on an iphone 10 so i think we can have a little bit of margin top to this image so let's go to the hero image so it is right here i'll just set the margin top to let's say negative 40 pixels or that looks fine and i'll also increase the margin top for the social media icons so let's scroll down and here we have the margin top set to 40 pixels let's set it to 60 pixels or maybe 100 pixels but that looks all right all right so this is how our website will look on a smartphone now in the next video i'll show you how to create the net in this video we'll create the navigation menu for the mobile version of our website so this is how the navigation menu looks and we also need to add these two icons but before that let's open the desktop version and see whether we have any problems after creating the mobile version so let me just maximize this and i'll open the inspect tool and just click on this button called toggle device toolbar and we can see that the desktop version looks alright but if we scroll down we have the images for the mobile version down here so we have to hide them from the desktop version so let's go back to the css and let's scroll up and go about the media query and here i'll just add some styles let's target the images of the mobile version so if i scroll down in the index.html here we can see we have this image with the class of bg left mobile and bg bottom mobile so these are the two images that we need to hide so let's target them we'll go back to style.css and here we will type bg bottom mobile and bg left mobile and we'll just type display none right now let's go back to our website and we can see that everything looks all right we don't have the images of the mobile version displayed over here all right now let's start designing the navigation menu for the mobile version now here in the mobile version we have to set the display to something else so let's go down here and here we have the styles for the bg left mobile so i just set the display to block and also the display of this image to block now first of all let's start with the html so let's go back to index.html and here inside the nav element we have this logo and we are hiding this unordered list in the mobile version so on the right side of the logo here we need to have this menu icon so after the ul ends i'll just create a division and we'll give it a class of mobile menu icon or let's just type mobile menu and in this i'll just add the image that i have exported from figma this image right here so let's type img and i'll just type images slash and i have saved the image as menu icon dot svg so here we can see the icon on the right now we also need to have the close icon so let's create another division and we'll give it a class of mobile close and we'll just create an img tag and we'll just type images slash and i have named it close icon.svg so we have all the three icons over here now we don't want to display both of these icons at the same time we will do all of that using css but right now let's complete the html now the next thing we need to do is we need to create these menu items so it is pretty much the same as this ul right here so i'll just copy this i'll just create one more nav element and we'll just give it a class of mobile navigation and in this i will just paste the ul alright so that's it with the html now we cannot see the ul over here because we have here in the uls inside the mobile version so let's specifically target this mobile navigation and we will make it visible on the mobile version so let's go back to style.css and let's start styling the navigation menu so just type nav dot mobile navigation first of all i'll set the display to flex and we'll set the z index to 100 so that it'll be above all the other elements and let's set a background color so the background color let's see what is the background color so we have the light background color for this navigation menu so let's tap var light color and here we can see the mobile navigation menu is being displayed but let's set the position to fixed and we'll set the left to zero and the top position to zero and we'll also set the height to 100 viewport height and also the width to 100 percent all right so now we can see that the mobile navigation is being displayed over here right now we're going to see the ul inside the navigation so here inside mobile navigation we have this unordered list so if we scroll up we can see that we have already hidden it here in the mobile version so here you can see for nav ul we have set the display to none so let's go over here and target the mobile navigation so just type nav mobile navigation and we'll type ul and we'll set the display to flex and let's set the flex direction to column and align items to the center and let's set the width to 100 now let's target the list items so i'll just type nav dot mobile navigation ulli and we'll set a margin of 16 pixels top and bottom and 0 for left and right now i think for the button we need to increase the margin top so let's target the last element which is the button so just type nav dot mobile navigation ulli and we'll type colon last child so this will select the last element which is this button and we'll set a margin top of let's say 24 pixels or that looks fine right now let's add the close icon over here so if you go back to the html we can see that we have this division with the class of mobile close and it has the close icon now the mobile menu icon and the closed icons are inside the nav so it is inside the desktop now not inside the mobile now so this is the mobile navigation so we have to target that inside the nav so let's type nav mobile close and let's set a z index of something greater than the mobile navigation so right now for the mobile navigation we have a z index of 100 so that's why it is above all the other elements now we want to add the closed icon above the mobile navigation so we have to have a z index of something more than 100 so i'll just type 200 over here and we can see that the close icon is being displayed over here all right now let's go back to our design and here you can see for these icons we have a border radius at the bottom left and we also have a box shadow so let's select this and we have a border radius so let's open this so let's double click over here and we'll select this rectangle and let's go to inspect and here we can see we have a background color of white and we have this box shadow and border radius of 24 pixels at the bottom left so let's copy these three lines of code and let's add that over here right now let's add some padding so let's add a padding of 30 pixels and we'll just set the position to the top right corner so i'll just type position fixed and we'll set the right position to 0 and the top position to zero now we don't want to display this mobile navigation and the close icon at the beginning so we'll just hide them at the beginning and we'll just show the menu icon and when we click on that we should show this mobile navigation and this close icon so for that we'll be using javascript but before that let's create some classes for that so we'll create a class called active so if you have the active class on any element that should be displayed so here we will just add an active class to the mobile navigation so let's type nav and we'll just type mobile navigation dot active now here you have to make sure that you don't have any space between mobile navigation and active that's because you need to have both these classes in this now for this css to work so if we have the active class inside the mobile navigation then we have to display it and if you don't have the active class then we have to hide it so here we'll just type opacity of 0 and we'll also set the pointer events to none so that the visitors won't be able to click on any of those links and when we have the active class we need to display it so just set the opacity to one and the pointer events to auto now we'll do the same with this close icon so here we have added the close icon let's just type nav mobile close dot active now at the beginning we will set the opacity to 0 and pointer events to none and here we'll set the opacity to 1 and the pointer events to auto and now we can see that the close icon is not being displayed let's also style this icon right here and it has the same styling as the close icon so i'll just add it over here so i'll just add a comma and we'll just type nav mobile menu and by default we want to have the active class for the mobile menu so let's go back to the index.html and here we will add one more class we just type active and in the css let's add the active class for the mobile menu so just type comma nav mobile menu dot active so we can see that by default the mobile menu will be displayed over here and when we click on the mobile menu we'll remove the active class from the mobile menu and we will add the active class to this close icon so let's add it over here and we'll just remove the active class from the mobile menu and we'll also add the active class to this mobile navigation so now we can see that we have the navigation menu and the close icon and when we click on the closed icon we'll just remove the active class from here and from here and we'll add it over here in the mobile menu so we're gonna do all this in javascript so we will add some functions where when we click on this all these things should happen all right so that's basically it with the design of the mobile navigation menu now let's go back to the desktop version and see whether we need to change anything so let's maximize this and let's click on this toggle device toolbar button and here you can see we have the navigation menu for the mobile also displayed over here and we also have these icons displayed over here so we'll just hide all of that let's go back to the css and we need to hide the mobile close button the mobile menu and the mobile navigation so let's scroll up and here let's add some more elements for display none so i'll just type comma nav dot mobile navigation and then we'll tap nav mobile menu and nav mobile close so let's go back to the web page and now we don't have any problems so let's go back and this is how the mobile version looks and the icons are not being displayed that's because we added the display of none so we have to add the display of something else in the mobile version so here for these icons let's add display in this video we'll make the navigation menu work so when you click on this mobile menu the navigation menu should be displayed over here and close button over here and when you click on the close button it should disappear and we should have the menu icon over here now we'll use javascript to do that so first of all let's go back to our index.html file and if you scroll down we can see that we have added the script of src main.js so this is our javascript file over here and we have linked that to our html file so let's go to our main.js file and let's start writing the code now first of all we need to target three things so we need to target this mobile menu and mobile close and we also need to target mobile navigation so when you click on this button this should appear so let's go ahead and target them using these classes we'll just create some constraints for that so i'll just type const and we'll name it mobile menu and we'll set that equal to document dot query selector this is how you access the html elements and here you have to type the class name or the id name so it is a class called mobile nav and it is inside the nav element so this is a nav element so here you can type nav dot mobile menu and this will store the mobile menu inside this constant now in the same way let's also reference the other elements like mobile close and mobile navigation so let's type const mobile close equals document dot query selector and we'll type nav mobile close and then let's type const mobile navigation equals document dot query selector and here we will type dot mobile navigation now there's something called event listeners in javascript so it listens to different events like clicking of a mouse button or hovering over an item or pressing of any key on the keyboard so here we need to use an event listener called click so when we click on this menu icon we need to display the other elements so let's add an event listener to add an event listener you have to type the name of the element so we'll just type mobile menu dot add event listener and here you have to specify the event so we'll just type click over here and here you have to create a function so we'll just create an arrow function so i'll just type parenthesis and equals greater than and here we can write the code to be executed now we want to add the active class to the mobile navigation so if we go back to our style.css we can see that in our mobile version for the mobile navigation we can see we also have a class called mobile navigation active and in that we have the opacity of one so let's go back to our javascript file and here we'll type mobile navigation now to add a class in javascript you have to type dot class list dot add and here you have to add the class name so just type active and we also need to add the active class to the mobile close button so we'll just type mobile close class list dot add active right now let's test it out so we'll click on this mobile menu and we can see that the mobile navigation is being displayed now let's also add the event listener to the close button so let's type mobile close dot add event listener and for the click event and we'll just create an arrow function now here we need to remove the active class from the mobile navigation and mobile close so let me just copy this and paste them over here and we'll just replace add with remove now if you want to replace multiple keywords in vs code you can just select the first one and press ctrl d and it will select the other one as well so let's type remove right now let's test it out i'll just save it and let's click on this menu icon and we have the mobile navigation let's click on the close button and we have the mobile menu over here so the button is working all right now let's also add some transition to this mobile navigation so that it will animate better so let's go back to our style.css and in the mobile navigation let's type transition of all to 400 milliseconds now let's click on the mobile menu and we have the mobile navigation and also the transition let's click on the close button all right everything is working all right now let's go back to our design and here we can see when the mobile menu appears we also have this background shape and also this logo displayed over here so let's change the z index of both of these elements so let's scroll up and here we can see for bg left mobile we have a z index of negative 100 so we have to change the z index to more than the z index of the mobile navigation so it has a z index of 100 so i'll just change this to 200 and now we also have to change the z index of the logo so let's scroll up and here we have the logo image let's target the logo division so i'll just type dot logo and here we'll type z index and we'll have a z index of more than everything else so just type 300 and now let's click on this mobile menu and we have the mobile navigation displayed over here and also this background shape and this logo so everything is working all right now while we are here in the javascript let's also add some javascript to make the animation even better so right now when we click on this menu icon all the menu items are displayed at the same time now we can add different animation delays to all of these different menu items we can do that in the css as well but we have to write a lot of code for that so for that we can use javascript and we will use a loop to loop through each of these menu items and add different animation delays to all of them so for that we have to reference the menu items so let's go back to the html and here we can see we have a nav with the class of mobile navigation and in that we have the unordered list and then we have the list items so these list items are what we need to reference so let's go back to main.js and let's add const and we'll just name it mobile nav li and we're going to target all the list items so i'll just add all over here and here we'll type equals document dot query selector now here you have to add all to select multiple items and here we will type nav dot mobile navigation and uli so this will reference all the list items inside the mobile navigation now let's see how to add different animation delays to these list items so for that we'll be using a for each loop so i'll just type mobile nav ally all dot for each now in this we need to create a callback function so i'll just create an arrow function over here and we'll have two arguments over here one for the list items so each of these list items will have a name so we can name it anything i'll just name it li and for each of the index we will have another name so i'll just name it i now we will be able to access the list items using this variable and we'll be able to access the index using this i now in the first iteration we will have the i value set to 0 which is this home element and then we will have i value set to 1 which is this testimonials element and so on so let's use all of this and create different animation delay to our list items so i'll just type li dot style and we'll type animation delay equals now for the first element we will have an animation delay of 400 and for all the next elements we will increment the animation delay by 140 so we just type plus i times 140 and we'll just concatenate ms for milliseconds now let me explain to you what this code does in the first iteration we have the list item set to this first list item over here and we have the i value set to zero so we can see we are accessing the first list item home dot style animation delay so we are adding the animation delay to the home to 400 plus i which is 0 times 140 which also makes it zero so we are adding the animation delay of 400 milliseconds to the home and when we go to the next iteration we have the allies set to the second element which is testimonials and the i value set to 1 so the animation delay for that will be 400 plus 1 times 140 which is 400 plus 140 which is 540 so we'll have an animation delay of 540 milliseconds for the testimonials and in the same way we'll increment the animation delay for each of these elements now that we have added the animation delay let's add the animation to the list items so let's go back to our style.css and let's create a new selector and we'll type nav dot mobile navigation dot active so when we have the active class for the mobile navigation we will have the animation for the list items now for the mobile navigation list items we'll create a new animation so let's type animation and we'll name it mobile nav li and we'll set the duration to 1000 milliseconds and forwards now let's create the mobile nav li animation now let's create the animation over here so we'll just type at keyframes and we'll name the animation mobile nav li and here we'll set the last frame so just tap two or you can even type 100 over here so we'll set the last frame to opacity of 1 and we will move it down from the top so here for the mobile navigation uli let's also type opacity of 0 at the beginning and we'll set the transform of translate y to negative 16 pixels and here in the animation last frame we will type transform translate y to zero right now let's see whether the animation is working all right and let's click on the menu icon and we can see that the animation is being displayed so we have added the animation delay using javascript now let's do the same with the social media icons as well so we have already added the social media animations in the desktop version so let's scroll up and it is right here for social media icons a img we have this animation fade right so let's reference the img from the social media icons in our main.js so let me just copy this and let's go back over here and let's type const social icons equals document.queryselector all and here we'll just paste it and let me just copy this from here and paste it down here and we just replace it with social icons and for the social icons we will set the delay to 2400 milliseconds plus 120 so let's save it i think we can reduce it to 1400 all right that's how the animation looks and we can do the same for the desktop menu items as well so let me just open the desktop version so here's the desktop version let's go back to our code and let's go to style.css and let's scroll up and see where the navigation animation and it is right here we have nav uli and we have set a delay of 1000 let's set variable delays for this as well so let's copy this and let's target that over here so let's type const desktop nav li all equals document dot query selector all and we'll just paste it over here and let's just copy this and paste it down here and we'll just replace this with desktop nav ally all and we'll set the animation delay to 2000 milliseconds plus 140 right so now let's go back to our website and see how it looks so we can see that everything looks alright let's just go back to the mobile version and see whether we have broken anything let's refresh the page and let's click on the menu icon and there's a lot of delay for these menu items so let's go back i think it's because we have added this desktop nav list item over here so i'll just cut this from here and paste it below over here and now let's go back and let's click on the menu icon and we have the correct animation delay right now everything is working all right right so that's basically it for this video we have added javascript to we have completed the design of the animated homepage we have two versions of our website one is for the desktop version and one for the mobile version now in this video i'll show you how to host our website online for free but before that let's go ahead and do a quick test of our design so i'll just refresh this page and everything is working all right so let's hover over these buttons and the hover effect is also working all right let's open the mobile version so i'll just right click and inspect and click on this toggle device toolbar button let's refresh this page and we can see that our homepage is working all right let's open the menu and the animation is working all right over here as well we don't have any problems all right so now let's go ahead and host our website online now for hosting our website i'll be using a service called netlify.com so you can go ahead and create a free account on netlify.com let me just go ahead and log into my account so this is the dashboard of my netlify account now there are different plans for this service so you can go ahead and click on upgrade and you will get more features but let's just work on the free version so let's go to sites and here are all the sites that i have previously uploaded now it is really easy to host your website on netlify if you scroll down we can see that there's a message called if you want to deploy a new site you can just drag and drop your site output folder over here so let's go to our site folder and we need to add all these files inside a folder so i'll just create a new folder and i'll just name it html and let's move all these files into the html folder now let me just drag and drop this html folder to our netlify account so i'll just drag it over here and that's it our site has been deployed so it's that easy and quick to upload a site on netlify now you can go over here to domain settings and you can go ahead and change the subdomain so if you go over here to options and click on edit site name you can edit this to whatever you want i'll just type animated page let's see whether it is available so let's click on save so it is available now if you already have a domain name you can add that over here as well so you can go to this link and find the details on how to add custom domain but for now let's go ahead and open our website so i'll just click on this url so we can see that our website is working all right let's check out the mobile version so i'll just right click and inspect and let me just refresh the page so everything is working all right even the menus are working all right so that's how you host your website online now there are a lot of other services that help you host your website so you can just google for best hosting service and you can find the hosting service from there and then you can just upload your files to the hosting server so that's

Channel: Skilful Learner

Views: 293

Keywords: figma, figma design, figma to html, figma to real website, figma design to html, figma design convert to html, covert figma design to html, covert figma design to real website, figma tutorial, ui design, ux design, figma to html css, Figma to HTML 2022, html, design, web design, quest ai, design to html, Build Responsive Design For Figma Design, figma tutorial build reusable components 1 of 8, figma to react, figma to real app, figma to react native, figma to mern

Id: gEevI3oSAg4

Length: 100min 46sec (6046 seconds)

Published: Wed Dec 01 2021