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

Website Setup Service