Skip to content

PRO TIP Block youtube.com at the DNS level — Pi-hole, NextDNS or your hosts file — but allow youtube-nocookie.com and i.ytimg.com. These tutorials keep playing; the rabbit hole does not.

Learning without distractions

How To Make A Responsive E-Commerce Fashion Website Design Using [ HTML CSS JS ] – From Scratch

65.8K views on YouTube

create a complete responsive e-commerce website design template using html css and vanilla javascript.
how to make a complete responsive fashion e-commerce website design with dark and light theme toggle effect using vanilla javascript.

the main feature of this website are:
✔ responsive header / navbar section with search bar.
✔ dark and light mode toggle effect using vanilla javascript.
✔ responsive home section using flexbox.
✔ responsive category card section with hover effects using flexbox.
✔ responsive product touch slider section using swiper.js.
✔ responsive deal section with count down effect using vanilla javascript.
✔ responsive review touch slider section using swiper.js.
✔ responsive footer section using flexbox.

* SOURCE CODES *
https://www.buymeacoffee.com/mrwebdesigner/e/155029

swiper.js
https://swiperjs.com/

font awesome cdn link:
https://cdnjs.com/libraries/font-awesome

google fonts:
https://fonts.google.com/specimen/Roboto

New To My Channel Subscribe Now And See More Stuff Like This:
https://youtube.com/channel/UCKwgH3vASrD2brd1l2m6NHw

timestamps:
0:00 demo
5:13 file structure
6:04 header section
14:58 navbar section
19:51dark/light mode
21:23 home section
24:43 category section
28:15 products section
39:42 featured products section
47:38 deal section
54:29 review section
59:17 footer section
1:03:27 final demo

#FrontEnd
#ECommerce
#FashionWebsite