Build and Deploy Ecommerce Website With HTML CSS JavaScript | Full Responsive Ecommerce Course FREE | Tech2 etc

hello and welcome to the brand new course where  you will learn about how to create a modern  

responsive e-commerce website  using html css and javascript  

this website is going to be a multi-page website  if you are a beginner and want to learn how to  

create an e-commerce website a step-by-step  using html css and javascript then this is  

the best beginner-friendly free course out there  on youtube in this course you are going to learn  

how to build amazing professional and responsive  websites learn the fundamentals of web design  

modern css including flexbox and css  grid for layout modern css techniques  

to create a stunning designs and effects how  to use common components and layout patterns  

for professional web design and development  advanced responsive design using media queries  

and many more now let me show you what  we are going to create in this course

as i mentioned you earlier this website  is going to be a multi-page website  

it means we are going to create all the necessary  page which an ecommerce website must have such as  

home page shop page single product page blog page  about page contact us page and shopping cart page  

in a moment i will show you all these pages but  first let me show you our home page in our home  

page on the top we have our network inside our  navbar in the left side we have our logo and in  

the right side we have some navigation links and  inside our hero section we have some smaller text  

our heading and a beautiful button and as a  background we have a beautiful background image

underneath that we have some features

and then we have our featured products and  inside this section we have some products  

and these products is having the  product image product brand name  

product name reviews price and add to cart button  and every time i take the cursor on those products  

this product is having a beautiful box  shadow and this is looking so amazing  

after this section we have a call to action  in this section we have a beautiful background  

image we have text we have a heading and we have  a beautiful button also with hover effect then we  

have another section of products and this section  is containing all the products new arrivals

and then we have some banner section in our first  two banner here you can see that we have a call  

to action button and underneath this we have some  text banner and then we have a newsletter inside  

this newsletter we have some heading some text  and we have an input section to type our email  

and the sign up button and at the bottom of our  page we have a beautiful footer and this footer  

is containing four columns this column is having  our logo and the address and we have our social  

media links also and in our second column we have  some important links and in our third column we  

have some account links and in our last column  we have our app section and our payment gateway  

and then at the last we have our copyright section  now after our home page let's visit our shop page  

as you can see that we are now in our shop page  and this shop page is having a beautiful header  

with background image heading and text  and then we have a list of products here

then we have a pagination option also so that we  can add multiple product list page inside this  

website then we have our newsletter and footer  also we can check out the product details we  

just have to click on the products and as you can  see that we have a complete details of a specific  

product and this product details page is having  two different section in the left section we have  

a javascript gallery and in the right section  we have some details about this product and  

from this gallery we can actually switch the image  and check the different designs of this product

and in the right side we have a category the  product name product price and then we have a  

select size section so that we can select the size  and then we have a quantity option and the add to  

cart button then we have our product details  after this one we have some featured products  

our newsletter and our footer now after  our shop page let's visit our blog page  

so here you can see that this is our beautiful  blog page and this blog page is looking so premium  

on the top of our blog page we have a  beautiful header with a beautiful image  

heading and some text and here you can  see that we have a list of blocks here  

and these blocks is having some beautiful  images and some beautiful text behind the  

image our block heading our block  text and the continue reading button

after our blog list we have our newsletter  and footer now let's visit our about us page  

and inside our about us page we have a heading  then we have a text and we have a background image  

as a header then here you can see that we have two  different section in the left side we have a image  

and in the right side we have some text and  inside this section we have a heading some text  

some design text and a slider text also after that  we have a video presentation about our application  

here you can see that a video is playing basically  this video is all about the application now  

anyone can download and install this  application by just clicking on this blue text

now after our about us page  let's visit our contact us page  

and this conductor's page is also  having a beautiful header with a heading  

text and background image and then in the  left section we have some details about  

our contact and address and in the right section  here you can see that we have a google map  

and inside this google map we can see an  exact location of our company or of our office  

and this map is totally controllable we can  drag this map we can zoom in and zoom out also  

after this one we have a contact us form  in the left side we have a text heading  

and some input section so that we can type our  name email subject message and a submit button  

to submit our message and in the right side  we have a member list and this member list  

is having member images and member details  after this one let's go to our cart page  

and our cart page is also having a beautiful  background image heading and some text and then  

we have a table of our product list here you  can see that we have some remove button also  

so that we can cancel any product from this  table and this table is having product image  

product name product price product quantity and  subtotal and then we have our apply coupon section  

and card total section and at the last we  have our footer and guys as i mentioned  

earlier this website is completely responsive  now let's check out our responsive design also  

and in our mobile screen device this website is  looking so stunning here you can see that on the  

top we have our logo and we have our hamburger  menu instead of our nav links and if i click on  

the hamburger menu here you can see that all  the nav links is sliding from the left side  

and then we have a close button to close this nap  section after this one we have our hero section  

our feature section and our products and now this  section is showing all the products in one column

after that we have our call to action  then we have our another list of products

our banners our newsletter and our footer  

now let's visit our shop page and this shop  page is also looking so premium and beautiful

now let's visit our product details page so  if i click on this product here you can see  

that we have a details of this product and then  we have our gallery we can switch the designs  

and then we have our details containing our  categories product name price select option  

then quantity add to cart button and product  details then we have our featured products  

our newsletter and footer  now let's visit our blog page  

this is our blog page here you can see that  we have our header we have our all the blocks  

aligning in one column now let's go to our about  us page and inside our about us page we have a  

image we have some details our sliding text our  video presentation features newsletter and footer  

now let's go to our contact page and inside  our contact us page here you can see that we  

have some details google map and then  we have our contact form member list  

newsletter and footer now let's check out our  cart page and this is our cart page here you  

can see that we have our table and we have a  slider here so that we can slide our details  

and we have our apply coupon section our card  section and our footer and this website will be  

also looking good in our ipad mode here you  can see that we are now in our ipad device

and this website will be  looking good in our ipad device

if you want to build and customize your portfolio  become an experienced developer and get hired  

then this is the right course for you also  after completing this course i will recommend  

you to check these free courses for becoming  an ultimate master in html css and javascript  

and guys i had to do a lot of research  and hard work for making these courses  

so to support this video and all the  other projects we do on our channel  

make sure to leave a like comment  and subscribe now let's get started

this is my file directory and here you can see  that we have a image folder we have index file  

a script file and a style sheet inside our image  folder here you can see that i have some images  

and i'm going to use these images to create our  website now let's go to our folder and from here  

we have to open our index.html file so guys here  you can see that we have a simple html boilerplate  

inside our index.html file and here you can see  that we have given a title then we have linked  

our style sheet also we have linked our script  file as well now inside our script file here  

you can see that we don't have anything inside  our script file this file is empty right now and  

inside our style.css here you can see that we  have a cdn link for our google font and inside  

our star here you can see that we have margin 0  pattern 0 box sizing border box and font family

then here you can see that  we have some global styling  

for our h1 s2 s3 h6 paragraph and then we  have also added some padding and margin  

and inside our body we have given width of hundred  percent now here you can see that in our h1 s2h4  

h6 paragraph here you can see that we have  added some custom styling it means in our  

website all of our h1s2h4 and these things  will actually follow our this aster links okay

by doing this we don't have to write the  same styling each time we write a h1 or s2  

inside our html file now let me show you a quick  example let's go to our index.html file and then  

inside our body i will paste some tags here  you can see that we have our h1 s2 s3 h4 h5  

h6 and we have a paragraph now if i save this  html file and if we start our live server

here you can see that we have our h1 s2  s3 h4 h5 s6 and paragraph and this tags is  

following the styling which we have given  inside our style sheet these are stylings

in this way we don't have to write the same  styling for each of these tags every time  

we write a tag inside our index.html file  so i hope you guys understood these things

now if i go to my website here you can see that  in our e-commerce website we have our navbar first  

so first we have to create our this navigation bar  

so for creating this one here you can see that  in the left side we have a logo and in the right  

side we have our all the nav links so let's go to  our code inside our body let's create a section  

and then we have to give a id and the id will  be header that's it and inside our section  

first we have to create our logo so for  creating our logo let's create an anchor tag  

and the href will be hash and inside our anchor  tag we have to insert our logo image so that's  

why let's create a image tag and inside our source  we have to give the logo source path file address  

so here you can see that we have a image folder  so first we have to access our image folder and  

inside our image folder i have a logo dot png and  then let's add a class also class will be logo now  

save and go to our website and here you can see  that we have our logo on the top left after our  

logo now we have to create our this nav links so  for creating the nav links let's create a div tag

and inside our div tag  let's create an unknown list

and also let's add a id and the id will be  navbar and now inside our amuro list we have  

to create some list tag and then create a anchor  tag also then our first nav link will be home  

now simply copy this one  and then paste it six times

for our home page our address will be index  dot html then we have to create our shop page  

for our shop page our address will be shop.html  then we have to create our blog page and our  

address will be blog.html then we have to create  our about page and our address will be about  

dot html then we have to create our contact  us page and our address will be contact  

dot html here you can see that our  shop our blog and about then contact  

we haven't created this page yet but we  will create this page also so that's why i  

am adding this shop.html blog.html about.html and  contact.html file after our contact if i go to my  

website here you can see that we have a shopping  bag so we have to add this icon inside our website  

so for adding this icon we are going to use font  awesome icons so for adding the font or some icons  

inside our website we have to add a font to some  cdn link inside our code so for doing this let's  

go to our chrome and then create a new tab  then we have to search for font awesome cdn

and here you can see that we have a link called  setup wavefont with cdn now open this link  

now if we scroll down here you can see that  we have a link tag now we have to simply copy  

this link tag and then go to our website then  go to our head then we have to paste it here  

and from this link tag i will simply remove  the integrity and the cross origin that's it  

so guys here you can see that we have successfully  added font awesome icon cdn link inside our code  

now we can use font awesome icons inside our  code also now for adding a font awesome icon  

let's go to our website now click on  this icon and here you can see that  

we have a search bar now we have to search  the icon name and the icon name is shopping

and here you can see that we have lots of  icon now we have to select any one of them  

so i will simply select this one and here you  can see that we have a i tag now copy this html  

