├── README.md ├── about.html ├── blog.html ├── cart.html ├── contact.html ├── img ├── about │ ├── 1.mp4 │ ├── a1.png │ ├── a2.jpg │ ├── a3.png │ ├── a4.png │ ├── a5.jpg │ ├── a6.jpg │ └── banner.png ├── banner │ ├── b1.jpg │ ├── b10.jpg │ ├── b14.png │ ├── b16.jpg │ ├── b17.jpg │ ├── b18.jpg │ ├── b19.jpg │ ├── b2.jpg │ ├── b20.jpg │ ├── b4.jpg │ └── b7.jpg ├── blog │ ├── b1.jpg │ ├── b2.jpg │ ├── b3.jpg │ ├── b4.jpg │ ├── b5.jpg │ ├── b6.jpg │ └── b7.jpg ├── button.png ├── features │ ├── f1.png │ ├── f2.png │ ├── f3.png │ ├── f4.png │ ├── f5.png │ └── f6.png ├── hero4.png ├── logo.png ├── pay │ ├── app.jpg │ ├── pay.png │ └── play.jpg ├── people │ ├── 1.png │ ├── 2.png │ └── 3.png └── products │ ├── f1.jpg │ ├── f2.jpg │ ├── f3.jpg │ ├── f4.jpg │ ├── f5.jpg │ ├── f6.jpg │ ├── f7.jpg │ ├── f8.jpg │ ├── n1.jpg │ ├── n2.jpg │ ├── n3.jpg │ ├── n4.jpg │ ├── n5.jpg │ ├── n6.jpg │ ├── n7.jpg │ └── n8.jpg ├── index.html ├── script.js ├── shop.html ├── sproduct.html └── style.css /README.md: -------------------------------------------------------------------------------- 1 | # Build-and-Deploy-Ecommerce-Website-With-HTML-CSS-JavaScript 2 | 3 | [Build-and-Deploy-Ecommerce-Website-With-HTML-CSS-JavaScript](https://youtu.be/P8YuWEkTeuE/) 4 | 5 | ## About this course 6 | LEARN HOW TO BUILD AND DEPLOY FULL RESPONSIVE ECOMMERCE WEBSITE USING HTML CSS & JAVASCRIPT. This is a free HTML CSS Course. And in this course we will learn how to build and deploy a full multipage ecommerce website completely from scratch step by step. Will Create from responsive navbar using html CSS JavaScript to responsive footer in one video. 7 | 8 | ## Why This Course? 9 | - Responsive Ecommerce Website Tutorial Using HTML CSS & JavaScript. 10 | - Completely For Beginners. 11 | - Multipage Ecommerce Website Project. 12 | - Best Beginner Friendly Free Course On YouTube. 13 | - Learn How to build amazing professional and responsive websites. 14 | - Learn the fundamentals of web design. 15 | - Modern CSS, including flexbox and CSS Grid for layout. 16 | - Modern CSS techniques to create stunning designs and effects. 17 | - How to use common components and layout patterns for professional website design and development. 18 | - Advanced responsive design using media queries. 19 | - And Many More. 20 | 21 | ## Sections 22 | - Part1: Responsive Home Page Design. 23 | - Part2: Shop Page & Single Product Page. 24 | - Part3: Blog Page. 25 | - Part4: About Page. 26 | - Part5: Contact Us. 27 | - Part6: Ecommerce Shopping Cart. 28 | 29 | Here you will find all the images I'm using to create this responsive ecommerce website. In future image folder can update. 30 | 31 | Get the full source code from [here1](https://www.buymeacoffee.com/tech2etc/e/50932). 32 | 33 | Get the full source code from [here2](https://ko-fi.com/s/06e4db9e09). 34 | -------------------------------------------------------------------------------- /about.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Tech2etc Ecommerce Tutorial 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /blog.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Tech2etc Ecommerce Tutorial 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /cart.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /contact.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /img/about/1.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tech2etc/Build-and-Deploy-Ecommerce-Website/7bf0a6a00c79e37d97a953ed62f47197cd567ed3/img/about/1.mp4 -------------------------------------------------------------------------------- /img/about/a1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tech2etc/Build-and-Deploy-Ecommerce-Website/7bf0a6a00c79e37d97a953ed62f47197cd567ed3/img/about/a1.png -------------------------------------------------------------------------------- /img/about/a2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tech2etc/Build-and-Deploy-Ecommerce-Website/7bf0a6a00c79e37d97a953ed62f47197cd567ed3/img/about/a2.jpg -------------------------------------------------------------------------------- /img/about/a3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tech2etc/Build-and-Deploy-Ecommerce-Website/7bf0a6a00c79e37d97a953ed62f47197cd567ed3/img/about/a3.png -------------------------------------------------------------------------------- /img/about/a4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tech2etc/Build-and-Deploy-Ecommerce-Website/7bf0a6a00c79e37d97a953ed62f47197cd567ed3/img/about/a4.png -------------------------------------------------------------------------------- /img/about/a5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tech2etc/Build-and-Deploy-Ecommerce-Website/7bf0a6a00c79e37d97a953ed62f47197cd567ed3/img/about/a5.jpg -------------------------------------------------------------------------------- /img/about/a6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tech2etc/Build-and-Deploy-Ecommerce-Website/7bf0a6a00c79e37d97a953ed62f47197cd567ed3/img/about/a6.jpg -------------------------------------------------------------------------------- /img/about/banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tech2etc/Build-and-Deploy-Ecommerce-Website/7bf0a6a00c79e37d97a953ed62f47197cd567ed3/img/about/banner.png -------------------------------------------------------------------------------- /img/banner/b1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tech2etc/Build-and-Deploy-Ecommerce-Website/7bf0a6a00c79e37d97a953ed62f47197cd567ed3/img/banner/b1.jpg -------------------------------------------------------------------------------- /img/banner/b10.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tech2etc/Build-and-Deploy-Ecommerce-Website/7bf0a6a00c79e37d97a953ed62f47197cd567ed3/img/banner/b10.jpg -------------------------------------------------------------------------------- /img/banner/b14.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tech2etc/Build-and-Deploy-Ecommerce-Website/7bf0a6a00c79e37d97a953ed62f47197cd567ed3/img/banner/b14.png -------------------------------------------------------------------------------- /img/banner/b16.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tech2etc/Build-and-Deploy-Ecommerce-Website/7bf0a6a00c79e37d97a953ed62f47197cd567ed3/img/banner/b16.jpg -------------------------------------------------------------------------------- /img/banner/b17.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tech2etc/Build-and-Deploy-Ecommerce-Website/7bf0a6a00c79e37d97a953ed62f47197cd567ed3/img/banner/b17.jpg -------------------------------------------------------------------------------- /img/banner/b18.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tech2etc/Build-and-Deploy-Ecommerce-Website/7bf0a6a00c79e37d97a953ed62f47197cd567ed3/img/banner/b18.jpg -------------------------------------------------------------------------------- /img/banner/b19.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tech2etc/Build-and-Deploy-Ecommerce-Website/7bf0a6a00c79e37d97a953ed62f47197cd567ed3/img/banner/b19.jpg -------------------------------------------------------------------------------- /img/banner/b2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tech2etc/Build-and-Deploy-Ecommerce-Website/7bf0a6a00c79e37d97a953ed62f47197cd567ed3/img/banner/b2.jpg -------------------------------------------------------------------------------- /img/banner/b20.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tech2etc/Build-and-Deploy-Ecommerce-Website/7bf0a6a00c79e37d97a953ed62f47197cd567ed3/img/banner/b20.jpg -------------------------------------------------------------------------------- /img/banner/b4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tech2etc/Build-and-Deploy-Ecommerce-Website/7bf0a6a00c79e37d97a953ed62f47197cd567ed3/img/banner/b4.jpg -------------------------------------------------------------------------------- /img/banner/b7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tech2etc/Build-and-Deploy-Ecommerce-Website/7bf0a6a00c79e37d97a953ed62f47197cd567ed3/img/banner/b7.jpg -------------------------------------------------------------------------------- /img/blog/b1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tech2etc/Build-and-Deploy-Ecommerce-Website/7bf0a6a00c79e37d97a953ed62f47197cd567ed3/img/blog/b1.jpg -------------------------------------------------------------------------------- /img/blog/b2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tech2etc/Build-and-Deploy-Ecommerce-Website/7bf0a6a00c79e37d97a953ed62f47197cd567ed3/img/blog/b2.jpg -------------------------------------------------------------------------------- /img/blog/b3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tech2etc/Build-and-Deploy-Ecommerce-Website/7bf0a6a00c79e37d97a953ed62f47197cd567ed3/img/blog/b3.jpg -------------------------------------------------------------------------------- /img/blog/b4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tech2etc/Build-and-Deploy-Ecommerce-Website/7bf0a6a00c79e37d97a953ed62f47197cd567ed3/img/blog/b4.jpg -------------------------------------------------------------------------------- /img/blog/b5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tech2etc/Build-and-Deploy-Ecommerce-Website/7bf0a6a00c79e37d97a953ed62f47197cd567ed3/img/blog/b5.jpg -------------------------------------------------------------------------------- /img/blog/b6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tech2etc/Build-and-Deploy-Ecommerce-Website/7bf0a6a00c79e37d97a953ed62f47197cd567ed3/img/blog/b6.jpg -------------------------------------------------------------------------------- /img/blog/b7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tech2etc/Build-and-Deploy-Ecommerce-Website/7bf0a6a00c79e37d97a953ed62f47197cd567ed3/img/blog/b7.jpg -------------------------------------------------------------------------------- /img/button.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tech2etc/Build-and-Deploy-Ecommerce-Website/7bf0a6a00c79e37d97a953ed62f47197cd567ed3/img/button.png -------------------------------------------------------------------------------- /img/features/f1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tech2etc/Build-and-Deploy-Ecommerce-Website/7bf0a6a00c79e37d97a953ed62f47197cd567ed3/img/features/f1.png -------------------------------------------------------------------------------- /img/features/f2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tech2etc/Build-and-Deploy-Ecommerce-Website/7bf0a6a00c79e37d97a953ed62f47197cd567ed3/img/features/f2.png -------------------------------------------------------------------------------- /img/features/f3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tech2etc/Build-and-Deploy-Ecommerce-Website/7bf0a6a00c79e37d97a953ed62f47197cd567ed3/img/features/f3.png -------------------------------------------------------------------------------- /img/features/f4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tech2etc/Build-and-Deploy-Ecommerce-Website/7bf0a6a00c79e37d97a953ed62f47197cd567ed3/img/features/f4.png -------------------------------------------------------------------------------- /img/features/f5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tech2etc/Build-and-Deploy-Ecommerce-Website/7bf0a6a00c79e37d97a953ed62f47197cd567ed3/img/features/f5.png -------------------------------------------------------------------------------- /img/features/f6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tech2etc/Build-and-Deploy-Ecommerce-Website/7bf0a6a00c79e37d97a953ed62f47197cd567ed3/img/features/f6.png -------------------------------------------------------------------------------- /img/hero4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tech2etc/Build-and-Deploy-Ecommerce-Website/7bf0a6a00c79e37d97a953ed62f47197cd567ed3/img/hero4.png -------------------------------------------------------------------------------- /img/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tech2etc/Build-and-Deploy-Ecommerce-Website/7bf0a6a00c79e37d97a953ed62f47197cd567ed3/img/logo.png -------------------------------------------------------------------------------- /img/pay/app.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tech2etc/Build-and-Deploy-Ecommerce-Website/7bf0a6a00c79e37d97a953ed62f47197cd567ed3/img/pay/app.jpg -------------------------------------------------------------------------------- /img/pay/pay.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tech2etc/Build-and-Deploy-Ecommerce-Website/7bf0a6a00c79e37d97a953ed62f47197cd567ed3/img/pay/pay.png -------------------------------------------------------------------------------- /img/pay/play.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tech2etc/Build-and-Deploy-Ecommerce-Website/7bf0a6a00c79e37d97a953ed62f47197cd567ed3/img/pay/play.jpg -------------------------------------------------------------------------------- /img/people/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tech2etc/Build-and-Deploy-Ecommerce-Website/7bf0a6a00c79e37d97a953ed62f47197cd567ed3/img/people/1.png -------------------------------------------------------------------------------- /img/people/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tech2etc/Build-and-Deploy-Ecommerce-Website/7bf0a6a00c79e37d97a953ed62f47197cd567ed3/img/people/2.png -------------------------------------------------------------------------------- /img/people/3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tech2etc/Build-and-Deploy-Ecommerce-Website/7bf0a6a00c79e37d97a953ed62f47197cd567ed3/img/people/3.png -------------------------------------------------------------------------------- /img/products/f1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tech2etc/Build-and-Deploy-Ecommerce-Website/7bf0a6a00c79e37d97a953ed62f47197cd567ed3/img/products/f1.jpg -------------------------------------------------------------------------------- /img/products/f2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tech2etc/Build-and-Deploy-Ecommerce-Website/7bf0a6a00c79e37d97a953ed62f47197cd567ed3/img/products/f2.jpg -------------------------------------------------------------------------------- /img/products/f3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tech2etc/Build-and-Deploy-Ecommerce-Website/7bf0a6a00c79e37d97a953ed62f47197cd567ed3/img/products/f3.jpg -------------------------------------------------------------------------------- /img/products/f4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tech2etc/Build-and-Deploy-Ecommerce-Website/7bf0a6a00c79e37d97a953ed62f47197cd567ed3/img/products/f4.jpg -------------------------------------------------------------------------------- /img/products/f5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tech2etc/Build-and-Deploy-Ecommerce-Website/7bf0a6a00c79e37d97a953ed62f47197cd567ed3/img/products/f5.jpg -------------------------------------------------------------------------------- /img/products/f6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tech2etc/Build-and-Deploy-Ecommerce-Website/7bf0a6a00c79e37d97a953ed62f47197cd567ed3/img/products/f6.jpg -------------------------------------------------------------------------------- /img/products/f7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tech2etc/Build-and-Deploy-Ecommerce-Website/7bf0a6a00c79e37d97a953ed62f47197cd567ed3/img/products/f7.jpg -------------------------------------------------------------------------------- /img/products/f8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tech2etc/Build-and-Deploy-Ecommerce-Website/7bf0a6a00c79e37d97a953ed62f47197cd567ed3/img/products/f8.jpg -------------------------------------------------------------------------------- /img/products/n1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tech2etc/Build-and-Deploy-Ecommerce-Website/7bf0a6a00c79e37d97a953ed62f47197cd567ed3/img/products/n1.jpg -------------------------------------------------------------------------------- /img/products/n2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tech2etc/Build-and-Deploy-Ecommerce-Website/7bf0a6a00c79e37d97a953ed62f47197cd567ed3/img/products/n2.jpg -------------------------------------------------------------------------------- /img/products/n3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tech2etc/Build-and-Deploy-Ecommerce-Website/7bf0a6a00c79e37d97a953ed62f47197cd567ed3/img/products/n3.jpg -------------------------------------------------------------------------------- /img/products/n4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tech2etc/Build-and-Deploy-Ecommerce-Website/7bf0a6a00c79e37d97a953ed62f47197cd567ed3/img/products/n4.jpg -------------------------------------------------------------------------------- /img/products/n5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tech2etc/Build-and-Deploy-Ecommerce-Website/7bf0a6a00c79e37d97a953ed62f47197cd567ed3/img/products/n5.jpg -------------------------------------------------------------------------------- /img/products/n6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tech2etc/Build-and-Deploy-Ecommerce-Website/7bf0a6a00c79e37d97a953ed62f47197cd567ed3/img/products/n6.jpg -------------------------------------------------------------------------------- /img/products/n7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tech2etc/Build-and-Deploy-Ecommerce-Website/7bf0a6a00c79e37d97a953ed62f47197cd567ed3/img/products/n7.jpg -------------------------------------------------------------------------------- /img/products/n8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tech2etc/Build-and-Deploy-Ecommerce-Website/7bf0a6a00c79e37d97a953ed62f47197cd567ed3/img/products/n8.jpg -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Tech2etc Ecommerce Tutorial 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /script.js: -------------------------------------------------------------------------------- 1 | // Script for navigation bar 2 | -------------------------------------------------------------------------------- /shop.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Tech2etc Ecommerce Tutorial 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /sproduct.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Tech2etc Ecommerce Tutorial 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 20 | 21 | 22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Spartan:wght@100;200;300;400;500;600;700;800;900&display=swap"); 2 | * { 3 | margin: 0; 4 | padding: 0; 5 | box-sizing: border-box; 6 | font-family: "Spartan", sans-serif; 7 | } 8 | 9 | html { 10 | scroll-behavior: smooth; 11 | } 12 | 13 | /* Global Styles */ 14 | 15 | h1 { 16 | font-size: 50px; 17 | line-height: 64px; 18 | color: #222; 19 | } 20 | 21 | h2 { 22 | font-size: 46px; 23 | line-height: 54px; 24 | color: #222; 25 | } 26 | 27 | h4 { 28 | font-size: 20px; 29 | color: #222; 30 | } 31 | 32 | h6 { 33 | font-weight: 700; 34 | font-size: 12px; 35 | } 36 | 37 | p { 38 | font-size: 16px; 39 | color: #465b52; 40 | margin: 15px 0 20px 0; 41 | } 42 | 43 | .section-p1 { 44 | padding: 40px 80px; 45 | } 46 | 47 | .section-m1 { 48 | margin: 40px 0; 49 | } 50 | 51 | body { 52 | width: 100%; 53 | } 54 | --------------------------------------------------------------------------------