Responsive Website Design Using HTML CSS & JavaScript | Educational Website | Part2

hi everyone in our previous tutorial we have 
created this beautiful homepage step by step   using html and css and after creating 
the home page we have made this home page   responsive for our tablet mode here you can 
see that we have our tablet mode version and   after creating the tablet mode we have created the 
mobile version also so this is the mobile version and now in this part we are going to 
create our this beautiful about us page   and in our about us page we have a background 
image we have a heading here and then we have   a beautiful image and some text here and 
our awesome feature section and then we   have our trusted by section also so in this 
part we will create this about us page and   we will make this page responsive for mobile 
and template as well and if you guys didn't   watch the part one yet link will be given in the 
description please guys check out the part one   also and in a few moments we will create this 
about us page a step by step using html and css   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 before we go to about us page first we 
have to do some work in our home page   if i go to my website here you can see that 
if i click on the home page here you can see   that the home link is highlighted and now i 
want to do the same for our this website also   so for doing this we just have to add a class 
in our network i will show you how to do that   here you can see that if i now hover our 
color is now changing so i will use the same   technique for highlighting the home section 
so let's go to our code here in our index   and here you can see that we have our network and 
if i now go to my style sheet and go to the top here you can see that if i hover on 
our nav links our color is now changing   so i will simply add another 
line here and just copy this one and then paste it here add a comma and 
here instead of hover it will be active   so here you can see that we are adding active 
class and now we just have to add this active   class in our home section of our index page here 
you can see that we have a list for home and here   inside this anchor tag we have to add a class here 
and the class name will be active that's it so   now save and if i go to my website and now here 
you can see that our homepage is highlighted   now if i go to my index again and here you can 
see that we have to add some address here for   different pages so currently i am now in my home 
page so that's why i don't have to add any address   for our home page but we have to add address for 
our these pages so now let's add the addresses so   for the about page i will create a separate index 
file so that's why the file name will be about dot   html that's it and for the blog page it will be 
blog dot html and for the course page it will be   course dot html and at the last for our contact 
us page it will be contact dot html that's it so we have done everything in our home page 
now we have to create our about us page   so that's why just create a 
new file type in control plus n   and now we have to save the file so 
for saving the file type control plus s and here now we have to give the name so for the 
about us page we have to create a about dot html   page that's it now for the about us page i 
will simply copy everything from our index   and then paste it here that's it now if i go to my 
website and now here you can see that the address   is showing index.html now if i click on the about 
us page here you can see that now the address is   now changed and it is about html so since i am 
now in my about us page i want to highlight the   about us page not the home so let's try let's 
go to our index not index in our about us page   and we have to remove the class name from 
home page to our about us page that's it now   save and go to our website and now here you 
can see that about us page is highlighted so now we have to start working on our 
about us page so let's go to our about us   page here so in our about our spreadsheet 
you can see that we have the same nav bar   same background i mean the styling and here 
you can see that we have a awesome feature   section common here and then our footer section is 
also common so from our about page i will simply   we need the nav page we need the home and we 
need the feature section also but we don't   need the code section so that's why delete this 
one and we don't need any registration on any   profile section also so delete these things also 
now save and go to our website now here you can   see that we have now only one section left so now 
we have to create the others so for creating the   others first we have to create this heading so 
let's go to our code let's go to our hero section   and from here i just need the s2 i don't need 
anything else so that's why i will simply teach   these things now save and go to our website here 
you can see that we have only our this heading   now i want to change the heading 
and the heading will be this one   about tech adoka so paste the heading here that's 
it now we have changed the heading also so after   this one now here you can see that our this 
background is taking full screen within height   but now here in we have a smaller height here so 
we have to fix this one so for fixing this one   we just have to go to our code and here it 
will be not home it will be about home okay   and now we have to add a styling for our this 
idea also so let's go to our style sheet here you   can see that we have our home i will simply copy 
the home styling from here and go to the bottom and underneath the footer we have to comment out 
first and it will be about that's it and i will   paste the home section here so from here i will 
simply copy the about home and then paste it here   that's it close the index file so first thing 
i will do i will change the background image   and it will be back one dot jpg that's it 
and from height it will be 60 vh now save   and go to our website so guys here you can see 
that we have decreased the height and we have   added a different background image and now we have 
to install our this heading so for styling the   heading just copy this one and then paste it here 
then we have a s2 here inside the about home id so first i will give a color and our color 
will be white then i'll give you a font   size font size will be 2.2 ram and then i will 
add a letter spacing and it will be one pixel   now save and go to our website so guys here 
you can see that we have created our this   background image and our this heading so after 
all this one we have to create our this section   we have a image here in the left side and we 
have some text in the right side so we have to   create the section so for creating the section 
let's go to our code and underneath the home   let's create another section here and let's give 
a idea also and the idea will be about container   that's it and in the about container 
i will create two different parts one   part will take our this image and the 
another part will take out this text   so let's create a different here and the class 
name for our part one will be about image that's   it and then we have to create another div tag for 
our text and the class name will be about text so in our about image we have to add a image 
here and i have a images folder and inside   the images folder i have a image here which is a 
dot png that's it now save and go to our website   and here you can see that we have now added 
the image so after the image now you have to   create our this text so let's go to our text 
div here and first we have to create a as2   so just copy the heading from here and then paste it here then we have to create 
a paragraph so for the paragraphs just copy   this one and then paste it here that's it and 
then we have to create our this two section   here you can see that we have some small images 
and then text paragraph and we have to create   this thing also so for creating this one let's go 
to our code and here we have to create a div tag   and the class name of this div tag will be about 
fee it means about features so first i will add   image and i have the images folder and inside the 
images folder i have a feature one image that's it   and then we need to create another div tag for 
the text so the class name will be feature text that's it and then let's get a h5 and 
for the h5 it will be 400 plus courses that's it and then i have to create a paragraph so 
paragraph will be this one copy and paste it here   that's it so guys here you can see that we have 
created one about feature now you have to create   another one so for creating the next one copy 
this section and then paste it here that's it   now if i go to my website here you can see 
that we have our image heading paragraph   our these images so now we have to start these 
things so for styling let's go to our code and   from here just copy the about container id and 
go to our style sheet and then paste it here   now if i go to my website here you can see 
that our this part and our this part is now   in one column but we want these things in one 
row so that's why let's add display flags and   we have to add align items center and then i 
have to add some padding here from left right   top and bottom and the padding from top it will 
be eight feet of from left 8 and from bottom to   from right it will be also 8 vw now save 
and go to our side here you consider now   everything is now in one row and we have some 
space from left right top and bottom here so after this one now we have to specify a width 
for our this part and we will also specify a   width for our this part also so just go to our 
code from here copy this id and then paste it here   go to our about and here you can see that we have 
a class name for our this part which is about   image copy this one and then paste it here first 
i will give a width and it will be 60 percent now save here you can see that now it is 
taking 60 percent so after this one now you   have to give a width for our this part also 
now copy this one and then paste it here and   we have to change the class name which is about 
text now copy this about text and paste it here   that's it now for the about text it will be 
taking 40 percent now save go to our website   okay now it is i think taking 40 percent okay now 
we have to add some space between these two parts   so that's why we have to add a padding right 
here in our this image and it will be 60 pixel   now save here you can see that now this image 
is taking 60 pixel width from the right side   so we have done with our this image part now we 
have to work on our this feature text so for this   one just copy this one from here and then paste 
it here then we have to target our s2 for our   heading for the heading i will give a different 
color and the color will be this one then i need   some padding from the bottom and it will be 
15 pixel now save and here you can see that   we have changed the color of our text and we have 
some space at the bottom and now i will simply   give a color for all this text also so for this 
one just copy and then paste it here and instead   of s2 it will be p paragraph and i will give 
a different color and color will be this one   and here i need a font width and the font weight 
will be 300 now save and go to our website here   you can see that we have changed the color and the 
font width of our this paragraph so after this one   we have to fix all these images these images 
is taking too much width and height so we have   to fix this one here you can see that our image 
and our this text is actually in one column but i   want these things in one row like this one so for 
changing the aligning we just have to copy this   class and paste it here then we have to target our 
about free class from here and then paste it here so i will use the display flags for aligning 
in one row then i will use justify content   space between because i need some space from the 
between and the align items will be flex the start   now save and go to our website here you can 
see that our image and our text is now in one   row so now we have to specify some width and 
height for all these images just copy this text   from here and then paste it here then we have 
to target our image and this image will take   50 pixel width and they will take background 
size cover and a background position center   that's it now save and go to our website and now 
here you can see that they are taking 40 pixel   40 pixel or 52x i have 50 pixel width we have 
to define the width for our this text also   so let's go to our code and copy this one and then 
paste it here then we have to go to our about and   from here we have to copy the f text 
plus from here and then paste it here now we have to give a width of 90 percent now 
if i go to my website here you can see that we   don't have any space between this image and our 
this text so that's why in our image i will add   a margin right and it will take 20 pixel now save 
go to our website yeah now we have much space here   and now i need some space on the top also because 
we don't have any space on the top so that's why   let's go to our fe section and here i will add a 
margin top here and it will take 30 pixel save and   go to our website and now here you can see that 
we have a space here on the top now we have to   install our this heading a smaller heading so for 
changing these things just copy this class name   from here and then paste it here then we have 
to target our h5 for our those smaller headings   and then now i'll give a font size and it will 
be 16 pixel then i will give a different color   and the color will be this one now save and go 
to our website and now here you can see that   we have changed the size of our this heading 
and now we have to go to our about dot html   and then we have to change the image and our 
this text here so let's go to our about and   for the image it will be feature two image and 
for the heading we have to add lifetime access   paste it here that's it now 
save and go to our website   now here you can see that you have changed the 
images and the headings and this is looking good   okay now here you can see that i 
think this image is actually taking   a bit more space from our actual website 
okay let's go to our style and if i go to our   image here here you can see that we have our 
image okay here you can see that we have give   about us image to take 60 percent now we have 
to target our image inside our this about image   class so target our image and the inside of 60 
percent i want to take our this image to take 100   percent width and height so after this one here we 
can see that in our text i don't need any padding   so delete the padding instead of give padding 
in our about text i will give the padding in our   image box and here i will add padding right 
and it will take 60 pixels now save and go   to our website and now here you can see that yes 
now this image is taking perfect with an height   so we have created our this section also 
and we have our awesome feature section also   so after this one now we have to add our   this trusted by section so for 
creating this one let's go to our code first we have to collapse this one and 
then here underneath the feature you   have to create another section and we have to 
give id here and it will be trust that's it so in our trust we have to 
add a heading and a paragraph   so simply copy the heading and paragraph from here close this one and paste it here and we 
have to change the heading it will be trust   trusted by and then paste it here 
that's it now save and go to our website   here you can see that we have our 
trusted buy and our this text here so after adding our heading in 
paragraph we have to add our this images   so for adding the image let's go to our 
code and underneath the paragraph we   have to create a div tag and we have to give a 
class name and it will be cast image that's it   and here we have to add six image so let's 
create an image tag and i have a images folder   and here we have trust one here png now i will 
simply copy this one and i paste it five times   that's it and here it will be two three four five 
and six that's it now save and go to our website   and here you can see that we have six images 
here so now we have to align these things we   have to style these things so that's why 
just copy this trust id from here and then paste it here first thing i will do i will 
align everything in the center so that's why   text align will be center now save and here you 
can see that now everything is center now next   what we have to do we have to add some padding for 
top bottom left and right let's add some padding and padding from top it will be 8 vw from 
left 8 vw from bottom it will be 8 vw   okay let's give only 8 vw from everywhere now 
save and go to our website and here you can   see that we have now 8 vw space or padding from 
everywhere now we have to align our this images   so that so i just copy this trust id from here 
and then paste it here then we have to target our   trust image now copy this image and then paste it 
here first let's give a width of our these images   so that's why target our image and here 
we have to give a width of 90 pixel   and the height will be auto 
now save and go to our website   and now here you can see that they are taking 
90 pixel width now we have to add some space   on the top of our this images that's why 
copy this class and then paste it here let's add a merging top and it will be 60 pixel 
and if i go to my website here you can see that   we don't have any space between these images 
but we have a lot of space this section and   our right section so that's why we have to 
use display flags and the justify content   will be a space between because i want some 
space in between and the align items will be   center now save and go to our website and 
here you can see that now they are taking   perfect width and height and also there's some 
space in between yeah now this is looking good   so guys here you can see that we have successfully 
created our this about us page and now we have   to make this page responsive for mobile and 
tablet as well so just inspect the website   so this is our ipad and here you can 
see that in our ipad it is looking good   but we have to actually adjust the space left and 
right for our this section so i will decrease the   space from this section from left and right if 
i now select this section here you can see that   we have actually padding here too much padding 
now i want to decrease the padding so that's why   i click right and copy the rule from here and 
let's go to our media query for 769 pixel and   here let's comment out and it will be about and 
then paste the rule here and from the left it   will be 4 from the right it will be also 4 that's 
it and i don't want to change anything from here   now save and go to our website here you can see 
that we have now less space from left and right   and here we have too much space beside the 
image if i now select here you can see that   the green area so here you can see that you have 
padding right 60 pixels but i want to decrease   the space i want to decrease the padding so 
that's why i just copy the rule from here   and paste it here i don't want to change the width   but the padding will be 30 pixel now save go to 
our website yeah now this is looking much better   so after all these things now here we can see 
that again we don't have any space left between so   here i will do i will actually decrease the width 
of all these images if i now select the images   they are taking 90 pixel now i will decrease the 
width so that so i just copy the text from here   and then paste it here and it will be taking 50 
pixel now save and go to our website and yeah   now here you can see that they are looking good so 
guys here you can see that for the tablet mode we   have created our this about us page and now we 
have to make the second version for our mobile   so let's select the mobile from here so here you 
can see that in our mobile version this section   is not looking good so we have to change the 
section they are actually in one row now but   for the mobile i will change the aligning and they 
will be in column in one column so for changing   the aligning just select the section this one and 
from here just copy the rule and go to our code   and go to our for 75 and here we have to comment 
out first and it will be about and then paste   the rule here for the about container i don't want 
to change any padding but here i will change the   flags direction in our large screen it was in row 
but for this screen our mobile screen it will be   column now save and here you can see that 
they are now in one column but we have to   decrease the width and height of our these 
sections because they are still taking the width   we have given in the last media query so that's 
why we have to select the image here here you can   see that this image now from here just copy the 
rule and go to our code and then paste it here here this part will take hundred percent of width 
and i don't want any padding right it will be zero   now save go to our website here you can see that 
it is now taking 100 percent width and height and   then now we have to do the same for this one just 
select this one here you can see that we have our   about text now copy the about text and then paste 
it here it will be 100 save and go to our website   here you can see that now it is looking much 
better and guys i think our this text should   be on the top and our this image should be at 
the bottom of our this text so we can do this   also we will just have to change here and it will 
be column reverse now save and go to our website   here you can see that we have our text at 
the first and we have our image at the bottom   now i want some space at the bottom of this 
text so that's why i just put our code and   in our text we have to add padding bottom and 
it will be 20 pixel now save go to our website   here you can see that yeah now we have space 
and i think this aligning is looking much better   than the previous one okay now we have done 
this one so for the trusted y we have to   now break the line because we don't have 
that much space for these six images   so that's why just select this section this image 
section so this one just copy this rule from here   and go to our code and then paste it here 
here we have margin top 60 i will decrease the   space and it will be 40 and here you can see the 
display flags just justify content will be center and then here i will add flex wrap wrap 
that's it now save go to our website   and here i will actually increase the width of all 
these images so that's why just select this one   and then copy the rule from 
here and then paste it here and here they will take 60 pixel width and then 
i will add some space from the left and right   for each of these images so that's why let's add 
margin and the margin from top and bottom will be   10 pixel from left and right it will be 15 pixel 
now save and go to our website yeah now here you   can see that they are aligning in the center 
and they have also have a space between them   so yeah guys i think our about us page 
is also done for our mobile and for our   tablet mode as well and this page is looking 
good in our large medium and a small screen so guys here you can see that we have 
done with our about us page and we have   and we have made this about us page 
responsive for mobile interpret as well   that's it for our this part and in our next 
part we will create our blog page here you   can see that we have a blog page here we have 
some blogs here and then we have some categories   in the right section and if we click 
on the read more here you can see that   we have a specific block and we have some 
text here and we have another button here   and we will also make this page responsive so 
if i inspect the website here you can see that so guys that's it for our this part and i 
hope i will see you in our next part also and   i hope you guys enjoyed this tutorial you 
guys learned something new from this one   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 any question about this video   please let me know in my comment section so 
that's it guys let's see you in our next tutorial you

Website Setup Service

Leave a Comment

Your email address will not be published. Required fields are marked *