and then go to our code then paste it here that's  it now in our website if i click on this icon  

i want to go to a different page so the page  name will be cart dot html that's it now save  

and go to our website and here you can see that  we have our logo and all the nav links here  

now we have to style our network so  that's right let's go to our code  

and from here copy our header id and then go to  our style sheet and if i scroll down here you can  

see that we have our header start now paste our  id here that's it so in our website here you can  

see that they are now in one column but in our  real website our logo and our nav links are in  

one row so first we have to align them in one row  so that's why i will use display flags then align  

items will be center justify content will be  a space between now save and go to our website

and here you can see that our logo and  our nav links is now in one row now i  

want to add some padding everywhere around our  network so that's why let's add some padding

and padding from top and bottom will be  20 pixel from left and right it will be  

80 pixel then i will add a background color and  the background color will be this one that's it  

and then i will also add a box shadow and  from x it will be 0 from y it will be 5 pixel  

and the radius will be 15 pixel  then we have to add a rgba value  

and rgba value will be 0 0 0 and 0.06 that's it  now save and go to our website and here you can  

see that we have a different background color we  have also added some padding from everywhere and  

then we have also added a box shadow underneath  our neighbor now after this one i want to style  

our this nav links because they are now in one  column but i want them to be in one row so for  

doing this let's go to our code let's go to our  index file and then copy this navbar id from here  

and then paste it here again i will use display  flags then align items center justify content  

center now save and go to our website here you  can see that they are now aligning in one row  

now after this one i want to remove the bullet  points so for doing this let's go to our code  

copy this snapbar id and then paste it here  then target our list tag first i will remove  

the bullet points so that's why list style  will be none then i will add some padding  

and the padding from top and bottom will be  0 but from left and right it will be 20 pixel

now save and go to our website and here you  can see that the bullet points are now gone  

and we have added some padding between  our nav links now after this one i want  

to remove the underline from our links so  for removing the underlines copy this line  

then paste it here then target our anchor  tag and then we have also add text decoration  

and it will be none then i will add  a font size and it will be 16 pixel

then i will add a font width and it will be  600 then we have to add a color text color and  

the color will be this one now save and go to our  website and here you can see that we have changed  

the color of our text and we have also removed  the underline from our links so after this one  

now i want to add hover effect on our nav links  every time i hover on our links so for doing this  

let's go to our code copy this text from here  and then paste it here then we have to add hover  

that's it and every time i hover on our nav  links i want to change the color so i will add  

a different color and the color will be this one  that's it now save and go to our website and if  

i now hover here you can see that our text color  is now changing now i want a little bit of smooth  

changing because the changings are happening so  fast so that's why i will add some smoothness so  

for adding this one let's add some transition and  the transition will be 0.3 second is now save and  

go to our website and if i now hover here you can  see that the changing are now happening smoothly  

so after this one if i go to my website  here you can see that we have underline  

also so every time i hover on a link here you  can see that we have an underline underneath  

our nav links so i will add that effect also  so for adding this one let's go to our code

now first what we have to do if i go  to my website here you can see that  

our this link is highlighted and it  indicates that we are now in our home page  

if i go to my shop page here you can see that  our shop page is highlighted and it indicates  

that we are now in our shop page so i want to  add this highlighted option in our website also  

so for doing this let's go to our code and  here what we have to do just copy this one  

add a comma and then paste  it here now instead of hover  

we have to add a class name and  the class name will be active  

now in our code i haven't added this active class  anywhere okay so first we have to initialize this  

active class in our html and i want this page i  mean our home page link should be highlighted so  

that's why what we have to do inside our anchor  tag we have to add a class name and the class  

name will be active now save and save our style  sheet also and if i go to my website here you can  

see that our home link is now highlighted that's  it now i want to add our this underline effect  

so for doing this let's go to our code and  then copy this one then paste it here then  

what we have to do we have to use sudo classes  it means after and before so i will use after

that's it every time we use the after we have  to add a content and the content will be empty  

then we have to give a width of 30 percent that's  it and height will be 2 pixel then i will add a  

background color and a background color with this  one that's it then i will use position absolute  

then bottom minus 4 pixel then left 20  pixel now save and go to our website

we can't see any underline in our  website but if i inspect our website  

and if i open our section then if i open our  div tag then our another list then our list tag  

then our anchor tag here you can see that we  have after element and every time i hover on  

this after just pay attention in this area here  you can see that every time i hover on this after  

we have a pop-up in this area it means we actually  have our after in our website but in somehow this  

is not showing in the right position so  what we have to do if i go to my website  

here you can see that we have added position  absolute so actually i am using this position  

absolute inside our child element so first we have  to add position relative inside our parent element  

and our parent element is our anchor type and the  parent element of our anchor tag is our list tag  

so i will simply add a position relative inside  our list tag it means our parent tag now save and  

go to our website and here you can see that our  this line our this underline is now showing in the  

correct position now i want to add the underlines  every time i hover on these links also so for  

doing this let's go to our code and here you can  see that we have a hover so what we have to do

we have to copy this hover and then here we  have to add a comma and then paste it here  

and after hover we have to add a sudo element  which is after now save and go to our website  

and if i now hover here you can see that  we have underlined underneath our nav links  

so guys we have done with our network so  after our nav bar we have to create our this  

hero section so for creating this hero section  let's go to our code let's go to our index file  

and for now close this section then create another  section and we have to give a id and the id  

will be hero that's it and inside our hero first  we have to create our this text and the buttons  

so for doing this let's create a h4 tag and inside  our h4 we have to add this text then create a s2  

tag then copy this is 2 then paste it here then  create a h1 tag so copy this h1 tag then paste it  

here then we have to create a paragraph tag so  copy this paragraph tag and then paste it here  

after these things we have to create a  button also and the button will be shop now  

now save and go to our website here you can  see that we have our smaller text our headings  

paragraph and button so after these things  now we have to install our this hero section  

so for installing this one  let's go to our style sheet  

but first we have to copy our hero id then go  to our style sheet and underneath our home page  

we have to paste our id that's it now  first i'm going to add a background image  

then we have to add the url so my background  image is inside our image folder and inside  

our image folder i have a hero 4 dot png now  save and go to our website and here you can see  

that we have our hero but this hero section  is now actually available for our this size  

okay the text size but i want this hero section  to take the full screen so what we have to do  

we have to add a height and height would be 90 vh  then we have to add a width of 100 now save and go  

to our website and here you can see that now this  image is now taking full screen but the image is  

not exactly in the center so for aligning this one  in the center we have to add background position  

then we have to add top and from top it will  take 25 percent and from right it will take 0  

then what we have to add we have to add background  size and it will be covered now save and go to our  

website and here you can see that our image  is now showing exactly in the center position

so after this one here you can see  that our text is actually on the top  

left but i want this text to be in the center  so that's why i'm going to add some padding  

and the padding from top and bottom will be  0 then from left and right will be 80 pixel  

now save and go to our website here you can see  that we have added some padding from the left  

and right now i want this text to be in the  center so that's why i will use display flex  

then align items will be flags start then justify  content will be center now save and go to our  

website and here you can see that our this text is  now actually in one row because display flags is  

actually by default in row so we have to set the  column so that's why flex direction will be column  

now save and go to our website and here you  can see that the text is now in the center  

so after this one we have to style our this  text we have to add some color on this text  

so for adding the colors let's go to our code copy  this hero then paste it here then target our h4  

in our h4 we don't have any space underneath  our h4 so i will add some padding bottom

and it will take 15 pixel then copy this one  and paste it here then target our h1 and in  

our h1 i will add a different color and the color  will be this one now save and go to our website  

and here you can see that we have a different  color for our h1 so after this one i will style  

our button so for doing this let's go to our  code copy this hero id from here then target  

our button if i go to my website here you can  see that in our button we have a background  

so first we have to create this background so  for doing this let's add a background image  

then call our url and this background is  actually inside our image folder and inside  

this image folder i have a button dot png  then background color will be transparent  

then i will set a color of the text and the color  will be this one then i don't want any border  

so border will be zero now save and go to our  website and here you can see that we have our  

button and we can see a bit of the background  but this background is not showing properly  

so for fixing this one we have to add padding  padding from top it will be 14 pixel from left  

it will be 80 pixel from bottom 14 pixel and then  it will be 65 pixel now save and go to our website  

here you can see that our button is now showing  properly so after this one i want to add some more  

styling so what i will do i will add background  repeat no repeat then i will add a cursor pointer  

then phone to width and it will be 700  then i will give a font size of 15 pixel  

now save and go to our website and here you can  see that we have created our beautiful button so  

guys here you can see that we have successfully  created our hero section but in our navbar we  

have actually added a box shadow but this box  shadow is not showing right now so we have to  

fix this one so for fixing these things let's  go to our code and then let's go to our navbar  

yeah this is our network not in the network  let's go to our header and inside our header  

let's add a z index and it will be nine  nine nine now save and go to our website  

this box shadow is not showing yet  

also if i scroll the website a bit here you  can see that this navbar is actually moving  

but i want this network to be sticky on the top  always like our this one if i scroll down here  

you can see that our navbar is on the top always  so i want to make a sticky nap bar in our website  

so for making our never sticky let's go to  our code in our header we have to use position  

sticky then we have to add the position also so  top will be 0 then the left will be also 0 now  

save and go to our website and here you can see  that now we can see our box shadow after using  

the position sticky now our header is actually on  the top always our header is not moving right now  

so this is good and we can see the box shadow  also so yeah our hero section and our never  

is looking good so after our hero and never we  have to create our feature section also so for  

creating our features let's go to our code let's  go to our index file and collapse this section

and then create another section  and add a id id will be featured  

that's it and inside our  feature let's create a div tag  

and inside our div tag we have to create our  first feature i mean our this feature so for  

creating this one let's add a class  name first and it will be feature box  

and inside our feature box first we have  to add our image and my image is actually  

inside my image folder and then i have a  features folder then i have to take our  

dot png then we have to create a  h6 and it will be free shipping

now save and go to our website and if i scroll  down here you can see that we have our image  

and then we have our free shipping text also  so first we have to style our this box but  

