Ecommerce Website Source Code

The Coding Hubs

Last updated: 2024/03/08 at 11:12 AM

Hello Guys, welcome back to another blog from The Coding Hubs. Today in this blog we are going to
build a complete e-commerce website with HTML, CSS, and JAVASCRIPT step by step. Ecommerce
Website Source Code. In my previous blog post, we created a Netflix clone using HTML, CSS, and
JavaScript. It offers many useful CSS tips, so check it out if you haven’t already.

Don’t worry if you’ve never used HTML and CSS to make a website before; I’ll walk you through the
process step-by-step so you can get the same outcome as me. and I am also going to share with you the
complete Ecommerce Website Source Code

Features of this E-commerce Website

Here are some features of the Ecommerce Website Source Code.

Responsive Navigation Bar with toggle effect

Responsive Carousel with Glidejs

Categories Section

New Arrival Products Section

Contact Section

Footer
 Responsive PopUp

Product Page with Pagination and Sorting

Cart Page

Responsive Login Page

Responsive SignUp Page

Video Of Ecommerce Website

Read More: Create BMI Calculator Using HTML, CSS, and JavaScript

Build Ecommerce Website Using HTML, CSS, and JavaScript

Read More: Random Password Generator Using Python

Ecommerce Website Source Code

Header Section of Ecommerce Website Source Code

1. <!-- Header -->

2. <header class="header" id="header">
3. <!-- Top Nav -->
4. <div class="top-nav">
5. <div class="container d-flex">
6. <p>Order Online Or Call Us: (001) 2222-55555</p>
7. <ul class="d-flex">
8. <li><a href="#">About Us</a></li>
9. <li><a href="#">FAQ</a></li>
10. <li><a href="#">Contact</a></li>
11. </ul>
12. </div>
13. </div>
14. <div class="navigation">
15. <div class="nav-center container d-flex">
16. <a href="/" class="logo"><h1>Dans</h1></a>
17.
18. <ul class="nav-list d-flex">
19. <li class="nav-item">
20. <a href="/" class="nav-link">Home</a>
21. </li>
22. <li class="nav-item">
23. <a href="product.html" class="nav-link">Shop</a>
24. </li>
25. <li class="nav-item">
26. <a href="#terms" class="nav-link">Terms</a>
27. </li>
28. <li class="nav-item">
29. <a href="#about" class="nav-link">About</a>
30. </li>
31. <li class="nav-item">
32. <a href="#contact" class="nav-link">Contact</a>
33. </li>
34. <li class="icons d-flex">
35. <a href="login.html" class="icon">
36. <i class="bx bx-user"></i>
37. </a>
38. <div class="icon">
39. <i class="bx bx-search"></i>
40. </div>
41. <div class="icon">
42. <i class="bx bx-heart"></i>
43. <span class="d-flex">0</span>
44. </div>
45. <a href="cart.html" class="icon">
46. <i class="bx bx-cart"></i>
47. <span class="d-flex">0</span>
48. </a>
49. </li>
50. </ul>
51.
52. <div class="icons d-flex">
53. <a href="login.html" class="icon">
54. <i class="bx bx-user"></i>
55. </a>
56. <div class="icon">
57. <i class="bx bx-search"></i>
58. </div>
59. <div class="icon">
60. <i class="bx bx-heart"></i>
61. <span class="d-flex">0</span>
62. </div>
63. <a href="cart.html" class="icon">
64. <i class="bx bx-cart"></i>
65. <span class="d-flex">0</span>
66. </a>
67. </div>
68.
69. <div class="hamburger">
70. <i class="bx bx-menu-alt-left"></i>
71. </div>
72. </div>
73. </div>
74.
75. <div class="hero">
76. <div class="glide" id="glide_1">
77. <div class="glide__track" data-glide-el="track">
78. <ul class="glide__slides">
79. <li class="glide__slide">
80. <div class="center">
81. <div class="left">
82. <span class="">New Inspiration 2020</span>
83. <h1 class="">NEW COLLECTION!</h1>
84. <p>Trending from men's and women's style
collection</p>
85. <a href="#" class="hero-btn">SHOP NOW</a>
86. </div>
87. <div class="right">
 88. <img class="img1" src="./images/hero-1.png"
