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

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 you

Channel: Tech2 etc

Views: 1,402,085

Keywords: tech2 etc, ecommerce website html css javascript, ecommerce website html css, ecommerce website, ecommerce website javascript, how to make ecommerce website using html and css, ecommerce website html css javascript bootstrap, ecommerce website tutorial html css javascript php, html css project, html css javascript tutorial, html css website, html css website design tutorial, html css ecommerce website, html css full course, responsive website using html and css

Id: P8YuWEkTeuE

Length: 144min 31sec (8671 seconds)

Published: Mon Dec 20 2021