before installing our this box in my website here  you can see that we have some padding around our  

this feature section so i will add this padding in  our website also so for adding this padding if i  

go to my style sheet then if i scroll to the top  here you can see that i have a class name i have  

created a class which is section p1 it means  padding for the sections and i have added some  

default padding so what i have to do i will simply  copy this class name and then go to our index  

file then inside our main section we have to add a  class and we have to paste the class name which is  

section p1 it means section padding okay now save  and if i go to my website here you can see that  

now the section padding is now applied in our  this section we have now a space from top bottom  

left and right and this is one of the way to  optimize your coding skills okay so yeah we have  

done this one after this one let's add our this  box we have to create a small box like this one  

so for doing this let's go to our code and then  copy our feature id then go to our style sheet

then paste it here then in our index file we have  a class name which is feature box copy this class  

name and then paste it here so first i will set  a width of 180 pixel then i will add text align  

center then i will add some padding padding  from top and bottom will be 25 pixel  

from left and right will be 15 pixel now save and  go to our website here you can see that our text  

is now center but we can't see the box so let's  fix this one let's add some box shadow first

and from x it will be 20 pixel from y 20 pixel  for the radius it will be 34 pixel and we have  

to add a rgba color and then let's add a border  also border will be one pixel solid and a color  

will be this one now save and go to our website  and here you can see that we have a box shadow we  

have a small box shadow and then we have added  a border also now we can see this box easily  

so after this one i want to add some border radius  for this box and the border radius will be 4 pixel  

and then i will add some margin from top and  bottom and it will be 15 pixel from left and  

right will be 0. now save and go to our website  and here you can see that this is our first box  

and the next thing i will do every time  i hover on this box i will reduce the  

box shadow so for doing this just copy this  class and id then paste it here then add a  

forward effect so for the hover effect i will  simply copy this box shadow then paste it here  

we have to reduce the x value reduce the y value  and i will increase the radius okay that's it  

and i will also change the rgb value that's  it now save and go to our website and if i  

now hover here you can see that we are reducing  the box shadow and we are increasing the radius  

so yeah it is now working perfectly now i want to  add a background color for our this text like this  

one so for doing this let's go to our code copy  this feature and feature box then paste it here  

then target our h6 now let's add some padding  and the padding from top will be 9 pixel  

from left 8 pixel from bottom 6 pixel and from  right 8 pixel then i will add a line height of 1  

then border radius and it will be 4 pixel then i  will add a color and the color will be this one  

then i will add a background color and a  background color with this one that's it  

now save and go to our website and here you can  see that we have our free shipping background  

color but here you can see that the padding is  taking too much from the left and right so what  

i will do i will use display inline block now  save and go to our website so yeah we have done  

this one so the next thing i will do i will  actually make this image responsive because  

our website will be responsive so that's why we  have to make all the images responsive as well  

so for doing this just copy this feature  box then paste it here then target our image  

then let's add some width of hundred percent after  this one i want to add some margin bottom also  

and a margin bottom will be 10  pixel now save and go to our website  

and here you can see that this is our image and we  have added some margin bottom from this image so  

guys we have created our first box and now we have  to add the rest of them so let's go to our index  

copy this div tag then paste it five times

now save and go to our website and here you can  see that we have our all the boxes in one column  

but i want to align these boxes in one row  so what we have to do we have to again go to  

our feature id let's go to our feature id so copy  this feature then paste it here so i want everyone  

to align in one row that's why we have to use  display flags then align items will be center  

then justify content will be a space between  then i will use flex wrap and it will be that  

now save and go to our website and here you can  see that our this boxes is now aligning in one row  

but here you can see that we have actually five i  have to add another one so let's go to our index  

and copy this div tag then paste it here now  save and go to our website and here you can  

see that we have now six of them so after this  one now i want to change the images of these  

boxes and i will also change the text as well  so let's go to our index and from here we have  

to simply change the image file name and we  have to also change the text of these boxes

and guys we have successfully changed the images  

and the text as well now  save and go to our website  

and here you can see that we have now different  images and different text for each of this box

after this one now what i have to do here you  can see that we have different background color  

for each of these text so we have to do this  one let's go to our code let's go to our style  

sheet and here you can see that we have our h6  and we have given a background color for our h6

now what we have to do i have to  add different background color  

for different boxes so that's why copy this text  

and then we have to use the nth child so we have  already added a background color for our first one  

we have to add the changing from the second  one okay so that's why it will be second

and here if i go to my index here you can see  that our this div tag is the parent div tag for  

our boxes so we have to consider the counting  according to this div tag it means it is our  

first second and third so let's go to our style  sheet and this counting will be only in our box  

not in our a6 okay so for our second  box we have to add a background color  

different background color and a color will  be this one now save and go to our website  

and here you can see that we have a  different background color for our this box  

so we have to do the same for our these boxes  simply copy this one and then paste it four times  

and then we have to also change the counting  it will be three four five and six and for  

each of this one we have to also add a different  background color that's it guys we have changed  

all of this background color for all of these  different boxes now save and go to our website  

and here you can see that we have no different  background color for these different boxes so  

guys we have successfully created our features  section also after our free charts section if  

i go to my website here you can see that  we have a section called featured products  

so we have to create our this featured products  also so for creating this one let's go to our code  

and then let's go to our index file close our  this section create a new section and then let's  

create a id and the id name will be product 1  that's it and inside our this product section  

here you can see that we have some padding from  everywhere so i want to add this padding also  

so for adding this one just copy this class  name of our padding and then paste it here  

that's it so first we have to create a s2  tag and inside our s2 it will be featured  

products then we have to create a paragraph  tag and for the paragraph text will be this one

then let's create a div tag and inside  this div tag we have to create all of  

these products so this div tag will be  a container let's create a class name  

and the class name will be pro container

and let's create another div tag  and now we have to create our first  

product so let's create a class name of pro

and if i go to my website here you can see that  inside our product first we have our image so i  

will add our image first and this image is inside  our image folder then i have a product folder and  

then we have to take our first image then let's  create a div tag and the class name of this div  

tag will be description and inside our description  if i go to my website here you can see that first  

we have to add our brand name so copy this brand  name let's create a spam tag and then paste it  

here then let's create h5 tag for our product  name so copy this product name then paste it here  

then let's create a div tag and we have to add a  class name also and the class name will be a star

if i go to my website here you can see that we  have some review as stars so we have to create  

this reviews a star so let's create a i  tag and add a class name and i'm going to  

add a font awesome icon so that's why we have to  add f a s f dash star that's it now copy this one  

and then paste it four times

after this div tag let's create a h4  

and inside our h4 it will be the price and the  price will be dollar 78 so after our description  

we have to create our this add to cart icon  so that's why let's create a anchor tag and  

it will be hash then let's create a i tag  and inside our i tag we have to create a  

class name because this is a font awesome icon  so the class name is f a l f a dash shopping  

cart that's it now save and go to our website  

and if i scroll down here you can see  that we have our heading we have our text  

our image we have our brand name our product name  our reviews price and we have add to cut button  

so now we have to add some width and height for  our this product box also i want to place this  

text in the center of our screen we have to  copy this id name then go to our style sheet  

then paste it here then i will add text  align center now save and go to our website  

and here you can see that our  all the text is now in the center  

now we have to give a width for our this product  that's why copy this product id then paste it  

here and if i go to my index we have a class name  pro now copy this class name then paste it here  

first i'll give a width of 23 percent then we  have to add a mean width and it will be 250 pixel  

then add some padding padding from top and bottom  will be 10 pixel from left and right it will be  

12 pixel then add a border here and it will be one  pixel solid color will be this one now save and go  

to our website and here you can see that we have  a box here here you can see that we have a border  

so this image is not taking the width of  the box this image is taking a lot of width  

so we have to make this image responsive  as well so that's why copy this  

class and id then paste it here then  target our image and the width will be 100

then we have to add a border radius and  it will be 20 pixel now save and go to  

our website and here you can see that our  image is now taking perfect with an height

now let's go to our code copy this border radius  then paste it here and it will be 25 pixel  

then every time i hover on our this card i  want to add a cursor so that's why cursor will  

be pointer and then i will add a box shadow also  and from the x value it will be 20 pixels from y  

20 pixel the radius will be 30 pixel then we  have to add a rgba and the rgba will be this one  

now save and go to our website and here you  can see that we have a cursor on our cart  

and we have also some box shadow now i will  add some margin here so let's add some margin  

and the margin from top and bottom will  be 15 pixel from left and right it will  

be zero now i want to actually increase the  hover effect whenever i hover on our card  

so for doing this just copy this one  then paste it here then add a whole word

and you copy this box shadow then paste it  here and i will increase the rgba color and  

it will be 6 that's it also i want a smooth  transition and it will be 0.2 second is

now save and go to our website so guys if i now  hover on our card here you can see that we have a  

darker box shadow and this is now looking good so  after this one now i want to style out this text  

so for doing this one just copy this class and  id then paste it here then target our description  

so first i will do i will actually align the  text from the start so that's why text align  

will be a start then i will add some padding  and the padding from top and bottom will be  

10 pixel from left and right it will be zero so  first i will style our this brand name so that's  

why copy this class and then paste it here and  inside our index here you can see that we have a  

span tag for our brand so copy this spam tag then  paste it here so i will add a different color  

color will be this one and i will add a font  size 12 pixel now save and go to our website  

and here you can see that all the text is now  aligning in the start and we have a different  

color for our brand name now let's style our h5  our product name so copy this text and then paste  

it here target our h5 so what i will do i will add  some padding from the top and it will be 7 pixel  

then we have to add a color and a color will be  this one then i will add a font size of 14 pixel  

now save and go to our website

here you can see that we have styled our  product name now we have to establish this  

as stars so for doing this just copy this one  then paste it here then target our i tag and  

we have to add a font size of 12 pixel then we  have to add a color and i will use a rgb color

that's it now save and go to our website and here  you can see that we have now styled our stars also  

so after this one we have to install about  this price tag so that's why copy this  

text and then paste it here then target  our h4 so first i will add padding top  

