Responsive E-Commerce Fashion Website Design Template Using HTML – SASS – JavaScript || Step By Step



create a complete responsive fashion ecommerce website design using html css / sass / scss and vanilla javascript from scratch.
how to make a complete responsive fashion e-commerce website design template using html css / sass / scss and vanilla javascript for beginners.

The Main Feature Of This Website Are:
✅ Responsive header with search box and toggle menu effect uisng vanilla javascript and css flexbox.
✅ Responsive home touch slider using swiperjs.
✅ Responsive banner section using css flexbox.
✅ Responsive products card section with filterable product effect using vanilla javascript.
✅ Responsive deal section using css flexbox.
✅ Responsive featured products section with touch slider using swiperjs.
✅ Responsive review / testimonial section with touch slider using swiperjs.
✅ Responsive contact section using css flex and grid.
✅ Responsive blog / post / news section with touch slider using swiperjs.
✅ Responsive footer section using css grid.

*SOURCE CODES*

DOWNLOAD THE SOURCE CODE FROM GOOGLE DRIVE ( INCLUDES IMAGES ):

*How To Download*

Step 1 :- click the google drive link ☝☝☝
Step 2 :- click on download link in the google drive.
Step 3 :- extract the zip file into your desired folder.
Step 4 :- open the folder and then rename each coding files.
Step 5 :- convert each coding files example ( index.txt to index.html ) – ( style.txt to style.css ) – ( script.txt to script.js ).
Step 6 :- open the converted index.html file into your browser.
Step 7 :- open your editor and put your converted into it and then edit it as you like.

swiper.js link:

font awesome cdn link:

google fonts:

Editor : – visual studio code with Laetus: Dark Vibrant Theme
Browser : – google chrome
UI Tool : – Figma
Images / Video / SVG : –
01 –
02 –
03 –
04 –
05 –
06 –

New To My Channel Subscribe Now And See More Stuff Like This:

Timestamp:
0:00 demo
5:10 file structure
6:11 header section
16:48 home section
23:47 banner section
26:57 products section
40:39 deals section
43:51 featured section
47:44 review section
51:42 contact section
57:52 blogs section
1:02:43 footer section
1:07:13 final demo

#FrontEnd
#ECommerce
#FashionWebsite

25 comments

  1. You deserve alot of subscribers bro.. free tutorial and I love how you share your knowledge. Love from PH❤️

  2. Hello.

    Can I use some of the work from the video for my own portfolio.

  3. Please make video for each section separately and add your voice while explaining, like how to achieve blog section with cards etc., so that it would help a lot..
    Please please…

  4. hanks for the information, I'm glad I found the channel I really needed to learn programming.

  5. could you do multiple filter on the product? like based on the color and product type. Thanks a lot for your videos

  6. Friend, congratulations on your videos. Thank you very much! Watching from Bangladesh.

  7. Amigo como vc linka o <link rel: "stylesheet" href: "css./style.css">. Mais vc edita como SCSS, poderia me explicar pq estou fazendo igualzinho mais quando edito o SCSS ele não altera no site! Poderia me ajduar como linkar o CSS no SCSS?

  8. it's too fast bro because I am new. if you go slow and using your voice I learn more also everyone hopes. thank you love you ♥

  9. Can you please tell me from where are you getting design like images and design creating by your self or downloading psd from some where website please

  10. Friend, congratulations on your videos. They are excellent!! I'm just starting front-end development and I'm learning a lot from your videos. Thank you very much! Watching from Brazil!

  11. All your videos are very helpful and inspire me in learning to make a good website, thank you very much. You are legend bro 👏🏼

  12. Ola poderia criar um templete de rede social..e portal de noticias…..Paulo/São Paulo/Brasil

  13. Brother, I like your videos very much. I hope everybody also enjoying your tutorials. 💟💟

  14. Mr. Web Designer can you please answer that why do you leave one line after every line of code?

  15. Bhai agar aap music ki jagah apni voice use karoge to aap ke subs increase ho jayenge bohat hi jald Insha Allah.
    Wiase aap ke designs bohat ache lagte hain.

Leave a comment

Your email address will not be published.