alt="">
89. </div>
90. </div>
91. </li>
92. <li class="glide__slide">
93. <div class="center">
94. <div class="left">
95. <span>New Inspiration 2020</span>
96. <h1>THE PERFECT MATCH!</h1>
97. <p>Trending from men's and women's style
collection</p>
98. <a href="#" class="hero-btn">SHOP NOW</a>
99. </div>
100. <div class="right">
101. <img class="img2" src="./images/hero-2.png"
alt="">
102. </div>
103. </div>
104. </li>
105. </ul>
106. </div>
107. </div>
108. </div>
109. </header>

Categories Section of Ecommerce Website Source Code

1. <!-- Categories Section -->

2. <section class="section category">
3. <div class="cat-center">
4. <div class="cat">
5. <img src="./images/cat3.jpg" alt="" />
6. <div>
7. <p>WOMEN'S WEAR</p>
8. </div>
9. </div>
10. <div class="cat">
11. <img src="./images/cat2.jpg" alt="" />
12. <div>
13. <p>ACCESSORIES</p>
14. </div>
15. </div>
 16. <div class="cat">
17. <img src="./images/cat1.jpg" alt="" />
18. <div>
19. <p>MEN'S WEAR</p>
20. </div>
21. </div>
22. </div>
23. </section>

New Arrivals Section of Ecommerce Website Source Code

1. <!-- New Arrivals -->

2. <section class="section new-arrival">
3. <div class="title">
4. <h1>NEW ARRIVALS</h1>
5. <p>All the latest picked from designer of our store</p>
6. </div>
7.
8. <div class="product-center">
9. <div class="product-item">
10. <div class="overlay">
11. <a href="productDetails.html" class="product-thumb">
12. <img src="./images/product-1.jpg" alt="" />
13. </a>
14. </div>
15. <div class="product-info">
16. <span>MEN'S CLOTHES</span>
17. <a href="productDetails.html">Quis Nostrud
Exercitation</a>
18. <h4>$700</h4>
19. </div>
20. <ul class="icons">
21. <li><i class="bx bx-heart"></i></li>
22. <li><i class="bx bx-search"></i></li>
23. <li><i class="bx bx-cart"></i></li>
24. </ul>
25. </div>
26. <div class="product-item">
27. <div class="overlay">
28. <a href="" class="product-thumb">
29. <img src="./images/product-3.jpg" alt="" />
30. </a>
31. <span class="discount">50%</span>
32. </div>
33.
34. <div class="product-info">
35. <span>MEN'S CLOTHES</span>
36. <a href="">Sonata White Men’s Shirt</a>
37. <h4>$800</h4>
38. </div>
39. <ul class="icons">
40. <li><i class="bx bx-heart"></i></li>
41. <li><i class="bx bx-search"></i></li>
42. <li><i class="bx bx-cart"></i></li>
43. </ul>
44. </div>
45. <div class="product-item">
46. <div class="overlay">
47. <a href="" class="product-thumb">
48. <img src="./images/product-2.jpg" alt="" />
49. </a>
50. </div>
51. <div class="product-info">
52. <span>MEN'S CLOTHES</span>
53. <a href="">Concepts Solid Pink Men’s Polo</a>
54. <h4>$150</h4>
55. </div>
56. <ul class="icons">
57. <li><i class="bx bx-heart"></i></li>
58. <li><i class="bx bx-search"></i></li>
59. <li><i class="bx bx-cart"></i></li>
60. </ul>
61. </div>
62. <div class="product-item">
63. <div class="overlay">
64. <a href="" class="product-thumb">
65. <img src="./images/product-4.jpg" alt="" />
66. </a>
67. <span class="discount">50%</span>
68. </div>
69. <div class="product-info">
70. <span>MEN'S CLOTHES</span>
71. <a href="">Edor do eiusmod tempor</a>
72. <h4>$900</h4>
73. </div>
74. <ul class="icons">
75. <li><i class="bx bx-heart"></i></li>
76. <li><i class="bx bx-search"></i></li>
77. <li><i class="bx bx-cart"></i></li>
78. </ul>
79. </div>
80. <div class="product-item">
81. <div class="overlay">
82. <a href="" class="product-thumb">
83. <img src="./images/product-5.jpg" alt="" />
84. </a>
85. </div>
86. <div class="product-info">
87. <span>MEN'S CLOTHES</span>
88. <a href="">Edor do eiusmod tempor</a>
89. <h4>$100</h4>
90. </div>
91. <ul class="icons">
92. <li><i class="bx bx-heart"></i></li>
93. <li><i class="bx bx-search"></i></li>
94. <li><i class="bx bx-cart"></i></li>
95. </ul>
96. </div>
97. <div class="product-item">
98. <div class="overlay">
99. <a href="" class="product-thumb">
100. <img src="./images/product-6.jpg" alt="" />
101. </a>
102. </div>
103. <div class="product-info">
104. <span>MEN'S CLOTHES</span>
105. <a href="">Edor do eiusmod tempor</a>
106. <h4>$500</h4>
107. </div>
108. <ul class="icons">
109. <li><i class="bx bx-heart"></i></li>
110. <li><i class="bx bx-search"></i></li>
111. <li><i class="bx bx-cart"></i></li>
112. </ul>
113. </div>
114. <div class="product-item">
115. <div class="overlay">
116. <a href="" class="product-thumb">
117. <img src="./images/product-7.jpg" alt="" />
 118. </a>