and it will be 7 pixel then i will add a font  size of 15 pixel then font width will be 700  

then i will add a color and a color will be this  one now save and go to our website and here you  

can see that we have our text so yeah our these  things is now looking good so after this one here  

you can see that we have our add to cart button at  the bottom of our card but i want our this button  

to position in here so that's why  we have to use position absolute  

so for this one just copy this one and then paste  it here remove the description if i go to my index  

and here is our cart button so i will  add another class name inside our class  

and it will be also card now copy this  card and then paste it here that's it

first i will use a width of 40  pixel then i will use a height  

of 40 pixel then i will use a line height  of 40 pixel then border radius will be 50  

pixel then i will add a background color and it  will be this one then i will use a font width

of 500 then a color

and a color will be this one  now save and go to our website  

and here you can see that we have a  different background color for our this  

card button so after this one i will add some  border color also and it will be one pixel solid  

and the color will be this one that's it  now save go to our website and here you can  

see that we have our add to cart button now  it is time to position this button in here  

so that's why let's add position absolute then  from the bottom it will take 20 pixel from the  

right it will be taking 10 pixel now save and go  to our website and here you can see that our add  

to cart button is not showing here i think  it is showing somewhere in our website here  

you can see that this button is showing in our  hero section so now we have to fix this one if  

i go to my website here you can see that i am  using position absolute inside a child element  

so every time we use position absolute inside  a child element we have to first figure out the  

parent element of this child element and then  we have to add position relative inside that  

parent element so if i go to my index here you  can see that this is our child element and the  

parent element of this one is actually our this  pro div okay so that's why let's go to our pro  

and here inside our pro we have to use position  relative now save and go to our website  

and here you can see that our button  is now showing in the right position

so guys here you can see that we have successfully  created our first card and now we have to create  

the rest of this card also so for creating  this one let's go to our code and let's go  

to our index file and from here simply we have to  copy this div tag and then paste it seven times

now save and go to our website and if when i  scroll down here you can see that we have our  

all the products aligning in one column now  we have to align them in one row so for this  

one let's go to our code and let's go to the top  here and from here we have to copy this product  

and then paste it here and if i go to my index  here and then if i go to my top here you can  

see that we have the parent element which  is pro container copy this pro container  

then paste it here and use display flex  justify content will be a space between  

then i will add some padding from  the top and it will be 20 pixel  

now save and go to our website and here  you can see that our all the products  

is now aligning in one row but there is a  problem now we have a slider at the bottom  

here and i don't want this slider also i don't  want all of these products to be in the one  

row i want these products to break in here and  then come to the next line okay so i will break  

the line here so the easiest way to do this  in our display flags we have to use flex wrap  

wrap okay now save and go to our website and  here you can see that after four products the  

line breaks and then starts a new line so after  this one now we have to change the product images  

and the product names so for changing this  one let's go to our index file and here you  

can see that we have to change the product image  name for each of these products so let's do it

that's it guys we have successfully changed  the images for each of these products  

now save and go to our website and here you  can see that we have now different images for  

different products so guys here you can see that  we have successfully created our featured products  

for our website and we have successfully created  our navigation bar our hero section our features  

and our featured products and guys we have done  a lot of coding in this small time so i think  

we should now take a break and after this break  we are going to create the rest of the website

welcome back everyone now let's start creating the  rest of the website okay guys after creating our  

featured products now we have to create our this  call to action here you can see that we have a  

background image we have a text we have a heading  and then we have a button here so for creating  

this section let's go to our code and let's go  to the top and then close this section that's it  

now let's create another section and then we  have to add a id and id will be banner and  

inside this banner first we have to create a  h4 tag and in our h4 we have to add this line  

repair service and then we have to create a s2 tag  so inside our s2 tag we have to add our this line  

now copy this line from here and then paste it  here in our website here you can see that 70 off  

and this text is actually in a different color  so we have to put this text inside a different  

tag so that's why here you can see that we  have our 70 off so here i will add a aspen tag  

and inside this aspen tag i will put this 70 off  that's it guys so after this one let's create  

a button and the button name will be explore  more that's it now save and go to our website  

and here you can see that we have our smaller  text we have our heading and then we have our  

button also so after this one we have to add the  background image but before we add the background  

image i want to add some space from everywhere  so for adding the space if you remember in our  

style sheet we have added some default marginal  padding here you can see that this is the margin  

margin 40 pixel from top and bottom and a zero  pixel from left and right so i will simply copy  

this class section margin and then go to our  index file and here we have to add a class name  

and then paste the class name  now save and go to our website  

and here you can see that we have a space  from top and bottom okay so after this is  

space let's go to our code and copy this banner  id from here and then go to our style sheet

and then paste it here now first thing what i'm  going to do here you can see that all the text  

and button is now in the left side but i want  everything to be in the center so that's why  

i will use display flex then flags direction  will be column justify content will be center  

align items will be center then text align  will be also centered now save and go to  

our website and here you can see that all  the text and buttons is now in the center

now we have to add our background image like  this one so for adding the background image  

let's go to our style sheet and here we have  to add background image and then add our url  

and i have a image folder inside the  image folder i have a panel folder  

and then i want to add b2.jpg that's  it now save and go to our website  

and here you can see that we have our banner but  this banner is only taking the height of this text  

but i want to add some extra height so that's why  we have to define the height but first we have to  

add the width of 100 and then we have to add a  height height will be 40 vh and then background  

size will be covered then background position  will be center now save and go to our website  

and here you can see that this section is now  taking 40 vh height and the background is now  

in cover that's it so after this one we have  to style our this text so for installing these  

things copy this banner id and then paste it here  and then go to our index file and then we have to  

target our h4 tag so take the h4 so first i will  change the color and it will be white then i will  

add a font size of 16 pixel now save and go to our  website and here you can see that we have our text  

now i want to install our this heading also  so that's why copy this id and tag and then  

paste it here target our s2 tag so color will  be white and the font size will be 30 pixel  

and then i want to add a padding padding front top  and bottom will be 10 pixel from left and right  

will be zero now save and go to our website and  here you can see that we have our heading here and  

now what we have to do we have to add a different  color for this text so that's why copy this one  

then paste it here so if you remember in our index  file inside our s2 we have s pen tech and inside  

the aspen tag we have our this particular text  so that's why we have to target our s pen tag  

so after s2 we have to add our aspen tag as well  and i want to remove these things and the color  

will be this one now save and go to our website  and here you can see that our this text color is  

now different from our actual heading so yeah  our text is now done we have to now style our  

this button so for installing the button let's  go to our code and then let's go to our top here  

so after our section and here i will add some  global styling for our button so that's why  

let's add our button and then i will separate  this styling from the other buttons so that's  

why i have to add a specific class which will be  normal and inside this normal first we have to  

add a font size of 14 pixel then we have to  add a font width of 600 then we have to add  

padding and the padding from top and bottom will  be 15 pixel from left and right will be 30 pixel  

then we have to add a color and the color will be  black then we have to add a background color and  

the background color will be white then we have  to add a border radius and it will be 4 pixel  

then the cursor will be pointer  and i don't want any border  

that's why border will be none and then outline  will be also none then i will add a transition  

because i'm going to add hover effect so that's  why i want a smooth changing and it will be 0.2  

second that's it and here you can see that we  have added some global styling for our this  

normal class button okay if i go to my website  here you can see that our this button is not  

having those classes those global styling okay so  what i have to do i have to go to our index file  

and here you can see that we have our button and  here we have to add a class and the class name  

will be normal and if i go to my website here  you can see that our this button is still not  

having those global classes i think we have done  something wrong if i go to my style sheet okay  

here you can see that i have done a spelling  mistake okay here it will be actually button  

that's it now if i save and go to our website and  here you can see that our this button is having  

our global styling i mean these are starting okay  so every time we create a button and if i add  

the class name normal those button will take  this styling okay so here you can see that we  

have done with our this button now i want to  add a hover effect so for adding the popper  

effect let's go to our style sheet and if i go  down and copy this banner then paste it here  

then target our button and then if i add  a hover that's it so if i hover on this  

button i want to change the background color  and our background color will be this one  

then i want to change the text color as well and  it will be white now save and go to our website  

and if i now hover here you can see that our  this bottom color and text color is now changing  

so guys we have successfully created our this  banner so after this banner here you can see  

that we have another list of products  and here we have a heading new arrivals  

and some text here and then we have our products  so now let's add these products into our website  

so for adding this one let's go to our index  file and close this one now here you can see  

that before our banner we have already created  a product one section for our these products  

so now what i will do i will simply copy  this section from here and then paste it  

here once again and if i go to the top here  here you can see that we have a different  

heading so i will simply change the heading  and the heading will be this one new arrivals

that's it and the text is actually same  that's it now save and go to our website  

and here you can see that after our  banner we have created our new arrivals  

and then we have added our products as well

so now what we have to do we have to  actually change the product images  

so for changing the product images let's go  to our code and from here we have to change  

the product images and inside our image folder i  have a products folder and then from our products  

folder i want to take the n1.jpg like this one  we have to change the other product images also

that's it guys we have changed all of the product  images now save and let's go to our website and  

here you can see that we have now different  images for our this new arrivals section

so after creating this section if i go to my  website here you can see that we have two call to  

action banner and then we have some text banner  so now we have to create these banners so for  

creating these banners let's go to our code first  we have to close our this new arrival section  

and then let's create a section and we have to  add a id here and the idea will be sm banner  

that's it and after our id i want to  add this class name section padding  

that's it and inside our this section first we  have to create our this panel our first banner  

so that's why let's create a div tag and the  class name of this div tag will be banner box  

that's it and inside our banner box first  we have to create our this a smaller text  

so that's why let's create a h4 and copy  this text and the text will be this one  

let's create a s2 tag and the text will be this  one then we have to create a spam tag and inside  

this aspen tag we have to add our this text so  that's why copy this text and then paste it here  

then we have to add a button and the button will  be learn more that's it so guys here you can see  

that we have successfully created our first banner  so now we have to install our this banner if i go  

to my website and here you can see that we have  our banner now we have to install our this button  

so that's why let's go to our code and from here  copy this id a small banner then paste it here  

