how to make a total responsive multipages e-commerce site desing using html css/ sass and javascript from scratch.
produce a complete responsive multi-page ecommerce/ online store/ electronic store/ electronic commerce website style template using html css/ sass and vanilla javascript action by step from scratch.
the highlight of this website are:
responsive header section with search bar using vanilla javascript.
responsive side-bar menu section utilizing vanilla javascript.
responsive home area with touch slider taking legal action against swiper.js.
responsive banner area css grid.
responsive arrivals area css grid.
responsive about area css flexbox.
responsive FAQ/ accordion area using vanilla javascript.
responsive reivews area css with touch slider using swiper.js.
responsive classification section css grid.
responsive products area css grid.
responsive product banner section css flexbox.
responsive contact details section css grid.
responsive contact area css flexbox.
responsive newsletter area css flexbox.
responsive login and register section.
responsive shopping cart area css grid.
responsive footer section css flexbox.
* SOURCE CODES *
DOWNLOAD THE SOURCE CODE FROM GOOGLE DRIVE (INCLUDES IMAGES ):
https://drive.google.com/file/d/1t1ToCp_CayI3taP8IJiW4D77jZU3jOR9/view?usp=sharing
* How To Download *.
Action 1:- click the google drive link.
Step 2:- click on download link in the google drive.
Step 3:- extract the zip file into your preferred folder.
Step 4:- open the folder and after that rename each coding files.
Step 5:- transform each coding files example (index.txt to index.html) – (style.txt to style.css) – (script.txt to script.js ).
Action 6:- open the transformed index.html file into your internet browser.
Action 7:- open your editor and put your transformed into it and after that edit it as you like.
swiper.js connect:.
https://swiperjs.com/.
font remarkable cdn link:.
https://cdnjs.com/libraries/font-awesome.
google font styles:.
https://fonts.google.com/specimen/Poppins.
clip-path generator:.
https://bennettfeely.com/clippy/.
Editor: – visual studio code with Laetus: Dark Lively Style.
Web browser: – google chrome.
UI Tool: – Figma.
Images/ Video/ SVG: -.
01 – https://www.freepik.com/.
02 – https://storyset.com/.
03 – https://undraw.co/.
04 – https://pixabay.com/.
05 – https://unsplash.com/.
06 – https://pixabay.com/.
07 – https://www.flaticon.com/.
New To My Channel Subscribe Now And See More Things Like This:.
https://youtube.com/channel/UCKwgH3vASrD2brd1l2m6NHw.
Timestamp:.
0:00 demo.
5:43 file structure.
8:09 header & side-bar section.
33:36 footer area.
43:41 house section.
54:58 banner section.
59:29 arrivals section.
1:10:42 about section.
1:3:57 frequently asked question section.
1:22:08 evaluations area.
1:28:43 category area.
1:34:29 products section.
1:46:29 item banner section.
1:50:55 contact info section.
1:55:03 contact area.
2:00:23 newsletter section.
2:05:46 login.
2:12:09 register.
2:13:53 shopping cart.
2:24:19 last demo.
#FrontEnd.
#eCommerce.
#MultiPages.
Source