119. <span class="discount">50%</span>
120. </div>
121. <div class="product-info">
122. <span>MEN'S CLOTHES</span>
123. <a href="">Edor do eiusmod tempor</a>
124. <h4>$200</h4>
125. </div>
126. <ul class="icons">
127. <li><i class="bx bx-heart"></i></li>
128. <li><i class="bx bx-search"></i></li>
129. <li><i class="bx bx-cart"></i></li>
130. </ul>
131. </div>
132. <div class="product-item">
133. <div class="overlay">
134. <a href="" class="product-thumb">
135. <img src="./images/product-2.jpg" alt="" />
136. </a>
137. </div>
138. <div class="product-info">
139. <span>MEN'S CLOTHES</span>
140. <a href="">Edor do eiusmod tempor</a>
141. <h4>$560</h4>
142. </div>
143. <ul class="icons">
144. <li><i class="bx bx-heart"></i></li>
145. <li><i class="bx bx-search"></i></li>
146. <li><i class="bx bx-cart"></i></li>
147. </ul>
148. </div>
149. </div>
150. </section>

Promo Section of Ecommerce Website Source Code

1. <!-- Promo -->

2. <section class="section banner">
3. <div class="left">
4. <span class="trend">Trend Design</span>
5. <h1>New Collection 2021</h1>
6. <p>New Arrival <span class="color">Sale 50% OFF</span> Limited Time Offer</p>
7. <a href="#" class="btn btn-1">Discover Now</a>
8. </div>
9. <div class="right">
10. <img src="./images/banner.png" alt="">
 11. </div>
12. </section>

Featured Section of Ecommerce Website Source Code

1. <!-- Featured -->

2.
3. <section class="section new-arrival">
4. <div class="title">
5. <h1>Featured</h1>
6. <p>All the latest picked from designer of our store</p>
7. </div>
8.
9. <div class="product-center">
10. <div class="product-item">
11. <div class="overlay">
12. <a href="" class="product-thumb">
13. <img src="./images/product-7.jpg" alt="" />
14. </a>
15. <span class="discount">50%</span>
16. </div>
17. <div class="product-info">
18. <span>MEN'S CLOTHES</span>
19. <a href="">Quis Nostrud Exercitation</a>
20. <h4>$700</h4>
21. </div>
22. <ul class="icons">
23. <li><i class="bx bx-heart"></i></li>
24. <li><i class="bx bx-search"></i></li>
25. <li><i class="bx bx-cart"></i></li>
26. </ul>
27. </div>
28. <div class="product-item">
29. <div class="overlay">
30. <a href="" class="product-thumb">
31. <img src="./images/product-4.jpg" alt="" />
32. </a>
33. </div>
34.
35. <div class="product-info">
36. <span>MEN'S CLOTHES</span>
37. <a href="">Sonata White Men’s Shirt</a>
38. <h4>$800</h4>
39. </div>
40. <ul class="icons">
41. <li><i class="bx bx-heart"></i></li>
42. <li><i class="bx bx-search"></i></li>
43. <li><i class="bx bx-cart"></i></li>
44. </ul>
45. </div>
46. <div class="product-item">
47. <div class="overlay">
48. <a href="" class="product-thumb">
49. <img src="./images/product-1.jpg" alt="" />
50. </a>
51. <span class="discount">40%</span>
52. </div>
53. <div class="product-info">
54. <span>MEN'S CLOTHES</span>
55. <a href="">Concepts Solid Pink Men’s Polo</a>
56. <h4>$150</h4>
57. </div>
58. <ul class="icons">
59. <li><i class="bx bx-heart"></i></li>
60. <li><i class="bx bx-search"></i></li>
61. <li><i class="bx bx-cart"></i></li>
62. </ul>
63. </div>
64. <div class="product-item">
65. <div class="overlay">
66. <a href="" class="product-thumb">
67. <img src="./images/product-6.jpg" alt="" />
68. </a>
69. </div>
70. <div class="product-info">
71. <span>MEN'S CLOTHES</span>
72. <a href="">Edor do eiusmod tempor</a>
73. <h4>$900</h4>
74. </div>
75. <ul class="icons">
76. <li><i class="bx bx-heart"></i></li>
77. <li><i class="bx bx-search"></i></li>
78. <li><i class="bx bx-cart"></i></li>
79. </ul>
80. </div>
81.
82. </section>
Contact Section of Ecommerce Website Source Code