and then if i go to my index we have to copy our  this banner box as well then paste it here and  

inside our banner box if i go to the top here  you can see that we have already created some  

styling for our previous banner so i will simply  copy that styling and then paste it here here you  

can see that we have our background image i will  simply change the background image and it will be  

b17 and here instead of width i will use  minimum width and it will take 580 pixel

and for our height it will be 50 vh that's it now  save and go to our website and here you can see  

that we have our banner and here you can see that  this banner is now taking full width and height  

but i want this banner to take only 580 pixel and  it will take 580 pixel after we add another banner  

here but for now it will take all this width okay  so we will fix this one later so after this one  

let's go to our code and let's go to our index  file so i will simply copy this div tag and then  

paste it here again that's it now save and go  to our website and here you can see that they  

are now in one column so now we have to fix this  one let's go to our code and copy this a smaller  

banner then paste it here i want our those two  banner to be in one row so that's why i will use  

display flags then justify content will be a  space between then flex wrap will be wrapped  

now save and go to our website and here you can  see that as i told you earlier this will take  

580 pixel after we add another banner right beside  it okay after this one let's add some styling for  

our this banner first here you can see that all  the text is now in the center but in our website  

all this text is actually in the left side so  we have to fix this one and from here we have  

to remove the text align and the align items will  be flex has start now save and go to our website  

and here you can see that all the text is now  in the left side now i want some padding from  

the left side so that's why let's go to our  code and add some padding and padding from  

everywhere it will be 30 pixel now save and go  to our website and here you can see that we have  

now 30 pixel of padding so after this one let's  style our this text so for restarting the text  

copy this one from here and then paste it here  we don't need the banner box let's target our h4  

and then we have to add color of white  then we have to add font size of 20 pixel  

then font width of 300 now save and go to our  website we have now styled our this h4 text  

now it is time to style our heading so for  doing this copy this text and then paste it here  

then target our s2 and color will be white font  size will be 28 pixel then we have to add a font  

weight of 800 pixel now save go to our website  here you can see that we have our heading so after  

this one we have to install our this aspen tag  so for a styling copy this one then paste it here  

then target our aspen tag color will be white  font size will be 14 pixel font width will be 500  

then we have to add a padding bottom and it  will be 15 pixel now save and go to our website  

and here you can see that we have our text right  here so guys after this one we have to install  

our these buttons if i go to my website here you  can see that this is our button and this button is  

actually having a transparent background color  and then we have white text and a white border  

and if i hover on our this banner this background  color is now changing so for creating those  

as styling let's go to our code and then  let's go to the top in our global section  

here you can see that we have our global  text now i simply copy this as stylings and  

then paste it here i will simply change the  class name for this one and it will be white

and for this white button we have to decrease the  font size it will be 13 pixel front width will be  

600 and the padding from top and bottom will be 11  pixel and from left and right it will be 18 pixel  

then the text color will be white and  the background color will be transparent  

and then i don't want any border radius cursor  will be pointer border will be one pixel solid

white that's it outline will be none and  then transition will be 0.2 okay now save  

and if i go to my website and here you can  see that our these buttons is not changing  

it means we have to add the white  class inside our index.html file  

here we have our button let's add  the class name and it will be white  

now save and go to our website and now here  you can see that our this button is now having  

the styling which we have created for white  button so i will simply change this button also  

so that's why copy this class name and then  paste it here now save and go to our website  

and here you can see that this button is also  having the styling so after this one now i want  

to add some over effect so that's why let's  go to our code let's go to our style sheet

now what we have to do copy this  banner and then paste it here  

and if i go to my real website here you can  see that if i hover on our card this button  

color is now changing so we have to add the  hover effect on our card not on the bottom so  

that's why let's go to our code and if i go to my  index here you can see that we have a panel box  

and this banner box is actually our card class so  copy this banner box and then paste it here and if  

i hover on this banner box i want to change the  bottom background color and the background color  

will be this one and then i want to change the  border as well and it will be one pixel solid  

and a color will be this one now save and go to  our website and if i hover on our card here you  

can see that our bottom color is now changing  so after our this one now i have to change this  

background image here you can see that we have  two different background image also we have two  

different text here for these two banner so for  changing this one let's go to our code let's go  

to our index file and from here first we have to  change the button name and it will be collection  

and we now change our heading and then change  the text as well now save and go to our website  

and here you can see that we have now different  text here now we have to change the background  

image and if i go to my index here you can see  that our this two banner is having actually  

the same class name and this same class name  is having only one background image and now i  

have to add two different background image for  these two different card so what i have to do  

for our second card i have to add a different  class name and the class name will be banner  

box 2 that's it now if i go to my style sheet  and from here copy this one then paste it here  

and here instead of banner box it will  be banner box too and for the banner box  

too i want to keep all the styling but i  only want to change the background image  

so that's why copy this background  image property then paste it here

and then change the background image and it will  be b10 now save and go to our website and here  

you can see that our this two different banner is  having two different background image so guys here  

you can see that we have done our call to action  banner and this banner is looking so good so after  

this banner we have to create our this text banner  as well so for creating this text banner let's  

go to our code let's go to our index file so for  adding the text banner we have to create a section  

and then we have to add an id here and the id  name will be banner three now for our these panels  

i want to have the exact styling like our this  banner have so that's why i don't want to change  

the class name so i will simply copy a banner from  our previous banner section and then paste it here  

i will simply remove this banner box class  that's it and here i don't want our this  

h4 and our this s pen and button that's it  so for our s2 we have to add our this text

after this one i want to add a h3

take our this text that's it so guys here you  can see that we have created our banner box  

our first banner now save and go to our website  and here you can see that we have our banner now  

first we have to install our this banner so  for studying the manual let's go to our code  

and then copy this banner 3 id from here then  paste it here and if i go to the top here you  

can see that we have some styling for our banner  box class now copy this styling then paste it here  

now first thing i'm going to do i will change  the background image and it will be b7 that's  

it and then i will change the mean width and it  will be 30 percent and the height will be 30 vh  

and the padding will be 20 pixel and then i also  want some margin bottom and it will be 20 pixel  

now save and go to our website and guys here you  can see that we have our panel and for our this  

panel i want to change the heading and the text so  for this one copy this text and then paste it here  

and inside our banner 3 we have our is  2 and for our as2 color will be white

and the font weight will be 900  

then i have to add a font size of 22 pixel after  our s2 copy this one and then paste it here  

then target our h3 and the font size will  be 15 pixel and the font width will be 800  

then we have to add a color and color will be  this one that's it now save and go to our website  

and here you can see that we have different  color for our this text and here you can see  

that our this banner is having the full width  and height but i want to add two more banner  

so for adding those two banner let's go to  our index and copy this one then paste it  

two more times now save and go to our website  and here you can see that we have our all three  

banner but they are now in one column we have to  align them in one row so that's why let's go to  

the top and copy this banner 3 then paste  it here then we have to add display flags  

if justify content space between then we have  to add flex wrap wrap then we have to add  

some padding padding from top and bottom will be  zero but from left and right it will be 80 pixel  

now save and go to our website and here you  can see that we have our all three banners  

in one row so after this one i want to change the  background image for our these two banner so for  

changing the panel let's go to our code let's go  to our index file and then copy this banner box

then paste it here and it will be banner box 2  then we have to add a class here also and it will  

be banner box 3 then go to our style sheet copy  this banner 3 and banner box and i want to have  

all these as styling for our banner 2 and banner  3 but i will only change the background image so  

that's why target our banner box too and then copy  this background image property then paste it here  

then the image will be b4 and then copy  this banner 3 and then paste it here  

and it will be banner box 3 and then we have  to change the image also and it will be 1 8.  

now save and go to our website and here you can  see that our these banners is now having different  

images for each of these different banners okay  after changing the background images now you have  

to change the text as well for this text so this  one will take our this text let's go to our index  

file now save and go to our website and guys here  you can see that we have successfully created our  

this banner section and this banner section is  looking so beautiful so after about this banner  

section if i go to my website here you can see  that we have a newsletter so we have to create  

this newsletter so for creating this one let's  go to our code and then close our these sections  

and then create a section let's add  a id and the id will be newsletter  

so for our newsletter if i go to my  website here you can see that our this  

text section and our this input section  is now in one row so we have to create  

two different div tag our first div tag will  be for our this text and our second div tag  

will be for our this form so that's why let's  create a div tag and the class name will be news  

text and inside this news text we have to create a  h4 tag for our h4 copy this sign up for newsletter  

that's it and then we have to create a paragraph  tag so for this paragraph copy this line from here  

then paste it here if you go to my website  here you can see that our this special offers  

is having a different text color so for adding  the different text color we have to put this  

text inside a different tag so that's why we have  to create a span tag and inside this aspen tag we  

have to put our this text so we have done with  our first div tag let's create another div tag  

and the class name of this div tag will be 4 and  inside this div tag we have to create a input tag  

and the type will be text then we have to add  a placeholder and placeholder will be your  

email address and then let's create  a button and a button will be sign up  

now save and go to our website and here you can  see that we have our text newsletter and then we  

have our email form so we have to install our this  section so for styling let's go to our code and  

then copy this id from here then paste it here so  first what i'm going to do i will use display flex  

then justify content will be a space between  then flex wrap will be lab then align items  

will be center now save and go to our website  and here you can see that our text and our form  

is now in one row so after this one we have to  add a background image for our this section so  

that's why let's add a background image let's  take the url and i have a image folder inside  

this image folder i have a banner folder  as well and then take our b14 dot png  

then background repeat will be no repeat then  we have to position our background image so  

that's why background position and from  top it will be 20 from left it will be 30

and then i will add a background color and the  background color will be this one that's it  

now save and go to our website and here you can  see that we have our different background image  

for our this newsletter so after this one i want  to have some space inside our this section because  

we don't have any space here or any padding  so that's why let's go to our code go to our  

index file and here we have to add our this class  name copy this class name and then paste it here  

now save and go to our website and here you can  see that now we have a space we have some padding  

from left right and top and bottom now i want to  add some space extra space outside of this section  

so that's why we have to add some margin so for  adding the margin we have a class name for that  

