Design A Responsive Website | Figma to HTML, CSS & JavaScript | FULL VIDEO

hi everybody welcome to gt coding this is the full video of creating a responsive homepage from scratch right from designing it in figma to writing the html css and javascript and deploying the website online i have combined all the videos in the playlist as a single long video i hope that you will find this useful in this video we are basically creating this home page from scratch we will start by designing it in figma which is an awesome tool for ui and ux design once we are happy with the design we will convert the figma design to a real website using html css and javascript every line of code will be written on screen so you can follow along with me and get the exact same result i will also provide the link of the source code and also the figma file in the description of this video alright so let's get started [Music] now this is how the desktop version looks we can see that we have this hero section over here at the top and then we have this testimonial section over here and then we have the courses section and then we have this app section and then lastly we have this footer over here now we're going to use sigma features like components auto layouts and so on and this will make our task easier and quicker and then we have this tablet version over here and this is how it looks we have a different layout for some of the elements here we can see for the testimonials we have this different layout and even for the courses we have one course below the other and even for the footer we have two column layout and then lastly we have this mobile version over here and this is how it looks [Music] [Music] now for the mobile version we don't have the menu items displayed over here at the top but we have this menu icon over here and if i click on that we can see we have this mobile navigation menu displayed over here and if i click on this close button it goes back so this is basically what we're going to design in this tutorial series now components are basically things that you can reuse in figma so here we can see we have this button and we can reuse the button over here just by changing the color and if we scroll down we can see that we have buttons over here and over here as well so this is basically a reusable element so we can create it as a component in figma and the next component that we're going to create is for this heading so here you can see we have this heading and even here we have the heading so we're going to create this heading as a component as well now in figma we also have a feature called variance so you can create different variants of the same element so we will have a variant for dark heading and then we will have a variant for light heading and then we'll also create variants for different screen sizes so we will have different headings for tablets and smartphones so for each of that we can create different variants of the same component and then we'll also create a component for this testimonial card and also for this game card over here all right so let's get started now if you haven't already downloaded and installed figma you can go over here to this website called figma.com forward slash downloads and you can find the download link over here you can download for mac or windows or you can even use it on a browser and once you download figma you can go ahead and sign up and it's free to create an account and then you can go ahead and log into your figma account in the app right here i have opened up the figma application and i just created a new figma file so just rename this to responsive home page now the first thing we will do is we will select the colors so i just create a frame for that i just click on this button and click over here i'll just select the frame as desktop and first of all let's reset the x and the y values so i'll just type zero right now let's create a square so i'll just click on this button and click over here and i'll just set the width and the height to 200 pixels and let's also add a corner radius of 20. we'll also add a drop shadow over here so let's scroll down and let's click on plus over here in the effects and i'll just click on this button and let's click on the effect settings and let's change some values over here i'll set this to let's say 7 pixels and we'll set the blur to let's say 16 pixels right now let's set the colors so for the first color i'm going to set a hex value of da7222c so this is going to be one of the colors in our website here we can see this is the color for this button over here and now let's duplicate this so i'll just press alt and drag it over here right now for the second color i'll just type 0 5 7 a d a right now let's duplicate this and bring it over here and for the third color i will just type e8 f7fb we will have three more colors for our website so i'll just select all of this and drag it down here by pressing alt and we'll just duplicate it over here and then for the next color i'll just add a hex value of zero two three zero four seven and then for the next color we will have a hex value of zero seven zero nine one seven and then for the last color we will have a hex value of 6 f 7 d f b all right these are all the colors that we need for our website so i'll just reduce the height and the width of this frame and i'll just rename this frame to colors right now let's start creating the components now in this video we'll create the button component and the heading component so let's create a new frame so i'll just click on frame and i'll just create a frame over here and let's just increase the height and the width and let's just rename this to components and let's add a text over here so i'll just type components and we'll just set the font size to 48 pixels and i'll just set it to bold all right first of all let's create a button so i'll just click on this text button over here and i'll just click over here and for the text of the button i'll just type button text and i'll just change some of these values over here so i'll just set the font size to 18 pixels and we'll just change the font to pop-ins all right now the next thing you have to do is you have to convert it to an auto layout so you can just right click over here and click on add auto layout or you can just press shift a and now we can see we have this auto layout and now here we can see we have the option of adding uh spacing between the elements and also padding now the first thing we will do is we will change the background color so let's just select this and here in the fill let's click on plus and we're going to use this dark color that we have over here so let's just select this color picker and i'll just select this dark color from here and we'll change the color of the text so let's double click over here and for this color i'll just change this to white right now here we have the option of applying padding so let's click on this button and for top and bottom i will set a padding of 16 pixels and for left and right i will set a padding of 32 and let's also add rounded corners so here for the corner radius i'll just set it to 24 pixels and this is our button now if you change the text of this button it will adjust the width according to the text so here if i just type a small text we can see that the width is adjusted right now the next thing we will do is we will make it a component so that we can reuse it in our website so i'll just click on this uh button and you can click on this button called create component or you can also press ctrl alt k and now you can see this is a component so let's change the name to button now this button is a reusable component so if you go over here to assets we can see inside components we have this button and we can just drag and drop it anywhere in our website and now if i make some changes to this component it will be reflected over here in this instance so here i'll just change the background color and now you can see both these elements have changed the background color so that's how components work so if you have any reusable element in your design you can create a component of that all right let's go back to the original color now the next thing we will do is we'll create variants of this component so let's click on this component and here on the right we can see we have an option called variance and let's click on plus and here we have the first variant now we will have different variants we will have a variant for a button with icons so for the second variant i'll just add an icon so i'll just right click over here and i have installed a plugin called hero icons so here we can see the plugin hero icons if you don't have this installed you can go over here to browse plugins in community and then just search for hero icons over here and just select plugins and then just click on install so if i just type hero icons and if i go over here to plugins here we can see the plugin and i have installed it so you can go ahead and install it and once you install the plugin you can just right click and go to plugins and click on hero icons and let's select an icon from here let's select this icon right here so i'll just click and drag it over here now let's drag this and bring it inside this button so if i drag it over here we can see that we have this indicator that it can be added to the left or to the right so i just add it to the left and i'll just increase the width of this component a little bit right now you can see here we have this button now let's set the height of this icon to 16 pixels so just go over here and just click on this button called constraint proportions and let's set it to 16 pixels i think the font size is 18 pixels so let's set it to 18. now let's set the color to white so if you scroll down here we can see selection colors i'll just select this and set it to white and now we can see that the button and the text are not in the center so let's select this variant and let's go over here to this button alignment and padding and let's set it to the center and now you can see everything is in the center and now the next thing we will do is we will select this component and we'll go over here to variance and here on the right we can see under variance we have this property one so let's change this property one to icon and now this is a property of this variant now we can set different values to this property inside different variants now here for the default value i'll just type false now let's select the first variant and for this icon value i'll just type false and for the second variant we will add the icon value to true now if you go over here to assets and if you just bring this component over here here on the right side we have this option called icon and if i click on this we can see that we have this icon and if i click on it again the icon goes away so now we have two variants for this button right now let's create some more variants so i'll just select both of these variants from here and let's duplicate it three more times so i just press ctrl d and for the next two buttons we will change the background color so i'll just select this variant and let's scroll down and let's change this fill so i'll just select this color right here so i'll just open the color picker and select this color right here and even for this variant i'll just select the light color and we'll do the same for these two variants as well so i'll just select these two and select this color and change it to this color right here now these four variants are for mobile version and these four are for the desktop now let's add two more properties so let's select this component and let's click on this option button and click on add new property and we'll just name it dark so we will have a switch for dark and light buttons and let's create one more property so let's click on this add new property button and we'll add a property called platform so here we will have desktop and mobile and here for the platform i'll just type desktop as a default platform right now let's go into each of these variants and change the properties so let's go over here to the first variant and here for icon we have false for dark we have true and for platform we have desktop now let's select the second variant and for this we have icon as true and for dark it is set to true and for platform it is set to desktop so it's all right let's go to the next variant and here we have icon and we'll set it to false and for dark we have to set it to false because this is a light button and for platform we have desktop and then for the next button we have the icon and we'll just set it to true and it's a light button so i'll just change this dark to false and it's a button for desktop so i'll just keep it as desktop and then we have these buttons for the mobile version so let's change some of these values over here so let's change the text size to 16 pixels and we'll just change the padding to 12 pixels top and bottom and 32 pixels left and right and i'll just do the same thing for all these buttons and also change the size of this icon to 16. right now let's select these four variants and let's set the platform to mobile so let's type mobile over here and now let's select these two variants and let's change the dark to false and now let's select these two variants and let's set the icon to true right now let's check whether we have everything set up all right so let's select this first variant and we have icon to false dark to true and platform as desktop and then we have the next variant we have icon set to true dark to true and platform desktop and then for the next one we have icon set to false we have dark set to false because it's a light button and then we have the platform set to desktop and then for this one we have icon set to true dark set to false and platform to desktop let's select this one and we have the icon set to icon six we have to set it to false and the dark is set to true and platform mobile and for this one we have icon set to true dark to false and platform set to mobile and then for this one we have icons set to icon 8 we have to set it to false and dark is set to false and platform mobile and icon set to true dark false and platform mobile right now let's test it out so here we can see we have dragged this component from here and let's select this and here we have these options of icon so if i select icon we have an icon over here and here we have the option of setting the dark mode so right now it's a dark button and if i click on this it's a light button and if i click on this icon we have icon in a light button and then here we have the drop down for platform so if i select mobile we have a different version and we can also select dark and icon for mobile as well so everything is working all right so that's basically it with our button component now in the same way let's also create a component for the headings so i'll just delete this button from here and let's create a text and here i'll just type heading 2 because this is going to be an h2 in html all right now let's change some properties over here now for the heading we will change the font to railway and we'll set the font style to black and we'll set the font size to 60 pixels now this is for the desktop version and let's set the color of the text to this dark color over here now here in this heading if you add some text we can see that the width of the heading changes now we don't want that to happen we want to have a set width so what we will do is we will select this option called auto height and now if you add some more text over here we can see that it goes to the next line right now let's set the line height to 120 percent and let's press enter all right now the next thing we will do is we will make it an auto layout so i'll just delete all this text from here and for making it an auto layout you can just right click over here and click on add auto layout and now the next thing we will do is we'll just remove this padding from here so i'll just drag over here and set it to zero and let's change the name to heading right now let's make this a component so let's click on this button called create component right now let's go to the text layer and here under resizing let's set the width to fill container and now if you add some text over here it goes to the next line all right now let's add some variants just like we did with this button so let's go over here to variance and click on this plus icon and here we can see we have this new variant over here now we need to have two variants each for each of the platforms we need to have a variant for the dark heading and we need to have a variant for the light heading and in the same way we need to have two variants for the mobile version and also two variants for the tablet version so we need to have six variants in total so i'll just click on this plus icon and let's click on this plus icon a couple more times right now let's click on this component and let's add some properties so we already have a property called property one over here so i'll just change this to dark and then we need to have one more property called platform so let's click on this option button and click on add new property and i'll just name this platform and by default we will have the platform set to desktop and here for the dark i'll just set the default value to true right now let's select this first variant and here we will set the dark to true and the platform to desktop so it looks alright now for the next variant we will change the color of the text to white so let's scroll down and let's change the color to white now we cannot see the variant so i just change the color of this frame so let's change this to something different let's change it to this color right here right now for the second variant we have to set the dark property to false because this is a light heading and the platform will be desktop right now let's move on to the next heading and for this we will set the dark value to true and this will be for tablet so let's change platform to tablet and we'll also change the font size of this heading so let's double click over here and i'll just change the font size to 40 pixels and i'll do the same for this variant over here as well and for this variant we have dark set to true and platform set to tablet now let's select this one right here and we'll change the color to white and let's set the dark property to false and we'll set the platform property to tablet now let's move on to the next variant and for this we will set a font size of 30 pixels and even for the last variant we will set a font size of 30 pixels because this is for the mobile version and let's set the dark to true and for the platform i'll just set it to mobile and for the next variant i'll just set the dark to false and the platform to mobile and we also need to change the color to white color all right that's it with our heading component now let's add this to our frame and let's see whether it works all right so let's go to the assets and let's drag this heading out here and here we can see we have the switch for dark and light heading so we can change that over here and we also have the platform over here so we can select tablet and we have this smaller heading and we can select mobile and we have the smaller heading and we also have dark and light heading for all of that so that's it with the heading component of our design and that's basically it for this video now in the next couple of videos we will design the rest of the components and then we will start with the design of our website so these are the two components that we designed we have a component for buttons and also for headings so in this video we'll create this component over here for testimonials card so let's get started now there are three parts in this card we have this part over here for the content of the testimonial and then we have the name and the company name over here and then we also have this image over here so we have to join all of these elements together and we have to create a component out of that and we also have to make sure that it is responsive so let's go back to our figma file and let's start by creating a text layer so let's click on text and let's type something over here so just type amazing work well done right now let's change some properties over here so first of all let's change the font size to 18 pixels and we will keep the font as a railway and we will change the line height to 150 percent and we'll also change the color of the text to white so let's click on this and select the white color now let's make this an auto layout so i'll just right click over here and click on add auto layout now let's go inside the text layer and here we will set this width to fill container so now when we change the width of this frame we can see that the text goes down to the next line right now let's rename this to testimonial content right now let's create a new text layer and this will be for the name so i'll just type jane cooper and we'll set the font size to 24 pixels and i think the font size of this text hasn't changed so let's double click over here and we can see it is still 12 pixels so let's change it to 18 pixels right now let's change the color of this text to a dark color that we have over here so i'll just click on this color and select this dark color from here all right now let's duplicate this i'll just press alt and drag it down and here we will add the company name and the designation so i'll just type developer sony and i'll just change the font size to 18 pixels and we'll change the font style to regular right now let's select both of this and let's make this an auto layout so i'll just right click over here and click on add auto layout all right now let's add a circle for this image so i'll just click on this arrow and click on ellipse and i'll just create a circle of 120 pixels width and height and here i'll just add an image so i'll just right click over here and go to plugins and let's select this plugin over here called pixels so i have already installed this plugin so let's go over here to pixels and let's search for person and let's select this image from here right now let's make this an auto layout as well so i'll just right click and click on add order layout right now let's select this and let's add some padding so let's click on this button right here and we will add a top and bottom padding of 24 pixels and for left and right we will have a padding of 32 pixels and now let's add a background color so let's click on plus over here in fill and let's click on this color and let's select a color from here so i'll just select this color right here so i'll just click on this color over here and we'll also add a border radius so let's go over here to the top and we'll add a border radius of 24 pixels and we'll also change the names over here so i'll just change this to testimonial name and i'll just change this to testimonial image right now let's select both of this and let's create an auto layout so i'll just right click over here and click on add auto layout and let's go over here to alignment and padding and let's change this to center and let's add a padding of 32 pixels for left and right right now let's select all of this and let's create an auto layout so just right click over here and click on add auto layout right now let's change the width of this to the full width over here and we'll just name this testimonial right now let's select this frame over here and i'll just name this name and image and let's also remove the spacing from here so let's click on testimonial and i'll just remove this spacing between items right now if we increase the size of this testimonial we want the image to move over here to the right so for that we have to set full width for this name and company so i'll just double click over here and select this frame over here and let's change the resizing to fill container and now if we increase the width of this testimonial we can see that the image moves to the right now we have to do the same for this frame over here as well so let's double click over here and let's change this to fill container and now we can see everything works all right now let's change the background color so i'll just click on plus over here and i'll also change the border radius to 24 pixels now the next thing we have to do is we have to move this image up a little bit so let's double click over here and i'll just change the padding to zero and now let's click on this alignment and padding and let's click on packed and let's select space between and now we can go ahead and add some padding over here so we can see that the image has this offset over here so what i will do is i'll just select auto layout to vertical direction and now let's change this bottom value over here and now we can see that the image moves up so i'll just set this value to 24 pixels and i think that looks alright and let's also add a box shadow so i'll just select testimonial and let's click on plus over here in effects and let's click on effect settings and i'll just change the y value to let's say 9 and let's change the blur to let's say 36 pixels and i'll just change this percentage to 20 i think that looks alright now let's add some more text over here and let's see what happens and now we can see when we add text it moves down and everything looks alright and we also need to change the line height so let's double click over here on the text layer and i'll just change the line height over here so i think 150 percent looks alright right now let's delete all of this right now let's make this a component so let's click on this and let's click on create component and now let's create a variant for the mobile version so let's click on plus for variants and i'll just select this testimonial and we'll just change this property name to platform and by default we will have the platform set to desktop and for this one we'll set it to desktop and for the next one we will set it to mobile and for the mobile version i'll just change the font size of this name to 18 pixels and i'll just change the font size of this text over here to 14 pixels and we'll also change the size of this image so let's select this ellipse and i'll just set it to 100 pixels and let's select this frame and let's make some changes over here so let's change this value to let's say 42 pixels and i'll just reduce the height of this image frame and i think that looks all right right now let's go to assets and let's add this testimonial component over here so let's drag this over here and we can see this is the component so it is responsive and let's go over here to platforms and let's select mobile version and this is how the mobile version looks so everything works all right so that's it with the testimonials component right now in this video we'll create the component for this course card over here so we need to have this image we need to have this text and also this duration over here so we'll create a component for this course card so that we can reuse it so let's get started alright let me just delete this instance of this component over here and let's start creating the component for the course card so the first thing i will do is i just create a rectangle and we will add an image inside this so i'll just increase the width and the height over here let's set the width to 430 pixels and we will set the height to 260 pixels and now let's also add a border radius so i'll just change this value to 24. right now let's add an image inside this rectangle so i already have a plugin installed in figma called pixels so i'll just right click over here and go to plugins and click on pixels now if you don't have this plugin installed you can go over here to browse plugins in community and just install it from there right let's go over here to pixels and let's search for game and let's search for an image over here i think we'll just add this image right here right now you can see we have this image inside our rectangle now let's also add a little bit of drop shadow so let's click on this rectangle and let's go over here to effects and click on plus and here in the effects settings let's change some settings over here so i think we will set the y value to i think 4 looks alright and we'll just increase the blur a little bit and i think that looks alright and let's keep it at that right now let's add the title of this course so let's click on this text button and i'll just add a title i'll just type game design essentials so let's type game design essentials and let's change the font style to black and i'll just change the color to the dark color that we have in our website so let's select this color right here let's also set the line height to 150 percent so i'll just change this to 150 percent and now if we type another line of text we can see that we have this line height right now the next thing we will do is we'll create this duration over here so i'll just duplicate this by pressing alt and dragging it down and here i'll just type 8 hours and i'll just change the font size to 16 pixels and let's also add the icon of clock over here so i'll just right click over here and go to plugins and i'll just select hero icons and let's search for clock and here we can see the clock icon so i'll just drag it down here and let's also change the color to this dark color over here now we can see this cloak is outside this frame so let's bring it inside right i think this looks all right so let's select both of this and let's right click over here and click on add auto layout and let's go over here to alignment and padding and let's set it to center right now let's bring this title over here to the left and now let's make both of these and auto layout so i'll just select both of these and let's right click over here and click on add auto layout and let's go over here and click on center now the next thing we will do is we will set a fixed width for this frame so i'll just select this and i'll just change this to title and duration right now if you type some value over here we can see that the width increases we don't want that to happen so let's select this text layer and let's go over here to resizing and i'll just change this to fill container now it will fill according to the container size so if i just add some text over here we can see that it goes to the next line right now let's set the space between these two items to 16 so right now we have a space of 22. so let's select this title and duration frame and i'll just change this to 16 pixels right now we can see we have a space of 16 pixels and even if we increase the width of this frame we will still have a space of 16 pixels over here all right now the next thing we will do is we'll create a rectangle for this border bottom over here so for that let's go ahead and let's add a rectangle so i'll just click on rectangle and i'll just create a rectangle and we'll just set the height to 8 pixels and let's increase the width over here and we will set the color of this rectangle to the dark color and we'll also add a border radius over here so i'll just type 24 right now let's select all of this and let's create an auto layout so i'll just make some adjustments over here so here between these two elements we will have a space of i think 24 pixels looks alright and i'll just increase the width of the image over here right now let's select all of this and let's right click over here and click on add auto layout all right we will also increase the width of this rectangle over here right now let's change the background color of this frame to white before that let's change this name to course and let's go over here to fill and we'll click on plus and let's also add a border radius of 24 pixels and let's also add some padding to the left and the right so let's click on this alignment and padding and for left and right we'll set a padding of 32 all right that's pretty much it with the course card right now let's increase the width and let's see what happens and we can see that the width of these elements are the same now we want the width of the image and also this rectangle over here to change width based on the frame so let's undo this and let's click on this image and here instead of fixed width let's set it to fill container and let's also select this rectangle and here also we'll set it to fill container and we also select this frame over here for title and duration and here also we'll set the width to fill container right now let's see what happens and we can see everything works all right so there's no problems in our course card and if you add some more text over here let's see what happens so everything works all right so that's it with the course card now let's make it a component so that we can reuse it and we also want to have a variant for the mobile version so let's click on this button called create component right now let's go over here to variance and let's click on new variant and this variant is for the mobile version so for the mobile version we will set a height of 240 pixels and for the title we will change the font size to 24 pixels or that's it for the mobile version now let's rename the properties so let's click on this component and here instead of property one i'll just type platform here for the first variant i'll just change the platform to desktop and for the second variant i'll just change this to mobile right now let's test it out so let's go over here to assets and let's drag this course card over here and we can see everything works all right and if you increase or decrease the width there's no problem and let's select the mobile version and it also works all right there's no problem so that's it with the course component and with that we have created all the components that we need for our website now from the next video we will start designing the home page and in the previous video we completed creating all the components for our design so here we can see we have components for button heading and also components for this testimonial card and also this course card and i also have this image over here which we're going to use in our design and i will leave the link of this sigma file in the description of this video all right so let's get started now we will start with the desktop version of our design so if you go back to our completed design here we can see this is the desktop version and in this video we will design this hero section over here so let's go ahead and create a frame so here in the figma file let's click on this frame button and let's click over here and we'll set the width to 1366 and the height to 768 or this is gonna be the desktop version so just rename this to desktop right now the first thing we will do is we will create this background color over here so we have a linear gradient background color over here so let's go back and let's create a rectangle and we'll create a rectangle with the same size so i'll just span this for the entire frame right now let's set the color of this rectangle so let's click on this color and i'll just change solid to linear and for the first color i'll just set the color hex value to 6f 7dfb and then for the next color i'll just type the hex value to 26308c and we'll set the percentage to 100 all right this is gonna be our background color now the next thing we will do is we will lock this layer so even if we drag this by mistake it should not be moved so let's lock this layer and now we can see that the layer cannot be selected all right now the next thing we will do is we'll create a layout grid so let's click on this frame and here we can see we have this option called layout grid so let's click on this plus icon and let's click on this layout grid settings and i'll just change this to columns and i'll set 12 columns so we will work in a 12 column layout right now let's create this logo over here so let's click on text layer and click over here and let's type gd and let's set the font family to railway and we'll set the font size to 40 pixels and we will set the font style to black and the color is already set to white right now the next thing we will do is we will create these menu items over here so i'll just duplicate this so i just press alt and drag this over here and for the menu items we need to have about services and our work so just double click over here and let's type about and let's change the font size to 16 pixels and we'll change the font to pop-ins and we'll change the style to bold right now let's create services and our work so i'll just duplicate this and we will have a gap of 60 pixels in between this so if you press alt and hover over this we can see we have 60 pixels of gap and let's type services and let's duplicate this and bring it over here and here we'll just have our work and then we need to add a button called enroll now so we have already created a component for the buttons so here we can see we have this component so let's add the component over here so let's go over here to assets and from the components i just drag this button component over here and we will have a space of 60 pixels and we'll change the text to enroll now all right now let's align everything to the grid so here we can see we have this grid line so i'll just move it to the right and we'll also select all of this and i'll just click on this button called align vertical centers and now we can see everything is centered and let's group all of this so i'll just right click over here and click on group selection or you can just press ctrl g and i'll just name this menu items and i'll just name this logo and now let's move this to the right so i'll just align this with the right grid line over here and now let's select both of this and let's align everything to the center and now let's make this a group so i'll just press ctrl g and i'll just change the name to menu bar and let's select this and we will have a spacing of 42 pixels from the top so if i press alt we can see that we have 63 pixels at the top so let's move this up and now we can see we have 42 pixels at the top right now let's create the main title so let's click on this text layer and click over here and we need to type learn the art of game dev and let's go over here to the right and let's change some of these values over here i'll just change the font size to 50 pixels and let's change the font to railway and we will set the font style to black and we'll decrease the width over here and we will set the line height to 125 percent right now let's create this subheading so let's drag this down here and i'll change the font size to 16 pixels and we'll change the font to pop-ins and i'll just change the style to regular and let's set the line height to 200 percent right now let's add some text over here all right so i have added this text over here now after that we have this button so for that we already have a component so i'll just go over here to assets and from the components i'll just drag this button over here and we need to have a light button so let's select light and we also need to add an icon so let's click on icon and let's change the text to enroll now and now let's align everything correctly so let's align everything to the grid and even this paragraph and even this button and i think that looks alright so i'll just select all of this and let's move this down a little bit and now we can see we are in the center all right now let's add the image to the right so here we already have this image so i'll just duplicate this and bring this over here and we'll just align this over here to the right right now let's hide this layout grid so i'll just select the frame and click on this eye icon all right now the last thing we need to add is this achievement card over here so let's create a text and i'll just type 32k and i'll just change the font to poppins and i'll change the style to extra bold or let's keep it at bold and let's duplicate this down and here we have students enrolled so just have students enrolled and for this we will have a font size of 36 pixels and we'll change the color so let's select this color and we will have this dark color over here and for this text we will have a font size of 16 pixels and we'll set it to poppins and regular and we'll also change the color of this text to the dark color right now let's create this rectangle so let's click on this rectangle and create one over here let's go over here to layers and we can drag this down or you can just press ctrl and press the square brackets and we can move it down or up all right let's bring it over here and let's increase the width and the height and i think that looks alright and let's add a border radius of 24 pixels and let's set the color to white and we also need to give it a 3d look over here like this so let's duplicate this rectangle and let's bring it over here to the right and let's change the color to this color right here and i'll just bring it below this other rectangle and i think we have a linear gradient over here so let's select this color and let's change this to linear and i'll just select the first color and change this to 6f 7d fb and i'll change the last color to 3b 448f and let's change the alpha to 100 all right that's it with this card right here but now let's select this and let's group it and i'll just name this achievements and we also need to add one more for this rating so i'll just duplicate this and bring it over here and let's change this to we have 4.7 so i'll just type 4.7 and here we'll just type overall rating and we also need to have this star over here so for that we're going to use a plugin called iconify so i'll just right click over here and go to plugins and click on iconify and let's search for star and here we can see all these icons i'll just select this one from here and let's drag it over here and i just ungroup this so right click over here and click on ungroup and now let's add the star inside this group so i'll just move this a little bit to the left and let's decrease the size of the star and add this over here i think that looks alright so let's bring it to the center and let's decrease the width of this a little bit and let's also decrease the width of this one right here right that looks alright i think we can decrease the height a little bit and i'll just select all of this and group this and we'll also decrease the height of this one right here or that looks alright now in this video we will design this testimonial section and then we will design this our courses section so let's get started now the first thing we will do is we will group all of this and let's select all of these elements and let's press ctrl g or you can just right click over here and click on group selection and let's rename this to hero section right now let's increase the height of this frame so let's select this frame and let's increase the height all right now let's start with the testimonials section so here we can see we have these two testimonial cards over here so let's go back and we have already created a component for the testimonial cards so if you scroll up here you can see we have this component already created so let's add the component over here so let's go over here to assets and let's drag this component over here and this is our first testimonial now we need to set the width of this testimonial card so for that let's enable the layout grid so let's select this frame and here we can see we have hidden the layout grid so let's unhide it and now let's position this testimonial card over here to the left and let's decrease the width and let's set it till here or this is the first testimonial now let's add the text over here so i'll just add this text so i just updated the text and we already have the name over here now you can go ahead and add your own image over here so you can just double click over here and just go to this image and you can choose your image from here but i'll just keep this image and now let's duplicate this and bring it down so i'll just press alt and drag it down over here now this second testimonial should be positioned a little bit to the right so here we can see in the original design it is positioned to the right now let's change the background color of this testimonial so i'll just go over here and i'll just double click and i'll just select this color and i'll just choose this color right here and we'll also change the name and the company name so here we have jacob jones and designer facebook so let's add that over here and we also need to change the image so i'll just double click over here and i'm going to use a plugin so i'll just right click over here and go to plugins and then click on pixels and here i'll just type person and let's select this image right here and let's also update this text so here we have amazing work well done all right that's it with the two testimonial cards now let's add this background shape over here so for that let's create a rectangle i'll just create a rectangle over here and i'll just set the width to 28 pixels and we'll also set the corner radius to 24 and i'll just increase the height over here and let's change the background color so i'll just select this color right here and now we need to send this to the back of these testimonials so for that you can just drag it down here or you can just press ctrl and left square brackets to bring it down and i'll just decrease the height a little bit let's see what is the space between these two elements let's set it to 50 pixels i'll decrease the height a little bit i'll just move it to the right a little bit all right that's it with the left part of our testimonial section so i'll just select all of this and i'll just group it and here i'll just type testimonials left right now let's create the right portion of this testimonial section so here we have the heading and we have some text over here and then we have this button so for the heading we already have created a component so let's go over here to assets and let's drag this heading over here and just make sure that the platform is set to desktop and here i'll just change this text to what our students say let's increase the width of this heading and i think this looks alright now let's copy this text from here because the styling of this text is the same as this text over here so just double click over here and copy this and i'll just go over here to the bottom and paste it down here and let's change the color of the text to the dark color and let's also increase the width of this text layer and now let's change the text all right so i have changed the text now let's go ahead and add this button so for the button we already have a component so i'll just drag this over here and we need to have a light button so let's change the dark to light so i'll just click on this switch over here and i'll just change the text to learn more right now let's position this correctly so i'll just move this up a little bit and i think this looks all right and let's move this button up a little bit and i think 30 pixels looks all right right now let's select all of this and let's group it and i'll just rename this to testimonials right right now let's select both of these and let's align them to the center so i'll just click on this button called align vertical centers and now let's group all of this and we'll just name it testimonials section all right now let's add a spacing of 100 pixels between the hero section and this testimonial section so if you press alt we can see that we have a spacing of 98 pixels so i'll just bring it down two steps right now let's hide the layout grid and let's see how it looks and it looks alright now let's go ahead and design this section over here called our courses so the first thing we will do is we'll copy this background rectangle over here so it is the same color as this hero section so i'll just select this and i think we have locked it so let's unlock this and i'll just double click over here and select this rectangle and i'll just copy this press ctrl c and i'll just scroll down and i'll just paste it over here and now here we can see we have this rectangle i'll just bring it inside the frame right now let's move this rectangle up and we will have a spacing of 100 pixels between these two sections so you can just press shift and press the up arrow to move it 10 pixels to the top right now we can see we have a spacing of 100 pixels from the previous section now let's add a heading over here so here we can see we have this heading our courses so let's go over here to assets and we already have created this component so just drag it over here and we need to have a white heading so i'll just go over here to dark and click on this switch and now we can see we have a white heading and here we need to type our courses so i'll just change this text and i'll just increase the width of this heading and we'll just bring it to the center so i'll just click on align horizontal centers and we also need to center the text so i'll just double click over here and here inside text i'll just select text align center and now you will have a spacing of 70 pixels from the top so i'll just bring it down and now let's go ahead and add these two course cards so let's go over here to assets and let's drag this component over here and we'll just position it to the left and i think we can increase the width a little bit so i'll just set the width to i think 526 looks alright now let's duplicate this and bring it to the right and let's select both of this and let's move it up a little bit i think this looks alright now the next thing we need to do is add this button so i'll just go over here and drag this component and we need to have a light button so i'll just click on dark and let's change the text to all courses and that looks alright and here from the button we will have a spacing of 70 pixels right now we have a spacing of 90 pixels so i'll just decrease the height you can just press ctrl and press the up arrow and now you can see we can decrease the height in this way and let's bring it down a little bit more right now we have a spacing of 70 pixels now let's go ahead and change some of these details so here we have game design essentials and we also need to change the image so just double click over here and right click and go to plugins and select pixels and let's type game and i'll just select this image right here now for the next card we have a title of unity game engine fundamentals so let's change that over here and now we need to move this down a little bit so i'll just select this button and move it down and we also need to increase the height of this rectangle right now we can see that both these cars have different heights so what we can do is we'll just add an empty line over here so i'll just press enter and now we can see we have the same height for both these cards so that's basically with our courses section so i'll just select all of this and let's group this and i'll just name this courses section and this is our website looks right now we have the hero section we have the testing modules section and also the courses section now in this video we will design the get our app section and also this footer so let's get started right now the first thing we need to have is this heading over here so let's go back to our figma file and we have already created a component for the heading so let's go to assets and here inside components we have this heading so just drag this over here and let's change the text to get our app and let's increase the width of this heading now let's bring it to the center so i'll just click on this button called align horizontal centers and we also need to center align this text so i'll just double click over here and i'll just click on this button called text align center now we will have a spacing of 100 pixels from the previous section so i'll just bring this up a little bit now the next thing we need to have is this text over here so if we scroll up we can see that this is the same styling of this text so i'll just double click over here and i'll just copy this i'll just press ctrl c and let's scroll down and here i'll just paste the element and let's bring it to the center and let's increase the width right now let's change the text so we need to type you can use our app for better experience on your smartphones all right so this is the text i'll just center align this over here and also center align the text and let's bring this up and i think this looks all right now the next thing we need to do is get these icons and add this text so i have already downloaded the icons and here you can see we have these two icons over here so i'll just select both of these and let's press ctrl c and let's scroll down and here we'll just paste the icon so i'll just press ctrl v right now we need to have this background for this icons so let's create a rectangle and let's bring this rectangle to the bottom of the icon so just press ctrl and left square brackets and let's increase the width of this rectangle and in here we will add a text so i'll just click on text and here we need to type app store so just type app store now for this text we will have a font size of 24 pixels and we'll change the color of this text to white so i'll just select white color from here and let's select the background rectangle and let's change the color to black and i think that looks alright let's decrease the width a little bit right now let's select all of this and let's make it an auto layout so i'll just right click over here and click on add auto layout now the next thing we will do is we will have a fixed width for this frame so i'll just increase the width over here and now let's go ahead and duplicate this so i'll just press alt and drag this over here now for the second one we need to have this icon so i'll just drag this over here and i'll just delete this icon and let's change the text to google play all right that's it with the icons let's bring this a little closer to each other and now let's select both of this and let's bring it to the center and i think that looks alright right now let's select all of this and let's make it a group so let's right click over here and click on group selection and let's change the name to app section right now the last thing we need to do is create the footer so here we can see we have this footer so for that let's create a rectangle so let's go back and let's click on this rectangle and let's create a rectangle over here let's set the width to 100 percent of the frame and we will have a spacing of 100 pixels from the previous section so i'll just bring this up a little bit right now the next thing we will do is we will change the background color of this footer so let's scroll up and here we can see we have this dark color here so let's select that color so let's click on this color and let's select this color right here all right now let's go ahead and add this heading so let's click on text and let's type quick links and let's set the font size to 18 pixels and we'll set the color of the text to this color right here and we will also set the phone style to bold right now let's enable the layout grid so for that let's select this frame so i'll just press ctrl and click over here and i'll just click on this button to unhide the layout grid right now let's position this heading over here to the left and for the top we will have a spacing of 70 pixels so let's bring it up and that's it with the heading now let's go ahead and add these links over here so i'll just duplicate this and bring it to the right a little bit and let's change the font style to regular and let's set the font size to 16 pixels and we'll set the color of the text to white or now for the first link we have about us so i'll just type about us over here and i just set the text align to left right now let's duplicate this and bring it down and then we have these links over here so i just quickly add all of these links and i think this looks alright so let's select all of this text and let's group it here let's type footer links right now let's duplicate this and bring it to the right so we have two more sections so let's bring it over here and i'll just duplicate this and bring it over here once more and then for the next one we have course so just type course and we also need to align this to the left right let's type course and in here we have login download and all courses and we don't need to have this last link over here so i'll just delete this and then for the next one we have contact us so i'll just double click over here and align this to the left and let's type contact us and you need to have the email id so let's type contact email.com and then we need to have these icons of facebook and instagram and then we need to have this email subscription box so let's delete all of this and i'll just copy this and bring it down here and here we need to type the credits so i'll just type it over here and let's bring this to the left right now let's add these two icons so let's right click over here and go to plugins and select iconify and let's select facebook we need to have this round icon so i'll just drag this over here and then we need to have the icon of instagram so here i'll just type instagram and let's drag this icon over here right now let's bring these two icons inside the footer and let's change the color of this icon so let's select both of this and let's change the color to white and let's select and bring these icons to the top and let's bring this over here let's set the same height to both these icons so i'll just set the height to 24 pixels let's also select this and let's see the height of this icon to 24 pixels as well so let's select constraint proportions and let's type 24 over here right now let's delete this and let's create this email subscription box so for that let's create a rectangle so let's click on rectangle and create a rectangle over here and let's increase the width and let's change the fill color to white and i'll just set the corner radius to 8. and let's add a text inside here so let's click on text and here we'll just type email address and i'll just reduce the opacity of this text so here i'll just type 50 and now let's create this button so for that let's create one more rectangle and let's decrease the height and for this we will have a background color of this dark color and let's bring this to the top and let's set a corner radius of 8 pixels all right now for the text we need to type subscribe so i'll just duplicate this and bring this over here and let's type subscribe and let's bring this to the top so i'll just drag this over here and let's change the color of the text to white and let's set the opacity back to 100 and i think we need to increase the width a little bit right now let's remove this layout grid and let's see how it looks and i think we have a lot of space between these elements so i'll just bring this over here to the left and we will have a space of 132 pixels and i'll also bring this to the left and we need to have these elements in the group as well so let's ungroup this so i'll just click on ungroup and let's select all of this and let's group this and let's bring this to the left and now we can increase the width of this email subscription box so let's select this rectangle and let's increase the width a little bit and let's select this button and let's bring this to the right and i think that's it with the footer so let's decrease the bg rectangle and we will have a space of 70 pixels right now let's select all of this and let's group it i think we have an extra element over here i'll just delete this right now let's select all of this and let's right click over here and click on group selection and i'll just name this footer so that's it with the footer of our website now let's decrease the height of this frame so i'll just press ctrl and click over here and let's decrease the height and here we can see the icons are moving up so let's double click over here and select this icon and for the constraints we need to select top and left and do the same for this as well right now let's decrease the height of this frame so here we have our design for the desktop and everything looks alright we don't have any problems so that's it for this video we have completed the design of the desktop version now from the next video we will start designing the tablet version now let's start by creating a frame so let's click on frame and let's click over here and let's select a template from here so let's click on frame and let's select ipad pro 11 and let's rename this to tablet now the first thing we will do is i just duplicate all these elements and bring it outside so let's go into the desktop version and let's select the hero section and let's press alt and drag this over here now we can go ahead and position these elements over here inside the ipad frame now the first thing we will do is we'll just copy all of these menu items and bring it over here so just double click over here and copy and paste it over here and before that let's copy and paste this background gradient color so let's double click over here and let's copy this and let's go over here and paste it over here and i'll just adjust the size according to the frame of the ipad so now here we can see we have these menu items i will also bring this logo over here so let's double click over here and i'll just copy and paste it over here right now the next thing we will do is we will change this button variant so let's double click over here and here we can see for this button we have set the platform to desktop and let's change this to mobile so this will be the button for the tablet version now the next thing we will do is we'll change the gap between these elements so let's double click over here and if you press alt we can see that we have a spacing of 60 pixels so let's move this over here we will set a space of 42 pixels and we will do the same for all the other elements so let's double click over here and let's change the spacing to 42 pixels and we will do the same for this about right now let's select all of this and let's bring it to the center so i'll just press align vertical centers right now we will have a spacing of 60 pixels from the edges so let's go over here to the right and right now we have a spacing of 51 pixels so let's move this 9 pixels to the left and here for the logo we will have a spacing of 60 pixels to the left so let's do that over here right now let's select this logo and this menu items and let's click on align vertical centers right now let's select both of this and let's group it and i'll just name it menu bar and from the top we will have a spacing of 60 pixels so let's move this down now let's go ahead and copy the other elements so let's copy this image so i'll just bring this over here and let's select both of these cards and let's duplicate them and bring it over here and let's also select these three elements the heading this paragraph and this button and let's duplicate them and bring them over here and we'll just change this button to mobile right now let's go ahead and bring it to the left and we will have a spacing of 100 pixels and we'll do the same for the right and i'll just add a line break over here right now let's do the same for this paragraph let's bring it to the left and we will have a spacing of 100 pixels and even for the right we will have a spacing of 100 pixels so let's increase the width right now let's go ahead and bring this button to the left and i think that looks alright now let's go ahead and increase the size of this image so i'll just press shift and increase the size and let's bring this over here to the bottom right and let's also position these over here to the bottom and i think that looks alright i think we can bring these elements to the bottom a little bit and i think that looks alright so now let's delete this now let's go ahead and increase the height of this frame now the next thing we will do is copy this testimonials section so i'll just duplicate this and bring this over here right now for the testimonials section we will have the heading and this paragraph over here at the top so let's double click over here and let's bring this over here and the first thing we will do is we'll change the heading to tablet and these options are available over here because we had created it as a component now let's go ahead and set a padding of 100 pixels so we'll have a spacing of 100 pixels from the left and from the right so right now we have a spacing of 137 pixels so let's bring this over here to the left and let's also do this for the right now we will also have a margin of 100 pixels from this hero section so let's select this and right now we have a spacing of 94 pixels let's bring this down a little bit and now we have 100 pixels right now let's bring this paragraph over here to the top and we will have the same spacing for this as well and we'll also remove this line break from here so here i'll just remove this line break and i think we need to bring this up a little bit i think that looks alright right now the next thing we will do is we will change the button platform so let's double click on this button and we'll set the platform to mobile and i'll just remove this button from this group so i'll just right click over here and click on ungroup and we will have this button at the bottom and before that we will have both the testimonials so let's go back over here and let's bring these two testimonials over here right now let's bring this over here to the bottom and let's increase the width of these testimonial cards so i'll just double click over here and we will have a spacing of 100 pixels from the left and right so i'll just increase the width let's do the same for this testimonial i'll just bring this up a little bit we will have a spacing of 40 pixels and let's increase the width let's decrease the height of this rectangle and we'll position this button over here at the bottom right and that's it with the testimonials section so let's select all of this and let's group this and we'll just name this testimonial section and we'll also group all of this and we will name this hero section and now we can go ahead and delete this testimonial section from here all right now the next thing we will do is copy this our courses section from here and let's bring this over here first of all let's copy this background rectangle so i'll just copy this ctrl c and press ctrl v over here i'll just decrease the width and we will have a spacing of 100 pixels from the previous section so i'll just bring this up over here and we will have a spacing of 100 pixels right now let's go ahead and copy this heading so let's double click over here and copy this over here and we'll change this heading to tablet and let's bring it to the center and now let's copy this course card so just copy this so just double click over here and copy this and i'll just increase the height of this rectangle let's copy the second course card and bring this over here and let's also copy this button and bring this over here and let's change this button to mobile now for these cards we will increase the width so let's set the width matching with this testimonials card and let's increase the width over here as well and i think we have a line break over here so let's delete that right now let's bring this card up and we will have a spacing of i think 60 pixels looks all right or let's uh increase it to 80 pixels and let's increase the width and that looks all right now let's bring this button up over here to the bottom right now let's decrease the height of this rectangle and i think that looks alright so that's it with the courses section so i'll just delete this and i'll just select all of this and let's group this and we'll just name it courses section right now the next thing we will do is copy this get our app section so just copy all of this directly over here to the ipad frame and let's change this heading to tablet and let's bring this paragraph to the top and let's bring this to the center let's decrease the width and let's bring both of these to the top and i think that looks alright let's select all of this and it's already a group so let's bring this up we will have a spacing of 100 pixels right now the last thing we need to do is copy the footer so let's duplicate this and bring this over here for the footer we will have a two column layout so first of all let's copy this background color so i'll just double click over here and copy this rectangle and paste it over here and let's drag this over here let's decrease the width and let's increase the height right now let's select this first part and the second part and let's drag them over here and let's position this correctly will have a spacing of 100 pixels and let's select this section right here and let's duplicate this and bring this over here and let's bring this up a little bit and that looks all right and then finally let's select this text from here and let's bring this over here and i'll just position it over here and from the top we will have a spacing of 70 pixels so just move this rectangle to the bottom and i think we can move this up a little bit right now let's decrease the height of this rectangle and that looks alright so let's select all of this and let's group this and we'll just name this footer and let's bring this up and we will have a spacing of 100 pixels and that looks alright now we can select and delete this and that's it with the tablet version of our website so now we can just decrease the height of this frame and i'll just bring this over here to the left so now we have the desktop version and also the tablet version now the mobile version will be quite similar to this tablet version we're just going to make some changes to the padding of these elements and we're going to change these components to the mobile version and we'll also change this footer to a one column layout so let's get started let's start by creating a frame so let's click on frame and let's click over here and let's select a template from here so let's click on frame and i'll just select the iphone 11 pro max and let's change the name to smartphone right now let's move this to the right side and let's copy this hero section to outside this frame so let's go into the tablet version and let's select the hero section and let's click alt and drag this over here right now let's add these components to our smartphone version so the first thing we will do is we'll copy this background rectangle so i'll just double click over here and here we can see we have this rectangle so i'll just press alt and drag this over here and i'll just adjust the size according to the frame all right that's it with the background now let's copy this logo so i'll just double click over here and let's duplicate this over here now for the mobile version we won't be having these menu items displayed over here we will have a menu icon and when we click on the menu icon we will display these menu items in a pop-up so for that let's add a menu icon over here so i'll just right click over here and go to plugins and let's select hero icons and let's search for menu and i'll just select this one right here and let's drag this and bring it inside our frame and we'll also decrease the size of this logo so let's click on this logo and i will set the size to 36 pixels and let's change the color of this menu icon to the dark color that we have in our website and let's increase the size of this menu icon so for that i'm going to select this tool over here called scale and now let's increase the scale and i think this looks alright so that's it with our menu icon now let's select this and we will have a spacing of 32 pixels on the right side so let's press alt and now we have a spacing of 57 pixels so let's bring this to the right and that looks alright let's also bring this logo to the left and we will have 32 pixels of padding right now let's select both of these and let's align them to the center so i'll just click on this button called align vertical centers and let's group this so i'll just press ctrl g and we'll name this group menu bar and we'll have a spacing of 60 pixels from the top so i'll just bring this up one pixel all right now the next thing we will do is we'll copy these three elements so i'll just select all of these and let's press alt and bring this over here and we also decrease the width of these elements so let's select this text over here and we will have a spacing of 32 pixels from the left and the right and we'll also decrease the size of this font so let's select this and right now we have a size of 50 pixels let's decrease this and let's set it to i think 36 pixels and that looks alright right now let's decrease the size of this paragraph over here and we will have a spacing of 32 pixels and let's bring this to the top a little bit and i think that looks all right and now let's select this button and we have already set the platform to mobile in the tablet version and now we need to add this image over here as well so let's double click over here and let's press alt and bring it over here and we need to decrease the size of this image so i'll just press shift and drag this over here i think this looks all right let's bring these elements to the top and i think that looks alright we can just decrease the size of this image a little bit now let's add these two elements over here so let's double click and let's also select this and let's press alt and bring this over here and here we'll just change the size of these elements so for the students enroll i'll just change the font size to 14 pixels and for 32k i'll just set it to 30 pixels and let's also decrease the size of this rectangle and we'll do the same for this one as well right now let's select this and let's copy this down over here and i'll just change this to overall rating and let's change this to 4.7 and let's bring this star let's copy this and bring this over here let's decrease the size a little bit and let's select both of this and bring this to the left and i think that looks alright now let's delete this element from here we can decrease the width of these elements a little bit all right that's it with these two elements and i think we can move this image to the right a little bit and let's move these elements over here to the bottom and uh i think that looks all right it with the hero section of our mobile version so let's select all of these elements inside the smartphone and let's group this so i'll just press ctrl g and let's name this hero section right now we can delete this hero section from here right now let's go ahead and increase the height of this frame so i'll just select this frame and let's increase the height right now let's copy and paste the second element so let's copy this testimonial section now let's go ahead and select this heading and we have to change the platform to mobile and let's move this up a little bit and we also have to change the platform of this testimonial component to mobile so let's select this and let's select mobile and i'll do the same for this one as well right now let's copy these to our smartphone frame so let's decrease the width a little bit and let's decrease the width of this as well and also of these two components let's also bring this button to the left right now let's copy all of this and let's drag it inside this frame and let's set a top padding of 100 pixels so right now we have a gap of 96 pixels from the top so i'll just move this down 4 pixels and on the sides we need to have 32 pixels so here we have 30 pixels let's go ahead and change the width of these elements so now we have 32 pixels for this element let's do the same for this text layer and let's bring these elements to the bottom a little bit and let's decrease the width of these testimonial cards and even of this one right here and let's bring this button to the left and we can also decrease the height of this rectangle over here and we'll just bring it to the left a little bit and that looks alright okay so now let's select all of this and it is already a group so let's keep it as it is now let's go ahead and copy the next section which is this our courses section so let's copy this over here and let's change the heading to mobile and let's change these elements course cards to mobile we'll do the same for this element as well i'll just select mobile from here in the platform and let's decrease the size of these course cards let's decrease the size of this background right now let's select all of this and let's bring it inside the smartphone frame all right let's bring this to the left and we'll also decrease the width of this background rectangle all right now let's have a spacing of 60 pixels from the top for this heading and we'll also have a spacing of 32 pixels from the left and the right right now let's select this course card and let's bring it to the left and we will have a spacing of zero from the left and the right so i'll just bring this over here and we will do the same for this course card as well so let's bring it to the left and let's decrease the width and we also had a button let's see where's the button so it's over here let's bring it to the left and let's position this over here we will have a spacing of 32 pixels on the right or that looks alright right now let's decrease the height of this rectangle right now let's select this group and we will have a spacing of 100 pixels from the previous section so let's move this up or that's it with the course section now let's go ahead and copy this section right here for get our app and for this we'll position these two elements one below the other so let's position this over here and let's bring this to the center and let's select this heading now let's change this to mobile let's decrease the width of this heading right here for now let's copy all of this and bring it over here and we will have a spacing of 100 pixels from the top right now let's select this and bring it to the center so let's click on align horizontal centers and also we will have a spacing of 32 pixels from the left and the right for this paragraph right now let's bring this paragraph up a little bit and let's select both of this and we'll bring this to the center and i think we can decrease the height of these elements over here so let's double click over here and let's reduce the height a little bit so we'll set the padding to 16 pixels from the top and bottom or let's set it to 12 pixels and we'll do the same for this one right here let's select this and let's type 12 for top and bottom and let's bring this to the top a little bit and that looks alright and that's it with the our apps section now let's go ahead and copy this footer so let's copy this over here now for the footer we need to have all these elements one below the other so we'll have a one column layout so i'll just select this background and let's increase the height a little bit and let's position these one below the other so i'll just select both of these and bring them to the bottom and let's select the other one and let's bring it to the middle and we'll also decrease the width of this input field so let's double click over here and let's decrease the width of this input field and what i will do is i'll just bring this button to the bottom so let's bring this to the bottom a little bit and let's select this button and let's bring this to the bottom over here right now let's decrease the width of this background and let's copy all of this and let's bring it inside the smartphone frame and let's decrease the width of this background and we're going to have a spacing of 100 pixels from the top right now scroll down and let's bring this to the left and also this paragraph right now let's bring all of this to the center so let's click on this group over here and now if i click on align horizontal centers we can see that the whole group is centered but all the individual elements are not centered so let's ungroup this first so i'll just right click over here and click on ungroup and now let's select all of this and let's click on align horizontal centers and now we can see everything is centered correctly so let's do the same for all the other elements we'll also check whether we have the correct padding at the top so we have a padding of 85 pixels let's select all of this and let's group it once again and we will have a spacing of 60 pixels so let's bring this up a little bit right now let's select this and let's ungroup this and let's click on align horizontal centers and now let's group this and now let's click on align horizontal centers and now we can see it is in the center and we'll also bring this up a little bit so we will have a spacing of 40 pixels i think that looks all right right now let's go ahead and bring this section over here to the top and let's bring it to the center let's click on align horizontal centers and let's ungroup this and now let's select both of this and let's click on align horizontal centers and let's group this and let's bring it to the center and we'll also bring both of these icons to the center so let's double click over here and let's group it first so i'll just press ctrl g and let's align horizontal centers and we'll just increase the width of this input field so we will have a spacing of 32 pixels and the same for the right you can just press ctrl and press the left and the right arrows to increase the width and let's bring this placeholder to the left and i'll just increase the height of this button and let's group this button and let's click on align horizontal centers and let's also bring this paragraph to the top and let's set a spacing of 32 pixels from the left and the right and i think we can decrease the size a little bit so let's set it to 14 pixels and let's set it to text align center and that looks alright so that's it with the photo of our mobile version now let's decrease the height of this rectangle and we will have a spacing of 70 pixels so let's press ctrl and up arrow right now we have 70 pixels so that's it with the footer right now let's select this and we have a spacing of 100 pixels from the previous section right now let's decrease the height of this frame so let's select this frame so i'll just press ctrl and click over here and let's decrease the height of this frame or that's it with the mobile version of our website now the last thing we need to do is add the navigation menu for our mobile version so in this video we'll create a navigation menu for our mobile version so when we click on this menu button we want to have a navigation menu displayed over here and it should have a close button and when we click on the close button the navigation menu should close so let's get started right now the first thing we will do is we'll create a frame so let's click on frame and let's click over here and we'll select this frame and let's select iphone pro max and this is gonna be our navigation menu now the first thing we will do is we will add a background color so let's select this color and let's select the dark color that we have for our website and i think we will select the other dark color that we have in our website so if you scroll up here we have this color so let's select this all right now the next thing we will do is we will add the menu items over here so let's click on text and let's click over here and we need to add about services and our work so let's type about over here and let's set the font size to 16 pixels or let's set it to 18 pixels i think we can increase it a little bit more so i'll just set it to 24 pixels but that looks alright so let's bring it to the center and now let's duplicate this and let's bring it down and here we will type services and let's bring it to the center and we will have a gap of 40 pixels in between so right now we have a gap of 41 let's bring it down right now let's duplicate this and bring it down over here and the next menu item we need to have is our work and let's send it to the center and now we also need to have a button so for that let's go over here to assets and let's drag this component over here and we'll change the platform to mobile and we will change it to a light button so let's uncheck dark and we will change the text of the button to enroll now and let's bring it to the center let's select this and let's click on align horizontal centers so this is going to be our navigation menu so let's select all of this and let's group it so i'll just press ctrl g and let's name this menu items and for this frame i'll just name it navigation menu now the next thing we need to do is add a closed icon so let's right click over here and go to plugins and let's select hero icons and if we scroll down we can see that we have this icon for close so let's drag this over here and let's change the color of the icon to white and let's increase the size a little bit so if you go over here to this icon let's see what is the size we have a size of 39 pixels i think we can increase it to 40 pixels to be a bit more consistent all right now let's select this and let's change the size to 40 pixels and let's select this tool called scale and let's increase the size and i will set it to 40 pixels and let's bring it over here to the top right we will have a spacing of 60 pixels from the top and 32 pixels from the right all right this is our navigation menu now the last thing we need to do is we need to set a prototype where when we click on this button we want to have this navigation menu displayed over here and when we click on this close button it should go back and we should have this home screen so let's go over here to prototype and let's select this button now let's go back and select the move tool and here we can see we have this plus icon displayed over here so we have to drag this to wherever we want so i'll just drag it over here to this frame and here we have some options for interaction so we will set it to on click and here we have an option called navigate to this frame navigation menu and then we have the animation and all of those over here so i'll just set this to open overlay because we're going to open this navigation menu as an overlay and here we have some options as to where this navigation menu should be displayed we'll just set it to centered and we have some other options over here we'll just leave it as it is and here we have animation and let's select this and let's select move in and now here we have different options like moving from the left or moving from the right and all of those options over here so i'll just select this one right here and let's set it to ease out and now the next thing we need to do is we need to add an interaction for this close button as well so let's select this and this close button should be inside this navigation menu so i'll just drag this over here right now let's select this close button and we will drag a connection from here to this frame over here so i'll just click and drag and drop it into this frame and here we'll just choose close overlay and now let's go ahead and test it out so let's select this and let's click on this button called present and here we have the home screen and let's click on this button and we can see that the navigation menu is displayed over here and if i click on this close button it is hidden so the navigation menu is working all right now if you want to test this design in your smartphone you can go ahead and download an application called figma mirror and just go ahead and log in with your figma credentials and once you log in you can just click on any of these frames so here i have installed figma mirror on my phone and let's select this frame over here and we can see that our design is displayed over here in the phone now you can go ahead and scroll down and we can see everything is working all right now let's test this menu button so let's click on this menu button and we can see that the navigation menu is displayed over here and let's click on this uh close button and we can see it is hidden so everything is working all right and i think the font over here is not correct the font over here is pop-ins so we have to change all of this font to pop-ins so let's change this to pop-ins right now let's center this all right so that's basically it for this video now here we can see in the first frame we have the color palette of our website and then we have all the components that we need in our design and if you scroll down we can see that we have the desktop version on the left this is how it looks and then we have the tablet version and we have a slight change in the layout here we can see we have this two column layout for our footer and then we have the smartphone version so this is how it looks now for the smartphone version we don't have these menu items displayed over here instead we have this menu icon and if i click on this we're going to see this menu over here and if we scroll down we can see that we have a different layout for our smartphone version and for the footer we have a one column layout so this is our figma design now let me show you the completed version of our real website all right this is our completed project so this is how it's gonna look after the tutorial series is finished and here we can see we have this hero section over here and it looks almost the same as the figma design and if you scroll down we can see that we have all the other elements over here and we also have a different styling for these menu items over here when we scroll down so here we can see this is the default design and if we scroll down we have a different styling and here we can see all these sections are displayed just like we have in our sigma design and here we have the get our app section and then we have the footer over here right now let me show you the tablet version so just right click over here and click on inspect and let's click on this button called toggle device toolbar all right this is how it's going to look on an ipad pro and if we scroll down we can see all these elements over here and we have this different layout for this testimonial section and if you scroll down we have the course section then we have the app section and then we have the footer in to column layout right now let's go ahead and check out a different device so let's click on this drop down and let's select ipad and here we can see for the ipad we have a slightly smaller screen and here we can see we don't have the menu items displayed over here but we have this menu icon and if i click on that we have the menu displayed over here and if i click on this close button it goes back and if you scroll down you can see that everything looks all right right now let's check out the mobile version so let's click on this drop down and let's select a device from here let's select pixel to excel and this is how it will look on a pixel 2 xl device so here also we have this menu icon and if i click on that we have the menu displayed over here and if i click on the close button the menu goes back so let's scroll down and here we can see all these elements and it is looking just like the figma design and then we have this footer over here with a one column layout so everything is looking all right so this is what we're gonna design in this tutorial series using html css and javascript now in this video we will set everything up for our project and from the next video we will start writing the code so let's get started now the first thing you have to do is download and open this figma file in your figma application so i will leave the link of this figma file in the description so you can go ahead and download from there and then just open it in your figma application now if you don't have figma already installed you can just google for figma and just download it from there and then you can just create a free account and get started all right now the next thing we will do is we will create the html css and javascript files so here i've created this folder called responsive homepage and i just opened it with vs code and i also have a folder called images over here to store all the images right now let's go ahead and create the files so let's click on new file and let's create an html file i'll just name it index.html now let's create a css file so let's click on new file and let's name it style.css and we also need to have a javascript file so let's click on new file and let's name it main.js all right now the next thing we will do is we will link the css and the javascript files into our html file so let's go over here to index.html and in vs code you can just press exclamation and press tab and you will have this basic html5 code right now here let's link our css file so here i'll just type link and press tab and here in the extra values type style.css and now let's link our javascript file over here inside the body so here i'll just type script colon src and press tab and here i'll just type main.js all right now the next thing we will do is we will get the link of the phones so if we go back to our figma file we can see that we are using two fonts over here one is this font called railway so here we can see for railway we need to have the black version and then we have the next font over here called pop-ins so we need to have the regular version and we also need to have a bold version i think this is also poppins so here we can see for poppins we also have a bold version and let's scroll down and let's see whether we have any more phones so i think this is a railway font so let's double click over here and here we can see we have a railway phone for the thin version as well so we need to get these four styles of phones we need to get the railway thin and the railway black and we also need to get the poppins regular and the bold versions so for that let's go to phones.google.com all right so here i'm in phones.google.com and uh here we can see we have the poppins font so let's click on this and we need to get the regular and the bold versions so i'll just select this one right here regular 400 and let's scroll down and let's also select ball 700 right now let's search for the next font which is railway so let's go back and let's search for railway and let's click on this font and here also we need to select two styles so we'll select this light 300 version and let's scroll down and let's also select the bold 900 so let's select this all right now let's click on this icon called viewer selected families and here we can see the link that we can add in our html so i'll just copy this from here and let's go to our html so here in the html i just pasted the link in the head section all right that's it with the phones now let's go ahead and add the colors to our website so we'll create some css variables for that so let's go to our style.css file and here we'll just create a root selector so i'll just type colon root and in here we will add all the css variables for the colors now when we add the css variables inside the root it will be accessible everywhere so let's go back to our figma file and let's get the code of our colors so let's scroll up and here we can see we have the colors so let's click on this color and here we can see the hex code for the color so i'll just copy this and let's go back to our css and here we'll just create a variable so i'll just name it orange color and here i'll just add the hex code so just tap hash and paste the code over here so this is our first variable now the advantage of using a css variable is that if you want to change the color later you can go ahead and change it in just one place and it will be changed in all the other places because we're going to use this css variable name as the color all right now let's go ahead and get the second color so let's go back to figma file and let's select this color right here and let's copy this hex code now let's go back and we'll just name it dark blue color and here let's tap hash and paste the hex code all right now let's go back to our figma file and let's select the next color so i'll just select this color right here and i'll just copy this code and let's create a color called dark color and i'll just paste it over here and i don't think we have this color in our website so let's scroll down and i don't think we have that color in our website so i'll just keep this color right here let's select the next color and let's copy this hex code and let's go back and here i'll just name it light color and i'll just paste the code over here right now let's go back and let's select this color right here and i'll just copy this code let's go back and we'll just name it light blue color all right that's it with all the colors in our website now the last thing we will do is we will export all the images from the figma file into this images folder over here so i'll just show you how to export a couple of images and then you can go ahead and export all the other images now to export an image you can just select the image so i'll just double click over here to select this image and then you can go over here to this design tab and just scroll down and you can find this option called export and you have to click on this plus icon over here and then here you can click on preview to see how the image looks and then you can go ahead and select the image format so i'll just select png and then you can click on export and you can browse to your project folder and i'll just select this images folder and i'll just name it hero image dot png and let's click on save and now if you go to this images folder we can see that we have this hero image now in the same way you can go ahead and export all the other images and you need to export these icons as well so if we double click over here we can see this is an image so if we scroll down here we can see we have the preview of the image now when you're exporting icons you can just select the image format as svg instead of png because svg will maintain the quality of the image even if we increase the size of the image so whenever you have an icon or shapes like this you can just export it as svg so i'll just click on export and i just name this enroll icon dot svg and let's save it now in this way you can go ahead and export all these images so you can export the star icon you can export these two images and you also need to export these thumbnail images and also these icons for app store and google play store and also these two icons over here you can export these as svgs right now let's go to the ipad version and we don't have any new icons over here so let's go to the mobile version and here we can see we have this icon for the menus so you can just double click over here and export this icon as an svg and you also need to export this close icon and let's see whether we have any icons remaining and we also need to export this icon over here for the clock so these are all the images and icons you need to export from figma and once you export all these images you'll be ready to get started with the code now in the previous video i showed you how to set up the project and if you go to our vs code here we can see we have created these files over here html css and javascript files and we also added some css variables over here and this is our html file we have added some boilerplate html code and also the link of the font and i have shown you how to export the images from the figma file into our project so here we can see we have exported these two images now you can use the same method to export all the other images so i'll just go ahead and copy and paste all the images that i exported into this images folder all right so here i have copied all the images that i exported from the figma file now in this video we will start writing the html for our website so let's get started all right let's go back to our figma file and let's see how to get started so the first thing we will do is we'll create this header section so for that let's go back to our html and let's create a header tag so here i'll just type header and in the header we need to have a division to contain everything so here we can see we have a max width for all the elements but the header has full width so here we can see for the header we have this linear gradient background but we have a max width for all the contents inside the header so we have to create a container division for that so for that let's create a division of the class of wrapper and in this will create a nav element to hold all these menu items and also this logo so let's create a nav element and in that we will create a division of the class of logo for this logo so let's create a division with the class of logo and here i'll just type gd dot so this is our logo and the next thing we need to do is add these menu items now for this i'll just create an unordered list so let's create and another list over here so i'll just type ul and for each of the menu items we'll create a list item so let's type li and here i'll just create an anchor tag for the menu items and for the stuff i'll just type hash for now and here in the anchor tag the first menu item we need to have is about so i'll just type about over here and let's open this in our browser and let's see how it looks so i have this extension called live server installed in vs code so you can go ahead and search for live server and once you install it you can simply right click over here in the html and click on open with live server and here we can see our design is opened in the browser so here we can see we have the logo and the first menu item so let's go back to our vs code and i'll just copy this list item and we need to have two more menu items and we also need to have this button so let's copy it three more times so just paste it down here and for the second menu item we have services and then we have our work so i'll just type that over here services and our work and for the last menu item we have a button and for the button we have a text of enroll now so here i'll just type enroll now and since this is a button we need to style it differently so i'll just add a class over here so just type class and we will add a class of btn for the button and we will style it in the css now if you go back to our design we can see that we have two types of buttons we have a dark button and also a light button so we'll also add a class called dark over here for the dark button all right that's it with the menu items of our desktop version so here after this nav element i'll just create a comment so you can just press command forward slash and you will have this comment and here i'll just type end of desktop navigation menu right now the next thing we need to add is this hero section so for that let's create a division with the class of hero section so here let's type dot hero section and press tab and now in the hero section we need to have two parts one for the left path which is the heading and this text and this button and then for the right part we have this image so let's create a division with the class of left and in this left division we will have an h1 for this text so let's type h1 and you need to have this text so i'll just copy this double click over here and copy this from here and let's paste it over here and we need to have a line break over here because we can see we have this learn the art of in one line and we have game dev in the next line so here after off i'll just create a br tag to add a line break now if you go back to our browser we can see that we have two lines over here for the heading or let's go back to our figma file and the next thing we need to add is this text so i'll just copy this from here and let's go back and here i'll just create a paragraph so i'll just type p and here i'll just paste the text or now the next thing we need to have is a button so i'll just create an anchor tag for that and in the edge of i'll just type hash and for the button we will have a class of btn and this is a light button so i'll just type light over here as well and here in the text we need to type enroll now so i'll just type it over here all right that's it with the left part of our hero section now on the right part we need to have this image so let's create a division of the class of right and here let's create an img tag and in the source i'll just type images slash and i have saved it as hero image so here we can see heroimage.png all right so let's go back to our browser and here we can see we have the image and everything is displayed correctly let's go back to our figma file and now the next thing we will do is we'll create the html for these two elements over here so for these i'll just create a division of the class of achievements cards so let's go back and let's go outside this right division and here i'll just create a division of the class of achievement cards and in this will create a division of the class of achievement card so i'll just type achievement card and we need to have two cards one for this students enrolled so for that i'll just create a class so just type students enrolled so that we can style them differently in the css now here in this division we need to have the heading so this is the heading and then we need to have this text and then for the second card we have a heading and we also have an image over here and then we have this text so let's go back and i'll just create a division of the class of content and here i'll just create an s3 and here this tab is 32k so just type 32k and then we need to have this paragraph so for that let's create a p tag over here after the heading and i'll just type students enrolled and then we have this background rectangle over here so we also have a rectangle behind this main rectangle now to style that will create a division with a class of bg so here after this content i'll just create a division of the class of bg and we'll style it using css right now let's copy this achievement card and let's paste it down here and here instead of students enrolled i'll just type overall rating and then here we have this number 4.7 so i'll just type that over here and after that we need to have this star image so what i will do is i'll just create a division for this heading so i'll just type div over here and i'll just add this heading inside this division now let's do the same over here as well so just type div and i'll just add this heading inside the division now after this heading let's create an img tag and here in the src i'll just type images slash and i have named it star icon.svg and then here instead of students enrolled i'll just type overall rating all right that's it with the header section so if you go back to our figma file we can see that all the elements have been covered if you go back to our google chrome here we can see all the elements are displayed over here right now let's go back to our vs code and here after the header i'll just create a comment and i'll just tap end of the header section right now let's go back to our figma file and the next section we need to add is this testimonial section and it is also inside this fixed width so let's create a wrapper division for this so i'll just type dot wrapper and we are adding this class called wrapper and here also we have added this class called wrapper now when we style this using css we will have the same styles applied to this division and also this division right here because they both have the same class so both of them will have the same max width right now for the testimonials section i'll just create a section and i'll just give it a class of testimonials section and let's go back to our figma file and here also we have two parts we have the left part where we have these two cards and on the right part we have this text and this button so let's go back to our html and here let's create a division of the class of left and we will have a division of the class of testimonial cards for each of these testimonial cards so let's create a division of the class of testimonial card and in that the first thing we need to have is the content of the testimonial which is this text so just copy this and let's create a division of the class of content and i'll just paste it over here and then we have this info where we have the name and the company name so for that i'll just create a division of the class of info and then for the name i'll just create an h4 and we have the first name as jane cooper so i'll just type jane cooper over here and then we have the company name so i'll just copy this from here and i'll just create a paragraph with the class of company and i'll just paste it over here and now the next thing we need to add is this image so let's go outside this info division and here i'll just create an img tag and in the src i just type imageslash and i have saved it as testimonial1.png right now let's copy this testimonial card and i'll just paste it down here and we'll change the details over here so let's go back and i'll just copy this text and let's go back and paste it over here let's go to figma file and let's copy this name and let's paste it over here instead of the previous name and then lastly we have this company name so i'll just copy this and paste it over here and then we'll change the image to testimonial two dot png all right that's it with the left part of our testimonials section right now let's fold this left division over here so i'll just click on this button and let's create a division of the class of right and in here we need to have a heading so i'll just create an h2 for that and let's copy this text and let's paste it over here and now we need to have two paragraphs so i'll just copy this and let's go back and create a paragraph and i'll just paste it over here and let's create one more paragraph and i'll just copy this text and i'll just paste it over here and then lastly we need to have this button so for that i'll just go outside this right division and let's create an anchor tag and we'll just type hash for the href and we'll just give it a class of btn and it is a light button so i'll just give it a class of light and we have a text of learn more or that's basically it with the testimonial section so i'll just create a comment over here and i'll just type end of testimonials section and let's go back to our chrome and we can see everything looks alright we have all the elements displayed over here right now let's go back to our figma file and if we scroll down we have the our courses section so for that let's create a section so here i'll just type section and we'll just give it a class of courses section and in here we need to have a wrapper class because we need to have fixed width so let's type dot wrapper over here and in this we need to have the heading first of all so let's create an edge too and let's type our courses and just like the button we also have two types of headings we have a light heading and also a dark heading so for the light heading we will have a class of light for the h2 so here i'll just type class and set it to light all right now the next thing we need to have are these course cards so for that let's create a division of the class of course cards and in that for each of the cards we'll create a division of the class of course card and in here we need to have an image so let's create img tag and in the source i'll just type images slash and i have named it as course1.png and then we need to have the info about the course so i'll just copy this and let's go back and let's create a division of the class of info and for the heading i'll just create an s3 and i'll just paste it over here and then we have the duration so for that let's create a division of the class of duration and here i'll just type 8 hours right now let's copy this course card and let's paste it down for the next course and here i'll just change the details so for the image i'll just type course2.png and i'll just copy this heading and paste it over here and then we have eight hours i'll just change this to 15 hours right now the last thing we need to have in this course section is this button so here just after the end of the course cards section i'll just create a button so just create an anchor tag and i'll just give it a class of btn and it is a light button so i'll just type light over here and for the text we have all courses right that's basically with the course section so i'll just create a comment over here and just tap end of courses section right now let's go to our browser and let's see whether everything is being displayed correctly so here we can see we have the images and the details so everything is working all right let's go back to our figma file and the next thing we need to create is the get our app section so let's go back to our vs code and let's create a wrapper division and in that we'll create a section with the class of app section and in this we need to have a heading so we need to type get our app so just create an edge too and let's tap get our app and then we need to have a paragraph so i'll just copy this text and let's go back and create a paragraph and i'll just paste the text over here and then we need to have these two buttons so for the buttons i'll just create a division of the class of app buttons and for each of the button i'll just create a division with the class of app btn now in the button we need to have this image and we need to have this text so let's create an img tag and i'll just type images slash and it is called app store icon dot svg and then we need to have a text called app store so for that let's create a span and here i'll just tab app store all right now let's copy this and let's paste it down here and we'll just change the image to google play icon and for the text we need to have google play all right that's it with the app section so let's create a comment over here and i'll just tap end of the app section right now let's go to our browser and let's see whether everything is being displayed over here and here we can see we have the heading the text and also the icon and the text over here so everything is working all right let's go back to our figma file and the last thing we need to have is this footer so let's go back to our vs code and here let's create a footer tag for the footer and even for the content of the footer we need to have a max width so let's create a wrapper division now for all these links over here we'll create a division of the class of links container so let's create a division with the class of links container and now for each of these links section i'll just create a division of the class of links and the links we need to have a heading for this text so just create an s3 and the first heading is quick links and then for all these links let's create an unordered list so let's create a ul and in that we will have list items and we'll have anchor tags for the links and the first one is about us so just type about us over here and we need to have three more links so just copy this list item and paste it three more times and let's change the text to contact us privacy policy and terms and conditions alright that's it with the first set of links now let's copy this links division and we need to paste it two more times for these two links section so i'll just copy this and paste it down here and paste it one more time right now for the second heading we have course so just type course over here and then for the links we have login download and all courses and we have just three links over here so i'll just delete this list item and then for the third link we have a heading of contact us and you need to have this email id so i'll just remove this anchor tag and i'll just type the email id over here and now we can delete the rest of the list item so i just delete all of this from here and then for these social media icons let's create a division of the class of social so here just type social and in here we need to have these two icons so let's create an anchor tag for that and let's create an img tag and for the first image we need to have the facebook icon so i'll just type images slash facebook logo.svg and i'll just copy this anchor tag and paste it down here and let's change this to instagram and then we need to have this input field over here and also this button so let's go outside this division and let's create a form and for the action i'll just type hash for now and in the form we need to have an input field and the type will be text and we'll also add a placeholder and for the placeholder we will type email address and then we need to have a button so let's create a button and for the button we will give the class of submit button and here let's tab subscribe right now the last thing we need to do is add this text so i'll just copy this and let's go outside this links container division so i'll just fold this and here i'll just create a paragraph and let's give it a class of copyright and i'll just paste the text over here all right that's basically it with the footer so with that we have written the html for the desktop version of our website so if you go back to our sigma design we can see that we have added all these elements in our html now for the ipad version we don't need to change anything in the html because we can see that all the elements are the same but for the mobile version we need to add this navigation menu for the mobile version and we also need to add this icon and this close icon and we need to hide these menu items from here all right so let's go to our browser and let's see whether the footer is being displayed correctly and here we can see all the links are displayed over here we also have the input field the button and the copyright information so everything looks alright so that's basically it with this video we have written the html of our design now from the next video we will start writing the css and we'll make it look like this all right this is our progress as of now we can see that we have written the html of our website and we have also linked our css file over here so let's go to our style.css file and let's start styling this now we already created some variables for the colors now the first thing we will do is that we will set the box sizing to border box for all the elements so just tap asterisk to select all the elements and i'll also select the after and the before selectors so just type asterisk colon colon after and asterisk column current before and here we just type box sizing and set it to border box now when you add this line of code box sizing border box it will include the padding and the border of the element inside the width and the height of the element so we won't have to calculate the width and the height of the element after the padding and the border is added right now let's remove the default margin that we have in the body so i'll just type body and i'll just set the margin to zero and by default we will set the font family to pop-ins so i'll just have pop-ins and sans-serif now let's go to our design and here you can see the font has changed and also we don't have any margin for the body right now the next thing we will do is style these buttons so let's go back to our css and here we'll just add the selector of the button so if you go to the html we can see that for the button we have a class of btn and we have two types of buttons we have a dark button with a class of dark and we also have a light button with a class of light so here we can see we have the light button so let's target the btn class so let's type dot btn right now let's go to our figma file and let's double click on this button and here we can see the properties of the button so if you go over here to this tab called inspect and if we scroll down we can see that we have the css displayed over here so let's copy some of the css that we need so what we need from this are the padding and the border radius so you can just copy this from here or i'll just go back to our css and i'll just type it over here so i'll just have padding and we have a padding of 16 pixels and 32 pixels so let's type 16 and 32 and we have a border radius of 24 pixels so i'll just have border radius 24 pixels and for the button we have a text color of white so let's set the text color to white now this button is basically an anchor tag so here you can see this is an anchor tag now anchor tags are inline elements by default now when you have an inline element there can be problems with the padding and the margin of the element so i'll just set the display to inline block and let's go back to our sigma file and if you double click over here in this text we can see that the properties of the text are displayed over here so we have the font size set to 18 pixels we have the font weight set to bold so let's copy these and let's paste it over here now the next thing we will do is we will style the dark and the light buttons so for the light button we need to have an orange color so here we can see this is the light button and for the dark button we need to have this dark blue color so let's go back and uh here we just type btn.dark and make sure that you don't have any space between these two classes because we're going to have these two classes in the same element let's set the background color of this button to a variable that we created so if you scroll up we can see that we have created this variable called dark blue color so we're going to add this color to the button so here i'll just tab var and here let's tap dark blue color and for the light button let's add the orange color so i'll just type btn.light and for the orange color we have a variable called orange color so let's add this over here so let's type background and var orange color right now let's go to chrome and let's see how it looks so here we can see we have the buttons and the colors are being displayed over here now we also want to remove these underlines from the buttons so here i'll just type text decoration and set it to none now the next thing we will do is we need to add an icon for this button so if you go back to our figma file we can see that for this button we have this icon so for that let's go to our code and let's go to the html and let's go to the button so this is the button enroll now now here in this button i'll just add a class called enroll icon and let's save this and let's go back to our style.css file and now let's style the enroll icon button so let's type btn dot enroll icon and we're going to use a before selector for adding the icon so i'll just type colon colon before and here i'll just type content and here in the content i'll just add the link of the unroll icon so here in the images we have this svg called enroll dot svg so just type url and here i'll just provide the link so just type images forward slash enroll now icon dot svg and now if you go back to our chrome we can see that the icon is displayed over here now we want this icon to be displayed in the center vertically so for that let's position this before selector relative to this button so for that let's go back to our button and here i'll just type position relative and here for the before selector let's set the position to absolute now this before selector will be positioned relative to this button right now let's set the top position to 50 and let's say the left position to 32 pixels and now if we go back to our chrome we can see that the icon starts from the 50 mark so we also have to move it 50 percent of itself to the top so let's tap transform translate y and set it to negative 50 and now we can see that the icon and the text are in the same place so let's add some padding left to this button so let's go back and here i'll just type btn.enroll icon and let's set the padding left to 60 pixels and now we can see that it looks all right all right that's it with the button so everywhere we can see that the button is being styled so here i'll just add a comment and just type buttons and now the next thing we will do is we will style the wrapper so if you go back to our html we can see that we have added this division with the class of wrapper now we are using this to add a maximum width to our elements so if we go back to our figma file we can see that we have a maximum width set for the contents of this header so i'll just double click over here and here on the right we can see we have a width of 1134 pixels so this is going to be the max width of our wrapper so let's go back and let's go to our style.css file and i'll just add the styles for the wrapper over here just after the body so just tap dot wrapper and let's set a max width of 1134 pixels and we also need to bring it to the center so i'll start margin 0 for top and bottom and auto for left and right now if you go back to our chrome we can see that we have a max width let's add a background color and let's see whether it is being applied so here we can see we have a max width of 1134 pixels and also the wrapper is in the center so let's go back and let's remove this background color all right now the next thing we will style is the header element so if you go back to our html we can see that we have created this header element over here so let's go over here to our style.css file and here i'll just add a comment so let's type header and here we just type header and let's go back to our figma file and first of all let's select this background rectangle and if you go over here to inspect and scroll down we can see that the css is displayed over here so i'll just copy this background color so just copy it from here so let's go back to our css and i'll just paste it over here and we need to set the height of this header to 100 report height which is 100 width of the browser window and let's set the width to 100 percent right now let's go back to our website and here we can see we have this linear gradient background color added all right now the next thing we will do is style this nav so if we go back to our html we can see that we have created this nav element and in that we have the logo and the ul for the menu items so let's go back to our stylus css file and let's style the nav so i'll just type nav now we want the elements of the nav to be displayed one next to the other so right now we can see that the logo is at the top and we have the menu items at the bottom now we want the logo to be on the left and the menu items to be on the right so here we just set the display to flex and justify content to space between so now if you go back to our design we can see that the logo is at the left and we have all these menu items at the right now the next thing we will do is style this logo so let's go back and for the logo we have a class of logo so let's style this so just type nav logo and let's go to our sigma file and let's see what are the properties so let's double click over here in the logo and if you go to inspect and scroll down we can see these are the properties for the logo so we need to set the color to white we need to set the font size to 40 and the font fade to 900 and also the font family to railway so i'll just copy all of this from here and let's go back to our css and i'll just paste it over here now here for the railway we'll also add a backup font so here i'll just type sans serif and we don't need to have this font style so i'll just delete this line of code and we also don't need to have this line height so i'll just delete this and also this comment all right let's go back to our chrome and here we can see that the logo is styled correctly now the next thing we will do is style these list items inside the ul now we want all these menu items to be displayed one next to the other so for that let's go back to our css and let's target the unordered list inside the nav so here we can see we have this ul inside the nav so here i'll just tap nav ul and let's set the display to flex so that the elements will be one next to the other now we need to align them to the center so i just have align items to the center and let's go back to our figma file and let's see what is the spacing that we need to have so let's double click over here and here we can see we have a spacing of 60 pixels so let's go back to our css and here i'll just type gap and set it to 60 pixels now if you go back to our chrome we can see we have these menu items displayed over here and we'll also remove these bullets from here so let's go back and let's type list style and set it to none now the next thing we will do is style these menu items so let's go back and for the menu items we have anchor tags so here we'll just type nav uli a and let's go back to our figma file and let's double click over here and here we can see in the inspect we have the css so let's copy some of this from here i'll just copy everything and we'll just delete things that we don't want let's go back to our css and i'll just paste it over here and we don't need to have the line height and we also don't need to have the font style and here for poppins we will add a fallback font so let's type sensative and we also need to remove these underlines so i'll just type text decoration and set it to none now here we can see for the ul we have some default margin at the top so let's go back to our css and let's go to the ul and here i'll just type margin and set it to zero and now we can see we don't have any margins and we'll also center align this logo vertically so let's go back and let's go to the nav and here let's type align items to the center and now we can see everything looks all right now the next thing we will do is we will set this uh nav element to fixed so when we scroll up or down it should always be positioned at the same place so for that let's go back and here i'll just type position and set it to fixed and now we can see that the width has changed so for that we have to set the width back to 1134 pixels and from the top we will have a spacing of let's say 36 pixels so just tap top 36 pixels right now we can see when we scroll down the nav element stays there and we'll also set the z index of the nav to something higher because we can see when we scroll down the nav is below the other elements so let's set as the index so i'll just type z index and let's set it to 100 and now we can see it is above all the other elements right now let's start styling this hero section so let's go back to our vs code and let's create a comment so just type hero section and let's go back to our index.html file and for the hero section we have a division with the class of hero section so here we'll just type hero section and let's set the display to flex so that the elements will be one next to the other so we want the left division to be on the left and the right to be on the right and we'll also set the height to 100 report height and the width to 100 percent and we'll also bring it to the center vertically so i'll just type align items to the center and we'll also type justify content to space between so that both the left and the right divisions are on the extreme left and right now let's go back to chrome and here we can see our elements are displayed over here for now we'll just hide these achievement cards so let's go back and for the achievement cards we have a class of achievement cards so let's target this here let's type achievement cards and here let's type achievement cards and let's set the display to none we will style it later right now let's style this heading so here i'll just type hero section and for the left part we have a division with a class of left so let's target that i'll just type left and in that we have the h1 for the heading so let's tap h1 right now let's go to our figma file and let's double click over here on this heading and let's go to inspect and scroll down and here we can see the css for the heading so let's copy all of this and let's paste it over here in the css and let's remove this font style and let's also remove this comment and here we'll also add sensative so i'll just type comma and add sensitive over here let's go back to our design and here we can see this is how our heading looks we'll also remove the margin bottom from here so here i'll just type margin bottom and let's set it to zero right now the next thing we will do is style this paragraph so let's go back to our figma file and for the paragraph we have these styles over here so let's copy all of this and let's go back and let's go to our vs code and here we'll just type hero section left p and let's paste the css over here and i'll just add sign serif over here and i'll just remove this font style and we'll also set the color of the text to white now the next thing we will do is we will set a fixed width for this left division so if you go back to our figma file we can see we have a width of here we can see 457 pixels and even for the heading we have 457 pixels of width so let's go back and uh let's add a width to the left division so here let's type hero section left and let's set the width to 457 pixels right now let's add some margin between this button and this paragraph so here for this paragraph i'll just type margin bottom and we'll just set it to 30 pixels and i feel that the font size of these buttons are a bit too large so let's go to our vs code and let's go to the styles for the button and let's set the font size to 16 pixels let's go back i think this looks alright now we'll also add a little bit of padding top for this hero section because we have this navigation menu over here so that's why this content doesn't look like it is in the center so let's go back and for the hero section let's add a padding top and let's set it to let's try 60 pixels i think that looks alright right now let's style this image so let's go back to our figma file and for the image we have a height of 582 pixels so let's add this and let's see how it looks so let's copy this from here and let's go to our vs code and here in the html we can see for the image we simply have an image inside the right division so here i'll just type hero section right img and let's paste the height over here and let's go back to our chrome and i think we need to decrease the height a little bit because in the browser we also have this address bar we also have this tab and all of this take up some space so we don't have the full height of the screen now in our figma file we had designed it with the full height and width of the screen in mind so we have to make some changes to the height of the elements in the real website so let's go back and let's change the height to let's try 520 pixels and i think that looks alright now the next thing we need to do is we need to position this image at the bottom so right now it is at the center so let's go back and let's target the right division so here just type hero section right and here we need to type align self so it will align itself and you need to type flex end which will align itself to the end and we can see we still have a little bit of gap over here at the bottom so for that we have to go over here to the image and we have to add a line of code which is vertical align and set it to middle and now you can see everything looks all right right now the next thing we will do is style the achievement cards so let's go back and let's remove this line of code and we need to position these achievement cards relative to the hero section now we need to set the position of the achievement card to absolute so if you go back to our html we can see for the achievement card we have this division of the class of achievement card so let's style that here i'll just type achievement card and i think we can delete this for now all right for the achievement card we will set the position to absolute now in the achievement card we have this division with the class of content so in the content we have this heading and this paragraph so let's style the content so here let's tap achievement card content and let's go back to our figma file and here we can see for the background color we have a white color and we also have a border radius of 24 pixels so let's add these styles here let's type border radius 24 pixels and background color of white we'll also add a padding of 8 pixels top and bottom and 32 pixels left and right here we can see our achievement card is displayed over here on the right now let's position these achievement cards over here on the left so here for the first one we have a class of students enrolled so let's target that i'll just type achievement card dot students enrolled and we'll set the left position to 47 and we'll set the top position to 330 pixels and here we can see the students enrolled achievement card is displayed over here now let's style the heading of this achievement card so here let's type achievement card and for the heading we have an s3 so let's tap s3 and for this let's go back and let's see what are the styles so let's double click over here and here in the inspect let's scroll down and let's copy these styles so let's copy all of this and let's go back and paste it over here and we'll just remove the font style and the line height and this comment and let's add sans serif over here and for the color we will change this to our variable so we have a variable called dark blue color so i'll just type var dark blue color and let's go back to chrome and we need to remove the margins so here i'll just type margin 0 and we'll text align it to the center and now let's tile this paragraph so we have a paragraph over here so let's type achievement card p and let's go back to our figma file and let's copy all of this and let's paste it over here and let's remove all of this the line height and the font style and we'll change this to sensative and we'll change the color to the dark variable so var dark blue color we'll also decrease the margin top over here so we will add a negative margin so just type margin top and let's set it to negative 8 pixels and for margin bottom we will have 8 pixels now let's style the background rectangle for this achievement card so if you go back to our figma file we can see we have this rectangle over here so let's go back and if you go back to our html for that we have a division with the class of bg so let's style that so here i'll just type achievement card bg now we need to position this relative to the achievement card so i'll just stop position absolute and let's set the height and the width 200 percent of the achievement card and we also need to have a linear gradient background so let's select this and let's copy this color and we'll also copy this border radius so let's copy these two lines of code and let's paste it over here and now we need to move this a little bit to the right and to the bottom so let's go back so here just tap top and i'll just set it to 8 pixels and left and i'll just set it to 8 pixels as well let's go back to chrome and we need to add some z index over here so for this background bg we will add a z index of one and for the content i'll just add a z index of let's say 10 and we'll also need to add a position over here so let's have position relative because we have a position of absolute over here so we need to add some position over here for the z index to work and now we can see that it is being displayed correctly right now let's position this achievement card so for that we have a class of overall rating so i'll just type achievement card dot overall rating and let's set the left position to 45 percent and uh i just set the top position to 520 pixels let's see how it looks and we also need to style the star image so let's go back and in the html we can see that we have a division and in that we have the s3 and the image so let's style this division so here i'll just type achievement card content div and we'll set the display to flex so that the elements will be one next to the other and we'll also align items to the center and we'll have a gap of 12 pixels and now we can see this heading is not in the center so let's right click over here and click on inspect and let's see what's the problem so here for the s3 we don't have the full width so let's add a width of 100 percent and let's see whether it works and we can see it works so let's do that let's go back to our vs code and here for the s3 i'll just type width of 100 and now we need to move this image to the right a little bit so for that we will increase the width of the left division and let's go back and here we can see for the left division we had added a width of 457 pixels so i'll just remove this from here and let's add this to the paragraph and here for the left i'll just set the flex to one so that it takes up all the space that it can and now we can see it looks all right let's also reposition these two achievement cards so let's right click over here and click on inspect and let's play with the left and the top values so let's select the first achievement card and i think we can decrease the top value a little bit we can also increase the left value a little bit and i think this looks alright so let's copy these two lines of code and let's paste it in the students enrolled achievement card so it is right here and for the next one let's select it now let's decrease the top value i think this looks alright and let's increase the left value so i think this looks all right we'll also add some minimum width for these achievement cards so let's start min width and let's start with 200 pixels but that looks alright so let's add these three lines of code and let's paste it over here in the second one and i'll just remove this line of code and paste it over here in the achievement card and that looks alright so that's basically with the hero section of our website the first thing we will do is we will see what is the gap between the testimonials section and this hero section so if i click over here and if i press alt or option you can see that we have a gap of 100 pixels and if we scroll down and take a look at this gap over here we can see that even for this we have a gap of 100 pixels let's scroll down and take a look at the gap of this and we can see that we have a gap of 100 pixels for every section over here so let's go back to our css and we will add a margin top of 100 pixels for all the sections so if you go back to our html file we can see that for each of the sections we have this section over here so here we can see we have this section and even for the courses we have this section so let's go ahead and let's type section and here i'll just type margin top and i'll just set it to 100 pixels right now let's go back to our figma file and the next thing we will style is this heading so if i double click over here and let's go over here to inspect and if we scroll down we can see that the css of the heading is displayed over here so let's go ahead and copy all of this and let's go back to our code and if you go back to the index.html file here we can see for all the headings we have an h2 so here we can see for the testimonials section we have this h2 over here for the heading and if you scroll down we can see that we have the h2 for the courses section as well and if we scroll down we also have the h2 for the get our app section so we can go ahead and add the same styling to all the headings so let's select all the h2 in general so let's go back to style.css file and here let's type h2 and i just pasted all the css over here and let's delete this comment and also font style and i'll just add sans serif over here and i'll also change the color to the variable so i'll just type var dark blue color and we'll also remove all the default margins so i'll just type margin 0 right now let's go to our browser and let's scroll down and here we can see we have the heading and the styles are applied over here now for this heading we have a color of white so if we go back to our figma file here we can see for this heading we have a white color and for that if you go back to our html file we have added a class called light so if i just scroll down over here here we can see we also have a class called light for the h2 so let's go back to our style.css file and here we will type h2 dot light and we'll set the color to white now if we go back to our browser we can see that for this heading we have a white color all right now let's style this paragraph so let's go back to our figma file and let's double click over here and here if you go to the inspect tab we can see the css over here so i just copy all of the css and let's go back and here i'll just type section p so this will select all the paragraphs inside all the sections so i'll just paste the css over here and let's change the color to our variable so i'll just type var dark blue color and i'll just remove this comment and this font style and we'll also add sans serif over here and let's go back to our browser and we'll also add some margin so let's go ahead and type margin of let's add a margin of 12 pixels top and bottom and zero for left and right right now let's add some specific styles for this testimonial section so let's go back and if you go to the figma file we can see that we have these sections one next to the other so this is the left part and this is the right part so if you go back to our html here we can see we have two divisions over here we have a division with the class of left and here we have a division with the class of right now we have to position these divisions one next to the other so for that you have to select the parent division so if you scroll up here we can see we have a section with the class of testimonials section so let's select this let's go back to our css and here i'll just type testimonials section and we'll set the display to flex so that both the divisions will be one next to the other so if we go back to our browser here we can see we have this left section over here on the left and then we have this right section but here we can see we have this button over here on the right so let's go back to our html and here we can see we have this left section and then we have this right section and then we have this button over here so what we will do is we will copy this button inside the right section now we need to have a button over here for the mobile version but for the desktop version we need to have a button inside the right division so here i will just add a class of mobile button and let's copy this line of code and let's go inside the right division and here after the paragraphs i just add the button and for this button we will have a class of desktop button right now let's go to style.css file and we need to hide this mobile button so here i'll just type testimonials section mobile button and i'll just set the display to none and now if you go back to our browser we can see that everything looks alright we have the button in the correct position now the next thing we will do is we will add a gap between the left and the right divisions so let's go back to our css and here i just type gap and we'll add a gap of 100 pixels and we also want all the elements to be aligned to the center vertically so if you go back to our figma file here we can see both the content are aligned to the center vertically so let's go back to our css and here let's type align items center and now we can see everything is centered correctly right now let's style this testimonial card so let's go back to our figma file and let's double click over here and let's go to inspect and let's scroll down and here we can see the styles for the testimonial card so we need to have a border radius of 24 pixels and we need to have this box shadow and background color and we also need to have this width so let's copy all of this and let's go back to our css and let's see what is the class for the testimonial card so here we can see we have a division with the class of testimonial card so let's target that here let's type testimonials section testimonial card and i just pasted all the css over here and we need to remove this height left and top from here right now let's go back to our browser and here we can see all the styles are added we'll also add some gap between these two testimonial cards so let's go back to our figma file and if we hover over this we can see we have a gap of 50 pixels so here i'll just type margin bottom and i'll just set it to 50 pixels all right now the next thing we will do is we will style this content inside the testimonial so let's go back to our figma file and i'll just double click over here and here we can see the styles for this text so i'll just copy all of this and let's go back to our code and if you go to our index.html file here we can see we have a division of the class of content so let's target this division so i'll just go back to css and here i'll just type testimonials section and in that we have the testimonial card and in that we have the content so here i'll just paste the css and let's remove this comment and also this font style and we'll also add sans serif over here right now let's go back to our figma file and here we can see we have a padding of 24 pixels for top and bottom and 32 pixels for left and right and if i click on this rectangle and here we can see we have a border radius of 24 pixels and we have a light blue color so let's go back and let's add those styles so let's type border radius 24 pixels and we also had a padding of 24 pixels top and bottom and 32 pixels left and right and we'll also set the background color to the light blue color variable that we have so if you scroll up we can see that we have created this variable called light blue color so let's add this so here let's type var light blue color all right let's go back to our browser and we can see that the content is being styled correctly now for the second content we need to have an orange color so if we go back to our figma file here we can see for the second content we have the orange background color so let's go back to our css and here i'll just type testimonials section and testimonial card and we need to select the last instance of the testimonial card so here i'll just type colon last child and then here let's type content so what we are doing over here is that we are selecting the last testimonial card and we are adding the styles to the content inside that so here let's type background and i'll just set the color to var and orange color and let's go back to our browser and now we can see we have this orange background color for the second testimonial content right now let's style this heading so let's go back and let's go to our html and here we can see for the heading we have this h4 and it is inside this info division so let's target that so here let's type testimonials section testimonial card info h4 and let's go back to our sigma file and let's copy the styles so let's double click over here and here we have the css of the h4 so let's copy all of this and let's go back to our code and i'll just paste it over here and i'll just change this color to our variable so i'll just type var dark blue color and we'll just remove this comment and also the font style and we'll also add sans serif over here let's go back to our browser and we'll also remove the margin so i'll just type margin 0 and we also need to have a padding for this info division so let's go back and let's target the info division so i'll just type testimonials card or testimonials section testimonials card and dot info and we will add a padding of 24 pixels top and bottom and 32 pixels left and right right now if you go back to our browser we can see that we have the padding applied we'll also add the styles to this paragraph so if we go back to our html we can see inside the info division we have a paragraph with the class of company so let's target that over here so i'll just type testimonials section testimonial card info and i'll stop p dot company and let's go back to our figma file and let's copy the styling so i'll just double click over here and let's copy the styles so let's copy all of this from here and let's go back to our css and paste it over here and we'll just remove all the unnecessary code and i just add the variable over here dark blue color and also delete this line of code and also add sensative over here right now let's go back to our browser and we can see that the styling is applied now the next thing we will do is style this image so let's go back to our html file and here we can see we have this image inside the testimonial card division so let's target that here let's tap testimonials section testimonial card and here let's type img and let's go back to our figma file now let's double click over here and here we can see the css of the image so i'll just copy this height and width and let's go back and paste it over here i will position this image relative to this testimonial card division so let's go over here to the top and for the testimonial card i will just type position relative now let's go over here to the image and let's type position absolute now this image will be positioned relative to this testimonial card so let's add some position values over here so i'll just type right and i'll just set the right position to 32 pixels and we'll set the bottom position to 20 pixels let's see how it looks let's go back to our browser and we can see that the image looks alright we don't have any problems now the next thing we have to do is we have to move the second testimonial card to the right a little bit so if we go back to our figma file here we can see the second testimonial card is moved to the right so let's do that let's go back to our css and let's select the second testimonial card so i'll just have testimonials section testimonial card and here let's type colon last child so this will select the second testimonial card and here we'll just type transform translate x and i'll just set it to 20 pixels and now we can see the second testimonial card is moved to the right all right now the next thing we will do is we will add some gap between this button and this paragraph so let's go over here to the html and i'll just add a division for both these paragraphs so here i'll just create a division with a class of features and we'll add these paragraphs inside the features right now let's add some margin to these features so here i'll just type testimonials section features and here i'll just type margin bottom and i'll just set it to 30 pixels all right now the last thing we need to do is add this background rectangle over here so we have this rectangle behind both these testimonial cards now for that we're going to use a before selector so let's go back and let's select the testimonial card so here just before this css i'll just type testimonials section testimonial card colon column before and before selectors are basically used to add extra information to the elements of your website so if i just type content and here if i just type hello now we can see that hello is displayed over here before all these testimonial cards so let's remove hello from here and i'll just keep it blank and let's add the background rectangle over here so let's go back to our figma file and let's select this rectangle and let's see what is the width so here we can see we have a width of 28 pixels so let's go back and here let's type width 28 pixels and we will set the position to absolute and we'll set a height of let's try 40 pixels and let's set the top position to negative 40 pixels so that it is at the top and we'll set the left position to let's try 60 pixels and we also need to have the background color set to the dark color so i'll just type var dark blue color and we'll also need to add a border radius so just a border radius and we need to add border radius for top right and top left so i just tap 24 pixels 24 pixels for top left and top right so here we can see we have this border radius of 24 pixels and for bottom left and bottom right i'll just type 0 0 right now let's go back to our browser and now we can see we have this background rectangle over here at the top and now for the second testimonial card we will add a different styling for the before selector so let's go back and here i'll just type testimonial section testimonial card last child for selecting the second testimonial card and here i will stop column column before now since we have moved this second testimonial card 20 pixels to the right so if you go back over here here we can see we have moved it 20 pixels to the right so we have to set the left position of this before selector to 20 pixels to the left so here we start left and here we have set a value of 60 pixels so here we have to type 40 pixels and we'll set the top position to negative 50 pixels and now we can see both these rectangles are in the same line now we don't want to have this border radius at the top so here i'll just type border radius and i'll just type 0 0 for top left and top right and we want the border radius at the bottom so here we can see at the bottom we have this border radius so let's add 24 pixels of border radius to the bottom left and bottom right right now let's go back to our browser and here we can see we have this rectangle now we need to set the height of this before selector so let's go back and let's set a height of calc we will use a calc function and i will set the height to 100 percent of the element plus 90 pixels and let's see how it looks and now we can see we have the correct height for this element but it is above all the other elements so we have to set a z index of negative one for this so i'll just type z index and i'll just type negative one and now we can see it looks like it is above the info section so let's go back to the info section over here let's scroll down and here we will add a background color so just type background and i'll just set it to white now the last issue we need to fix is the border radius over here so we need to set the border radius of the info to 24 pixels so let's go back and here in the info i'll just type border radius and i'll set it to 24 pixels and now we can see everything looks alright so that's basically it with the testimonial section of our website now in this video i'll show you how to design this uh courses section over here so let's get started right here i'm in the code so let's go to the html file and let's scroll down and here we can see for the courses section we have this section with the class of courses section and in that we have this wrapper division to have a max width for all the content inside the courses section and in that we have all this content over here so first of all let's style this courses section so let's go back to our style.css file and here we'll just create a comment i'll just type courses section and here let's tap dot courses section and let's go back to our figma file and let's get the css so let's double click over here and here let's go to inspect and let's scroll down and here we can see we have this background color so let's copy this and let's paste it over here all right now the next thing we will do is we will add a padding so here we can see on top of this we have a padding of 70 pixels so let's add a padding over here so i'll just start padding 70 pixels for top and bottom and i'll just type zero for left and right right now let's go back to our browser and here we can see we have this courses section now we have to text align this heading to the center so let's go back and if you go to the html here we can see we have this h2 inside this courses section so here i'll just type courses section h2 and here let's tap text align center and now we can see the heading is in the center all right now the next thing we need to do is we need to bring both these course cards one next to the other so if you go back to the figma file here we can see we have this course card over here on the left and then we have the next course card here on the right so let's go back and let's go to the html and here we can see we have a division with the class of course cards and that we have these two course cards over here so let's add a display of flex to this course cards so here i'll just type courses section course cards and i'll set the display to flex and we will have a gap of let's go back to our figma file and let's see what is the gap so if i click over here and if i press alt we can see we have a gap of 73 pixels i'll just round it to 70 pixels so let's go back and here let's tap 70 pixels right now let's go back to our browser and here we can see now we have these course cards one next to the other now let's set the width of the image to 100 of the container so here i'll just type courses section course cards img and here i'll just set the width to 100 percent and now we can see we have the correct width for the image right now let's go back to our figma file and here we can see for the image we also have rounded corners so let's double click over here on this image and here we can see we have a border radius of 24 pixels and we also have this drop shadow so let's copy both these lines of code and let's go back and here i'll just paste it inside the image and let's go back to our chrome and now we can see we have the drop shadow and the rounded corners all right now the next thing we will do is we will style the course card so let's go back to our html and here we can see for each of the course cards we have this division with the class of course card so let's style this let's go back to our stylor css file and here let's tap courses section and course card now let's go back to our figma file and here we can see we have this border radius of 24 pixels and a background color of white and we also have a padding of zero top and bottom and 32 pixels left and right so let's copy these two lines of code and let's go back and i'll just paste it over here and let's go back and i'll also copy this padding and paste it over here right now let's go back to our browser and here we can see we have this white background color and we'll also have some margin at the top so let's set a margin of 40 pixels for top and bottom and zero for left and right and now we can see we have this margin at the top all right now the next thing we will do is style this heading so let's go back to our figma file and let's double click over here and let's go to the inspect and let's scroll down and here we can see the css of this heading so let's copy all of this and let's go back to our code and for the heading we have this s3 over here so let's style that so here i'll just type courses section course card s3 and i'll just copy the styles and let's remove this color and let's add our variable over here so i'll just have var dark blue color and i'll just remove this comment and font style and also add sans serif over here right now let's go back to our browser and here we can see we have the styling for the heading now the next thing we will do is we want this heading and this duration to be one next to the other so for that we have to add a display of flex to the parent division so if you go back to our html here we can see we have this division of the class of info and in that we have this s3 and the duration so we will set a display of flex to this info division so let's go back and here i'll just type courses section course card info and here let's tap display of flex and let's go back to our figma file and let's see what is the gap that we have over here so if i press option or alt we can see we have a gap of 16 pixels so let's add that gap over here so i'll just type gap of 16 pixels and the next thing we will do is we'll position them to the left and to the extreme right so i'll just have justify content and space between and i will also bring it to the center vertically so i'll just type align items to the center all right now let's go back to our browser and now we can see we have the heading on the left and the duration on the right all right now let's add the styling for the duration so let's go back to the figma file and let's double click over here and here we can see the styles for the duration so i'll just copy these and let's go back to our code and for the duration we have this division of the class of duration so i'll just add that over here i'll just type courses section course card duration and here i'll just paste the code and let's change this color to the dark variable so i'll just type dark blue color and i'll just delete this comment and this style and i'll just add sensative over here right now let's go back to our browser and here we can see we have the styling for the duration but here in the duration we have this uh 15 written over here at the top and ours written over here at the bottom so we have this in two different lines now we want to have both of these in the same line so let's go back and here we need to add a line of code which is white space no wrap right now if you go back to our browser here we can see we have 15 hours written in the same line all right now the next thing we will do is we will add the clock symbol over here on the left of the duration so if you go back to our figma file here we can see we have this symbol over here so here i'll just type courses section course card duration and we will use a before selector so i'll just type before and for the content i'll just type the url of the image so let's type url so here just tap images slash and the image is called clock.svg now let's go back to our browser and now we can see we have this clock image over here now we will add some more styles over here to position it correctly so we'll position this relative to this duration over here so here i'll just type position of relative and here we'll just type position absolute and we'll set the top position to two pixels and we'll set the left position to negative 6 pixels let's see how it looks and now we can see it is in the correct position vertically but we need to have some padding over here on the left for this duration so let's go back and here for the duration i'll just have padding left and i'll just set a padding left of 20 pixels let's go back and now we can see it looks alright so let's go back to our figma file and the next thing we will do is we will add this rectangle over here at the bottom of this course card so let's select this and here we can see the styling for this rectangle and i'll just select all of these lines of code from here and let's go back to our code and for this we will use an after selector so here just after the course card i'll just type courses section course card column column after and i'll just set the content to blank and we'll just paste the css over here and we don't need to have this top over here so i'll just delete this line of code and i'll just set the right to 32 pixels so from the right we will have a spacing of 32 pixels and from the left also we will have a spacing of 32 pixels and from the bottom we will have a spacing of 0 and we have a height of 8 pixels and we'll set the color to the dark color so i'll just tap var dark blue color now we need to set the position of this after selector relative to this course card so here i'll just type position relative and here i'll just type position absolute right now let's go back to our browser and now you can see we have this rectangle over here and it looks all right now the last thing we need to style is this button so we need to bring this button over here to the right so for that let's go back to our code and we will position the button relative to this rapid division so let's go back and we'll select the wrapper inside the courses section so here we can see in the courses section we have this wrapper so here i'll just type courses section wrapper and i'll just set the position to relative and now let's select the button so for the button we have a class of btn so let's select that here let's tap courses section wrapper btn and here let's tap position absolute and set the right position to zero and now we can see the button is on the right now the last thing we need to do is we need to add some padding over here at the bottom so let's right click over here and click on inspect and let's select the wrapper or let's select the courses section and let's add some padding bottom so just have padding bottom and let's try some padding so let's start with 100 pixels i think we can increase the padding a little bit so i think 120 pixels looks all right so let's add a padding bottom of 120 pixels for the courses section so let's go back and let's go to the courses section and here we will add a padding bottom of 120 pixels and let's go back to our browser and now we can see everything looks all right so with that we have completed the design of the our courses section now in this video we will design the app section and also the footer so if you go back to our figma design this is how it looks we have this get our app section and then we have the footer over here so let's get started all right here i'm in the source code so let's go to the html and here we can see for the app section we have this section with the class of app section so let's target that in our css so here in the css i'll just create a comment i'll just type app section and let's select the class over here so we have a class called app section and the first thing we will do is we will center align everything so here i'll just tap text align and set it to center now let's go to our chrome and here we can see everything is center aligned all right the heading and the paragraph look alright so we need to style these buttons so let's go back to our sigma file and here we can see both these buttons are one next to the other so let's go back to our html and here we can see for the buttons we have this division with the class of app buttons so let's target that so here i'll just type app section app buttons and we need to set the display to flex so that the items will be one next to the other and we'll also align items to the center and justify content to the center all right now let's go back to our figma file and let's see what is the gap between these buttons so if we double click over here and if you press option or alt we can see that we have a gap of 30 pixels so let's go back to our css and here we will type gap 30 pixels right now let's go back to our browser and here we can see we have both the buttons we'll also add some margin top for these buttons so i just add a margin top of 24 pixels and i think that looks alright now let's style these individual buttons so if you go back to our html for each of the buttons we have a division of the class of app btn so let's target that so here i'll just tap app section app btn and let's go back to our figma file and let's see what are the styles so let's select one of these buttons let's go to inspect and here we can see we have a padding of 20 pixels and 31 pixels i'll just round it down to 30 pixels so let's copy this padding and let's go back and paste it over here and we have a background color of black so let's copy this and let's paste it over here right now let's go back to our browser and here we can see we have the buttons we'll also set the text color to white so just type color and set it to white now we want the image and the text to be center aligned vertically so let's go back and we will set the display to flex and we will align items to the center and let's go back and now we can see that the text and the image are aligned to the center vertically now let's add some gap between these two elements so let's go back to our figma file and let's double click over here let's see what's the gap we can see we have a gap of 14 pixels so let's go back and uh here we will just type gap and set it to 14 pixels and let's go back to our figma file and here we can see we have a fixed width for these buttons so we have a width of 309 pixels i'll just round it to 310 pixels so let's go back and we will set a minimum width for this button so just type min width and set it to 310 pixels but now let's go back to our browser and now we can see we have these buttons displayed over here right now let's tile this text so let's go back to our figma file and let's double click on this text and let's go to inspect and let's scroll down and here we can see the css of the text so i'll just copy all of this and let's go back and go to our html and for the text we have a span so let's select the span so let's go back and here let's type app section app btn span and let's paste the css and i'll just remove this text align from here and also this comment and we also don't need to have this line height and let's remove the font style and we'll also add sans serif over here right now let's go back to our browser and now we can see we have the styles applied to the text i think the font size is a little bit too large for this button so let's go back and i'll just change the font size to 20 pixels and i think we'll also decrease the padding a little bit so here i'll just add a padding of 16 pixels top and bottom and now the button looks alright now you can go ahead and keep the same styling that you have over here in the figma file but i just felt like this looks better all right now the next thing we will do is we will style this footer so let's go back to our figma file and here we can see for the footer we have the dark background color that we created so here we can see we have this color code and we have this color over here in the variables so this is the color right here so we're going to use this color for the background of the footer so let's go back to our html and here we can see we have this footer element so let's add a background color for this let's go back to our style.css file and i'll just add a comment i'll just tap footer and here i'll just type footer and let's add a background color of the dark variable so if we scroll up we can see that we have already created this dark color variable so let's use this variable so here let's type var dark color and we'll also set the default text color to white right now let's go back to our browser and now the next thing we will do is we will add a padding top and padding bottom and we also need to have some margin between this app section and this footer so let's go back and we will have a margin top set to 100 pixels just like all the other sections and now let's go back to our figma file and let's see what is the padding so here we can see we have a padding top of 70 pixels so let's go back and let's add the padding so i'll just have padding of 70 pixels top and bottom and 0 for left and right right now let's go back to our browser and now the next thing we will do is we will style these anchor tags so we need to change the color of the anchor tags and also remove the underlines so let's go back and let's target the anchor tags so i'll just have footer a and text decoration to none to get rid of the underlines and we'll set the color of the text to white all right now the next thing we will do is we will style these headings so for the headings we want to have a color of orange so let's go back to our html and here we can see for the headings we have an s3 and we have already created a variable for the orange color so i'll just type footer s3 and set the color to var orange color or that's it with the heading all right now the next thing we will do is we'll remove these bullets so for that let's target the ul so if you go back to our html we can see we have this ul over here so let's target that so here let's type footer ul and we will set the list style to none so this will remove the bullets and we'll also set a padding left of 20 pixels right now let's go back to our browser and the next thing we will do is we will add some margin between each of these list items so let's go back and let's target the list items so i'll just type footer ulli and let's type margin 16 pixels top and bottom and zero for left and right right now the next thing we need to do is we need to set all these links one next to the other so if we go back to our figma file we can see there are three sections over here so let's go back and in our html we can see that we have a division of the class of links container so in the links container we have all these links so we have three divisions with the class of links so let's target this container division and we will set it as a display of grid so let's go back and here i'll just type footer links container and let's set the display to grid and now we can specify how many columns we need to have so let's type grid template columns now here we can set the width of the column by fractions so let's type 2fr for the first column 2fr for the second column so both these columns will have the same width and for the last column we will have a little higher width so i'll just type 3fr over here right now let's go to our browser and now you can see we have these three columns over here now the next thing we will do is style these icons so we need to have some left margin for this icons it should be aligned with this uh email id over here so let's go back and for the social media icons we have a division with the class of social so let's target this here i'll just tap footer social and let's set a margin left of 20 pixels right now let's go back and we have the correct margin now we'll also have some gap between these two images so let's go back and let's select the images over here so we have anchor tags over here and in that we have the images so let's add some margin right so i'll just have footer social a and let's set a margin right of and let's go back to our figma file and let's see what is the margin so let's double click over here and we have a spacing of 28 pixels so let's go back to our css and here we'll just type 28 or that looks alright right now the next thing we will do is style this input field and also this button so if you go back to our figma file this is how the input field and the button looks so the first thing we will do is we will set a margin left to this form to align itself with both these elements so let's go back and if you go to the html we can see that we have a form so let's target this form so here this type footer form and we'll have a margin left of 20 pixels and we'll also have some margin top so we'll have a margin top of 16 pixels right now let's tile this input field so let's go back and uh let's tap footer form input and let's go back to our figma file and let's double click over here and let's go to the inspect and here we can see we have the styling for the text inside the input field so let's copy all of this and let's go back to our css and i'll just paste it over here and let's remove this comment and the font style and we'll also add sensative over here now we also need to have a border radius for this input field so let's select this and here we can see we have a border radius of 8 pixels so let's go back and let's add that here i'll just have border radius of 8 pixels now let's go back to our browser and we'll also add some padding so we will add a padding of 8 pixels top and bottom and 32 pixels left and right and we'll also remove the border so let's go back and let's type border of none right now let's set the width of the input field to 100 percent so let's start with 100 and now we need to position this button over here on the right so for that let's set the position of this button to absolute and we will position this button relative to this form so let's go back we will set the position of the form to relative so just a position relative and let's target the button so for the button we have this class of submit button so here i'll just type footer form submit button and let's set the position to absolute and we'll set the right position to 5 pixels and we'll also set the top position to 50 and now we can see that the button starts from the 50 mark so here we have to type transform translate y and set it to negative 50 and now you can see that the button is exactly in the center now let's go back to our figma file and let's copy the styles for the button so let's double click on this button and here we can see we have the styles we have the dark color and we have a border radius of 8 pixels so let's go back and let's type background and we'll set it to var dark blue color and border radius of 8 pixels and we'll also add a padding of 8 pixels top and bottom and 32 pixels left and right and we'll also remove the border all right now let's style the text so let's go back to our figma file and let's double click on this text and here we can see we have the styles for the text so let's copy all of this and let's go back and i'll just paste it over here and let's remove the font style and we'll also add sensitive over here and we'll also remove this comment and this line height all right now let's go back to our browser and now we can see we have the button correctly styled we'll also set the cursor to pointer so here let's tap cursor pointer and now when you hover over this we have the cursor set to pointer all right now the last thing we will do is we will add some margin top for this copyright information so let's go back to our html and we can see we have a paragraph with the class of copyright so let's target that here i'll just type footer copyright and let's set a margin top of 36 pixels and let's see how it looks and that looks alright so that's basically it with the footer of our website so in this video we have designed the get our app section and the footer now before getting started with the tablet version the first thing i will do is i will add some styles to this navigation bar when we scroll up so here we can see the navigation bar is displayed over here and it clashes with all the other elements in our web page so the first thing we will do is we will add some different styles to this nav bar when we scroll up so for that let's go to our code and let's scroll up and go to the nav bar so here we can see we have the styles for the nav now what we will do is we will add a class called scrolled to this nav and when we scroll down we will add that class to this nav so here i'll just tap nav dot scrolled and make sure that you don't have any space between nav and scrolled right now when we scroll down let's add a background color to this nav element so i'll just type background and let's add the dark color so i'll just type var dark color so we have already created some variables over here so we are adding this color right here all right let's go back over here and let's also add a box shadow so i'll just have box shadow and we'll set the values to 0 16 pixels 14 pixels negative 8 pixels rgba 0 0 0 and 0.3 and we will add some border radius to the bottom so i'll just have border radius and i'll just set it to 0 0 for top left and top right and 8 pixels for the bottom right now let's go back to our html and let's add the scrolled class over here in the nav so here for the nav i'll just add a class of scrolled and let's go back to our design and now you can see we have the styles for this now we also want it to be positioned at the top so let's go back and let's set the top to zero and we'll also add some padding so i'll just start padding off 12 pixels let's go back and now we can see that it looks all right right now let's go back and let's remove the scrolled glass from here and let's add it using javascript so when we scroll down we need to add the scrolled class to this nav element so if we scroll down we can see that we have already linked our main.js file over here so let's go to our main.js file and the first thing we will do is we will reference the nav element solid stamp const nav equals document dot query selector and here i'll just tap nav and now let's add an event listener to the window solid staff window dot add event listener and we will listen for the scroll event and let's create an arrow function over here and here we'll just type if window dot page y offset is greater than 60 so this means that if we scroll past 60 pixels then whatever code we have over here will be executed so let's add the class scrolled to the nav so just type now dot class list dot add and here let's tab scrolled and now let's add an else over here and here we'll just tap nav.classlist.remove and we'll just have scrolled over here so when we scroll past 60 pixels we will add the scrolled class to this nav element or else we will remove the scroll class and let's go to stylor css and we'll also add a smooth transition so here i'll just tap transition and i'll set it to all 500 milliseconds is right now let's go back to our browser and let's scroll down and now we can see when we scroll down 60 pixels we have a different styling for the nav and i think we need to add a top value of 0 for this nav element by default because when we scroll down we can see that we have this background displayed over here at the top so we don't want that so let's go back and here in the nav i'll just set the top to zero and i'll just add a padding of 36 pixels top and bottom and zero for left and right all right now let's go back and let's scroll down and now we can see it looks alright so everything looks alright alright so that's it with the nav bar now let's start with the design of the tablet version so just right click over here and click on inspect and let's select a tablet view from here so you have to click on this button called toggle device toolbar and then you have to select a tablet from here so i just select ipad pro and i'll just increase the zoom to 50 all right now here we can see for the ipad we have a width of 1024 pixels so what we will do is we will add a media query for less than 1 100 pixels now whenever the screen width is less than 1 100 pixels we will have the ipad styles applied to the website all right so let's start with the styling right so the first thing we will do is we'll create a media query so let's scroll down and let's type at media and here we'll just have max width of 1100 pixels so whenever the screen width is less than 1100 pixels we will have the styles that we write over here applied to our website all right now the first thing we will do is we will change the styling for the button inside the tablet version so let's go back to our figma file and let's double click on this button and let's go to inspect and here we can see for the button we have a padding of 12 pixels top and bottom and 32 pixels left and right and everything else is the same i think so let's double click over here and we have the font size set to 16 pixels so everything else is the same so let's go back and here we'll just type dot btn to select the button and we'll set a padding of 12 pixels top and bottom and 32 pixels left and right and now we can see we have the styling applied to the button now the next thing we will do is we will add some padding to the left and the right so let's go back to our figma file and if you click on this element and if i hover over this left area we can see that we have a gap of 100 pixels so let's go back to our styles and we will have a padding of 100 pixels for left and right for the wrapper so if you go back to our index.html file we can see that we have the wrapper division for all the content so here we can see we have the wrapper inside the header so we will add some padding for this wrapper so we will add a padding of 100 pixels for left and right for this wrapper so here i'll just type dot wrapper and let's set a padding of zero for top and bottom and 100 pixels for left and right now we can see we have the padding applied all right now the next thing we will do is we will style this nav element so let's type nav and we will set the width of the nav to 100 and we will set the left to zero and the right to zero so that we have the correct width and we'll also add a padding of 100 pixels for this nav so let's tap padding and for top and bottom we will have a padding of 36 pixels and left and right we will have a padding of 100 pixels now we will change the padding for the scrolled class as well so here i'll just type nav dot scrolled and we'll set a padding of 16 pixels top and bottom and 100 pixels left and right now we can see everything looks all right all right now the next thing we will do is we will set a max width of 1000 pixels for the header the hero section and the wrapper so here let's type header hero section and header wrapper and let's set a max height of 1000 pixels all right now if we go back to our figma file we can see that we have all these elements over here at the top and we have the achievement cards over here at the bottom so for that let's go back to our code now we have already set a display of flex for the hero section so here let's type hero section and we will set the flex direction to column so that both these elements will be one below the other now let's see what is the width of this left division so if we go back to our index.html file here we can see in the hero section we have the left division and in that we have the heading the paragraph and the button so here i'll just target the left section so i'll just type hero section left and let's add a background color to see what is the width so this type background of red and here we can see we don't have the full width for this left division so here i'll just type width of hundred percent and now we can see we have the full width right now let's remove this background color and now the next thing we will do is we will set a position of absolute for this right division so if we go back to our index.html file here we can see we have this left division and then we have this right division and in that we have this image so let's go back to our style.css file and let's target the right division so i'll just type hero section right and we'll set the position to absolute and we'll set the bottom position to zero right now the next thing we will do is we will style these achievement cards so for that we have a division with the class of achievement cards and in that we have divisions with the class of achievement card so if we just right click over here and click on inspect here we can see for the achievement cards we have the position set to absolute so we have to change this to relative and we have to remove the left and the top positions from here and we have to do the same for the other achievement card so here we have to remove the left and the top positions and now we can see both the achievement cards are displayed over here so we have to now just position it to the left over here so let's do all of that let's refresh this and here we'll just type hero section achievement card and we'll set the position to relative all right now let's select the individual achievement card so let's type achievement card and we have this class of students enrolled and let's also select achievement card with overall rating and let's set the left to unset and the top to unset so this will unset the left and the top values right now we can see we have these achievement cards over here we'll also have some gap between these achievement cards so if you go back to our figma file here we can see we have a lot of gap i think we don't need to have this much gap because in our chrome we can see that we haven't set such a large height for our screen so we'll just add some margin over here so here i'll just type margin bottom and let's try 40 pixels and i think we'll just change this to 80 pixels i think that looks alright now we also need to position this to the left so if you right click over here and click on inspect we can see for the container division which is the hero section we have set a display of flex over here so for that we have to go ahead and we have to type align self to flex start so let's select the achievement card so i'll stop hero section achievement cards and let's set align self and let's set it to flex start which will align it to the left and we will have a little bit of margin over here on the left so here i'll just type margin and set it to 40 pixels and that looks alright now the next thing we will do is we will position this left section to the center vertically between the achievement cards and this navbar so let's select the left division and he will just type display of flex and flex direction to column and justify content to center and now we can see for this button we have a width of 100 so for that let's select the button and for the button we have a class of btn so let's type hero section left btn and we have to type align self and we have to set it to flex start and now we can see we have the correct width for the button and everything looks alright now the last thing we will do over here is we will set the font size of this heading so let's go back to our figma file and let's double click over here and if we scroll down we can see that we have a font size of 50 pixels and we have a line height of 125 percent so let's copy both these styles from here and let's go back to our code and here we'll just type hero section left h1 and we'll just paste the styles over here all right now the next thing we can do is increase the height of this image so for the image we have an img tag inside the right division so here let's type hero section right img and let's set a height of let's try 540 pixels let's increase it a little bit more so let's try 580 pixels and that looks alright and i think we can increase the max width of this header over here so i'll just increase this to let's try 1100 pixels and i think that looks alright so that's basically it with the styling of the hero section in the tablet version all right here is our source code so the first thing we will do is we will style this heading over here so let's go to our figma file and let's double click over here on this heading for the tablet version and let's see what is the font size so let's go to inspect and let's scroll down and here we can see we have a font size of 40 pixels so let's copy this from here and let's go to our css and here i'll just type h2 because if you go to the html file we can see for the sections we have an h2 so if we scroll down we can see that we have the h2 over here and for all the sections we have an h2 for the heading so let's style the s2 here i'll just paste the code so we have a font size of 40 pixels so let's go back to our browser and now you can see we have the correct font size for our heading now let's go back to our figma file and here we can see we have all these elements one below the other now for this testimonial section we have set a display of flex so if you go to the desktop version here we can see both these uh left and right sections are one next to the other but here in the tablet version we have to position all of them one below the other so let's go back to our css and if we scroll up and let's go to the testimonials section css and here you can see for the testimonial section we have set a display of flex now for the tablet version we have to set the flex direction to column so let's go over here to the tablet version and here i'll just type testimonials section and i'll just set the flex direction to column and now we can see that the elements are one below the other now we also want all these elements to have full width so here we'll just type align items and set it to stretch now if we add a background color over here we can see that we have full width for this section but we have added some fixed width to these testimonial cards so let's go back to our html and let's scroll up and let's go to the testimonials section and here we can see we have this division of the class of testimonial card so let's select this let's go back and let's remove this background color and here let's type testimonials section and testimonial card and let's set the width to 100 all right now let's go back to our sigma file and let's see what is the distance between these two elements so let's double click over here and here we can see we have a margin bottom of 40 pixels so let's go back to our css and here we'll just type margin bottom and let's set it to 40 pixels now here we can see for this background element we have added an after selector now if you scroll down and go to the testimonials section for the desktop version here we can see we have added a before selector and we have a margin bottom of 50 pixels over here so that's why we had added a top value of negative 50 pixels but in our tablet version we have set the margin bottom to 40 pixels so we have to set the top value to negative 40 pixels so let's type testimonials section testimonial card and we are selecting the second testimonial card so let's type last child and here we'll stop calling column before right now we can see that this background element is on top of the first testimonial card so let's add a top value of negative 40 pixels and now we can see it looks alright and i think we can decrease the height of this background element a little bit so if you go back to the desktop version here we can see we have set a height of 100 of the element plus 90 pixels so for the tablet version we will have a height of 100 plus 80 pixels so i'll just paste it over here and here i'll just type 80 pixels and i think that looks alright and now the next thing we will do is we will move this second testimonial card to the left a little bit so for the desktop version we had moved it to the right so if you right click over here and go to inspect and let's select the second testimonial card and here we can see we have a transform translate x of 20 pixels so let's copy this let's copy this selector as well and let's go back to our css and i'll just paste it over here and here i'll just set it back to zero and now we can see that this background element is not aligned correctly so here we can see this is on the right a little bit and that's because we have moved the second testimonial card to the left 20 pixels so we have to move this before selector to the right 20 pixels so let's right click over here and let's click on inspect and let's select the before selector and here we can see for the before selector we have a left value of 40 pixels so we have to add 20 over here so it will be 60 pixels now we can see it is aligned correctly so let's go back and here i'll just type left of 60 pixels right now let's go back to our figma file and here we can see we have the heading and this paragraph at the beginning and then we have these two testimonial cards and then we have the button so we have to change the ordering in our design so we have to move this heading and this paragraph to the top so let's do that if we go back to our html file here we can see we have this division with the class of left and then we have a division of the class of right and then we have this button over here so right now the button that is displayed over here is the desktop button so if you right click over here and click on inspect here we can see we have the desktop button selected so we have to hide it in the tablet version and we have to display this mobile button so i'll just go back to the style.css file and here i'll just type testimonials section desktop button and i'll just set the display to none and let's select the mobile button so i'll just type testimonials section mobile button i'll just set the display to block and right now we have a width of 100 so we have to set the align self to flex start and now we have the correct width all right now let's set the ordering so if we go back to our html file here we can see we have the left division and in that we have the testimonial cards and then we have the right division and in that we have the heading and this paragraph and then we have this button over here so let's go back to our style.css file and i listed the order to one and then we'll select the left division so let's type testimonials section left and let's set the order to two and then we'll select this button so the button is right here mobile button so i'll just set the order to three and now we can see we have the heading we have the paragraph and then we have the testimonial cards and then we have this button let's also reduce the gap a little bit so let's go back over here to the testimonials section and here let's type gap and i'll set the gap to 50 pixels now the next thing we have to do over here is that we have to have a single paragraph instead of these two paragraphs so if you go back to our index.html file and let's select the right division and here we can see we have these two paragraphs over here and these paragraphs are inside the right division so let's go back to our css file and here i'll just type testimonial section right p and i'll just set the display to inline so that the next paragraph will start in the same line so now we can see we have a single paragraph right now let's add some margin bottom for this h2 so let's type testimonial section h2 and we will add a margin bottom of 20 pixels now the next thing we will do is we will remove the margin bottom for the second testimonial card here we have the second testimonial card so here let's type margin bottom and i'll just set it to zero and i think that looks all right all right i think that's it for the testimonials section right now let's scroll down and let's style this our courses section so let's go back to our figma file and here we can see for the our courses section we have each course on separate lines so we have to set the flex direction to column so let's go back to our css and let's select the course cards so if you go back to our html file and if you scroll down we can see for the course cards we have this division of the class of course cards and in that we have these two divisions with classes course card so let's go back to our style.css file and here i'll just type courses section course card and let's set the flex direction to column and it should be course cards right now we can see we have both the courses on different lines right now let's go back to our figma file and let's see what is the size of this image so let's double click on the image and for the image we have a height of 260 pixels so let's go back and let's add that here let's type courses section course card img and let's set the height to 260 pixels and now we can see that the image has shrunk so for that we have to type object fit and set it to cover and now everything looks all right all right let's go back to our figma file and let's double click on this heading and let's see what are the styles so if you go to inspect and if you scroll down we can see that we have a font size of 30 pixels let's go back to our css and let's add it over here so just type courses section course card s3 because if you go back to the html file we can see that we have this s3 for the heading right now let's copy and paste the code and uh i think it was 30 pixels already let's decrease the font size a little bit and let's see how it looks and i think that looks all right all right now let's go back to our figma file and let's see what is the gap between these two cards so we can see we have a gap of 80 pixels so let's go back to our css and here we will go to course cards and let's add a gap of 80 pixels and i think that we already have some default margins so let's right click over here and click on inspect and here we can see we have a margin of 40 pixels top and bottom so we have to remove the margin so here we'll just type course section course card and we will set a margin of zero and now we have the correct gap but we need to have some margin bottom for this heading as well so let's add that here let's type courses section and for the heading we have an h2 so let's tap h2 and i'll just add a margin bottom and let's try 40 pixels and i think that looks alright now the last thing we will do is bring this button over here to the left so if you go back to our figma file and if i click over here and hover over this area we can see that we have a gap of 100 pixels so let's go back and let's select the button so we have this anchor tag with the class of btn so let's go back and here let's tap courses section btn and let's add a write value of 100 pixels and the style is not being applied so let's right click over here and let's click on inspect and let's see what's the problem now here we can see we have added courses section btn and this css over here that we just wrote has been overwritten by this css right here because this selector is more specific so we have courses section wrapper and btn so let's copy this selector and let's add it over here and now we can see that the button is displayed correctly now let's go back to our figma file and from the button to this course card we have a gap of 50 pixels so let's add some margin bottom for the course card so i'll just select the second course card so just have courses section course card colon last child to select the second instance and i'll just add a margin bottom of 50 pixels or that looks alright or that's it with the courses section now let's scroll down and then we have the get our app section so if we go back to our figma file we have the same styling for the desktop version over here as well so let's move on to the next section which is the footer and for the footer we have a two column layout so let's go back to our css right now for the footer we have set a display of grid so here we can see for the footer links container we have set a display of grid and here we have set a grid template columns of 2fr 2fr and 3fr so we have three columns now for the tablet version we need to have two columns so let's scroll down and here we'll just type footer links container and let's type grid template columns and let's set it to 1fr 1fr for two columns with the same width and after the third section we need to have full width so if you go back to our index.html file for the footer we have this links container and in that we have divisions with the class of links so we can see we have three divisions with the class of links now for the last division with the class of links we have to have a width of hundred percent so let's go back over here to stylo css and let's type footer links container links colon last child and here we just type background and red we can see we have a width of 50 now since we have set the display to grid we have the first links division over here and then we have the second links division and then we have the third links division over here and this is the space for the fourth one now we have to span this third division for two columns so here let's type grid column and we have to type one forward slash three now it will span two columns so now we can see we have hundred percent width right now let's remove this background color and that's it with the footer of our tablet version and with that we have completed the design of the tablet version so this is how it looks we have the hero section over here then we have the testimonials section and then the courses section the get our app section and the footer so everything looks all right and we have already completed the design of the desktop version and we also completed the design of the ipad pro version in the previous video so if you go to our browser now here we can see this is how it will look on an ipad and we have a different design on the ipad now the next thing i will do is i'll just create one more media query for size less than 800 pixels so right now we can see that the width is 1024 pixels for the ipad pro now if you open this in an ipad so if i just select the ipad device from here and this is how it looks we can see that all the design over here looks alright but we don't have enough space for the navigation menu so what we will do is when we have the width of the browser less than 800 pixels we will just hide this menu bar and we will add an icon over here just like the mobile version over here so we need to add this icon instead of this navigation menu and then we also have to create this mobile navigation menu so these are the things we're gonna do in this video let's get started right here i'm in the css and the first thing i will do is i just create a media query so just tap at media and we'll just have the max width to 800 pixels so whenever the screen width is less than 800 pixels all the css that we have over here will be added to our website now let's go to our html file and let's scroll up and here we can see for this navigation menu we have this nav element so we'll just hide this so here i'll just type nav and i'll set the display to none right now let's create a navigation menu for the mobile devices so let's go to our html file and just after this comment i'll just create a nav element and i'll just give it a class of mobile now now in this we need to have this logo and this icon so let's create a division with the class of logo and i'll just type gd dot over here and the next thing we need to have is the menu icon so let's create a division of the class of menu icon and here just create an img tag and i'll just type images slash and i have saved it as menu icon.svg all right now let's go to our css file and we will style this mobile nav so here i'll just type nav dot mobile nav and i just set the display to flex right now we also need to add a scrolled class so if you go back to the ipad pro version now for this navigation menu when you scroll down we can see that we have a different class and we also need to hide the other navigation menu over here so let's scroll up and here in the desktop version here i'll just type nav dot mobile nav and i'll just set it to display none right now here we can see when we scroll down we have a different styling and when we scroll up we have a different styling so for that we are adding a class called scrolled so here we can see for the nav element we are adding a class called scrolled and when we are adding that class we are adding these styles to the nav element so we will do the same for the mobile navigation menu as well so let's go back to the ipad version and here let's type nav dot mobile nav dot scroll and when we have the scrolled class we will add a padding of 8 pixels top and bottom and 100 pixels left and right and we'll also add a background color and we'll set it to var light blue color and we'll also add a box shadow suggest a box shadow and we'll set the values to 0 9 pixels 21 pixels negative 5 pixels rgba 0 0 0 and 0.3 right now if you go back to our html file and here if we add the scrolled class we can see we have a different styling now in the desktop version we are adding the scrolled class using javascript so let's do the same for this mobile now so let's go to our main.js file and let's select the mobile nav so i'll just type const mobile nav equals document dot query selector nav dot mobile nav and here when the window has scrolled more than 60 pixels i'll just add the scrolled class to mobile now so just type mobile now dot class list dot add and here i'll just type scrolled and else we need to remove the class so just type mobile now dot class list dot remove and i'll just tap scrolled and now if we scroll down we can see that the class is added and when we scroll up the class is removed right now let's create the many items that will be displayed when we click on this menu icon so for that let's go back to our html file and here we just create a division with the class of mobile menu container and if we go back to our figma file we can see that we also need to have this close icon so let's add that first of all so i'll just create a division with the class of close icon and i'll just add an img tag and here let's type images slash and i have saved it as close icon dot svg all right now the next things we need to add are the menu items so if we scroll up over here to this nav element we can see these menu items over here so we need to have the same menu items so just copy this ul from here and let's scroll down and paste it over here inside this mobile menu container and here i'll just create a comment and just type end of mobile navigation right now let's style this so let's go back to our style.css file and here i'll just type mobile menu container and i just set the position to fixed and i will set the height to 100 viewport height and the width to 100 percent and we'll set the positions to top 0 and left 0. let's also add a background color so i'll just type background and we will add the dark color so i'll just have var and we have a variable called dark color let's also bring everything to the center so i'll just type display flex and align items to the center and justify content to the center and we'll also add some z index so that it is above all the other elements so just type z index and i'll just set the z index to 200 right now let's style this close button for the close button we have a division with the class of closed icon so here i'll just type mobile menu container close icon and we'll set the position to fixed and we'll set the top position to 32 pixels and the right position to 100 pixels right now let's style this unordered list because here you can see we have this ul inside the mobile menu container so let's style this here let's tap mobile menu container ul and let's remove the bullets so i'll just type list style and set it to none and we'll also remove the padding so let's type padding and set it to zero right now let's style the list items inside the ul so here let's type mobile menu container ulli and we will have a margin of 30 pixels top and bottom and 0 for left and right and we'll also text align it to the center right now let's tile the anchor tags inside the li so here we can see we have the anchor tags for the menu items so here i'll just type mobile menu container uli a and let's set the color of the text to white and let's remove the underline so just type text decoration and set it to none and we'll also increase the font size a little bit so i'll just type font size 18 pixels all right now the next thing we need to do is we need to hide this mobile menu container by default so let's scroll up and go to the mobile menu container and here by default i'll just set the left position to 100 so right now the mobile menu container is outside the screen on the right side now what we will do is we will add a class called active to this mobile menu container and when we have the class active we will reset the left value so let's type mobile menu container dot active and i'll just set the left value to 0 and we'll also add a smooth transition so let's tap transition and set it to all 400 milliseconds is and we also need to remove this close icon from here by default so here for the close icon i'll just set the opacity to 0 and i will also set the pointer events to none so that it cannot be clicked and let's also add transition so that we'll have smooth animation let's set it to all 400 milliseconds is now when we have the active class for the mobile menu container we will display the close icon so here i'll just type mobile menu container dot active and here let's type close icon and i'll set the opacity to 1 and the pointer events to auto right now let's add and remove this active class using javascript so let's go to our main.js file and we need to reference the menu icon the close icon and the mobile menu container so let's go back to our index.html file and here we can see for the menu icon we have this class of menu icon and for the close icon we have a class of close icon and then for this division we have a class of mobile menu container so let's reference all of this in our javascript so here let's type const menu icon equals document.queryselector menu icon and let's type const close icon equals document.queryselector and here let's type mobile menu container close icon and i'll just have const mobile menu container equals document.query selector mobile menu container right now let's add event listeners to the menu icon and the close icon so here let's type menu icon dot add event listener and we'll listen for the click event and let's create an arrow function over here and here let's tap mobile menu container dot class list dot add and we'll add the active class and we need to remove the active class when we click on the close button so here just tap close icon dot add event listener and click and here i'll just type mobile menu container dot class list dot remove active right now let's see whether it works so let's click on this menu icon and we can see that the mobile navigation menu is displayed over here and let's click on this close icon and we can see it goes back so everything is working all right all right now let's go back to the ipad pro version and let's see whether we have any problems in that and here we can see we need to hide this mobile menu container over here so let's go back to our style.css file and here in the desktop version here we can see we are hiding this mobile nav so here i'll just add one more selector so i'll just type comma mobile menu container and now we don't have any problems so let's go back to the ipad version and everything is working all right all right so that's it for this video in the next video we will style the mobile version all right here's the source code so the first thing i'll do is i'll just create a media query so i'll just type at media and for the mobile version we will have a max width of 700 pixels so let's type 700 pixels now whenever the screen width is less than 700 pixels all the css that we have over here will be added to the web page right now let's go to our browser and uh let's select a mobile device from here so i just select pixel to excel alright this is how the mobile version looks right now so the first thing we will do is we will set a padding for the wrapper so right now we have a padding of 100 pixels so if you scroll up and if you go to the media query for the ipad version here we can see for the wrapper we have set a padding of 100 pixels for left and right so let's scroll down and here we will add some padding to the wrapper so let's tap wrapper and let's go to our figma file and let's see what is the padding so if we just double click over here and if you press alt or option you can see that we have a padding of 32 pixels on the left and the right so let's go back to our css and here let's type padding of zero for top and bottom and 32 pixels left and right and now we can see we have a padding of 32 pixels now the next thing we will do is we will reduce the width of this paragraph so if i click over here and click on inspect here we can see for the paragraph we have set a width of 457 pixels so i'll just remove this from here and we will set a width of 100 percent so let's copy this selector and let's go back and paste it over here and here i'll just type width of 100 and now we can see we have 100 width for the paragraph and now here we can see that the width of these elements are not 100 of the width of the screen so if we scroll down we can see that we have these two buttons over here so these two buttons are taking up a lot of width so let's go back to our figma file and if we scroll down we can see that both the buttons are one below the other so let's go back to our css and let's do that so let's select these buttons so i'll just right click over here and click on inspect and let's select the container division which is app buttons so just copy this selector and here we can see we have added a display of flex so we have to set the flex direction to column so i'll just paste it over here and here i'll just have flex direction column and now we can see we have the correct width for all the elements in our mobile version all right now the next thing we will do is we will reduce the padding of this mobile nav so for that we have a nav with a class of mobile nav so here we can see we have this mobile nav so let's select that so here just type nav dot mobile nav and i'll just set the padding to 32 pixels and now when we scroll down we have a padding of 100 pixels for left and right so let's add a padding of 32 pixels when we scroll down as well so when we scroll down we are adding a class called scrolled so i'll just type nav dot mobile nav dot scroll and when we scroll down we will have a padding of 8 pixels top and bottom and 32 pixels left and right so now you can see it looks alright now if i click on this menu icon we can see that the menu items are displayed over here and we also need to have the close button positioned over here to the right so for the close button we have a division of the class of close icon and it is inside mobile menu container so let's select this here i'll just type mobile menu container close icon and let's set the right position to 32 pixels right now we have the close button in the correct position all right now the next thing we will do is style this heading so let's go back to our figma file and let's go to the heading and let's double click on this heading and if you go to inspect and scroll down we can see we have a font size of 36 pixels so let's copy this and let's go back to our css and i'll just select the heading so if you go back to our browser and if you right click over here and click on inspect here we can see for the heading we have the selector hero section left h1 so just copy this and i'll just paste it over here and let's copy this font size and let's paste it over here all right now the next thing we will do is we will reduce the height of this image so let's right click over here on the image and click on inspect and for the image we have this selector so i'll just copy this and right now the height is set to 580 pixels so just paste it over here and let's try a height of 400 pixels and i think that looks alright we'll also move this image to the right a little bit so the image is inside this right division so let's select this right division so let's type hero section right and we'll type transform translate x and we will set it to 40 pixels now let's style these achievement cards so let's go back to our figma file and let's select this heading and here we can see for the heading we have a font size of 30 pixels so let's go back and let's select the heading so just right click over here and click on inspect and let's copy this selector and let's paste it over here and i'll just type font size 30 pixels and we'll also reduce the margin between these two elements so let's go back to our figma file and here we can see we have a spacing of 48 pixels so let's go back and if you right click over here and click on inspect and let's select this achievement card and here we can see we have a margin bottom of 80 pixels so let's copy this selector and we have to set it to 48 pixels so i'll just paste it over here and i'll just tap margin bottom 48 pixels now let's go back to our figma file and here we can see these two achievement cards are positioned to the left so from the left we have a padding of 32 pixels so let's go back and if you right click over here on the achievement card and click on inspect and if we select the container division we can see we have added a margin of 40 pixels so let's remove that so i'll just copy this selector and paste it over here and i'll just set the margin to zero and i think we can position the image to the right a little bit so here in the right division i'll just change this to let's say 80 pixels and now we can see that the image has moved to the right but here we can see we also have this space on the right because of the image so what we will do is i'll just cut this from here and i'll just paste it over here inside the img tag and here in the right division i'll just type overflow hidden and let's decrease this a little bit let's set it to let's say 50 pixels and now we can move this right division to the right so i'll just type transform translate x and let's start with 30 pixels and i think that looks all right all right that's it with the hero section of our mobile device now let's scroll down and let's start styling the other sections and the first thing we will do is style these headings so let's go back to our figma file and let's double click on this heading and let's go to inspect and if we scroll down we can see for the heading we have a font size of 30 pixels so let's copy this and let's go back to our css and here i'll just type h2 because if you go back to our html file we can see we have h2 for all the headings inside the sections so here we can see we have the h2 so let's go back and let's set the font size to 30 pixels right now let's style the elements of this testimonial card so let's go back to our figma file and let's double click over here and let's see what is the font size of this text so if we go to inspect we can see that we have a font size of 18 pixels let's go back to our browser and let's see what is the font size and we already have a font size of 18 pixels right now let's select this heading and for the heading we have a font size of 18 pixels so let's go back to our browser and let's select the heading and for the heading we have a font size of 24 pixels so we have to change this to 18 pixels so let's copy this selector and let's go back to our css and here i'll just paste the selector and i'll just type font size 18 pixels right now let's go back to our figma file and let's select this text and for that we have a font size of 14 pixels let's go back to our browser and let's copy the selector so i'll just right click over here and click on inspect and let's copy this selector and let's paste it over here and let's set a font size of 14 pixels right now let's go back and let's see what is the size of this image so let's double click over here and for the image we have a height and a width of 100 pixels so let's go back and let's right click over here and click on inspect and here we can see we have set a height of 120 pixels so let's copy this selector and let's paste it over here and here let's type height of 100 pixels and width of 100 pixels or that's it with the testimonials section now let's move on to the next section which is the our courses section now let's go back to our figma file and if we scroll down we can see that for the courses section we don't have any padding at the sides for these course cards so let's go back to our html and here we can see if we scroll down we can see for the courses section we have this section over here called courses section and in that we have the wrapper so what we will do is we will remove the padding from the wrapper inside the courses section so let's go to style.css file and let's select the wrapper inside the courses section so i'll just type courses section wrapper and i'll just set the padding to zero and now we can see we don't have any padding for the course cards now let's see what is the height of this image so let's go back to our figma file and let's double click on this image and we can see we have a height of 240 pixels so let's go back and let's add that over here so let's right click over here and click on inspect and let's copy this selector for the image and let's paste it over here and here i'll just have height of 240 pixels and the last thing we will do is we will position this button to the right so we will have a spacing of 32 pixels from the right so here we can see from the button we have a space of 32 pixels so let's go back and let's select this button so i'll just right click over here and click on inspect and here we have the selector for the button so i'll just copy this selector and i'll just paste it over here and let's set the right position to 32 pixels and that looks alright so that's basically with the courses section of our mobile version now scroll down and we already styled the get our app section so let's scroll down and let's style the footer now if you go back to our figma file we can see that for the footer we have just one column and everything is aligned to the center so let's go back to our browser and let's right click over here and click on inspect and if you go inside the footer we can see we have a division with the class of links container and for that we have set a display of grid and if we scroll down we can see that we are adding grid template columns of 1fr 1fr which means that there will be two columns so let's change this to one fr so it will just have one column so i'll just copy this selector and let's go back to our css and i'll just paste it over here and here i'll just type grid template columns and set it to one fr and now we can see we still have two columns over here that's because for the third column we have spanned it for two columns so if you right click over here and click on inspect and select this third links and here we can see we have set grid columns to one forward slash three which means that it will span for two columns so we have to change this to one forward slash two so let's copy this selector and let's paste it over here and here let's type grid column and one forward slash two and now we can see we just have one column right now let's also center align everything so here in the links container i'll just type text align and set it to center we'll also remove the padding that we have for the ul so if right click over here and click on inspect and if we select the ul and if we scroll down we can see that we have some padding over here on the left so let's remove the padding so here i'll just have footer ul and let's set the padding to zero and we'll also add some gap between these links so here i'll just type gap and set it to 40 pixels and that looks all right all right now let's tile this button so let's go back to our figma file and here we can see we have the button at the bottom of the input field so let's go back to our browser and let's right click over here on the button and click on inspect and if we scroll up we can see that these are the styles for the button and we have set the right position to 5 and top position to 50 so that's why the button is over here on the right so let's copy this selector and let's go back over here to css and i'll just paste it over here and let's set the top position to 130 percent so it will be below the input field and we'll also bring it to the center so let's type left and i'll just set it to 50 and now we can see it starts from the 50 mark so we have to type transform translate x and negative 50 and now we can see that the button is positioned correctly right now the last thing we will do is we'll style this copyright division so if you go back to our index.html file here we can see we have this paragraph with the class of copyright so let's select this so here i'll just type footer copyright and we will have some margin top so let's type margin top and we'll set the margin top to 80 pixels and we'll also text align it to the center and that looks alright so with that we have completed the design of the mobile version here we can see we have the hero section and we also have this menu button over here and if i click on that we can see that the menu items are displayed over here and if i click on this close button it goes back and let's scroll down and here we have the testimonials section and let's scroll down we have the courses section and then we have the get our app section and then we have the footer so everything is looking alright this is how the design looks so if we scroll down we can see that all the sections are displayed correctly and we have also designed the responsive versions so if i right click over here and click on inspect and here we can click on this button called toggle device toolbar and this is how it will look on a mobile device so here we can see we have all the sections displayed just like we have in the figma design and we also have this button over here for the navigation menus and we can see that the menus are displayed over here and if i go ahead and select another device from here let's select ipad and this is how it will look on an ipad so we have a different layout we have two columns for the footer and let's select a larger device so if i select ipad pro we have a different design so we have completed writing all the code for this design now in this video we will just clean up some of the code and then we will deploy this website online now i will leave the link of the source code in the description of this video so you can go ahead and check that out but i recommend you to watch all the videos in the playlist and write the code along with me so that you'll understand how everything is designed all right so let's get started right here i'm in the source code of our website and this is the css file so let's take a look at this css and let's see what we can improve so here you can see in the body we have set a font family of poppins and sanserif so whenever we have this font family set to pop ins in any of the elements we can just delete that so let's scroll down and here we can see in the nav element inside the anchor tag we have the phone family set to pop ins but we have already set the phone family to poppins in the body so we can just delete this line of code and if you go back to our design we can see that we don't have any problems all right let's scroll down and now you can see in the hero section we have these elements over here and for the h1 and for the paragraph we have set a color of white so we can just cut this line of code from here and add it to the parent division which is the hero section so i'll just add it over here and we can just delete this line of code color of white from the h1 and here in the paragraph we can just delete the font family line let's go back to the website and we can see we don't have any problems right let's scroll down and uh here are the achievement cards if we scroll down we can see that we have set the color of the text to dark blue color and even for the paragraph we have set a color of dark blue color so we can just cut this line of code from here and we can just add this to the parent division which is the achievement card division so let's scroll up and let's paste it over here and we can also delete the color from the s3 and we'll also remove the font family pop-ins from here and also from the paragraph all right let's go back to our website and we don't have any problems now the next thing we will do is we will decrease the space between this number and this star image so let's go back to our code here we can see we have this content division and in that we have this div and in that we have the s3 and the image so if you go back to the html file and let's scroll up and here we can see we have the achievement cards and here inside the content division we have a div and in that we have the s3 and the image so first of all let's add a background color to this div and let's see the space that it takes so i'll just add a background color over here and i'll just set it to red and this is the space that it takes and one more thing that i notice over here is that this paragraph is not center aligned so let's go back and let's go over here to the paragraph and here let's tap text align center right now let's go back to our css and what i will do is i will set the flex to one for the s3 and the image so that both of them will have the same width so here i'll just type achievement card img and let's set the flex to one and here also i'll just set the flex to one and now we can see both of them have the same width and now i'll just reduce the height of this image so here i'll just type height and i'll just set the height to 42 pixels and now i'll just add some negative margin left to this image so let's type margin left and i'll just type negative 24 pixels and now we can see it looks alright so i'll just remove this background color right now let's go back to our css and let's scroll down and here in the section paragraph we have set a font family of poppins so we can just remove this and if we scroll down we don't have any problems and here inside the app section we have this font family set to pop in so i'll just delete this line of code and here for the input field we have set a font family of pop-ins but we have to specify the font family in input fields so if i remove this phone family line from here and if i go back to our website we can see it doesn't have the correct font so we have to specify the phone family in the input fields now one issue that we have with the input field is that we don't have the correct padding so if i just type something over here we can see that the text goes under the button so we have to add some more padding over here on the right so here i'll just type padding and set the padding to 8 pixels top and for the left i'll just set a padding of 160 pixels and for the bottom i'll just have a padding of 8 pixels and for the left we will have a padding of 32 pixels right now let's go back and now we can see we have the correct padding so we can see that it doesn't go under the button right now that we have added this padding of right for this input field we have to check whether we have the correct padding for the mobile version so let's open the mobile version and let's type something over here and here also we have a padding of 160 for the right so we have to reset the padding over here in the mobile device so let's go back to our css and let's scroll down and here in the media query for 700 pixels i'll just scroll down and i'll just add the selector of the input field over here so i'll just have footer form input and i'll just add a padding of 8 pixels top and bottom and 32 pixels left and right let's go back and let's see whether we have the correct padding and now we can see we have the correct padding or that's pretty much it with the code of our website so everything looks all right now you can go ahead and customize this code to your needs all right now the final thing we need to do is deploy this website online so let's go back to our browser now for deploying our website we're going to use this service called netlify so you can just sign up for free or you can just log in using your github account so just log in and then you have to go to sites and you can just drag and drop your site folder over here so here's my folder which has all the files so here you can see we have the images in the html javascript and the css files so i'll just drag and drop this over here and here we can see that the site has already been deployed now you can just go over here to domain settings and you can just add a custom domain if you want or you can just change this name so let's go over here to edit site name and i'll just type my new website let's see whether we have the name available let's add some number over here right now we can see we have this url my new website 123.net 123.netfire.app so let's open this and this is how it looks we can see that everything looks alright now for the subscription box you can go ahead and sign up for an email subscription service or an email newsletter service so you can go ahead and get the code and paste it over here in place of this input box and then the input field will be functional right now let's check out the mobile version and we can see it looks all right let's check out the ipad pro version and everything looks alright now if you want to update this website you can go ahead and do that pretty easily so here we can see in the title we have document so i'll just change this to welcome and let's update our website let's go back to our source code and let's go to our index.html file and let's scroll up and here in the title i'll just type welcome now let's save it and now let's drag and drop this updated folder into our netlify account so i'll just go back to deploys and now if we scroll down we can see that we can just drag and drop the updated site folder over here this is my updated folder so i'll just drag and drop this over here and we can see it is being uploaded and here we can see it has been published so let's open this website and let's see whether the title is displayed and now we can see that welcome is displayed over here so everything is working all right all right so that's it for this video so this was the final video in this playlist so if you enjoyed this series please click on the like button and if you have any doubts you can ask in the comments below and i will also leave the link of the source code in the description of this video alright so that's it for this video thanks a lot for watching have a nice day [Music] you

Channel: GTCoding

Views: 58,494

Keywords: gtcoding, gtcoding complete course, web design, figma to html, figma to html css, figma to real website, html full course, responsive website full course, responsive website using html and css, responsive website using html css and javascript, design a responsive website from scratch, design a responsive website, responsive website with source code, web development course, web design course full

Id: p5XWFVt9tY8

Length: 277min 5sec (16625 seconds)

Published: Thu Jan 06 2022