Build Responsive Online Course Websites With HTML CSS JavaScript | 7 Pages Educational Website

hi everyone welcome to our  another html and css tutorial   in this tutorial we will create a responsive  educational website or an online course website   step-by-step using html and css and this  page is going to be a multi-page website   now let me show you the website which we are going  to create in this tutorial here in this website   you can see that we have a logo and we have some  navigation links here with some hover effect   and then we have a background image we have our  background heading our paragraph and two button   here and this button has also some hover effect  and if when i scroll down here you can see that   we have our awesome feature section and here in  this section we have three card here with some   icon heading and paragraph and at the bottom here  you can see that we have some our popular courses   so in our courses here you can see that we have a  course image we have a course date course heading   and the review here and we have a price tag  here also and if you now scroll down here you   can see that we have a registration option and  this registration option is looking so premium   with a beautiful form and if when  i scroll down here you can see that   we have our community experts and we have four  profile cards here with some social media icon   and this icon have also some hover effect and if we now scroll down here you can  see that we have our beautiful footer here   and in this footer we have five columns and we  have a subscription option and then copyright   and social media icon and as i mentioned earlier  this website is going to be a multi-page website   so now let's go to our about page so this is  our about page and here in the about page we   have a background image and we have a heading  and then we have our section here we have a   image section in the left side and we have some  text with some features and if when i scroll   down here you can see that we have our awesome  features and we have our trusted buy section   and at the last we have our footer now  let's go to the top and let's go to our blog so here you can see that this is our blog page  we have our background image and heading here   and if when i scroll down here you can see that  in the left side we have our blog section and   in the right side we have our categories and we  have some blogs here now let's go to the top and   let's open our first blog here if we click on our  read more button we will see the complete block and then we have a read next button also so  after our blog page let's go to our course   and here you can see that we have our  course page and we have some course here   now from here let's open our first  course now here you can see that   we have a background with a heading and  then here we have our all course details   here at the first we have our course  image and then we have our course heading   our review and a small paragraph and  in the right side we have our price tag and here in the right side here you can see  that we have some features of this course   and we have a android course button and if you  now scroll down here you can see that we have our   instructor image name and the designation and then  we have some course overview and what you will   learn some text or some features here and then we  have our footer let's go to our contact us page   this is our contact us page we have a background  and we have a heading here and in the left side   here you can see that we have some text with our  address phone number email address and some social   media icons here and in the right side here you  can see that we have a beautiful contact us form   and we have a send message button and if we now  scroll down here you can see that we have a google   map and this google map is working also and at the  last we have our footer now as i mentioned earlier   this website is completely responsive now for some  reason i hosted this website on a online server   so i have an opportunity to show you this  website from my mobile phone in real time as you can see that here we  have two different smartphones   and this is our home page and  here we have our awesome features and our popular course and this  course section is looking so beautiful   and then here we have our registration and our  form and then we have our community experts and then our footer now let's go to the top and  open our menu and let's go to our about us page   so this is our about us page we have some details  and we have our image and awesome features   and then we have our trusted buy now let's  go to the top and let's go to our blog page   so this is our blog page and here you  can see that we have some blogs here and we have our category and our  footer now let's open our first blog and this is our blog and here you can see that  we have our complete blog here and then we have   a button and our footer now let's go to the top  and open our menu and let's go to our course page   and here we have our all courses and our footer now let's open our first course and this is  our course details page here you can see that   we have our course image our course features  course name and enroll option and our footer   now let's check out our contact us page this is our contact us page we have some  details some icons and our contact us form   and here you can see that we have a beautiful  map here and this map is also working and our footer so that was our mobile responsive preview and  i will create this whole website a step by   step in a few parts and this is our part one  and in our part one we will create our home   page and we will make our home page  responsive for mobile and tablet as well   after creating our home page we will create our  about us page our blog page course page contact   us page in some other parts and after watching our  part 1 don't forget to watch our part 2 also link   will be given in the description so if you are a  beginner and want to learn html and css and how to   create a website from a scratch then this tutorial  is must be for you watch this complete playlist   and all the parts after watching all the videos  and parts i will assure you that you can create   your own website using html and css a step by step  now in a few moments i will show you how to create   this website but before we get started if you guys  are new in my channel then please please subscribe   like this video and press the bell icon for  the future videos and if you guys have any   question about this video please let me know in my  comment section that's it guys let's get started in my project folder here you can see that i have  a images folder i have an index file and i have a   style sheet and if i open this images folder here  you can see that i have a lot of images and i'm   going to use these images for creating our website  now let's open this folder with our vs code and guys here you can see that we have a simple  html boilerplate and in this boilerplate we have   linked our style sheet and we have given a title  for our this project and in our style sheet here   you can see that we have a link for our google  font and in our star we have margin 0 padding   0 and box size in border box and in our body we  have defined that google font which is poppings   and here you can see that we have some global tags  and under this global tag here you can see that we   have some h1 s pen and h6 it means the number of  h1 expand and h6 in my website will take the exact   styling that i am given here so  now let's go to our index file   and if i go to my website here you can see that  we have to create our this navigation bar first   here you can see that in the left side we have a  logo here and in the right side we have all these   nav links now we have to create this nav bar first  so for creating this nav bar let's go to our code   and inside our body let's create  a comment first and it will be   navigation that's it so here first we have to  create a nav tag for getting our navigation and   inside this nav tag we will create two part one  part will take our this logo and the second part   will take our this nav links okay so that's why  first we have to import our images so that we can   insert our logo so that's why let's take a image  tag and the source will be i have a images folder   and inside my images folder i have a logo dot  svg that's it now save and let's go to live   and here you can see that we have our logo here  now after our logo we have to add our nav links   so that's why let's create a div tag here and  the class name of this div tag will be navigation and inside this div tag we have to create an  unordered list and inside this another list   we have to create a list tag and then we have  to create an anchor tag for our nav links and   here it will be hash and the first nav link  will be home that's it now copy this one   from here and then paste it here four times  that's it and our second one will be about   and our third one will be blog and this one will  be courses and this one will be contact that's it   now save and go to our website and here you  can see that we have our all nav links here   now we have to install this nav links here  you can see that our this logo and our this   nav links is now in one column but i  want this two part to be in one row   and so for doing this let's go to our style sheet  but first we have to copy this nav here and then   let's comment out here and it will be  navigation so that we can understand this codes and paste the nav here and inside this nav here  you can see that we have two part one is our image   and another one is about this navigation div tag  so i want this two to be in one row so that's why   i'm using display flex and the flex direction will  be row that's it now save and go to our website   and here you can see that now our this navbar is  now in one row but now i want some space between   this logo and between these nav links so that's  why i will add justify content and it will be   a space between that's it now save and go to our  website and now here you can see that we have some   space between this logo and our this knife links  now we have to add some padding from left right   and top and bottom here so for doing this let's  go to our style sheet here and here i will add a   padding and the padding from top and bottom will  be one vw and from left and right it will be 8 vw   vw means view point width now save and go to our  website and here you can see that now we have   some space from left right top and bottom here so  after this one now here you can see that our logo   is now taking a lot of width and height now we  have to fix some width and height for this logo   so for doing this just copy this nav and  then paste it here and inside our nav   we have a image here we have image tag for  our logo so that's why let's take our image   and here i will give it width and which will  be 150 pixels that's it and i want this logo   to be a clickable logo so that if anyone click on  this logo they will redirect it to the home page   so that's why we have to make this clickable so  that's why i will add a cursor pointer now save   and go to our website and now here you can see  that our this logo is now taking 150 pixel width   and here you consider we have a cursor  here so that we can click on this logo so after this one now we have to install our this  nav links here you can see that the nav links is   now in one column here but i want everything  in one row so for doing this just copy this   nav from here and then paste it here then if i  go to my index file and here you can see that i   have a navigation class now copy this navigation  class and then paste it here and then inside out   this navigation we have another list now copy  this another list and paste it here that's it   and here in our another list we have to add  display flags because i want everything in one row   so that's why it will be display flex and justify  content will be flex and because i want this part   to be the end of the right side so that's why  it will be flex end and align items will be   center that's it now save and go to our website  and here you can see that our nav links is now   in one row so now we have some bullet points  here and we have to remove them so for doing   this just copy this ul and inside this ul we have  some list tags now we have to remove the bullet   points so that's why it will be listed style none  now save and here you can see that we don't have   any bullet points anymore and now i want to add  some space between these nav links so that's why   let's add a margin left and the  margin left would be 30 pixel now save and go to our website and now here we  can see that we have some space between these   nav links now after this one we have to fix this  anchor tags we have to remove the underline so   for doing this just copy this ally and nav  from here and then target our anchor tag   and i want to remove the underline so  that's why text decoration will be none   and let's give a color here and i will give a  rgb color and the color will be this one now   save and go to our website and here we can see  that we have removed the underline and we have   defined some color for these anchor  tags now i will give some font width and   font size so let's give font size first  and the font size will be 16 pixel and i'll give a font width and the phone to it  will be 500 that's it now save and go to our   website and here you can see that now we have our  this nav links here now i want to add hover effect   on this nav links so for doing this just copy this  ally and the anchor tag from here and then paste   it here then we have to add whole bar so whenever  i will hover on our this anchor tag i want to   change the color of this text and the color  will be this one that's it now save and go to   our website and if i now over here we consider  our color is now changing but this color is   changing so fast i want a smooth changing so for  doing this let's add a transition and transition   will be 0.3 second is that's it and then now here  you can see that we have a smooth changing here and now here we can see that our this  logo and our this nav links is actually   aligned on the top here i want these two to  be aligned in the center like here not on   the top so let's go down navigation and here  you can see that we have to give align items   and it will be center that's it now save and  here you can see that now this one and this   one is now aligning in the center that's it so  after this one now i want to give a box shadow   underneath this never so that it looks more alive  and more good so that's why let's add a box shadow and a box shadow from x value it will be 2 pixels  from a y value it will be 2 pixel and for the   radius it will be 10 pixel and we have to give  a rgb a value and it will be zero zero zero and   zero point one five now save and here you can see  that we have a small work shadow underneath this   network and this is looking so beautiful so here  you can see that we have done without this network   and after this navbar we have to  create our this home section we have to   create our heading our this paragraph and we  have to create our this two beautiful button   and we will also add a background image  so for doing this let's go to our code   and in our index file here we have to  first comment out and it will be home that's it so now let's create a section here and  let's give the id for this section and it will be   home so first here we have to create a s2 for  our home and just copy this heading from here   and then paste it here and then  we have to create a paragraph   just copy this paragraph from here and paste it  here that's it so after our paragraph now we have   to create our two buttons so for creating  this two button we have to create a div tag   and here i will give a class name for this div tag  and the class name of this div tag will be button   and inside this button diff tag we have to create  two buttons so that's why let's create the first   one and this one will be hash and the first one  will be learn more that's it and now copy this one   and then paste it here and this  one will be visit courses so visit   courses that's it and here let's give a class  for this first one and the class will be blue   because here you can see that our this button is  actually blue so that's why we have to define a   class here and it will be blue now let's define  the class for the second one also and this one   will be yellow that's it now save and go to our  website and here you can see that we have all   this heading our paragraph and our this two button  here now we have to add a background image in the   background so for doing this just copy this  home id from here and go to our style sheet   and comment out first and it will be home  that's it and paste our id so this is the id so first i will add a background image so  that's why let's take our background image   and here it will be linear variant and here  we have to give two rgb value because if we   go to our website here you can see  that we have two rgb value here   one in the top and one in the bottom here  so that's why let's take our first rgb value   so our first rgb value will be this one  now we have to add another rgba value   so let's add this one and our second rgb value  will be this one that's it now here you can see   that we have two rgb value and then now here we  have to define our image so now let's take a url and i have to go to my images folder and inside our images folder i have a back dot  jpg that's it now save and go to our website   and here you can see that we have a background  image now this background image is now taking the   height for our this text here now i want this  background image to take the full width and height   so that's why we have to give with an  height and which will be 100 percent   and our height will be 100 vh now save and go  to our website and here you can see that our   this image is now taking hundred percent with  100 vh height now i want this background image   to be in the center here you can see that we  have our background image but this background   image is actually showing the left right or right  bottom here so i want this one to be in the center   so that's why first i will add background size  and it will be covered and the background position   will be center that's it now save and here you  can see that our background image is now taking   perfectly in the center here like our this one so  after adding our background image we have to bring   this text in the center now everything is actually  in the left side in one column i want everything   in the center so let's go to our home and here i  have to add display flags and the flex direction   will be column and justify content will be  center and the airline items will be also center   now save and go to our website and here you can  see that now everything is in the center here   but this paragraph is not in the center so we have  to add another property which is text aligned and   it will be center now save and go to our website  and here you can see that now everything is now in   the center here so here you can see that our this  text is not actually visible so we have to change   the color of this text and our this paragraph  is taking the full width but i want to give some   specific width and height for this section for  this paragraph so now let's go to our home here   and copy this home and here you can see that  we have a s2 and let's target our s2 first   so first i will give a color and i will give white   and then i'll give a font size  and the font size will be 2.2 ram and then i will add a letter spacing and the  letter spacing will be one pixel now save and go   to our website and here you can see that we have  our this text here and now this text is looking   beautiful so after this one we have to target  our paragraph so let's just copy this section   and then paste it here and instead of s2 it will  be paragraph so first i will give a width and   which will be 50 that's it and the color will be  white and our font size will be 0.9 ram that's it   and i'll give a line height here  and the line height will be 25 pixel that's it now save and go to our website and now  here you can see that our this paragraph is now   taking 50 width and this is in the center here so  after this one so if i now scroll here you can see   that our this navbar is not actually fixed on the  top it is actually going under the screen now i   want this network to be fixed like our this one so  for doing this let's go to our code and let's go   to our nav here if i go to our nav and here first  we have to give position and it will be fixed now save and go to our website and here you  can see that our network is now fixed but   this is not taking full width so let's give a  width here and it will be 100 and we don't have   any background color so that's why  let's give it background color also and the background color will be white now save  go to our website and here you can see that our   this section is now taking hundred percent  width and we have a background color also   so now after fixing the navbar here you can see  that our this text is not actually aligning in   the center of this screen so now i will add some  padding from the top here so let's go to our   home and here we have to add a padding  here and the padding top will be 40 pixel   now save and go to our website and  here you can see that now it is in the center so after this one now we have to establish  these buttons so let's go to our home and   copy this home id and then let's target  our anchor tag first i will remove the   underline so that's why text regression will  be none and then i will give you a font size and the font size will be 0.9 gram  then i will give you a padding   padding padding from top and bottom will be 13  pixel and from left and right it will be 35 pixel   and then let's give a background color  and the background color will be white   then i will give you a font weight  and the font to it will be 600   now save and go to our website and  here you can see that we have our this   buttons here now for these buttons i want to add  some border radius so let's add some border areas and the bottom radius will be 5 pixel now save  and here you can see that we have a small border   radius here so now here you can see that after  adding some padding and some styling these buttons   is now actually on the top of our this paragraph  but i don't want this now i will add some padding   or margin from top of these buttons so let's go  to our code here and then just copy this form and   then paste it here and if i go to my index here  you can see that we have a button class now copy   this bottom class and then paste it here and here  i will add a margin top and it will be 30 pixel   now save here you consider now we have some space  from the top here now after adding some margin   i want to add some effect here on these buttons  like our these buttons so for adding these colors   just copy this one and then paste it here so now  first we have to install our blue button so let's   try it let's add the blue class and here for this  blue button i will add a color and the text color   will be white then i will give a background color  and i will add a rgba value and rgb value will be   this one now save and here you can see that we  have changed the color of our this button now   i want to add hover effect so just copy this and  then paste it here and here we have to add a hover   so if i hover on our this button i want to change  the background color and our background color   will be white and our text color will be this  one so that's why i will first remove this one   and paste it here and our background color will  be white that's it now save and go to our website   and if i now over here you can see that  we have changed the background color   now let's copy this one and we have to  add hover effect for our yellow also   so instead of blue it will be yellow that's it  now copy this here though and then paste it here   now for the yellow the color will  be this one but we have to change   the background color and the background color  will be this one and if i hover on our this   button i want to change the color and bottom  background color so our color will be this one and our background color will be white that's  it now save and go to our website and we have   changed our background color and if i know over  here you can see that so if i hover here you can   see that our color is changing to a yellow color  the text color but i want a different color i want   this background color in my text here so just  go to our color and copy this color from here   and then paste it here now save and go  to our website and if not over here you   can see that this color is now looking  good so let's add some transition here   and it will be 0.3 second piece now copy  this transition and paste it here also   now save and go to our website and if you  know over here you can see we have a smooth   over effect so guys here you can see that  we have successfully created our home page   and our this header using html and css now  after this one we have to create our this   awesome feature section so for creating this one  let's go to our code here and in our index first   we have to comment out and it will be features  that's it and here we have to create a section   and we have to add a id here for  this section and it will be features and inside these features first we have to create a heading so  as well as take a h1 and h1 will be awesome   features that's it and then we have to  create a paragraph tag so just go to our   website and copy this paragraph from  here and then paste it here that's it so after this paragraph if i now go to our  code here here you can see that we have   three card here one two and three now you have to  create these cards so now let's create a div tag   and the class name of this  div tag will be features   base that's it and here first we have  to create our first card so that's why   let's create a div tag and the class name of  this card will be fear it means feature box   that's it so here first we have to add a icon  here here you can see that we have a icon font   awesome icon so for adding the font or some icons  to our website first we have to add a cdn link   from font awesome icon so that's why let's create  a new tab and here we have to search phontosome cdn that's it and here we have to  select the second one which is setup and if you now scroll down here you  can see that we have a link here   for our this font awesome now copy this link from  here and go to our html and here we have to paste   the link that's it now we can add as many as  font awesome icon we want to add in our website   so let's go to our font awesome  and let's go to our icons here   first i want to add our this icon so that's why  let's search this one and it will be graduation so here you can see that we have a  icon here now just click on this icon   from here we have to copy the tag and go to our  code and paste it here that's it so after our this   icon we have to create a h3 and if i now go to  our website just copy this h3 from here and then   paste it here then we have to create a paragraph  tag and they just copy this paragraph from here and then paste it here now  save and go to our website   and here you can see that if we scroll down we  have a heading here we have a text and we have   another card here here you can see that we have  a card but here you can see that we have actually   also inserted a icon here but this icon is not  showing but here you can see that we have icon   now we have to actually go to our html and from  here we have to actually remove the integrity and   this cross origin from the link now save and go to  our website and now here we consider we have icon   here so now after adding our these things we have  to style this one so that's why let's go to our   code here and therefore installing just copy these  features id from here and here first we have to   comment out and here we have to add the  id of our features that's it and here in   our features first i will give a padding  and padding from top it will be 5 vw from   left it will be 8 from bottom it will be 0  from right it will be 8 that's it now save   and go to our website and we have some padding  here from top bottom and the left and right   so after this one i want this text to be in the  center in the align center so that's why let's   add text align center now save and here you can  see that we have now everything in the center here   so after this one we have to install our this card  so for restarting these cards let's go to our code   and let's go to our index file and here you  can see that we have a fee box here now copy   this fee box class from here and then paste  it here but before you have to add this one that's it and here we have to give a background  color so the background color with this one and   then we have to add text addon and a text align  will be a start now save and go to our website   and here you can see that we have our these  sections here and then now here you can see   that we have a different background color here for  this card and the text is now in the start here   now we have to install our this icon  about this heading and our this paragraph   so for doing this just copy this classes and then  paste it here then we have to target our iteg   and here i have to add a font size  and the font size will be 2.3 ram   then i have to add a color and the color will be a  rgb value that's it now save and go to our website   and here you can see that we have this icon so  after this icon we have to target our h3 for   our heading now copy this section and then  paste it here instead of i it will be h3 and here first i will give a font size and  the phone size will be 1.2 ram then i'll give   a phone to it and the phone to it will be 600  then i have to give a rgb color also here and   the color i will just copy this color  from here and then paste it here it will be 59 and here it will be 46 and 46 and then let's add a padding here the padding from  top it will be 13 pixel from left it will be zero   from bottom seven pixels from right  zero now save and go to our left side and here you can see that we  have this heading here so after   this setting we have to install our  paragraph also so just copy this section   and then paste it here and here  instead of h3 it will be paragraph and the phone size will be one ram  and the phone to it will be 400   and we don't need any padding here and we have  to give a color and the color will be a rgb value   that's it now save and go to our website and  here you can see that we have this text here   so after restarting one card now we have to create  two more so that's why i just copy this div from   here and then paste it two times now save and go  to our website and here you can see that we have   now three cards and now i will actually change the  icons for these two and change the heading also that's it now save and go to our website and here  you can see that we have now different icons and a   different heading here so now this card is now  in one column but i want these things to be in   one row so we can use flexbox and we can also use  grid and here in the network we have already used   flexbox now i want to add a different method so  that we can actually make these things in one   row using a different method like grid so that we  can align these things in one row so let's do this   let's go to our style and copy this features id  from here and go to the top and paste it here   that's it and then we have to go to our index  here and actually inside our fee base we have   this three card now we have to target  our this parent which is free base   and then paste it here that's it now i want to  use display grid so that's why i use display   grid that's it and i want to give the width  minimum width for this cards so let's give a grid   template columns that's it and here i want  to repeat and i want these three cards to be   responsive also so that's why we have to add auto  fit that's it and here we have to add a function   and it will be mean max now i have to define a  width for each of these cards and these cards will   take 320 pixel and this 320 pixel will take one  frame okay so this section is actually for only   one card and i want this style to be for other  cars also so that's why i have to use repeat okay   and after adding this one now i  want to add some space between these   cards so that's why we have to add a grid gap here  and the grid gap will be one level that's it now   save and go to our website and now here you can  see that we have these cards is now in one row   here and this card is now taking 320 pixel and  this cards will also be responsive in our tablet   and in our mobile screen devices so that we don't  have to write any other code for this section okay so now here you can see that we don't have any  space from the top of this section so that's why   let's add a margin top and a margin top will  be 50 pixel now save and go to our website   and here you can see that we have  now a space from the top here   now i want to show you that this section is  responsive so now if i inspect my website   and here you can see that our this section  is now responsive here and they are taking   full width and height for this one column  and one row so that's it now let's go back so guys here we consider we have  created our this awesome features also now if i go to my website and here we  have to create another section which   is our popular courses so now let's  create this one let's go to our index   and let's comment out first and it will be courses and then let's create a section here and  then let's give a id and it will be course that's it so here also first you have to create h1  for our heading and we have to create a paragraph   so i will simply copy this section from this one   this h1 and paragraph that's  it and the heading will be this one just copy this from  here and then paste it that's it   now save and go to our website and here  you can see that we have our this text here   so after this one now we have to create our this  course cards here so for creating these cards   let's go to our code and underneath this paragraph  let's do the deep tag and the class name of this   div tag will be course box this will be a parent  div and inside this parent if we will add our   this child courses so let's create our first card  and the class name of this card will be courses   that's it and inside this card first we have to  insert our image so here we have a images folder   and inside our images folder i have a c1  image it means course one image that's it   so after our image now we have to  add the details for this course   also so let's create a div tag and the class  name of this div tag will be details that's it   and if i now go to our website here you can  see that first we have a date and we have the   course name and we have some stars here so just  copy this one from here and then go to our code   and here first we have to get a spam tag and  paste the line here and then we have to create   a h6 for the name of our course now copy this  course name from here and then paste it here   then we have to create another div tag for  our stars now class name will be a star now here we have to add a icon from our font  awesome icon so let's take a i and here we   have to give a class class for our star and it  will be fast for star that's it now save and   go to our website and here you can see that we  have our image for our course we have our date   we have our course name but the star icon is not  showing and yeah here you can see that this will   be actually a space not dash now save and go to  our website and here you can see that we have a   star icon here now we need four more so that's  why just copy this one and then paste it three   or four times now save and go to our website and  here you can see that now we have five star here   so after this one we have to add a number here  and this number actually indicates how many people   or how many students are actually enrolled this  course so that's why we have to add this one also   so here i will add aspen tag and inside  this suspender we have to add the number now save and here you can see that we  have that number here so after this one   if i now go to our website  here you can see that we have a price tag here also we have a price  tag and we have to create this one also   so let's go to our code so underneath this  div tag we have to create another div tag   and the class name of this div tag will be  cost that's it and here we have to add a   price tag and it will be dollar 49.99  that's it now save and go to our website   and here you can see that we have that price tag  here so now we have imported all the necessary   information for this course now we have to style  this course here and we have to install these   tags also so let's go to our code here so first we  have to add a space here so that we can understand   that div here and this one that's it  so now first we have to copy the course and here we have to add a comment  here and then paste it the course id   that's it first i'll give a padding and padding from top it will be eight from left  it will be eight from bottom it will be zero and   from right it will be eight  now save and go to our website   and we have some space from  left right top and bottom and i want to align all the text in the center   so now everything is now in center now we have to  fix the image this image is taking so much space   out of our screen so we have to give a  specific width and height for this image   so copy this course here and then paste  it here and if i now go to my index   and here you can see that we have a courses class  now copy this courses class and then paste it here   if i now go to our website here you can see  that the text is actually in the center but   i want this text to be in the start so that's why  we have to add text align and it will be a start   then i have to give a background color a different  background color and a color with this one   and i want to take this height 100 percent that's  it so now let's target our image we have to fix   the image and it will be image here that which  will be 100 and the height will be 60 then i   will give you a background size and it will be  cover and background position will be center   now save and go to our website and now here  you can see that our image is now taking full   width and height of this screen and we don't  have any scroll bar from the bottom here also   but we have to actually give the same width and  height which we have given here so and here we   have only one card now and i will add this also so  now i will also add grid here so that everything's   stay in the row so that's why let's go to our code  here and copy this course and then paste it here   and if i now go to our course box which is our  parent now copy this one and then paste it here   and i will simply actually copy the grid  which we have created here and paste it here   now save and go to our website and here you can  see that this is still taking the full width   and height it's maybe because we don't have  any other cards here so let's go to our code   and then let's add some other cards here  now copy this card and then paste it here   here and here that's it  now save and go to our code okay this is not changing now you have to fix  the problem here if i now go down a style sheet   okay here we have to give a dot here because  course box is actually a class and i forgot to   give the dot now save and go to our website it  should work now yeah this is not working we have   all the cards here so after this one now we have  to install our this card details so for installing   these things let's go to our start sheet now  copy this and then paste it here then we have   to target our this details class and then paste it  here and now here we have to add some padding and   the padding from top 15 pixel from left 15 pixel  from bottom 0 from right 15 pixel now save and go   to our website and here you can see that now you  have some space from top bottom and left and right   and from here i don't want to style our this date  and our this course title i want to install our   this as stars so that's why just copy this  section and paste it here and here we have   to target our i tag that's it and here we have  to give a color and our color will be this one   and then let's give phone size and the font size  will be 0.9 ram now save and go to our website   and here you can see that now  we have our these are stars here so after all these details now we  have to install our this price tag   so for us telling this one just copy  this one from here and then paste it here   and here instead of details it will be cost that's  it and here first i will give a background color   and our background color will be a rgb value and  then i will give a text color and it will be white   then i will add a line height  and it will be 70 pixel and then i have to give a width  also and it will be 70 pixel we have to give a height  and it will be also 70 pixel   now save and go to our website and then now  here you can see that we have our price tag   and i wanted this text to be in the center  so here you have to add a text align center   and then here i will add a border radius and it  will be 50 percent now save and go to our website   and here you can see that it is now taking 50  percent border radius and i want to place this   tag in here not in the bottom of this card  so for placing this price tag here we have   to add position absolute so that we can move this  thing inside the card so that's why we have to add   position and it will be absolute and here i have  to give a right value because i want this one to   be in the right so that's why we have to give a  value from the right side and it will be 15 pixel now save and here you can see that our this price  tag is actually out of the screen it should be in   the here because the price tag is actually acting  for the screen not for the card so that's why we   have to go to our card here which is our courses  and here we have to give a position relative   now save and here you can see that we have our  this section here now i want this one to be   here so that's so you have to add a bottom  or top value so let's add a bottom value and from bottom it will be 100 pixel  now save and go to our website and   here you can see that our this price  tag is now in the perfect position   so now here you can see that we have created our  this course section now we have to add two more   card here so for adding this two more just  copy this one from here and paste it two times   now save so now here you can see  that we have our six course card here   and now i will change the image and so for doing  this let's go to our code and change the images so now i have changed the images  now save and go to our website   and here you can see that we  have six different images for   six different card you guys can actually change  the heading also the course name also but i don't   want to do this so here you can see that we  have done with our this course section also   and after our this course section we have  to create our this registration section also   we have a heading here and we have a time or  date whatever it is and then we have a small   form here and we have to create this form so for  creating this section let's go to our code here and here we have to comment out  first and it will be registration that's it and here let's create a section and we  have to give a id here and id will be registered and here inside this registration i want  to create two part two separate part one   part will actually take this section our this  text and our this time and our another part   will take this form okay so  let's create two div tag here   and the class name of our first div tag will be  reminder and here we have to create another div   tag and the class name of this div tag will be  form that's it now inside our reminder div tag   we have to create a paragraph first so  for the paragraph just copy this one and then paste it here then we have to create h1  so for the h1 copy this one and then paste it here   so after our this one we have to create our time  we have to create four boxes for a small boxes   so let's get a div tag and the  class name of this dip tag will be   time and here we have to create a div tag and  the class name of this div tag will be date   so this div tag will be for our  date so it will be 18 days actually so now save and go to our website and here you  can see that we have our paragraph heading and   18 days here but i want to break the line here  after 18 so that's why let's create a br it means   break tag that's it so now just copy this one and  paste it three times and here it will be 23 hours 0 6 minutes and a 58 now save and go to our website and here you can  see that we have all the date here so after about   this date now we have to create our this form  so for creating this form let's go to form div   and here inside our form we have a heading here  which is create free account now and we have to   create a h3 tag and paste the heading inside the  h3 so after our heading we have to create our this   sections here we have to create the input  section here so let's create our input   and type will be text and here we have to add a  placeholder and our first one will be for our name   now copy this input section  and paste it two more time and our second one will be  for our email address email   address and our third one will be for phone number  now save and go to our website and here you can   see that we have our form here we have our heading  and we have three section here for input and then   we have to create a button here so for creating  the button we have to actually go to the top let's close this section here in our home we  have a button div tag just copy this bottom   div tag close this one this one this one okay so  here we have to paste the button div tag and i   want only one the blue one so that's why i will  remove this one and here we have to add submit   form let's say now save and go to our  website and here we have this button here   so we have done our html for our registration part  now we have to go to our style sheet and we have   to start these things so for our styling just copy  this registration and first we have to count out and then paste the id here that's  it so first we have to add a padding   and the padding from top it will be 6  vw and 8 from left and 6 from bottom that's it now save and go to our website now here you can  see that here's some space from left right top and   bottom then i want to add the background image  so that's why let's add our background image   and again here i will add linear gradient  because i want to add a background overlay   of colors so that's why it will be linear  gradient and here we have to add a rgba value   so after our first rgb value we have to add  another one so this one it will be rgb also that's   it so now here you can see that we have added two  different rgb value now we have to add the images   so it would be url and here we have images  folder and inside our images folder i have a   image of actually sign up that's  it now save and go to our website   and here you can see that we have image here but  this image again is actually not in the center   exactly so we have to change this one and here we  have to add first let's give a width here and it   will hundred percent and let's give a height also  and it will be also 100 then background size will   be covered and the background position will be  center that's it now save and go to our website   now this image is now in the center exactly so  after this one here you can see that we have two   different part here one is our this date  and the one is our this email section   so now they are actually in one column but i  want in one row so that's why i will use display   flags and here i want some space from the  between so that's why it will be justify content   a space between then i will add align items and  it will be center now save and go to our website   and here you can see that we have two parts  here one is here and another one is here so   now here we have to style our these things so  first we have to install our this reminder part   so that's why just copy this illustration and  then paste it here if i go to my index here we   have a reminder class copy this class and then  paste it here first i will change the color of   all our text inside the registration and it  will be white that's it save whatever website   so now they are changed to white color  everyone we have to change this one also   so for changing this one just copy this one  and then paste it here let's target our h1 save   here you can see that you have changed the h1  color also now we have to establish this time   so for styling just copy this section from here  and go to our index and here you can see that we   have a time class now copy this time class and  then paste it here so i want this section this   time section in one row they are actually in one  column so again i am using this play flags and   i will add some margin top so that we can have  some space from the top and it will be 40 pixel   save and here you can see that they are in  one row and we have some space from the top   now next thing we have to do we have  to create that box here you can see   that we have to create these boxes we have to  create these beautiful glossomorphism boxes   so for creating these things let's go to our code  copy this section from here and then paste it here   then we have to target our date and then paste  it here so first i will do i will actually   align everything in the center inside these boxes  so that's why you have to add text align center   that's it and then i will add a padding  and a padding from top and bottom 13 pixel   from left and right 33 pixel and now let's add our  background and our background color will be rgb   that's it here it will be 255 255 255 and 0.25   now save and go to our website so guys here  you can see that we have a glass of result   effect here i want to look this more effective  so that's why i will add a box shadow a small   box shadow and okay let's first add a  backdrop filter so let's add a backdrop filter here and it will be blur 4 pixel it will  be inside this one now save that's it this is good   now i want to add a box shadow so that it looks  more effective let's add a box shadow and from x   it will be 0 from y 8 pixel and the radius will  be 32 pixel and it will be zero add a rgb value   it will be 31 38 135 that's it and now i will also  add a border radius and it will be 5 pixel and now   i want to add some a space actually between  these boxes so that's why let's add a margin and margin from top it will be 0 but from left it  will be 5 pixel from bottom 10 pixel from left or   right it will be also 5 pixel now save and here  you can see that we have some border radius and we   have some space here now i want to add a border  also and this border will make this boxes more   beautiful so water will be two pixel solid  white save and here you can see that we have   the border here okay not this border  i want to change the border color   and change the picture also and it will be  one pixel solid i want to add a rgb value   that's it this one now save and go to our  website yeah it is now looking more beautiful   okay let's give a font size here and the font size  will be 1.1 gram and let's give a font width and   it will be 600 and i will actually increase  the border radius and it will be 10 pixel   now save and go to our website so guys here you  can see that we have created our this boxes here   so after this one now we have to create our this  section our this form section so for creating the   form section let's go to our style sheet and just  copy this section from here and then paste it here   and here instead of reminder we have to  copy this form and then paste it here so for the form first we have to add a  background color and it will be white   then i have to add a border radius and it  will be 8 pixel and if i go to my website   here you can see that they are now in one  row but i want everything in one column   so that's why we have to add the display  flags and the live direction will be column now save and go to our website and here you  can see that we have background color white   and everything is now in one column now i want  some padding inside the section so that's why   let's add some padding and padding will be 40  pixels from everywhere now save and here you   can see that we have padding from far 40 pixel  now let's add a box shadow underneath this form and the box shadow i will simply  copy the worksheet from here and paste it here so after our this section  now we have to install our input sections   now copy this one and then just target about this  input element and first i will add some spacing so   that's why add a margin and it will be 15 pixels  from top and bottom left and right would be zero   then i will add padding inside the  input section and it will be 15 pixel   from top and bottom and the 10 pixel from  left to right and then i will add a border   and the border will be one pixel solid  and the color will be a rgb value   that's it and i don't want any outline so that's  why outline will be none now save and go to our   website and here you can see that we have our  beautiful input sections here like our this one   so we have done without this input now  you have to establish this button here   so for this button actually we have actually  pick the false class it will be yellow not   blue that's it and then now we have to actually  copy the blue styling from our here if we have here here here you can see that we have a  yellow section now just copy this yellow   and then paste it here just copy  this one and then paste it here and here also now save and go to our website  and then now here you can see that we have   our this section but now we have to add some  padding and more things so for those things   let's go to our section here again we  have to copy these sections from here   and then paste here that's it  now save and go to our website   and now here you can see that we  have our this button here submit form   now i want some space here from the top  of this button so for adding some space   let's go to our code and just copy this one  and then paste it here and if i now go to my   index here you can see that we have  a button just copy this button class   and then paste it here then i will add  a margin top and it will be 20 pixel   now save here you can me consider now we have  our space here from the top and now i want to   actually have style about this placeholders here  you can see that we have actually a little bit   different placeholder from this one so for  changing the placeholders just copy this one   and then paste it here and here we have to add  placeholder that's it so for the placeholder i   will add a different color and it will  be this one and here i will add a phone   to it and it will be 500 and here with the  font size and the font size will be 0.9 ram   now save and go to our website and here you can  see that we have changed our placeholder as well   so guys here you can see that we have successfully  created our this registration form and after this   registration form now we have to go to our  website and here we have a profile section   our community experts now we have to create this  section also so for creating this one let's go to   our code and here after this illustration  let's comment out and it will be profiles let's clear a section here and let's  give id also and id will be experts so first we have to add h1 for  our heading and our this paragraph   so i will simply go and open this code  section just copy this h1 paragraph and paste it here so for the  h1 it will be community exports that's it now save and go to our  website here you can see that we   have our community experts and our paragraph  now we have to add our this profiles here   so for adding this one let's go to our  code and underneath this paragraph let's   create a div tag and the class name  of this div tag will be expert box and here we will create our first profile so  the class name of this dip tag will be profile   so inside the profile first we have to insert  an image and i have a images folder and inside   this images folder we have pro one that's it after  this one we have to add the name of this character   so the name will be this one paste it here then  we have to add a paragraph for the designation or   this one so after this one we have to  create a div tag for our social media links   so the class name will be pro links and  here we have to add some font awesome icons   so it will be i and here we have to add  some classes and the class will be fab f facebook so first one will be facebook  now i will simply copy this one   and paste it two more time  and it will be instagram and it will be linked in iron here it will  be facebook dash f that's it now save and   go to our website here you can see that we have  our this image here and we have our name and we   have our this python and algorithm expert and  we have our this social media links here so we   have created our this section we have created our  first profile so i will simply copy this profile and paste it three more time now save here you can see that we have now  four profile here so now we have to style   this section our expert section so for  starting this one just copy this experts   and go to our style sheet  first we have to comment out now we have to add this id here that's it so  for the experts first we have to add a padding   padding from top it will be a tpw left hvw   bottom zero and from the right it will also hit  vw and i want every text to be in the center now save and go to our website so  now everything is now in the center   so after this one now you have to ask allow  this profile section so just copy this experts   and then paste it here then we have to copy  out this expert box which is our parent box   and here i will use grid section so that  we can align these profiles in one column   so we have to find the grid column which we have  created first here now this one just copy this one   and then paste it here that's it and display will  be great but this time i have to decrease the   width and it will be 250 pixel that's it rest  will be same now save and go to our website   and now here you can see that they are in  one row so now i have to add a background   color for this profiles so for adding background  color just copy this one and then paste it here   then we have to target our profile now  copy this profile and then paste it here first i will give a background  color and the color will be this one   and i will add some padding inside this card so  that's why padding will be 30 pixels from top   and bottom and 10 pixels from left and right  save and here you can see that we have some   different background color here and we have  some padding from top bottom left and right so here in our website i don't want to change   or i don't want to add a style for our this  name and how this text but i will style out this   rulings so that's why just copy this one and then  paste it here then target our pro links this one   and then paste it here or simply i can actually  target the true link we don't need to target whole   thing so here i will add some margin top first  i want some space from top it will be 10 pixel   and then copy this one again and then  paste it here then target our eye tag so first i will add a padding and the  padding will be 10 pixels from top and bottom   13 pixel from left and right then i will add  a border and the border will be one pixel   solid and i will add a rgba value this  one and the cursor will be pointer   and then now save and go to our website  so here you can see that we have changed   the styling for about this section now i  want to add hopper effect whenever i will   hover on our these links or this icon  i want to change the background color   so for this one just copy this one and then  paste it here here we have to add a hover that's it and if i hover on our this button  i want to change the background color so   this way let's add a background and background  color will be actually this one this rgb value and i will change the color of our icon and  it will be white that's it now save and go to   our website and if i now hover here you can see  that our background color and our this color is   now changing our font color is now changing now i  want a smooth transition so that's why let's add a   transition here and it will be 0.3 second piece  now save and go to our website and if i know   however we have a smooth transition here and this  is not looking good so here you can see that we   have also successfully created our this profile  section now i want to change the profile images   and profile name so for doing this let's go to our  index so now i have simply changed the images and   the profile name and the designation now save and  go to our website and here you can see that if i   go to my website here you can see that we have  changed the images and we have changed the name   and our this designation here so guys we have  successfully created our this profile section   now we have to create our this footer so  for creating the footer let's go to our code   in our index file and here we have to create  a footer that's it here in the footer i will   actually divide the footer in four or five columns  one two three four and five so five columns for   this footer so let's create the first column and  the class name will be footer column that's it   so first we will give a heading for every and each  of this column and the h3 will be top products   and here i will add some list tag and our first  list one will be this one and then paste it here   second one will be this one paste  it here third one will be this one paste it here and our fourth one will be this one now save and go to our website here you can see that we have our heading and our  this list here so now we have done with our one   column and i will now create our this three also  so let's go to our code so now here you can see   that we have created other three columns now save  and go to our website and here you can see that we   have four columns here so guys here you can see  that we have created our four columns here now   we have to create our this newsletter section  so for creating this one let's go to our code   and here we have to create another div tag  and the class name of this div tag will be   footer column that's it and here we have  to create a as3 and it will be newsletter and here we have to create a paragraph  and our paragraph will be this one and then we have to get a tip tag and  the class name of this div tag will be   server skype and then here  we have to create our first   this input section and then we have to create  our this button so let's get a input section   and type will be text and here we have to give  a placeholder and here you have to write your email address and then we have to create anchor  tag and this one will be hash   and the name will be subscribe and here we have  to give a class and the class would be yellow   because i want to use a button  now save and go to our website   here we can see that we have our newsletter  our text our email section and our button here   so after this one now let's install  our this footer so for restarting the   footer let's go to our but first we have  to copy the footer tag from here and then   here you have to comment and then paste the  footer id so let's add a padding here first   and the padding from everywhere it will be  8 vw and then let's add a background color and the color will be this one now save and go  to our website and here you can see that we have   added a color for our footer now these sections is  now in one column but i want everything in one row   so that's why i will use display flags and  then here we have to add justify content and   it will be a space between because i want some  space from the between align items will be like   a start and then i will add a flag slab because  whenever we don't have much space and i want to   break things apart so that it can break in the  next line so that's why it will be left now save   and go to our website and here you can see that  now everything is now in one row and now we have   to install these things so for us telling these  things first we have to add some padding from   the bottom so just copy this footer and paste it  here and then we have to target our footer column paste it here so i want the padding  bottom and it will be 40 pixel and then we have to copy this footer again  and then paste it here then we have to target   our headings in the inside the footer so  i will change the color of our this h3   so let's add a color and it will be a rgb value  and here i will add a font to it it will be 600   and padding bottom here and it will be 20 pixel  now save and go to our website here you can see   that we have changed the color of our this  heading and we have added some space from   the bottom now we have to target our list text  so just copy this footer and then paste it here   so i get our ally i don't want any bullet points  so this touch type will be none then i will give   a color of this text and the color will be this  one that's it and i want some padding from top   and bottom so that's why padding from top  and bottom will be 10 pixel from left and   right will be zero then add a font size and it  will be 15 pixel and i want to click this text   so that's why it will be cursor pointer now save  and go to our website here you can see that we   have changed the color of this text and now i  want to add hover effect in our this list tag so let's add hover and if i know however i  will change the color and the color will be our   this heading color now save and go to our website and if you know  how here you can see that we can change the color   now i want a smooth hover so that's why  we will add transition 0.3 second is that's it guys so after all this one now you  have to install our this section our newsletter   so for doing this just copy the footer first  and then paste it here first we will style   our this text so target our paragraph and here  we have to give a color color will be this one   that's it now copy the footer again and then  paste it here and if i now go to my index   here you can see that we have a subscribe class  now copy this subscribe and then paste it here   first i will add some margin top because i want  some space from the top and it will be 20 pixel   now we have to install our input section  that's why i copy this footer and it will be   input first i'll give a width and it'll be 220  pixel then i will add a padding inside the input   15 pixel from top and bottom 12 pixels from left  and right then i will add a background and the   background will be this one and i don't want  any border none and i don't want any outline   and i will change the color and it will  be white now save and go to our website   and here you can see that we have successfully  changed the color of this background and we   have given a width 225 pixel now we  have to install the subscribe button   so just copy this footer and then paste it  here and just copy this source subscribe also then we have to target our ad so for this  one just go to the top and we have already   created some styling for our these buttons in  our homes external i think so first we have to   copy this one okay simply  copy all from here that's it and then paste it here and i don't want the  blue one so that's why i delete the blue here we have to just copy this  one and they paste it here and here now save and here you can see that we  have our this subscribe button here and for the   button actually i don't want that much space from  left and right and i don't want this border radius   so let's fix these things and the padding  will be 12 pixel from top and bottom   and it will be 15 pixel from left and  right now save and go to our website   so yeah this is now looking good and i will  remove the border radius just remove this one so guys here you can see that we  have our subscribe button here   and i will change the subscribe button color from  here that's it now save and go to our website   and if i know over here you can see  that this button is looking good so guys we have done without this new slider  also now we have to add our this copyright   section and our this section here so  for doing this let's go to our index   and underneath this one we have to create a  div tag and the class name of this div tag   will be copyright so here first you have to  create a paragraph and the paragraph will be this one that's it now you have to create a div tag  and the class name of this div tag will be   pro links so for the links  here i will simply go to the   profile section and copy this div tag and  then paste it here because i want the same   styling now let's go to our code and here you can  see that we have our these sections here so now we   have to install these things so for studying  let's go to our code first copy the footer   and then paste it here then we have  to go to index and copy the copyright   and paste it here so first i will add  a margin top and it will be 20 pixel then i will add display flags  because i want everything in one row and justify content will be a space  between align items will be center and i will give a width here and i want to  take this section hundred percent with a height and i will wrap the flex if  we don't have any space left   now save and go to our website here we  consider your text and our this section here   now next thing we have to do we just have to  go to our style and find out the pro links   here you can see that we have a pro links  now copy this four links and paste it in here   so for the copyright section  you have to paste it here here and here and i don't want  any margin top and it will be zero   and in our this eye section here i will simply  add a background color and the color will be   this one and i will add a font color and color  with this one that's it and if i now homework   i want to change the background color and the  text color our background color will be this one   and our text color will be this  one now save and go to our website   and if i now cover here you can see that  our this section is now changing its color   so for the copyright paragraph i  will change the paragraph color also   just copy this section from here and then  paste it here then target our paragraph   color will be white now save and here you  can see that we have changed the color   and the guys here you can see that we have  successfully created the footer section also   now if i scroll to the top here you can see that  we have created our navigation bar our home page   our awesome features our popular course our  registration and then experts and footer   now before we moving into our responsive part we  have to check out if everything is okay or not   so here you can see that our network is okay  and it is fixed and our home section is also   okay our hover effect is also working well and  they finally scroll down here you can see that   we have our awesome features and we have some  space here underneath this awesome features   and we have to actually maintain the same space  in every section and here you can see that   our popular courses and this course and  our these details is also looking good   if i scroll down our this courses is  actually going on the top of our network   now we can't see our network completely and here  you can see that we don't have any space between   these sections between our this course section  and our this registration section now we have to   add some space here between these two section and  if i now scroll down here you can see that again   we don't have any space between this our expert  section and our footer section now we have to add   some space here so we have to add a space here and  here also and then we have to fix this never and   our this course section so for fixing these things  let's go to our code and if i go to the top here   first we have to fix the network now in our  navbar i will use z index and it will be   999 and if i now save and go to our website and  if i scroll down here you can see that our code   section is not going on the top of our network  now it's completely working fine so after this   one now we have to add some space underneath this  course section so let's go to our course section so in our course section here you can see that  we have padding padding top 8 left 8 right 8 but   for the bottom we don't have any space we don't  have any padding so that's why i will give the   8 for the bottom also now save and go to our  website and here you can see that now we have   a space at the bottom of our course  section so after this one we have to   add the same padding for our this community  experts now let's go to our expert section and here in our expert section we have to also add  8 vw for the bottom now save and go to our website   and here you can see that we have some  space at the bottom of our community experts   and yeah i think everything is looking good  now and everything is looking perfectly well   so now we have to jump into our responsive  part so for making this website responsive   just inspect the website and we will make our  ipad mode first so here you can see that we   are now in our ipad and in our ipad this is not  looking so nice we have to arrange these things   so for doing this let's go to our code in  our style sheet we have to add a media query so first we have to add a max width that's it and here we have to add a pixel  here you can see that we are now in 768 pixel   so we have to give it here i will give 769 pixel  so if i go to our website here you can see that   we have too much space from left and right in  our navigation bar so i want to decrease the   space so that's why just select the section here  and you will see a nav here so here you can see   that we have all the style which we have written  for our largest screen so these are the styling   now i will change some styling for our this ipad  mode so that's why we have to copy this turning   from here so for copying the styling we have to  just go to the section and just click right and   from here just copy the rule and then paste it  here that's it so i will simply add a padding here   not everything the padding it will be 15 pixel  from top and bottom and 20 pixel from left and   right now save here you can see that now we have  less space from top and bottom and left and right   and i want to decrease the size of our this logo  if i now select the logo here you can see that now   it is 150 pixel i will decrease the space so  that's why i copy that rule and paste it here   and it will be 130 pixel that's it i don't need  this one now save and go to our website here you   can see that we have decreased the space of our  this section of our this logo so actually in our   tablet mode or in our mobile screen device  i don't want this nav links to show here   in one row instead of this one i want to  see a hamburger menu here so if i click on   this hamburger menu then i want to show this nav  links not now so that's why first we have to add a   hamburger menu here so for adding the ham welcome  window first we have to go to our largest screen   and then go to our index here first collapse this  footer and this profile and let's go to our index   here in our navbar here you can see that we have  a div tag and underneath this another list we have   to add a hamburger menu so i have a image for this  hamlet menu so that's why let's take a image tag   and i have a images folder here i have a menu  image now save here you can see that we have a   hamburger menu but this hamburger menu is actually  now in the in one column with our this navigation   links but i want this one to be in one row with  our this links so for changing the aligning we   have to go to our star sheet and go to the top  here and from here we just have to copy the nav   and navigation and paste it here we will just use  display flex that's it so now here you can see   that we have our menu button in one row and now  from here we have to adjust the width and height   for our this menu button so for adjusting the  width and height we have to go to our index here   we have to give a id here and it will be menu  button that's it now copy this menu button id and then paste it here now i will give a width of  30 pixel then i will give a height also and height   will be also 30 pixel that's it now save and go  to our website and here you can see that we have   our menu button here so after our this menu button  if i go to my website and if i inspect the website here in our tablet mode if i click on our this  menu button here you can see that we have a   close button also now we have to import the close  button here also so for importing the close button   we have to go to our font awesome icon  and here we have to search for times here you can see that we have a close  button now just open this close button   and you copy the itec from here and go to our  index file and here on the top of our list we have   to paste the tag here now just go to our website  here you can see that now you have icon here   close icon now you have to start this one also  so for installing we have to give id here also   and the id will be menu close that's it so if i  now go to our website now initially in our large   screen i don't want to show our this close button  and now this menu button so i want to hide these   two in our large screen so that's why we have to  just copy this menu close and then paste it here   here i will add display none and copy  this display now and paste it here also   now save and go to our website here  you can see that now we don't have the   menu button and our menu close button here now if  i inspect the website and go to our tablet mode   then i want to show the buttons here so for  showing the buttons just copy these two from here   and go to our tablet mode media query and paste  it here remove this one and instead of display   now it will be initial now save here you can see  that we can see our this icon here menu icon and   now i want to place these nav links in one column  here so we have to select the section next section this one and now from here copy the rule  and then paste it here that's it here i   want everything in one column so that's why it  will be flex direction and it will be column and the justify content will be actually flex  start a line items will be also flex start now   save and go to our website now here you can see  that everything is now in one column now i want to   take this section from the navigation it means  i want to add some positioning of this section   so that's why let's add position not relative and  it will be absolute from top it will be zero and   from right it will be also zero now save and go  to our website here you can see that we can see   our this section in top zero and right zero  let's increase the size now you can see that   now i will give a width of this nail section  so that's why let's give a width here   and it will be 220 pixel and  i will give a background color   and it will be white here you can see that  we have a background color here now i want to   increase the height of this section so that's  why let's add a height and it will be 100 vh   save so now here you can see that it is taking  100 vh so now here i want to actually change   the background color of our this one so for  changing the background color here i will add a   rgb value and here i will add a backdrop filter  because i want to make this background like a   glass of morphism background so that's why  we have to add blur and it will be 4.5 pixel   and then i will add a border here and the border  will be one pixel solid color will be a rgb value   that's it now save and go to our website  and here you can see that we have changed   the color of our this background now we have to  change the color of our this links and we have   to add some padding and margin here so that's  why copy this section and then paste it here   so we have to target our ally  here i will add some padding   and the padding from top it will be 20 pixel from  left 0 from bottom 20 pixel from right 40 pixel   and i don't want any margin left so that's why  it will be zero now save and go to our website   here you can see that we have our this  section and we have some space here also now i want to change the colors so  for changing the colors copy this one   and paste it here and we have to target  our anchor tag the color will be white now save go to our website so you can  see that we have our this text here   now here in the section if i go to  my website here you can see that we   have the close button visible now we have  to make this here also so if i go to my top   here you can see that we have a menu close  here it will be display initial now save   here you can see that we have the close button  on the top and we have to install this one so for   installing this one let's go to our style sheet  here let's add a font size and it will be 1.6 ram and let's give a color and the color will be quite   let's add some padding here padding from top 30  pixel from left 0 from bottom 20 pixel from light   20 pixel now save go to our website here you can  see that we have our button here like this one   so now here you can see that we have created  our this menu now i want to close this menu if   i click on this close button so for doing this  i will add a simple jquery code so let's go to   our section and go to our index file and here  underneath this footer we have to create a script and here in our script first we have to take a  dollar sign and i want to close the section if i   click on the close button so that's why we have to  take the id from the close button and it will be menu close and now we have to add a  click function so that's why   we have to add click and if i click on  this menu close we will run a function now what this function will do okay now if i click  on this button i want to remove the nav section   from the screen so that's why if i go to my style  sheet here you can see that we have given right 0   if i give minus 220 pixel and if i now save here  you can see that our network is now gone okay   so we have to do the exact thing here for  now initially it will be minus 220 pixel   if i click on the menu button this button  i want to change the right position and the   right position will go back to the zero okay  so that's why i will simply copy this one   and then paste it here and here i  will add a class which is active in our active i will add write zero okay so if i  click on our menu button now this section is now   minus 220 pixel right if i click on this menu  button i want to add the active class and the   right button will be converted into 0 so that  the section will be come from the right side   here we can see this if i want to see the  menu i will click on this button i will   add the active class then we will see the  close section here if i click on the closed   section i will remove the active class so for  removing this one let's go to our code here   so this is our menu menu close so if i click on  the menu close i will remove the active class   so for removing the active class we have to again  take a dollar sign and we have to take this one and they paste it here that's  it then we have to remove class   and we have to remove the active class that's it  guys now we have done with our menu close now we   have to do the menu appear also so that's why  i paste it here and it will be menu button so   if i click on our menu button i want to add the  active class not remove the active class that's it   now save and go to our website save  here also now save and go to our website   and if i now click on the menu button here you can  see that it is not working because we are using   actually jquery so that's why we have to add  the jquery cdn also so just search here jquery cdn and open the first link from here and from here we have to pick the latest  version and we have to select the minified   and we have to simply copy the  cdn link and go to our html   and go to the top and paste it here underneath  the style sheet now save and go to our website   and if i now click on the menu button here you can  see that we have added the active class here you   can see we have active class and if i now click on  the close button the active class will be removed   if i now click on the close button here  you can see that the active class is now   removed if i click on the menu button active  class is here if i click on the close button   the active class is now removed now i want to  add some transition here so that it looks good   now go to our style sheet and  here we have to add a transition 0.3 second is now save and go to our website and  if i now close here you can see that we can see   the transition from left and right so this is  looking so beautiful so after our menu bar we   have to fix other things so first i will fix the  home section if i now select the home section   here you can see that our this paragraph  is actually let's select the paragraph   and it and it is taking 50 percent of  width now i want to increase the width   so that's why just copy the section from here  and i paste it here and i don't want to change   anything so delete this lines instead  of 50 percent it will be take 90 percent   save and here you can see that it is now taking 90  percent and if i now select the home section here here you can see that we have a padding 40 pixel  padding top if i remove the padding tab here you   can see that this section is actually go to the  top a little bit so that's why just copy the home   copy the rule from here and then paste it here i  will simply remove them because i don't want to   change anything from here but from the parent top  it will be 0 pixel not 40. now save and go to our   website now this is looking much better so after  all this one we have to go to our feature section   in our feature section we have so many spacing  from left and right now i want to remove the   padding so if i now select the section  here you can see that i have padding here   now simply copy the section copy the  rule from here and then paste it here from top it will be eight from left it will be  four from right it will be also full i don't want   to change the text align now save whatever website  so guys here you can see that this is not looking   good about this section so after this one we have  to decrease the spacing from this section also   here you can see that we have padding now copy  the rule from our course and go to the bottom and   paste it here so here you can see that we have 8  and from the left it will be 4 right will be also   four don't want to change the text line save and  go to our website here you can see that now this   is taking perfect and height so after this one  here you can see that we have extra space here   here and this space is actually causing for our  this registration section because this section is   actually going in the right side of the screen so  that's why we have to first decrease the spacing   just copy the rule from our registration and  paste it here don't want to change anything else   just change the spacing from left and right now  save go to our website here you can see that we   have less space here and here you can see that if  i break the box and bring it in the next line i   think we will have some space so that this section  can actually place or take the space so that's   why let's take the section here so this is the  section just copy the section from here and then   paste it here here i will add a flex wrap here  and it will be web now save here you can see   that now it is taking perfect a space here and  and we can see the last box in a new line so we   have done without this section and this section  looks good now i want to add some padding here   underneath this section so here you can see that  we have our expert section now copy the expert and paste it here here i will  add a padding here and it will be   4 vw now save here we can see that  we have now space at the bottom here and our photo section is also looking good  if i decrease the space you can see the rest of it   here you can see that now if i  select the section of our this one   i mean the pro links i want to add some  space from the top so let's try copy the   rule from here and then paste it here i will  add a margin top let's see 20 pixel now save   here you can see that now we have space 20 pixel  is too much less decrease and it will be 15.   yeah it is looking much better now so guys we have done with our  this section this section this one   okay i think we need to add some space  here also if i increase here you can   see that we don't have any space underneath  the course so let's go to our registration   and here at a margin top here and  it will be 8 vw that's it now save   here you can see that now we have a space here  so we have done with our this tablet mode now we   have to make this website for our smart screen  device also now let's go to our iphone 6 here   and yes we have another space  now we have to fix these things so for fixing this one let's go to our  styling and here we have to add another media   and the media will be max  width and it will be 475 pixel that's it so i think this space from the right  side is taking for our this registration card   here you can see that this restaurant card we  have to fix this thing now actually they are in   one row if we do this in one column this  should work so let's take the section that's it   now copy the rules from here and paste it here  so i don't want to change any padding or any   background or anything from here  i just want to add flex direction   enter the column and the justify content will be  center line item should be also center now save   it is now in one column and i hope  this is better and we don't have the   space from the right side  anymore now what i want to do is i want this boxes to be in center so that's why  just take the box and copy the rule from here and   paste it here flex wrap is okay justify content  will be center align items will be also center   now save here you can see  that now it is in the center   now we have too much space here on the top i  will decrease the space it will be 20 pixel   yeah now this is looking good and here you can  see that we don't have any space underneath this   last box so for the space i will add a  merging bottom and it will be 20 pixel yeah now here you can see that we have a space  here underneath this box and now i want this text   to be in the center also so that's why go to our  registration and here i will add text align center   now here you can see that  every text is now in the center so yeah guys here you can see that we have  created a responsive website using html and css   so this is our part one in our part one we  have created our this home page and we have   made this home page responsive for our tablet  mode and for our mobile screen devices also and in our part 2 we will try to create our  rest pages we will create the about page in   our next tutorial and we will make this about  page responsive for tablet and for mobile as well and i hope you guys learned  something new from this tutorial   and i hope you guys enjoyed this tutorial and if  you guys really enjoyed this tutorial then please   please subscribe like this video and press  the bell icon for the future videos and if   you guys have any question about this video then  please please let me know in my comment section   and that's it guys let's see you in our next part you

Channel: Tech2 etc

Views: 18,772

Keywords: tech2 etc, How To Make Website Using HTML & CSS, Educational Website Using HTML CSS, how to make an online course website, how to make website like udemy, how to make website for school, html css school project, educational project, html css website, website using html css, responsive website in html css, html css educational website, HTML CSS Website Design, Full Website Design, Computer Science, Computer Engineering, HTML Tutorial

Id: RamIl-pjGE4

Length: 113min 37sec (6817 seconds)

Published: Wed Sep 01 2021