one also copy this class name then paste it here  now save and go to our website and here you can  

see that we have a margin from around this section  so after this one we have to install our this text  

so for our styling let's go to our style sheet  copy this newsletter then paste it here and then  

target our h4 then we have to add a font size  of 22 pixel then a font to weight of 700 then  

we have to add a text color and it will be  white then we have to target our paragraph

font size will be 14 pixel then font weight will  be 600 then we have to add this color now save  

and go to our website and here you can see that we  have changed the color of our heading and our text  

now we have to add a different color for our this  text so that's why copy this class and then paste  

it here and i don't want to change any font weight  and font size and we have to add a different color  

for our this particular text and the color will be  this one and then we have to target our aspen tag  

because this particular text is actually inside  our aspen tag so that's right now save and go  

to our website and here you can see that we have  no different color for our this particular text  

so after our this one we have to install our this  input section so for styling this one copy this  

newsletter then paste it here then target our  input so first i will add a height and height  

will be 3.125 ram then we have to add a padding  padding from top and bottom will be 0 but from  

left and right it will be 1.25 am then we have to  add a font size of 14 pixel and width will be 100  

then i will add a border and a border will be  one pixel solid transparent then i want to add  

a border radius four pixel and then 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 input section  

so after our input section we have to install  about this button as well so that's why target  

our newsletter then paste it here then target our  bottom and this button will take the class name  

and the class name will be normal because we  have added a global button styling for our  

this class name so that's why the class name  will be normal now save and go to our website  

and here you can see that we have our sign  up button now i want to add a different  

background color for our this section  so that's why background color will be  

this one and then i will change the text color  as well and it will be white then i want a white  

space of no wrap now save and go to our website  and here you can see that we have our button here  

so now this email section and our this button is  now in one column but i want them to be in one row  

so for aligning them in one row copy  this newsletter and then paste it here  

and then if i go to my index we have a form  class copy this form class and then paste it  

here and here i have to add display flags  and then i will add a width of 40 percent  

now save and go to our website and here you can  see that our this email section and our button is  

now in one row now i want to fix the border radius  for our this section here you can see that we have  

some border radius for the right input section  and the guys from here i want to change the border  

areas as well so that as well as go to our code  and for our input section i will add border top  

right radius and it will be zero now copy this  line and then paste it here again and then it will  

be bottom now save and go to our website here you  can see that we don't have any border areas for  

our this input section in the right side so i will  simply copy this to line from here and then paste  

it here so instead of right it will be left and  then instead of right here it will be also left  

now save and go to our website and guys here you  can see that we have fixed the border radius for  

our input section and for our button and this  new slider section is looking so beautiful  

so guys after creating this new slider section  successfully we have one more section left which  

is footer so we have to create this footer as well  so for creating the footer let's go to our code  

let's go to our index file close our this  section then create a footer and for our  

footer we have to add a class name and  our class name will be this one that's it  

so inside our footer if i go to my website we  have four different column our first column is  

having our logo our contact details and our social  media links and then we have our second column  

for about third column for my account and fourth  column for my app section and payment gateway so  

for adding this we have to go to our footer and  then we have to first create our first column  

so let's create a div tag and the class name  of this div tag will be column that's it  

and inside our column first we have to  create our logo so that's why i create  

a image tag and i have my image inside the  image folder and then i have a logo dot png

and after this one we have to create our h4 for  our this contact heading so copy this contact  

then paste it here then create a paragraph and  for our this paragraph we have to add our this  

address so copy this address from here and then  paste it here in our website here you can see that  

this address text is actually slightly bold from  our this text so we have to add a strong tag  

for our this address so let's create a strong  tag and inside this as strong we have to put  

our this address that's it so like this one  we have to add our this two paragraph also  

and guys here you can see that we have added those  two paragraph now save and if i go to my website  

here you can see that we have our logo our  contact our address phone and ours after  

this one we have to add our this followers and our  this social media links so for this one underneath  

our paragraph we have to create a div tag and  the class name of this div tag will be follow  

and then we have to create a h4 and this will be  follow us and then we have to create another tif  

tag and the class name will take icon and inside  our icon we have to add some social media links  

so first we have to add the facebook icon so  let's take our iphone and then we have to add  

some class and the class name will be ffb fa  facebook dash f now save and go to our website  

and here you can see that here follow us and  then we have also added our facebook icon as well  

so like this icon we have to add our this twitter  instagram pinterest and youtube icon as well  

and guys we have added the rest of the icons now  save and go to our website and here you can see  

that we have our all the icons here so after our  this icon we have to create our second column  

and inside our second column we have our about  section so that's why let's create a div tag  

and the class name of this div tag will be column  as well and then let's create a h4 for our heading  

and it will be about after our about we have  to create a anchor tag because this text are  

actually some links so that's why we have  to create anchor tag and it will be hash  

and our this one will be about us now save and  go to our website and like our about us we have  

to create the rest of the links as well and guys  like this one i have added the rest of the links  

now save and go to our website and here you can  see that we have all the links here so after  

our second column we have to create our third  column as well so for creating our third column  

we have to simply copy this column and then  paste it here and this one will be my account  

now we have to change the text for our these links  and guys here you can see that we have changed the  

text for our these links now save and go to our  website and here you can see that we have our  

my account and then we have also the links for  our account so after our my account we have left  

the last column so this column is for install  app so let's go to our code and underneath this  

div tag let's create a div tag and the class  name will be column and then i will also add a  

different class name for this column only and it  will be in a stroke and then we have to create a  

h4 first and it will be installed app and then we  have to add a paragraph tag for our this paragraph

then we have to create a div tag and the  class name of this div tag will be row  

because inside this row diff tag i will be adding  two different images in one row so first image  

is actually inside my image folder and inside  my image folder i have a pay folder and this  

pay folder is containing a app.jpg file then  i will add our another image and this image  

is also inside my image folder then i have a pay  folder then i have a play dot jpg image so after  

our this image we have to copy this paragraph  then paste it here and this paragraph will take  

our secure payment gateway that's it after this  one we have to create a image tag and i have a  

image folder then i have a pay folder then i have  a pay.png that's it now save and go to our website  

and here you can see that we have our app  store and our payment gateway so after this one

we have one last thing left which  is our this copyright section so  

now we have to add this copyright section  let's go to our code and underneath this  

div tag we have to create a different div tag and  the class name of this div tag will be copyright

and inside this copyright we have to simply  add this text so let's create a paragraph  

and then paste the text here  now save and go to our website

and here you can see that we  have our copyright section  

so our html structure is done for our  copyright now we have to style this section  

so for doing this let's go to our  code and from here copy the footer  

and then paste it here first thing i'm going  to do i will arrange all the columns in one row  

so that's why display will be flex flex  wrap will be wrapped then justify content  

will be a space between now save and go to our  website and here you can see that we have our  

all the columns in one row okay so after this one  we have to target our column because inside our  

column section these links is now in one row  i want them in one column so that's why copy  

this footer and then paste it here then target  our column so after our display flex i will add  

a flex direction and it will be column and then  i don't want any flags wrap and justify content  

i will add a line items and it will be flags  start then i will add a margin bottom 20 pixel  

now save and go to our website and here you can  see that it didn't change anything because this  

column is a class so we have to add a dot before  the class now save and go to our website and here  

you can see that these links is now in one column  okay guys we have successfully done the changes  

after this one we have to now change the text a  bit so for changing the text just copy the footer  

and then paste it here first thing i'm going to  do i will add a space from the bottom of our this  

logo so that's why let's go to our index  and here you can see that we have our logo  

so i will simply add a class name here and it will  be logo that's it and copy this logo from here  

go to our style sheet and then paste it here  then i will add a margin bottom of 30 pixel  

after our logo let's copy our footer and then take  our h4 and this h4 are all the headings inside our  

footer so this h4 heading will take the font  size of 14 pixel then padding bottom of 20 pixel  

then copy this one then paste it here then target  our paragraph and the font size will be 13 pixel  

then we have to add some margin here and a  margin from top 0 from right 0 from bottom  

8 pixel from left 0 and after our footer  paragraph we have to target our links as well  

so that's why target our anchor tag so font  size will be 13 pixel and i don't want any  

underline so that's why text decoration will  be none then i will add some color and the  

color will be this one and then i will add margin  bottom of 10 pixel now save and go to our website  

and here you can see that we have changed all  of the text inside our footer now we have to  

do some changing inside the column here you can  see that we have to change the color of our this  

social media icons and then we have also add some  cover effect here and then we have also add some  

styling in our this section so let's do it copy  this footer and then paste it here and if i go  

to my index in our first column here you can see  that we have a follow so copy this follow class  

then paste it here first i will add some  margin top 20 pixel then copy this section  

and then paste it here then target our  icons and here we have to add some colors  

and the color will be this one then i  will add some padding right of 4 pixel  

then we have to add some cursor pointer now save  and go to our website and here you can see that we  

have our follow us icons so after this one we have  to install our this app section so first what i  

will do i will add some border around these images  so that's why let's put our code copy this footer  

then paste it here then if i go to my index and  if i go to my last column we have added a class  

name here install copy this install class name and  then paste it here and then we have also added a  

row class so copy this row class and then paste  it here then target the images inside this class  

and then i will add a border of one pixel solid  and the color will be this one and then i will  

add a ball of radius of six pixel now save and  go to our website and here you can see that we  

have some beautiful border radius around our  images after this one we have to add some  

space on the top and on the bottom of our these  images so that's why copy this footer and install  

then target our image inside this section  then i will add some margin margin from top  

will be 10 pixel from right 0 from bottom 15  pixel from left 0 now save and go to our website  

and here you can see that we have now a spaces  on the top and the bottom of our images so after  

this one i want to add some hover effect on  our these links and our this icons as well  

so that's right let's go to our code copy  this footer then we have a follow class  

then target our icons and then add some over  effect and if i hover on our icons i want to add  

this color also i want to change the text color of  these links as well so that's why copy this footer  

add a comma and then paste it here then target our  all the anchor tags that's it and then add hover  

now save and go to our website and if i hover here  you can see that our this icon is now changing the  