1. <!-- Contact -->

2. <section class="section contact">
3. <div class="row">
4. <div class="col">
5. <h2>EXCELLENT SUPPORT</h2>
6. <p>We love our customers and they can reach us any time
7. of day we will be at your service 24/7</p>
8. <a href="" class="btn btn-1">Contact</a>
9. </div>
10. <div class="col">
11. <form action="">
12. <div>
13. <input type="email" placeholder="Email Address">
14. <a href="">Send</a>
15. </div>
16. </form>
17. </div>
18. </div>
19. </section>

Footer Section of Ecommerce Website Source Code

1. <!-- Footer -->

2. <footer class="footer">
3. <div class="row">
4. <div class="col d-flex">
5. <h4>INFORMATION</h4>
6. <a href="">About us</a>
7. <a href="">Contact Us</a>
8. <a href="">Term & Conditions</a>
9. <a href="">Shipping Guide</a>
10. </div>
11. <div class="col d-flex">
12. <h4>USEFUL LINK</h4>
13. <a href="">Online Store</a>
14. <a href="">Customer Services</a>
15. <a href="">Promotion</a>
16. <a href="">Top Brands</a>
17. </div>
18. <div class="col d-flex">
19. <span><i class='bx bxl-facebook-square'></i></span>
 20. <span><i class='bx bxl-instagram-alt' ></i></span>
21. <span><i class='bx bxl-github' ></i></span>
22. <span><i class='bx bxl-twitter' ></i></span>
23. <span><i class='bx bxl-pinterest' ></i></span>
24. </div>
25. </div>
26. </footer>

PopUp of Ecommerce Website Source Code

1. <div class="popup hide-popup">

2. <div class="popup-content">
3. <div class="popup-close">
4. <i class='bx bx-x'></i>
5. </div>
6. <div class="popup-left">
7. <div class="popup-img-container">
8. <img class="popup-img" src="./images/popup.jpg"
alt="popup">
9. </div>
10. </div>
11. <div class="popup-right">
12. <div class="right-content">
13. <h1>Get Discount <span>50%</span> Off</h1>
14. <p>Sign up to our newsletter and save 30% for you next
purchase. No spam, we promise!
15. </p>
16. <form action="#">
17. <input type="email" placeholder="Enter your email..."
class="popup-form">
18. <a href="#">Subscribe</a>
19. </form>
20. </div>
21. </div>
22. </div>
23. </div>

Output of Ecommerce Website Source Code

 Build Ecommerce Website Using HTML, CSS, and JavaScript

Conclusion

In this blog, I shared how to build a Ecommerce website using HTML, CSS, and JavaScript. I hope you
enjoyed reading this blog and found the information provided on how to build Ecommerce Website
Source Code helpful. you can also read our previous blog in which we created a Netflix clone using
HTML, CSS, and JavaScript. so check it out if you haven’t already.

Read More: Netflix clone using HTML, CSS, and JavaScript

Frequently Asked Questions (FAQs)

What technologies are used to build the e-commerce website?

The e-commerce website is built using HTML, CSS, and JavaScript.
What features does the e-commerce website source code include?
Some of the features found in the source code are a responsive carousel with Glidejs, a responsive
navigation bar with toggle effect, sections dedicated to categories, new arrival products, contact,
footer, popup, product pages with pagination and sorting, cart pages, responsive login pages, and
responsive signup pages.
Where can I find the complete e-commerce website source code?
You can find the complete source code for the e-commerce website on The Coding Hubs’ blog post.
Are there any additional resources or tutorials available on The Coding Hubs’ website?
Yes, The Coding Hubs also offers a previous blog post on creating a Netflix clone using HTML, CSS, and
JavaScript, which includes useful CSS tips.

written by: The Coding Hubs

Code from GitHub