Featured

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



Published
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 ):
https://drive.google.com/file/d/1mOhxYobuYYcjyvGTb8i9qLmez6GQtJIV/view?usp=sharing

*How To Download*

Step 1 :- click the google drive link ☝☝☝
Step 2 :- click on download link in the google drive.
Step 3 :- extract zip file to your desired folder.
Step 4 :- open the folder 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 edit it as you like.

swiper.js link:
https://swiperjs.com/

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

google fonts:
https://fonts.google.com/specimen/Nunito?query=poppins

Editor : - visual studio code with Laetus: Dark Vibrant Theme
Browser : - google chrome
UI Tool : - Figma
Images / Video / SVG : -
01 - https://www.freepik.com/
02 - https://storyset.com/
03 - https://pixabay.com/
04 - https://unsplash.com/
05 - https://pixabay.com/

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

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
Category
Web design
Be the first to comment