Learn how to build a modern e-commerce website using HTML, CSS, and JavaScript. Enhance your online store's performance and user satisfaction.
Table of Contents
In the ever-evolving landscape of online commerce, having a modern e-commerce website is not just an advantage – it's a necessity. Today, more than ever, consumers expect seamless, user-friendly experiences when they shop online. To meet these expectations and succeed in the competitive world of e-commerce, you need a website that not only looks great but also functions flawlessly.
This comprehensive guide will take you on a journey through the process of creating a modern e-commerce website using the fundamental building blocks of web development: HTML, CSS, and JavaScript. Whether you're a seasoned web developer looking to delve into the world of online retail or a business owner aiming to launch your first digital store, this guide is designed to equip you with the knowledge and skills needed to thrive in the online marketplace.
We'll delve into the art of structuring web content with HTML, crafting visually appealing designs with CSS, and adding interactivity that enhances user experience using JavaScript. But building a successful e-commerce website isn't just about code – it's about creating an online shopping destination that resonates with your audience, ranks well on search engines, and keeps customers coming back for more.
Throughout this journey, we'll not only cover the technical aspects of website development but also delve into the strategies and best practices that make an e-commerce site truly effective. From mobile responsiveness and SEO optimization to product presentation, we'll leave no stone unturned.
So, if you're ready to embark on the path to e-commerce success, let's roll up our sleeves and start building a modern, user-friendly, and revenue-generating online store together.
FOR FULL SOURCE CODE CLICK ON THE BELOW LINK 👇👇
Creator: codewithsadee
Source Code
Step 1 (HTML Code):
To get started, we will first need to create a basic HTML file. In this file, we will include the main structure for our e-commerce website.
After creating the files just paste the following codes into your file. Make sure to save your HTML document with a .html extension, so that it can be properly viewed in a web browser.
Let's break it down step by step:
1. <!DOCTYPE html>: This declaration specifies that the document is an HTML5 document.
2. <html lang="en">: This opening <html> tag defines the beginning of the HTML document. The lang attribute indicates that the document's primary language is English.
3. <head>: This is the start of the document's head section, which contains meta-information about the document, such as character encoding, viewport settings, and external resources.
- <meta charset="UTF-8">: This meta tag specifies the character encoding used in the document, which is UTF-8 (a widely used character encoding).
- <meta http-equiv="X-UA-Compatible" content="IE=edge">: This meta tag instructs Internet Explorer to use its latest rendering engine (Edge mode) to display the page.
- <meta name="viewport" content="width=device-width, initial-scale=1.0">: This meta tag sets the viewport settings for responsive design. It ensures that the page scales properly on different device screens.
- <title>Anon - eCommerce Website</title>: This tag sets the title of the web page, which appears in the browser's title bar or tab.
- <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">: This link tag specifies the website's favicon, which is the small icon displayed in the browser tab.
- <link rel="stylesheet" href="styles.css">: This link tag links an external CSS stylesheet (styles.css) to the HTML document for styling.
- <link rel="preconnect" href="https://fonts.googleapis.com">: These link tags specify preconnect hints for faster loading of external resources, in this case, Google Fonts.
- <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>: Another preconnect hint for Google Fonts, including the crossorigin attribute.
- <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">: This link tag loads a specific Google Font (Poppins) with various font weights.
4.<body>: The <body> tag encloses the content that is displayed on the web page.
- Within the <body> tag, there are various <div> elements and other HTML elements that structure the content of the page.
- These include a modal for newsletter subscription, notification toasts, a header section with navigation links and a search bar, a main content section with banners, product categories, featured products, testimonials, and a blog section, and finally, a footer with brand categories and navigation links.
5. <script src="script.js"></script>: This script tag links an external JavaScript file (script.js) to the HTML document for adding interactivity and functionality to the website.
6. <script type="module" src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"></script>: This script tag imports the Ionicons library as an ES module for using iconography in the website.
7. <script nomodule src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.js"></script>: This script tag provides a non-module fallback for older browsers that don't support ES modules when using Ionicons.
This is the basic structure of our e-commerce website using HTML, and now we can move on to styling it using CSS.
Step 2 (CSS Code):
Once the basic HTML structure of the e-commerce website is in place, the next step is to add styling to the website using CSS. CSS allows us to control the visual appearance of the website, including things like layout, color, and typography.
Next, we will create our CSS file. In this file, we will use some basic CSS rules to style our website. Let's break down what each part of the code does:
Custom Variables: The code defines several custom variables using the -- prefix, like --spanish-gray, --sonic-silver, --eerie-black, and so on. These variables store values like colors, font sizes, font weights, and border radii.
Global Reset: The code selects all elements (including pseudo-elements ::before and ::after) and applies a global reset to remove margins and padding, ensuring a consistent starting point for styling.
Link Styles: Styles the anchor (a) element to remove underlines from links.
List Styles: Styles the list items (li) to remove default list markers (bullets or numbers).
Button Styles: Styles the button element to reset its appearance, remove the background, borders, and make it cursor:pointer for better interactivity.
Display Styles: Sets various elements (img, ion-icon, button, and a) to have a display of block, which means they will stack vertically, one below the other.
Font Styles: Sets the font-family for the html element to "Poppins" and defines some scrolling behavior properties.
Input Styles: Styles input elements and its placeholder text to inherit the font properties.
Body Background: Sets the background color of the body to a white color using the custom variable --white.
Scrollbar Styles: Styles the scrollbar of the page using vendor-specific pseudo-elements (body::-webkit-scrollbar, body::-webkit-scrollbar-track, body::-webkit-scrollbar-thumb). These styles affect the appearance of the browser's scrollbars.
Container Styles: Defines a class .container with padding to be used for layout purposes.
Scrollbar Behavior: Defines styles for scrollable elements with scrollbars, including the width and appearance of the scrollbar thumb.
Title Styles: Styles a class .title with specific font properties, color, and border-bottom to create a title-like appearance.
Overlay Styles: Styles a class .overlay to create a transparent overlay for modal dialogs. It starts with an opacity of 0 and becomes fully visible when it has the class .active.
Modal Styles: Styles a class .modal for modal dialogs, making it initially invisible (opacity: 0) and hidden. It becomes visible when it has the class .active.
Modal Animation: Defines CSS animations (@keyframes) for modal dialogs to control their appearance and disappearance with a fade-in effect.
Modal Close Button Styles: Styles a close button within modals, including background color and hover effect.
Newsletter Styles: Styles for a newsletter subscription form.
Notification Toast Styles: Styles for notification toast messages that appear at the bottom of the page. These notifications have a sliding-in animation.
Header Styles: Styles for a website header, including logo, search box, and navigation menu.
Mobile Bottom Navigation Styles: Styles for a bottom navigation bar on mobile devices.
Mobile Navigation Menu Styles: Styles for a mobile navigation menu that slides in from the left.
Category Styles: Styles for a category section with items.
Sidebar Styles: Styles for a sidebar that can slide in from the left.
Showcase Styles: Styles for showcase items within the sidebar.
Product Minimal Styles:
- .product-minimal is a class selector for a product element with minimal styling.
- .product-minimal .product-showcase targets a nested element within .product-minimal.
- .product-minimal .showcase-wrapper and other similar classes define styles for various components within the product showcase.
Product Featured Styles:
- .product-featured is a class selector for a featured product element.
- Styles within this section define how featured products are displayed, including images, prices, and ratings.
Product Main Styles:
- .product-main is a class selector for the main product section.
- .product-grid styles define how products are displayed in a grid layout.
- Various styles for individual product items within the grid are also defined.
Testimonials Box Styles:
- .testimonials-box is a class selector for a testimonials section.
- .testimonial-card styles define how individual testimonial cards are displayed.
Call to Action (CTA) Styles: Styles for a call to action section, including a banner and content.
Service Container Styles:
- .service-container is a class selector for a container that holds service items.
- .service-item styles define how individual service items are displayed.
Blog Styles:
- .blog is a class selector for a blog section.
- .blog-container styles define how blog posts are displayed.
- .blog-card styles define how individual blog cards are displayed.
Footer Styles:
- Footer styles include various sections within the website's footer, such as category links, navigation links, and social links.
- .footer-category and .footer-nav styles define the appearance of footer categories and navigation sections.
- .footer-bottom styles define the appearance of the footer's bottom section.
Copyright Styles: Styles for copyright information, including font size, color, and letter spacing.
Payment Image Styles: Styles for images related to payment options on the website.
@media (min-width: 480px): This is the first media query, and it applies styles to elements when the viewport width is at least 480 pixels wide.
- The :root selector sets a custom CSS variable (--fs-1) to 1.875rem.
- Styles for .header-top, .header-social-container, .header-top-actions, .header-alert-news, .header-main, .mobile-bottom-navigation, .slider-item, .banner-content, .banner-subtitle, .banner-text, .banner-btn, .product-grid, .cta-content, .cta-title, .cta-text, and .copyright are defined.
@media (min-width: 570px): This media query applies styles when the viewport width is at least 570 pixels wide. It modifies styles for .header-top, .header-main, .header-logo, .header-top-actions, .header-search-container, .slider-item, .banner-content, .category-item-container, .category-item, .product-minimal, .product-featured, .cta-container, .blog-container, and .blog-card.
@media (min-width: 768px): This media query applies styles when the viewport width is at least 768 pixels wide. It modifies styles for several elements and changes the :root variable (--fs-1) to 2.375rem. It also adjusts the font size for the entire HTML document (html).
@media (min-width: 1024px): This media query applies styles when the viewport width is at least 1024 pixels wide. It adjusts styles for elements like .container, .modal-content, .newsletter-img, .newsletter, .header-main, .header-search-container, .slider-item, .banner-content, .banner-subtitle, .banner-text, .banner-btn, .category-item, .category-img-box, .product-container, .sidebar, .product-box, .product-minimal, .product-featured, .product-grid, .testimonials-box, .testimonial-card, .testimonial, .cta-container, .service, .service-container, .service-item, .blog-card, .blog-title, .footer-nav-list, and .footer-bottom.
@media (min-width: 1200px): This media query applies styles when the viewport width is at least 1200 pixels wide. It further modifies styles for several elements.
@media (min-width: 1400px): This media query applies styles when the viewport width is at least 1400 pixels wide. It adjusts the font size of the entire HTML document (html) and modifies styles for .container, .slider-item, and .banner-content.
This will give our e-commerce website an upgraded presentation. Create a CSS file with the name of styles.css and paste the given codes into your CSS file. Remember that you must create a file with the .css extension.
root {
/**
* colors
*/
--spanish-gray: hsl(0, 0%, 60%);
--sonic-silver: hsl(0, 0%, 47%);
--eerie-black: hsl(0, 0%, 13%);
--salmon-pink: hsl(353, 100%, 78%);
--sandy-brown: hsl(29, 90%, 65%);
--bittersweet: hsl(0, 100%, 70%);
--ocean-green: hsl(152, 51%, 52%);
--davys-gray: hsl(0, 0%, 33%);
--cultured: hsl(0, 0%, 93%);
--white: hsl(0, 100%, 100%);
--onyx: hsl(0, 0%, 27%);
/**
* typography
*/
--fs-1: 1.563rem;
--fs-2: 1.375rem;
--fs-3: 1.25rem;
--fs-4: 1.125rem;
--fs-5: 1rem;
--fs-6: 0.938rem;
--fs-7: 0.875rem;
--fs-8: 0.813rem;
--fs-9: 0.75rem;
--fs-10: 0.688rem;
--fs-11: 0.625rem;
--weight-300: 300;
--weight-400: 400;
--weight-500: 500;
--weight-600: 600;
--weight-700: 700;
/**
* border-radius
*/
--border-radius-md: 10px;
--border-radius-sm: 5px;
/**
* transition
*/
--transition-timing: 0.2s ease;
}
/*-----------------------------------*\
#RESET
\*-----------------------------------*/
*, *::before, *::after {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
a { text-decoration: none; }
li { list-style: none; }
button {
background: none;
font: inherit;
border: none;
cursor: pointer;
}
img, ion-icon, button, a { display: block; }
span { display: inline-block; }
html {
font-family: "Poppins", sans-serif;
-ms-scroll-chaining: none;
overscroll-behavior: contain;
}
input {
display: block;
width: 100%;
font: inherit;
}
input::-webkit-input-placeholder { font: inherit; }
input::-moz-placeholder { font: inherit; }
input:-ms-input-placeholder { font: inherit; }
input::-ms-input-placeholder { font: inherit; }
input::placeholder { font: inherit; }
body { background: var(--white); }
/**
* scrollbar style
*/
body::-webkit-scrollbar { width: 15px; }
body::-webkit-scrollbar-track {
background: var(--white);
border-left: 1px solid var(--cultured);
}
body::-webkit-scrollbar-thumb {
background: hsl(0, 0%, 80%);
border: 3px solid var(--white);
-webkit-border-radius: 10px;
border-radius: 10px;
}
body::-webkit-scrollbar-thumb:hover { background: hsl(0, 0%, 70%); }
/*-----------------------------------*\
#REUSED STYLE
\*-----------------------------------*/
.container { padding: 0 15px; }
.has-scrollbar { padding-bottom: 5px; }
.has-scrollbar::-webkit-scrollbar {
width: 12px; /* for vertical scroll */
height: 12px; /* for horizontal scroll */
}
.has-scrollbar::-webkit-scrollbar-thumb {
background: transparent;
border: 3px solid var(--white);
-webkit-border-radius: 20px;
border-radius: 20px;
}
.has-scrollbar:hover::-webkit-scrollbar-thumb { background: hsl(0, 0%, 90%); }
.has-scrollbar::-webkit-scrollbar-thumb:hover { background: hsl(0, 0%, 80%); }
.title {
color: var(--eerie-black);
font-size: var(--fs-5);
font-weight: var(--weight-600);
letter-spacing: 0.4px;
text-transform: capitalize;
padding-bottom: 10px;
border-bottom: 1px solid var(--cultured);
margin-bottom: 30px;
}
/*-----------------------------------*\
#MAIN
\*-----------------------------------*/
/**
* overlay
*/
.overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background: hsla(0, 0%, 0%, 0.5);
opacity: 0;
pointer-events: none;
z-index: 15;
-webkit-transition: 0.5s ease;
-o-transition: 0.5s ease;
transition: 0.5s ease;
}
.overlay.active {
opacity: 1;
pointer-events: all;
}
/**
* MODAL
*/
.modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background: hsla(0, 0%, 0%, 0.5);
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
opacity: 0;
visibility: hidden;
pointer-events: none;
z-index: 10;
-webkit-animation: popup 1s ease-in-out 5s forwards;
animation: popup 1s ease-in-out 5s forwards;
}
@-webkit-keyframes popup {
0% {
opacity: 0;
visibility: hidden;
pointer-events: none;
}
100% {
opacity: 1;
visibility: visible;
pointer-events: all;
}
}
@keyframes popup {
0% {
opacity: 0;
visibility: hidden;
pointer-events: none;
}
100% {
opacity: 1;
visibility: visible;
pointer-events: all;
}
}
.modal.closed { display: none; }
.modal-close-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}
.newsletter-img { display: none; }
.modal-content {
position: relative;
max-width: 350px;
margin: 20px;
background: var(--white);
-webkit-border-radius: var(--border-radius-md);
border-radius: var(--border-radius-md);
overflow: hidden;
z-index: 2;
-webkit-animation: scaleUp 0.5s ease-in-out 5s forwards;
animation: scaleUp 0.5s ease-in-out 5s forwards;
}
@-webkit-keyframes scaleUp {
0% { -webkit-transform: scale(0.9); transform: scale(0.9); }
100% { -webkit-transform: scale(1); transform: scale(1); }
}
@keyframes scaleUp {
0% { -webkit-transform: scale(0.9); transform: scale(0.9); }
100% { -webkit-transform: scale(1); transform: scale(1); }
}
.modal-close-btn {
position: absolute;
top: 15px;
right: 15px;
background: var(--salmon-pink);
color: var(--white);
font-size: 16px;
padding: 5px;
-webkit-border-radius: var(--border-radius-sm);
border-radius: var(--border-radius-sm);
}
.modal-close-btn:hover { opacity: 0.9; }
.modal-close-btn ion-icon { --ionicon-stroke-width: 70px; }
.newsletter {
padding: 50px 30px;
text-align: center;
}
.newsletter-header { margin-bottom: 20px; }
.newsletter-title {
color: var(--onyx);
font-size: var(--fs-2);
font-weight: var(--weight-600);
margin-bottom: 10px;
}
.newsletter-desc {
color: var(--sonic-silver);
font-size: var(--fs-7);
line-height: 1.6;
}
.email-field {
font-size: var(--fs-7);
padding: 8px 16px;
-webkit-border-radius: var(--border-radius-sm);
border-radius: var(--border-radius-sm);
border: 1px solid var(--cultured);
margin-bottom: 16px;
}
.btn-newsletter {
background: var(--eerie-black);
color: var(--white);
font-size: var(--fs-7);
font-weight: var(--weight-600);
text-transform: uppercase;
padding: 10px 15px;
-webkit-border-radius: var(--border-radius-sm);
border-radius: var(--border-radius-sm);
margin: auto;
-webkit-transition: var(--transition-timing);
-o-transition: var(--transition-timing);
transition: var(--transition-timing);
}
.btn-newsletter:hover { background: var(--salmon-pink); }
/**
* NOTIFICATION TOAST
*/
.notification-toast {
position: fixed;
bottom: 80px;
left: 20px;
right: 20px;
background: var(--white);
max-width: 300px;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: start;
-webkit-align-items: flex-start;
-ms-flex-align: start;
align-items: flex-start;
gap: 15px;
padding: 15px;
-webkit-border-radius: var(--border-radius-md);
border-radius: var(--border-radius-md);
-webkit-box-shadow: 0 5px 20px hsla(0, 0%, 0%, 0.15);
box-shadow: 0 5px 20px hsla(0, 0%, 0%, 0.15);
-webkit-transform: translateX(-webkit-calc(-100% - 40px));
-ms-transform: translateX(calc(-100% - 40px));
transform: translateX(calc(-100% - 40px));
-webkit-transition: 0.5s ease-in-out;
-o-transition: 0.5s ease-in-out;
transition: 0.5s ease-in-out;
z-index: 5;
-webkit-animation: slideInOut 10s ease-in-out infinite;
animation: slideInOut 10s ease-in-out infinite;
}
@-webkit-keyframes slideInOut {
0%,
45%,
100% {
-webkit-transform: translateX(-webkit-calc(-100% - 40px));
transform: translateX(calc(-100% - 40px));
opacity: 0;
visibility: hidden;
}
50%,
95% {
-webkit-transform: translateX(0);
transform: translateX(0);
opacity: 1;
visibility: visible;
}
}
@keyframes slideInOut {
0%,
45%,
100% {
-webkit-transform: translateX(-webkit-calc(-100% - 40px));
transform: translateX(calc(-100% - 40px));
opacity: 0;
visibility: hidden;
}
50%,
95% {
-webkit-transform: translateX(0);
transform: translateX(0);
opacity: 1;
visibility: visible;
}
}
.notification-toast.closed { display: none; }
.toast-close-btn {
position: absolute;
top: 10px;
right: 10px;
color: var(--sonic-silver);
}
.toast-close-btn ion-icon { --ionicon-stroke-width: 50px; }
.toast-banner {
width: 70px;
height: 70px;
border: 1px solid var(--cultured);
-webkit-border-radius: var(--border-radius-sm);
border-radius: var(--border-radius-sm);
}
.toast-banner img {
width: 100%;
height: 100%;
-o-object-fit: contain;
object-fit: contain;
-o-object-position: center;
object-position: center;
}
.toast-detail {
width: -webkit-calc(100% - 85px);
width: calc(100% - 85px);
padding-right: 10px;
}
.toast-message {
font-size: var(--fs-10);
color: var(--sonic-silver);
margin-bottom: 8px;
}
.toast-title {
font-size: var(--fs-7);
font-weight: var(--weight-500);
color: var(--onyx);
}
.toast-meta {
font-size: var(--fs-10);
color: var(--sonic-silver);
}
/*-----------------------------------*\
#HEADER
\*-----------------------------------*/
.header-top,
.header-user-actions,
.desktop-navigation-menu { display: none; }
.header-main {
padding: 20px 0;
border-bottom: 1px solid var(--cultured);
}
.header-logo { margin-bottom: 20px; }
.header-logo img { margin: auto; }
.header-search-container { position: relative; }
.header-search-container .search-field {
font-size: var(--fs-7);
color: var(--onyx);
padding: 10px 15px;
padding-right: 50px;
border: 1px solid var(--cultured);
-webkit-border-radius: var(--border-radius-md);
border-radius: var(--border-radius-md);
}
.search-field::-webkit-search-cancel-button { display: none; }
.search-btn {
background: var(--white);
position: absolute;
top: 50%;
right: 2px;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
color: var(--onyx);
font-size: 18px;
padding: 8px 15px;
-webkit-border-radius: var(--border-radius-md);
border-radius: var(--border-radius-md);
-webkit-transition: color var(--transition-timing);
-o-transition: color var(--transition-timing);
transition: color var(--transition-timing);
}
.search-btn:hover { color: var(--salmon-pink); }
.mobile-bottom-navigation {
background: var(--white);
position: fixed;
bottom: 0;
left: 50%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
width: 100%;
max-width: 500px;
margin: auto;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-justify-content: space-around;
-ms-flex-pack: distribute;
justify-content: space-around;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
padding: 5px 0;
-webkit-box-shadow: 0 0 10px hsla(0, 0%, 0%, 0.25);
box-shadow: 0 0 10px hsla(0, 0%, 0%, 0.25);
z-index: 5;
}
.mobile-bottom-navigation .action-btn {
position: relative;
font-size: 26px;
color: var(--eerie-black);
padding: 10px;
}
.mobile-bottom-navigation .count {
background: var(--bittersweet);
color: var(--white);
position: absolute;
top: 0;
right: 0;
font-size: 12px;
font-weight: var(--weight-500);
line-height: 1;
padding: 2px 4px;
-webkit-border-radius: 20px;
border-radius: 20px;
}
.mobile-navigation-menu {
background: var(--white);
position: fixed;
top: 0;
left: -100%;
width: 100%;
max-width: 320px;
height: 100vh;
padding: 20px;
-webkit-box-shadow: 0 0 10px hsla(0, 0%, 0%, 0.1);
box-shadow: 0 0 10px hsla(0, 0%, 0%, 0.1);
overflow-y: scroll;
-ms-scroll-chaining: none;
overscroll-behavior: contain;
visibility: hidden;
-webkit-transition: 0.5s ease;
-o-transition: 0.5s ease;
transition: 0.5s ease;
z-index: 20;
}
.mobile-navigation-menu.active {
left: 0;
visibility: visible;
}
.menu-top {
padding-bottom: 15px;
margin-bottom: 10px;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
border-bottom: 2px solid var(--cultured);
}
.menu-top .menu-title {
color: var(--salmon-pink);
font-size: var(--fs-4);
font-weight: var(--weight-600);
}
.menu-close-btn {
color: var(--eerie-black);
font-size: 22px;
}
.menu-close-btn ion-icon { --ionicon-stroke-width: 50px; }
.mobile-menu-category-list { margin-bottom: 30px; }
.menu-category .accordion-menu {
width: 100%;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}
.mobile-menu-category-list .menu-category { border-bottom: 1px solid var(--cultured); }
.mobile-menu-category-list .menu-title {
color: var(--onyx);
font-size: var(--fs-6);
font-weight: var(--weight-500);
padding: 12px 0;
}
.accordion-menu > div { font-size: 14px; }
.accordion-menu ion-icon {
color: var(--onyx);
--ionicon-stroke-width: 90px;
}
.accordion-menu.active .add-icon,
.accordion-menu .remove-icon { display: none; }
.accordion-menu .add-icon,
.accordion-menu.active .remove-icon { display: block; }
.menu-category .submenu-category-list { margin-left: 10px; }
.submenu-title {
padding: 6px 0;
font-size: var(--fs-6);
color: var(--sonic-silver);
font-weight: var(--weight-300);
}
.submenu-title:hover { color: var(--davys-gray); }
.submenu-category-list {
max-height: 0;
overflow: hidden;
visibility: hidden;
-webkit-transition: 0.5s ease-in-out;
-o-transition: 0.5s ease-in-out;
transition: 0.5s ease-in-out;
}
.submenu-category-list.active {
max-height: 148px;
visibility: visible;
}
.menu-bottom .menu-category-list { margin-bottom: 20px; }
.menu-bottom .menu-category { border-bottom: none; }
.menu-bottom .menu-title {
font-size: var(--fs-6);
font-weight: var(--weight-500);
color: var(--eerie-black);
padding: 12px 0;
}
.accordion-menu.active .caret-back { -webkit-transform: rotate(-0.25turn); -ms-transform: rotate(-0.25turn); transform: rotate(-0.25turn); }
.menu-bottom .submenu-category-list {
border: 1px solid var(--cultured);
-webkit-border-radius: var(--border-radius-md);
border-radius: var(--border-radius-md);
padding: 0 15px;
margin-left: 0;
-webkit-box-shadow: 0 0 10px hsla(0, 0%, 0%, 0.05);
box-shadow: 0 0 10px hsla(0, 0%, 0%, 0.05);
}
.menu-bottom .submenu-category:not(:last-child) { border-bottom: 1px solid var(--cultured); }
.menu-social-container {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
gap: 10px;
}
.menu-social-container .social-link {
background: var(--cultured);
color: var(--eerie-black);
font-size: 20px;
padding: 10px;
-webkit-border-radius: var(--border-radius-md);
border-radius: var(--border-radius-md);
}
/*-----------------------------------*\
#BANNER
\*-----------------------------------*/
.banner { margin: 30px 0; }
.slider-container {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
gap: 10px;
-webkit-border-radius: var(--border-radius-md);
border-radius: var(--border-radius-md);
overflow: auto hidden;
-webkit-scroll-snap-type: inline mandatory;
-ms-scroll-snap-type: inline mandatory;
scroll-snap-type: inline mandatory;
overscroll-behavior-inline: contain;
}
.slider-item {
position: relative;
min-width: 100%;
max-height: 450px;
aspect-ratio: 1 / 1;
-webkit-border-radius: var(--border-radius-md);
border-radius: var(--border-radius-md);
overflow: hidden;
scroll-snap-align: start;
}
.slider-item .banner-img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
-o-object-position: right;
object-position: right;
}
.banner-content {
background: hsla(0, 0%, 100%, 0.8);
position: absolute;
bottom: 25px;
left: 25px;
right: 25px;
padding: 20px 25px;
-webkit-border-radius: var(--border-radius-md);
border-radius: var(--border-radius-md);
}
.banner-subtitle {
color: var(--salmon-pink);
font-size: var(--fs-7);
font-weight: var(--weight-500);
text-transform: capitalize;
letter-spacing: 2px;
margin-bottom: 10px;
}
.banner-title {
color: var(--eerie-black);
font-size: var(--fs-1);
text-transform: uppercase;
line-height: 1;
margin-bottom: 10px;
}
.banner-text { display: none; }
.banner-btn {
background: var(--salmon-pink);
color: var(--white);
width: -webkit-max-content;
width: -moz-max-content;
width: max-content;
font-size: var(--fs-11);
font-weight: var(--weight-600);
text-transform: uppercase;
padding: 4px 10px;
-webkit-border-radius: var(--border-radius-sm);
border-radius: var(--border-radius-sm);
-webkit-transition: var(--transition-timing);
-o-transition: var(--transition-timing);
transition: var(--transition-timing);
}
.banner-btn:hover { background: var(--eerie-black); }
/*-----------------------------------*\
#FOR FULL SOURCE CODE VISIT ABOVE CREATOR LINK
\*-----------------------------------*/ Step 3 (JavaScript Code):
Finally, we need to create a function in JavaScript. Let's break it down step by step:
1. 'use strict';: This is a directive that enforces strict mode in JavaScript. It helps catch common coding mistakes and prevents the use of undeclared variables.
2. Modal Section:
- modal, modalCloseBtn, and modalCloseOverlay are variables that store references to HTML elements with specific data attributes.
- modalCloseFunc is a function that adds a 'closed' class to the modal element, presumably to close a modal dialog.
3. Event Listeners for Modal:
- modalCloseOverlay and modalCloseBtn are configured to trigger the modalCloseFunc function when they are clicked. This means clicking either the modal overlay or a close button will close the modal.
4. Notification Toast Section:
- notificationToast and toastCloseBtn are variables that store references to HTML elements with specific data attributes.
- An event listener is set up on toastCloseBtn, so when it is clicked, a 'closed' class is added to notificationToast to hide it.
5. Mobile Menu Section:
- Several variables are defined to work with mobile menus.
- A loop iterates through the mobileMenuOpenBtn elements.
- For each button, a mobileMenuCloseFunc function is defined, which removes the 'active' class from a corresponding mobile menu and an overlay.
- Event listeners are added to the mobile menu open button, close button, and overlay. Clicking the open button adds the 'active' class to the mobile menu and overlay, while clicking the close button or overlay removes it.
6. Accordion Section:
- Variables are defined to work with accordion elements.
- A loop iterates through the accordionBtn elements.
- For each button, an event listener is added. When a button is clicked, it checks whether its associated accordion content is already active. If it is, it does nothing (presumably to allow toggling). If not, it deactivates all other accordions and activates the clicked one.
Create a JavaScript file with the name script.js and paste the given codes into your JavaScript file and make sure it's linked properly to your HTML document so that the scripts are executed on the page. Remember, you’ve to create a file with .js extension.
'use strict';
// modal variables
const modal = document.querySelector('[data-modal]');
const modalCloseBtn = document.querySelector('[data-modal-close]');
const modalCloseOverlay = document.querySelector('[data-modal-overlay]');
// modal function
const modalCloseFunc = function () { modal.classList.add('closed') }
// modal eventListener
modalCloseOverlay.addEventListener('click', modalCloseFunc);
modalCloseBtn.addEventListener('click', modalCloseFunc);
// notification toast variables
const notificationToast = document.querySelector('[data-toast]');
const toastCloseBtn = document.querySelector('[data-toast-close]');
// notification toast eventListener
toastCloseBtn.addEventListener('click', function () {
notificationToast.classList.add('closed');
});
// mobile menu variables
const mobileMenuOpenBtn = document.querySelectorAll('[data-mobile-menu-open-btn]');
const mobileMenu = document.querySelectorAll('[data-mobile-menu]');
const mobileMenuCloseBtn = document.querySelectorAll('[data-mobile-menu-close-btn]');
const overlay = document.querySelector('[data-overlay]');
for (let i = 0; i < mobileMenuOpenBtn.length; i++) {
// mobile menu function
const mobileMenuCloseFunc = function () {
mobileMenu[i].classList.remove('active');
overlay.classList.remove('active');
}
mobileMenuOpenBtn[i].addEventListener('click', function () {
mobileMenu[i].classList.add('active');
overlay.classList.add('active');
});
mobileMenuCloseBtn[i].addEventListener('click', mobileMenuCloseFunc);
overlay.addEventListener('click', mobileMenuCloseFunc);
}
// accordion variables
const accordionBtn = document.querySelectorAll('[data-accordion-btn]');
const accordion = document.querySelectorAll('[data-accordion]');
for (let i = 0; i < accordionBtn.length; i++) {
accordionBtn[i].addEventListener('click', function () {
const clickedBtn = this.nextElementSibling.classList.contains('active');
for (let i = 0; i < accordion.length; i++) {
if (clickedBtn) break;
if (accordion[i].classList.contains('active')) {
accordion[i].classList.remove('active');
accordionBtn[i].classList.remove('active');
}
}
this.nextElementSibling.classList.toggle('active');
this.classList.toggle('active');
});
}Final Output:
Conclusion:
Congratulations! You've reached the end of our journey through the world of modern e-commerce website development. You've learned the essential tools of the trade, from HTML and CSS to JavaScript, and you've explored the strategies and techniques that can turn your online store into a thriving business.
As you wrap up this guide, it's important to remember that building a modern e-commerce website is not just a one-time endeavor; it's an ongoing process of refinement and adaptation. The digital landscape is constantly evolving, and customer expectations continue to rise. To stay competitive and relevant, you must remain committed to improving your website, staying updated with the latest trends, and listening to your customers' feedback.
Remember, building a modern e-commerce website is both an art and a science. It requires creativity, technical skill, and a deep understanding of your target audience. With dedication and the knowledge you've gained from this guide, you're well on your way to creating a successful online store that stands out in the digital marketplace.
Now, it's time to put your newfound expertise into action. Start building, refining, and growing your e-commerce website, and may your online business flourish and prosper. Best of luck on your e-commerce journey!
More Examples of Ecommerce Website: 10+ eCommerce Websites with HTML, CSS, and JavaScript
That’s a wrap!
I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.
Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee.
And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!
Thanks!
Faraz 😊