color and if i hover on all these links here we  can see that these links are changing the text  

color as well so after this one we have almost  done with our footer now we have to align this  

copyright text in the center so that's  why copy our footer then paste it here  

then if i go to my index here you can see that  we have a copyright class so copy this copyright  

class and then paste it here then the width will  be 100 percent and then text align will be center  

now save and go to our website and here you can  see that this text is now in the center so guys  

here you can see that we have successfully created  our footer and this photo is looking so premium  

and so beautiful and guys we have successfully  created our website here you can see that we  

have created our navbar we have created our  hero section our features our featured products  

our banner our new arrivals products our call to  action banner and then text banner newsletter and  

footer so after creating this whole website now we  have to make this website responsive so for making  

this website responsive let's inspect the website  and first we have to make this website responsive  

for our tablet devices it means our medium screen  devices so from here we have to select ipad  

and here you can see that this is our ipad  version and in our medium screen devices  

we can actually keep our nav links like this  but i want to change these nav links it means  

instead of our nav links i want to add a hamburger  menu and i want to hide all of these nav links  

also i will do some few changes for our tablet  device okay now let's start from the top  

so for doing this let's go to our code and  from here we have to start our media query  

so for adding the media query first we have to  initialize the media so that's why take our media  

and then here we have to add a max width and the  max width will be 799 pixel okay now if i go to  

my website and if i select our network here  you can see that we have a section and then  

we have a div tag and then we have an unorder  list and this another list is having a never

here you can see that we have a network so i will  simply click right on that id and then copy the  

rule from here and if i go to my website and if  i paste and here you can see that we have our  

all the nav property and in our nav property  our nav links is now in one row so now what i  

will do i will use flex direction and it will  be column then align items will be flex start  

justify content will be flagged aster  as well now save and go to our website  

and here you can see that our all the  nav links is now showing in one column  

okay now let's go to our code again  and here i will use position fixed  

and we have to add top 0 then write 0 pixel  then we have to add a height of 100 vh  

and then we have to add a width of 300 pixel  now save and go to our website and here you  

can see that our all the nav links is now  in position fixed and if i go to our navbar  

here you can see that we have our position  fixed so now i want to add a background color

and our background color will be this one that's  it also i will add a box shadow and a box shadow  

from x it will be 0 from y 40 pixel and the radius  will be 60 pixel then we have to add a rgba value  

now save and go to our website and here you can  see that we have a different background color  

for our never so after our this  one i want to add some padding  

from the top here so that's why let's add  a padding and a padding from top it will be  

80 pixel right 0 bottom 0 and from the left it  will be 10 pixel now save and go to our website  

and here you can see that we have added  the padding from the top and from the left

okay so after this one now i want to add some  margin bottom for each of these nav links so  

that's why take our network and then paste it here  then target our list tag and add margin bottom  

25 pixel now save and go to our website and here  you can see that we have now margin bottom 25  

pixel okay guys so we have created our network  so now i don't want to see this never always i  

will only see the network whenever i will click  on a hamburger menu so now we have to add a  

hamburger menu so first i will actually hide out  this section and here you can see that i have a  

right value of 0 pixel so i will simply replace  this one with minus 300 pixel now save and go to  

our website and here you can see that our never  is not showing in our screen okay so now it is  

time to add a ham wagger menu so for adding the  hamburger menu let's go to our index and let's go  

to the top here and open our header and here you  can see that we have our network and this is our  

div tag so underneath of this div tag we have to  create another disk tag and we have to add a id  

and the id will be mobile that's it okay so  inside our mobile i want to add a hamburger menu  

so that's why now let's take a icon tag that's  it and here we have to add a id and the id will  

be bar that's it and for our icon we have to add  a class also so let's add a class and the class  

name is f a s f a out dent that's it now save  and go to our website and here you can see that  

we have a hamburger menu if i increase the size  here you can see that we have a hamburger menu  

okay so after this hamburger menu if i go to  my website and if i inspect this website too  

beside our hamburger menu we have  a shopping bag so what i will do  

i will simply copy this one from here and then  paste it here here you can see that we have our  

shopping bag but i don't want this bullet point so  that's why what i have to do i will simply remove  

this list tag that's it now save and go to our  website and now here you can see that we have  

our shopping bag and our hamburger menu but  our shopping bag should be fast so that's why  

take this one and then add it here now save and  go to our website and here you can see that we  

have our hamburger menu and then we have our  shopping bag okay and if i close our inspect  

here you can see that after adding the ham wire  menu and the shopping bag these things is showing  

in our large screen also but i don't want these  things to show in our large screen i only want  

these things to be shown in our medium screen  device and in our smart screen device so what i  

have to do right now just copy this mobile id  and go to our style sheet then go to the top  

and here you can see that we have our nav for  just here we have to paste the id now what we  

have to do if i use display flex and the align  items center and save and go to our website  

here you can see that nothing happens but if i  use display none and save and go to our website  

and here you can see that we don't have our  shopping bag and our ham worker menu anymore so  

we have done with our this one now let's inspect  this again so after inspect our website we cannot  

see our worker menu and our shopping bag here  so what we have to do simply copy this styling  

and then go to our media query and then  paste it here so instead of display none  

it will be display flags now save and go to  our website and here you can see that we have  

our hamburger menu and our shopping bag now we  have to add some colors on these icons so that's  

why copy this mobile then paste it here then  target our eye tag and here we have to add a color  

and color will be this one then we have to add  a font size of 24 pixel then i want some padding  

from the left side and the padding left will be  20 pixel now save and go to our website and here  

you can see that we have our beautiful hamburger  menu and our shopping bag okay so now what we have  

to do we have to make our this hamburger menu  clickable if i click on this hamburger menu i  

want to show the network from the left side okay  so we have to make this hamburger menu clickable  

so for doing this let's go to our code and let's  go to our javascript file so what we have to do if  

i click on this hamburger menu it means i want to  show our network it means we want the navbar also  

so the hamburger menu and the never so we have to  add this hamburger menu and the never inside our  

javascript so that's why let's take a variable  first and first i'm going to take the hamburger  

menu and the variable name is bar so we have to  add document dot get element by id and if you  

remember in our html we have added a id here you  can see that bar for our m worker menu so we have  

to add that bar here so after clicking our amwagar  menu i want to see the number so that's why let's  

take another variable and then the variable name  will be nav that's it then take our document  

dot get element by id and inside our index file  we have a id here never so copy this navbar id  

and then paste it here so first what we have to do  we have to check if our navbar is already opened  

or not if our network is not opened then if anyone  click on this hamburger menu we want to show that  

never and if our navbar is already showing then if  anyone click on this hamburger menu or any close  

button then i want to remove the never so first  we have to check the condition if the network is  

showing in the screen or not so for check we have  to add evil's condition so first let's add if and  

here it will be bar so if anyone click on the bar  it means they are activating our this bar variable  

if anyone clicks on the bar it  means an event will be happening  

so that's why it will be an add even listener  and the event listener name will be click okay  

and if anyone click on our mvw then i want to  run a function and i'm using arrow function  

here that's it and if anyone clicks on the  hamburger menu then i want to show the network  

so this is the nav copy the nav and then paste  it here then we have to add a class list dot add  

so i want to add a class list and the class  list name will be active and now we have to  

create this active class in our style sheet if  i go to the navbar copy the network from here  

and then paste it here then i will add a class  name and it will be active and in our active bar  

i will simply change the right value now copy the  right and then paste it here and i will change the  

value minus 300 to 0 that's it now save and save  our javascript also and if i go to my website and  

if i now click on that hamburger menu here you can  see that our navbar is sliding from the left side  

but we cannot see the sliding so that's why let's  go to our style sheet and in our navbar we have to  

add a transition and the transition will be 0.3  second that's it now save and go to our website  

refresh and now click on that hamburger menu  again and here you can see that our network is  

sliding from the left side so after seeing the  network if anyone wants to remove the network  

they have to click on a button so now we have to  add a close button here like this one here you  

can see that we have a close button so we have  to add this close button in our website also  

so for adding the close button let's go to our  index file and after our this one add anchor tag  

and it will be hash then we have to add a id and  the id will be closed and inside this anchor tag  

let's create a icon so for icon we have to add a  class and the class name will be f a r f a times  

that's it now save and go to our website and if i  click on the hamburger menu here you can see that  

we have a close button so first what we have to do  we have to place this close button on the top here  

so for doing this let's go to our code copy  this close id go to our style sheet and then  

paste it here now we have to use position  absolute then we have to add top 30 pixel  

then left 30 pixel then we have to add  a color and the color will be this one  

then add a font size and it will be 24  pixel now save and go to our website  

and here you can see that our close button is  now showing on the top here so now our this  

button is not clickable we have to make  this button functional if anyone clicks  

on that close button i want to remove  this section so what we have to do  

we have to take this close and go to our  script file copy this line then paste it here  

change the variable name and it will be close  and the id name is also close now copy this if  

and then paste it here and this time we have to  pass our close variable and this time if anyone  

click on our close button then i don't want to  add i want to remove the active button so add  

the remove that's it now save and go to our  website and if i now click on the hamburger menu  

and if i now click on our close button  our never is now moving to the right side  

and this is so amazing guys okay now what we have  to do in our medium screen device i don't want to  

show this shopping bag in our medium screen device  because we already have one here so in our medium  

screen device i want to remove this shopping  bag so what we have to do we have to go to our  

index file and here you can see that this is our  shopping so here we have to add a id and the id  

name will be lg back that's it now copy this id  and then go to our style sheet then paste it here  

then what i have to do i will use display  none now save and go to our website  

now open our navbar and here you can see that the  shopping bag is not showing anymore okay now in  

our medium screen device our navbar is not looking  good now we have to check if our this changing  

affects anything on the large screen device so  that's why i close our responsive section and  

here you can see that we can still see our close  button in our large screen device but i don't want  

to see this close button on the large screen so  let's go to our code and from here copy this close  

and then let's go to the top here and after our  mobile and then use display none now save and  

go to our website and here you can see that we  don't have our close button in our large screen  

now let's inspect our website and if i click  on our hamburger menu here you can see that  

we cannot see our close button here also so  we have to fix this one let's go back to the  

media query and in our close we have to use  display initial now save and go to our website  

and here you can see that  we can see our close button

and guys we have done with our responsive network  and this network is looking so good so after our  

network we have to fix our hero section also so  that's why just select the hero section and here  

you can see that we have our all the hero section  property now click right and copy the rule from  

here then go to our media query then paste it here  and from here we don't need our background image  

our width background size and position and this  display setting from the height it will be 70 ph  

then we will use the background position and  the background from the top it will be 30  

and from the right it will be 30 percent  as well now save and go to our website  

and here you can see that we have  changed the background image position  

so after our hero section now we have to move on  our feature section now if i select this one here  

you can see that there are space between justify  content space between now i want to change it so  

that's why copy the rule from here then paste it  here and i don't want to change anything from here  

and justify content will be center now  save and go to our website and here you  

can see that they are now in center now i  have to add some space between these boxes  

so open the feature and take one of the box  and copy this feature box then paste it here

then remove everything from here and a margin from  the left and right i will add 15 pixel as well  

now save and go to our website and here you can  see that they are now having equal space from  

the left right top and bottom but they are now  in two column actually because of the padding  

if i select the feature here you can see that  they are taking 80 pixel from the left and right  

so i want to change the padding so that's why  copy the rule from here and then go to the top  

then paste it here and from the  left and right it will be 40 pixel  

now save and go to our website that's it now here  you can see that they are now in three column  

and after our feature we  have to go in our featured  

and i want to remove this space also so  select this one and from here copy the rule

then paste it here and i don't want to change  anything from the display flex padding and flex  

wrap but here it will be center now save and go  to our website and here we can see that they are  

now in the center now open our container and  select one of the product and from here copy  

the product rule and then paste it here now what  we have to do i will simply remove everything  

from here these things also and for our margin it  will take margin 15 pixel from everywhere now save  

and go to our website and here you can see that  the product is now having 15 pixel margin from  

everywhere and this is now looking good and after  our products in our banner here you can see that  

the height is too much so i will simply decrease  the height so that's why select this section and  

from here copy the rule of our banner then paste  it here and from here i will remove everything  

this one also and for the height it will be only  20 vh now save and go to our website and here  

you can see that it is not looking good so after  this one our new arrivals are also looking good  

now we have to fix our this banner section so i  want this banner to take full width and height  

so we have to fix this one now select one of  the banner from here and here you can see that  

we have our banner box properties now copy the  banner box properties rule and then paste it here  

now from here i will remove everything and then  background size and position also now minimum  

width will be 100 then height will be 30 vh and  then i don't want to change any padding that's  

it now save and go to our website and here you can  see that they are now having full width and height  

after this one we have to fix this one also  but first we have to fix the extra spacing  

if i select here you can see that we are having  some extra padding so i will simply select the  

section and here you can see that the padding is  having 80 pixels from left and right so we have to  

decrease the padding so that's why copy the rule  from here then paste it here and from here i don't  

want to change anything but the padding will be  40 pixel that's it now save and go to our website  

and here you can see that we don't have  any extra padding anymore okay so after  

this one we have to now fix the width for  our this section also now open our banner 3  

and here you can see that we have our banner box  now open the banner box and they copy the banner  

box rule from here then paste it here and from  here i will remove everything these things also  

and here you can see that we have minimum width  but it will be only width and the width will be 28  

percent now save and go to our website and here  you can see that this banner is now having 28  

percent of width okay so after our banner we have  to move on our newsletter section here you can see  

that everything is looking good but our this email  section is looking so small so we have to select  

the form and if i select the form from here here  you can see that we have a width of 40 percent  

so i will simply increase the width so that's why  copy the rule from here then paste it here and  

i don't want to change the display and the width  will be 70 percent now save and go to our website  

and here you can see that now our email section  is looking much better and if i go to our footer  

section yes our footer section is looking perfect  we don't have to change anything for our footer in  

our media screen device so guys we have done with  our medium screen device now let's move on to our  

small screen device and select one of the mobile  screen device from here and here you can see that  

this is our mobile screen device so we have to fix  and modify some settings so we will do that also  

so for making our website responsive for mobile  screen device let's have the screen side by side  

okay so making our website responsive for  mobile device we have to first add a media  

query so let's call our media and here we have  to add a max width and it will be 4 77 pixel  

that's it and in our small screen device first i  want to fix our network if i select our network  

here you can see that our never is having too much  padding from the left and right side so i will  

simply copy the header rule and then paste it here  and i will remove everything from here that's it  

but the padding will be only 30 pixel from  the left and right and 10 pixel from the top  

and bottom now save and here you can see  that our never is now looking much better  

so after this one now we have to fix our hero  section also so for fixing this one let's select  

our hero section first and copy the rule then  paste it here and for our hero section i don't  

want to change the height but the padding  from the left and right it will be 20 pixel  

and the background position will be 55 percent  that's it now save and here you can see that this  

is our hero section so after our hero section  i want to decrease the font size of our heading  

so that's why select our heading and copy  the rule from here then paste it here  

and i will only change the font size  so that's why i remove everything else  

and this one will be 32 pixel that's it also  i will change the h1 also so that's why select  

this one then copy the rule from here then paste  it here again i will only change the font size  

and the font size will be 38 pixel and guys here  you can see that our hero section is now looking  

much better so after this one here you can see  that our this section is now in one column but  

i want our this feature section to take two column  in our this small screen so for doing this first  

we have to decrease the spacing i mean the padding  from the left and right side so i will simply  

select the section and here you can see that we  have a section padding so i will simply copy the  

rule and then paste it here then i will change  the padding and the padding from everywhere it  

will be only 20 pixel now save and here you can  see that we have now less space from the left  

right and top and bottom now we can adjust the  width of our this box so that's why select the box  

and if we select the box here you can  see that we have a width of 180 pixel  

now we have to simply copy the rule then paste  it here and the width will be 155 pixel then i  

will change the margin and a margin from top it  will be zero and the margin from the right side  

it will be zero from bottom 15 pixel and from left  to zero now save that's it now i want to have some  

space in between of these boxes so that's why if i  select the container and here you can see that we  

have justify content center now i will simply  copy the rule and then paste it here instead  

of center it will be a space between that's it  now save and here you can see that we have now  

a space in between of these boxes so our feature  section is also done now let's go to our product  

and here in our product this section is not taking  100 width if i select the product and here you can  

see that we have a width so i will simply change  the width so that's why i copy the rule and then  

paste it here and remove everything else from here  and the width will be hundred percent now save  

and here you can see that this product is  now taking hundred percent width and height

so after this one here you can see that in our  banner it is not looking good so we have to fix  

the banner we have to increase the height of the  background image of this banner and from here  

select the banner and you copy the rule from here  then paste it here so the height will be 40 vh  

now save and here you can see that it is now  looking much better so after about this one let's  

see here you can see that our this banner is not  having enough height for this text so we have to  

increase the height of this banner so that's  why select one of this banner and here you  

can see that we have our height 30 vh so i  will simply copy the rule then paste it here  

then i will remove the mean width but the height  will be 40 ph now save and here you can see that  

they have now enough space for this text so  after this one now i want to have some space  

in between of this banner so that's why if you  see here you can see that this is our first banner  

and if i go to this one here you can see that we  have a second banner now select our second banner  

and here you can see that we have our style  property for our second banner now copy the  

rule from here then paste it here then i will  remove the background image and here we have to  

add a margin top of 20 pixel that's it now save  and here you can see that we have now a space  

in between of this banner so after this banner we  have to fix our these things so first we have to  

take care of the extra spacing which this section  is having so that's why select the full section  

and here you can see that we have a padding of  40 pixel so i will simply decrease this one to  

20 now save and here you can see that the extra  padding is now gone now we have to make our these  

banners to take the full width so that's why  select one of them and here you can see that  

with now i will simply copy the rule then paste  it here then it will be hundred percent now save  

and now here you can see that our this banner  is now also having 100 width and height

so our banner section is now looking good and in  our newsletter again we have to fix the width of  

our this form so that's why select the form and  here you can see that we have the form now select  

the form here and copy the rule then paste it here  and the width will be hundred percent now save  

and here you can see that this form is now taking  hundred percent with an height after that for our  

newsletter i want to increase the padding from  top bottom left and right so that's why select  

the newsletter section and copy the rules from  here then paste it here and here we have to add  

a padding and the padding from top and bottom  will be 40 pixel from left and right it will be  

20 pixel now save and here you can see that our  this new slider is looking much better after our  

new slider let's go to our footer in our footer  everything is taking perfect with a height and it  

is looking much better but for our this section  here you can see that if i select our copyright  

this copyright is having text align center now i  want to change the aligning so that's why copy the  

rule then paste it here remove the width and  a text align will be a start now save that's  

it now we have changed the aligning for our  copyright so guys let's go to the top here and  

guys here you can see that we have successfully  made our website responsive for mobile screen  

devices and in our mobile screen device this  website is looking so good and so premium

everything is taking perfect with and height  

and here you can see that we have our hamburger  menu as well so guys as you can see that we  

have created our responsive website for our  mobile device for our medium screen device

and for our large screen device as well and  this created website is looking so premium  

that's it guys this was our part one and in  our part one we have learned how to create  

a complete responsive e-commerce website using  html css and javascript then we have also learned  

how to make a website responsive for mobile  screen device and for medium screen device as well  

and this is our part 1 and in our part  2 we will be creating our shop page  

and then we will create our  shop details page like this one

and in our part 3 we will create our blog page  in our part 4 we will create our about us page  

and in our part 5 we will create our contact  us page and at the last in our part 6 we  

will create our cart page and i hope you are  enjoying this course and if you guys really do  

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  

so that's it for today let's  see you in our next part

YouTube TranscriptPreparing your results…

YouTube Transcript:
Build and Deploy Ecommerce Website With HTML CSS JavaScript | Full Responsive Ecommerce Course FREE

Video Transcript

Paste YouTube URL

Get Our Chrome Extension

Get Instant Transcripts: Just Edit the Domain in Your Address Bar!