Building An Engaging Ecommerce Page With HTML And CSS

Welcome to a practical guide on building an engaging eCommerce page

with HTML and CSS. My path into web design was unconventional—starting not in a
university lecture hall, but amidst the hustle of a full-time job in a completely different
field. Self-taught at first, I carved out hours from evenings and weekends and enrolled
in a coding bootcamp.

This intense period of growth bridged the gap between hobbyist and professional,
equipping me with the tools and confidence to tackle complex web design projects.

In this article, I'll guide you step-by-step on how to construct a basic eCommerce site.
It's an excellent opportunity for you to apply your coding skills and gain hands-on
experience. Whether you're just starting out or looking to polish your craft, this practical
exercise is designed to enhance your understanding and give you a solid foundation in
eCommerce web development. Let’s get started on this coding adventure.

Download Now: 25 HTML & CSS Hacks [Free Guide]

Table of Contents
 eCommerce Website Overview
 Step-by-step Guide to Building an eCommerce Website
 Final Thoughts: The Cornerstone of Your eCommerce Journey
Overview of My eCommerce Website
When I set out to create my eCommerce website, my top priority was to ensure that it
would not only display products but also provide a smooth and enjoyable experience for
visitors. My goal was to build something that felt intuitive and looked inviting.

The Beauty of HTML and CSS

While the sleek design of the website may catch your eye first, the real enchantment
lies beneath, the code. Using HTML, I structured the content, laying out the framework
for product listings and images. Think of HTML as the scaffolding of a building—it's
essential for holding everything together.

To complement the HTML, CSS—and specifically the Bootstrap framework—was my

tool of choice for styling. With CSS, I added color, defined layouts, and implemented
responsive design elements to ensure the site looked good on any device.

Free Guide: 25 HTML & CSS Coding Hacks

Tangible tips and coding templates from experts to help you code better and
faster.

Coding to Convention
 Being Browser-Friendly
 Minimizing Bugs
 Optimizing Performance
Download for freeLearn more

Emulating Full-Scale eCommerce Features

While HTML and CSS are the bread and butter of web design, bringing a website to life
usually requires JavaScript. It’s JavaScript that adds the interactive elements, making
a website not just a static brochure, but a dynamic, engaging experience. However, for
the purpose of this exercise, we'll focus on creating an eCommerce site that mimics the
full experience as closely as possible with just HTML and CSS.

In this simulation, we'll implement features that would typically rely on JavaScript, such
as a checkout process, using creative HTML and CSS strategies. This approach allows
you to practice and understand the foundational coding before adding the complexity of
JavaScript.

Let's move forward with this understanding, creating a site that is both a joy to navigate
and a tribute to the foundational web technologies that make the internet what it is
today.
 Make a Free Guide with HubSpot's Guide Creator

Step-by-step Guide to Building an eCommerce Website

Now let‘s dive into the creation process. I’ve broken down the journey into distinct
steps, each essential in shaping the final masterpiece.

Step 1: File Setup

Using your code editor or choice, organize your files as it is paramount to keeping your
project neat and manageable.

For this project, I created the root directory: E-COMMERCE. Here is a brief explanation
of the files within it.

 img (Folder for storing all images)

o banner.jpg (Main banner image for the homepage)
o logo.png (Website logo)
o new-product.jpg (Promotional image for new arrivals)
o product-1.jpg (Image for product 1)
o product-2.jpg (Image for product 2)
o product-3.jpg (Image for product 3)
o product-4.jpg (Image for product 4)
 cart.html (HTML page for the shopping cart)
 index.html (Main homepage HTML file)
 products.html (HTML page dedicated to displaying all products)
 style.css (Stylesheet for the entire website)

HTML File Setup

We will start with the index.html file. Once inside, the very first thing we'll place at the
top is the <!DOCTYPE html> declaration.

Pro Tip: If you‘re using a modern code editor, there’s a quick way to set up the basic
structure of an HTML document. Most times, by just typing "!" followed by
the Tab key, you can auto-generate the entire foundational structure [ ! + Tab],
including the <!DOCTYPE html> declaration.

HTML
<!DOCTYPE html>
<html lang=“en”>
<head>
<meta charset=“UTF-8”>
<meta name=“viewport” content=“width=device-width, initial-
scale=1.0”>
 <link rel=“stylesheet” type=“text/css” href=“style.css”>
<link
href=“https://cdn.jsdelivr.net/npm/[email protected]/dist/css/boot
strap.min.css” rel=“stylesheet”
integrity=“sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3y
D65VohhpuuCOmLASjC” crossorigin=“anonymous”>
<title>CoolGadgets | Ecommerce Website</title>
</head>
<body>

Copy

After using this shortcut, or typing it out manually, you'll see the following elements:

 <html> Tag: This represents the entire HTML document.

 <head> Tag: This is where we include meta information, crucial for
search engines and optimal page rendering. Here, we can also link to
our stylesheets (as you can see I already linked the CSS and Bootstrap
stylesheets we will create in the next section) and other resources.
 <title> Tag: Here, we define the title of our page, which appears on
the browser tab. As shown, our title reads “CoolGadgets | Ecommerce
Website”.
 <body> Tag: The main content of our webpage will go here – from
text and images to links and more.

CSS File Setup

To make our site visually appealing, we use CSS and Bootstrap framework. For this
purpose, we'll work with a separate style.css file.

To ensure our HTML is cognizant of this style, we anchor it within our <head> tag (as
shown in HTML setup):

HTML
<!--- CSS -->
<link rel="stylesheet" type="text/css" href="style.css">

<!--- Bootstrap -->

<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/boot
strap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3y
D65VohhpuuCOmLASjC" crossorigin="anonymous">

Copy
By including the above link tag, we're essentially instructing our HTML page to fetch our
styles, thereby enabling us to separate content from presentation.

With this structure in place, we can begin adding content and styling our eCommerce
site.

Step 2: Create Website Header

The <header> tag is a container used for navigational links or introductory content.
In our case, we‘re using it for the top navigation of our website. The content within
the <body> tag is what is displayed on our webpage. The <body> tag is the main
content area of our HTML document and is vital for rendering our site’s content.

In the code below, we utilize the CSS Bootstrap framework, a popular open-source
toolkit for creating responsive designs quickly. With Bootstrap, you can achieve
complex layouts with minimal custom code, thanks to its extensive library of pre-styled
components.

HTML
<body>
<header class="bg-light">
<div class="container">
<nav class="navbar navbar-expand-lg navbar-light">
<a class="navbar-brand" href="/">
<img src="img/logo.png" alt="CoolGadgets
Logo" width="120">
</a>
<div class="collapse navbar-collapse">
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
<li class="nav-item"><a class="nav-link"
href="/">Home</a></li>
<li class="nav-item"><a class="nav-link"
href="products.html">Products</a></li>
<li class="nav-item"><a class="nav-link"
href="#contact">Contact</a></li>
<li class="nav-item"><a class="nav-link"
href="cart.html"><i class="fas fa-shopping-cart"></i></a></li>
</ul>
</div>
</nav>
</div>
</header>
</body>

Copy
CSS
/* Navigation */
.navbar-collapse .navbar-nav .nav-item a:hover {
color: #ff523b; /* Changes the color of navigation links to
orange when hovered over */
}

.cart-item {
margin-bottom: 1rem; /* Provides a margin below the cart
item for separation */
}

/* Media queries for responsive adjustments */

@media (max-width: 768px) {
.banner-image {
min-height: 300px; /* Adjusts the banner image's minimum
height for smaller devices */
}
}
Copy

Understanding Bootstrap Classes

In the code provided, you'll notice various Bootstrap classes being used within the class
attribute of different HTML elements. This is a hallmark feature of using frameworks like
Bootstrap. Instead of writing custom CSS for every style or layout choice, Bootstrap
provides pre-styled components that you can easily apply to your elements by using
specific class names.

For example:

 The class “bg-light” applies a light background color.

 The class “navbar” initiates the style for a navigation bar.
 The class “navbar-expand-lg” ensures that the navbar expands on
large screens.
 The class “navbar-light” applies light-themed styles to the navigation
items.
All these classes are part of the Bootstrap framework. By simply adding them to your
HTML elements, Bootstrap will automatically apply the associated styles to those
elements.

To get a better understanding of what each class does, I recommend that you refer to
these valuable Bootstrap cheatsheets:

 Bootstrap CheatSheet by ThemeSelection

 Bootstrap 5 Cheat Sheet by BootstrapCreative

Bookmarking these cheat sheets can accelerate your development process and
enhance your proficiency with the Bootstrap framework.

Understanding Font Awesome

Font Awesome is a widely used icon library that offers a vast collection of scalable
vector icons. It allows web designers and developers to integrate icons easily into their
websites without having to create or source individual image files for each icon.

To use Font Awesome, you first need to link it to your project. You can do this by
adding the Font Awesome CDN to the <head> section of your HTML:

HTML
<link href=“https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/5.15.1/css/all.min.css” rel=“stylesheet”>

Copy

Once Font Awesome is linked to your project, you can use any of the icons in your
navigation bar (or elsewhere). Simply refer to the Font Awesome website to find the
icon class you wish to use. For example, to use a shopping cart icon:

HTML
<a href=“#”><i class=“fas fa-shopping-cart”></i></a>

Copy

The <i> tag with the respective Font Awesome class will render the icon. That's it!

Here's what the header looks like based on the provided code:

Step 3: Add Website Features

Banner Section
The banner serves as a visually appealing and functional part of the website, often
used to grab the attention of visitors. In this design, the banner has two main
components: the promotional text and an image.

The banner will be positioned within both the header and container tags.

HTML
<!--- Banner -->
<section class="container-fluid">
<div class="row">
<div class="col-md-6 d-flex align-items-center
justify-content-center bg-warning text-white p-5">
<div>
<h1>Discover the Future With CoolGadgets!
</h1>
<p class="mb-4"><em>Innovation is not solely
about major discoveries.<br>It's about constantly challenging
the status quo.</em></p>
<a href="products.html" class="btn btn-light
btn-lg">Shop Now &#10142;</a>
</div>
</div>
<div class="col-md-6 banner-image"></div>
</div>
</section>

Copy

Key Points:

 The banner is wrapped inside a <section> element with a class

container-fluid, making it responsive and ensuring it takes the full
width of the viewport.
 Within this section, there's a Bootstrap row (defined by the <div> with
the row class).
 This row consists of two columns (col-md-6), splitting the row into two
equal halves for medium-sized screens and up.
 The left column contains the banner text and a button. It uses classes
like d-flex, align-items-center, and justify-content-center to center its
content both vertically and horizontally. The background and text color
are defined by bg-warning and text-white respectively.
 The right column is reserved for an image, which is represented by the
class banner-image.
Pro Tip: For the arrow symbol in the “Shop Now” button, you can visit this HTML
symbols link to select and copy your desired symbol's code.

CSS
/* Banner */
.banner-image {
background: url('img/banner.jpg') no-repeat center center /
cover;
min-height: 600px;
}
Copy

This CSS will ensure that the image for your banner will fit appropriately and be
displayed at a minimum height of 600 pixels.

Let's take a look at our banner results:

Featured Products Section

Give prominence to your top products by showcasing them in a dedicated section. This
layout is designed for adaptability and appeal, making it easy to highlight products and
streamline the buying process.

HTML
<!--- Featured Products -->
<div class="container my-5">
<h2 class="text-center mb-4">Featured Products</h2>
<div class="row row-cols-1 row-cols-md-2 row-cols-lg-4
g-4">
<div class="col">
<div class="card h-100">
<img src="img/product-1.jpg" class="card-
img-top" alt="Product">
<div class="card-body">
<h5 class="card-title">Virtual Reality
Glasses</h5>
<p class="card-text">$299.00</p>
<form action="cart.html" method="GET">
<input type="hidden" name="product"
value="Virtual Reality Glasses">
 <input type="hidden" name="price"
value="299.00">
<input type="hidden" name="quantity"
value="1">
<input type="submit" class="btn btn-
warning" value="Add to Cart">
</form>
</div>
</div>
</div>
<!--- Add More Products Here -->
</div>
</div>
<hr>

Copy

Key Points:

 The main container is styled with a top margin and bottom spacing to
give it a distinct look on the webpage.
 The title “Featured Products” is centrally aligned for prominence.
 Bootstrap's grid system (row-cols-*) is employed to ensure the
products adapt responsively across different screen sizes.
 Each product is encapsulated within a Bootstrap card, offering a clean,
structured presentation.
 Product details, including its image, name, and price, are neatly
arranged. A straightforward form allows users to quickly add the
product to their cart.

CSS
/* Feature Products Card */
.card-title a {
color: #333;
text-decoration: none;
}

.card-title a:hover {
color: #ff523b;
}
Copy
Here is our updated results:

Take advantage of this amazing free extension that I highly recommend to assist you in
your project walkthroughs. Thanks to the incredible HubSpot Guide Generator tool, you
can make your project even more seamless and efficient.

Get the free extension

New Product Section

Elevate the unveiling of your newest offerings with a dedicated banner. This
layout accentuates the product while providing essential details and a direct
purchase option.

HTML
<!--- New Product -->
<div class="container">
<div class="row g-4">
<div class="col-md-6">
<img src="img/new-product.jpg" class="img-fluid"
alt="New Product">
</div>
<div class="col-md-6 d-flex align-items-center">
<div>
<p>Our Newest Product Offer</p>
<h1>Smart Ring</h1>
<small>Track your fitness journey
effortlessly with the Smart Ring, a sleek wearable that combines
style and health monitoring right on your fingertip.</small>
<br>
<form action="cart.html" method="GET">
<input type="hidden" name="product"
value="Smart Ring">
<input type="hidden" name="price"
value="199.00">
<input type="hidden" name="quantity"
value="1">
<input type="submit" class="btn btn-
warning" value="Add to Cart">
</form>
 </div>
</div>
</div>
</div>
<hr>

Copy

Key Takeaways:

 The layout utilizes Bootstrap's grid system to divide the content into
two equal columns.
 The left column displays the product image, ensuring it stands out
prominently.
 The right column is designed to detail the product's offerings. The use
of d-flex and align-items-center classes ensure content is vertically
centered.
 The inclusion of a direct “Add to Cart” form allows for an intuitive
buying experience, facilitating impulse purchases.

Here is our updated results:

Contact Section

Facilitate seamless communication with visitors via a dedicated contact

form. This layout is designed for clarity, ensuring users can easily provide
their details and queries.

HTML
<!-- Contact Section -->
<section id="contact" class="container my-5">
<div class="row">
<div class="col-12 mb-4">
<h2 class="text-center">Contact Us</h2>
</div>
<div class="col-md-8 mx-auto border rounded p-4
shadow-sm">
<!-- Assuming you might want a form for the
users to fill out -->
<form>
<div class="mb-3">
 <label for="contactName" class="form-
label">Name</label>
<input type="text" class="form-control"
id="contactName" placeholder="Enter your name">
</div>
<div class="mb-3">
<label for="contactEmail" class="form-
label">Email</label>
<input type="email" class="form-control"
id="contactEmail" placeholder="Enter your email">
</div>
<div class="mb-3">
<label for="contactMessage" class="form-
label">Message</label>
<textarea class="form-control"
id="contactMessage" rows="3" placeholder="Your
message"></textarea>
</div>
<button type="submit" class="btn btn-
warning">Submit</button>
</form>
</div>
</div>
</section>

Copy

Key Features:

 Positioned within a section tag, the contact form is wrapped inside a

container, ensuring it's centered and has appropriate spacing.
 Form elements are housed within a bordered, rounded, and shadowed
div, offering a touch of design elegance and focus.
 Clear labels and placeholders guide users on the required inputs. This
reduces ambiguity and improves the user experience.

Our results should look like this:

Step 4: Create Website Footer

Footer sections are pivotal for user navigation, offering insights about the
company, and providing additional resources. Here's a cohesive footer
layout for the “CoolGadgets” website.

HTML
<!--- Footer -->
<footer class="bg-dark text-light py-4">
<div class="container">
<div class="row">
<div class="col-md-3">
<img src="img/logo.png" alt="CoolGadgets
Logo" class="mb-2" width="100">
<p>Discover the Future <br> With
CoolGadgets!</p>
</div>
<div class="col-md-3">
<h3>Navigation</h3>
<ul class="list-unstyled">
<li><a href="/" class="text-decoration-
none text-light">Home</a></li>
<li><a href="products.html" class="text-
decoration-none text-light">Products</a></li>
<li><a href="#contact" class="text-
decoration-none text-light">Contact</a></li>
</ul>
</div>
<div class="col-md-3">
<h3>Useful Links</h3>
<ul class="list-unstyled">
<li><a href="#" class="text-decoration-
none text-light">Coupons</a></li>
<li><a href="#" class="text-decoration-
none text-light">Blog Post</a></li>
<li><a href="#" class="text-decoration-
none text-light">Return Policy</a></li>
<li><a href="#" class="text-decoration-
none text-light">Join Affiliate</a></li>
</ul>
</div>
 <div class="col-md-3">
<h3>Follow Us</h3>
<ul class="list-unstyled">
<li><a href="#" class="text-decoration-
none text-light">Facebook</a></li>
<li><a href="#" class="text-decoration-
none text-light">Twitter</a></li>
<li><a href="#" class="text-decoration-
none text-light">Instagram</a></li>
<li><a href="#" class="text-decoration-
none text-light">YouTube</a></li>
</ul>
</div>
</div>
<hr class="my-4">
<div class="text-center">&copy; Copyright 2023 -
CoolGadgets Store</div>
</div>
</footer>

Copy

Highlights:

 The footer is partitioned into four main sections, each facilitating

unique purposes.
 Company's branding and motto section provides identity.
 The “Quick Links” directs users to essential site areas.
 “Resources” feature supplementary information and policy guidelines.
 “Stay Connected” prompts users to engage with the brand on social
platforms.
 The footer concludes with a copyright line, asserting ownership and
copyright.

Step 5: Add Additional Pages

To further enhance user experience, I've added a products.html page to

showcase a list of all the products, and a cart.html to allow users to see their
purchases.

PRODUCTS.HTML
<body>
<header class="bg-light">
<div class="container">
<!--- Add Remaining Header -->
</div>
</header>

<!--- Products Section -->

<div class="container my-5">
<h2 class="text-center mb-4">Our Products</h2>
<div class="row row-cols-1 row-cols-md-2 row-cols-lg-4
g-4">
<!-- Product 1 -->
<div class="col">
<div class="card h-100">
<img src="img/product-1.jpg" class="card-
img-top" alt="Virtual Reality Glasses">
<div class="card-body">
<h5 class="card-title">Virtual Reality
Glasses</h5>
<p class="card-text">$299.00</p>
<form action="cart.html" method="GET">
<input type="hidden" name="product"
value="Virtual Reality Glasses">
<input type="hidden" name="price"
value="299.00">
<input type="hidden" name="quantity"
value="1">
<input type="submit" class="btn btn-
warning" value="Add to Cart">
</form>
</div>
</div>
</div>
<!-- Add any additional products here -->
<div class="col">
<div class="card h-100">
 <img src="img/new-product.jpg" class="card-
img-top" alt="Smart Ring">
<div class="card-body">
<h5 class="card-title">Smart Ring</h5>
<p class="card-text">$299.00</p>
<form action="cart.html" method="GET">
<input type="hidden" name="product"
value="Smart Ring">
<input type="hidden" name="price"
value="199.00">
<input type="hidden" name="quantity"
value="1">
<input type="submit" class="btn btn-
warning" value="Add to Cart">
</form>
</div>
</div>
</div>
</div>
</div>

<!--- Footer -->

<footer class="bg-dark text-light py-4">
<!--- Add Remaining Footer -->
</footer>
</body>

Copy

CART.HTML
<body>
<header class="bg-light">
<div class="container">
<!-- Add Remaining Header -->
</div>
</header>
 <header class="py-3">
<div class="container">
<h1>Your Shopping Cart</h1>
</div>
</header>

<section class="container my-5">

<div class="row">
<div class="col-md-8">
<!-- Cart Items List -->
<div class="cart-item">
<div class="row">
<div class="col-md-3">
<img src="img/product-1.jpg"
class="img-fluid" alt="Product">
</div>
<div class="col-md-5">
<h4>Virtual Reality Glasses</h4>
<p>$299.00</p>
</div>
<div class="col-md-2">
<input type="number" class="form-
control" value="1">
</div>
<div class="col-md-2">
<button class="btn btn-
danger">Remove</button>
</div>
</div>
</div>
<!-- Add more cart items here -->
</div>

<div class="col-md-4">
<!-- Cart Summary -->
<div class="border p-3 mb-3">
 <h3 class="mb-3">Cart Summary</h3>
<div class="d-flex justify-content-between">
<span>Subtotal</span>
<span>$299.00</span>
</div>
<div class="d-flex justify-content-between">
<span>Tax</span>
<span>$23.92</span>
</div>
<div class="d-flex justify-content-between">
<span>Total</span>
<span>$322.92</span>
</div>
<button class="btn btn-warning w-100 mt-
3">Proceed to Checkout</button>
</div>
</div>
</div>
</section>

<footer class="bg-dark text-light py-4 mt-5">

<div class="container text-center">
&copy; Copyright 2023 - CoolGadgets Store
</div>
</footer>

<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootst
rap.bundle.min.js" integrity="sha384-
PPmltI4DzdaNfQz9JdGpI3TZfvlw7irzjBn3wKgNmCUp0auj/
uTPmSy7Ou1EP9J4" crossorigin="anonymous"></script>
</body>

Copy

View the full source code here.

The Cornerstone of Your eCommerce Journey
As we conclude our exploration into the essentials of crafting a simple
eCommerce website, we've navigated through the foundational elements of
HTML and the aesthetic enhancements of CSS. This journey has been more
than just about putting together a site—it's about laying the first stones in
your path toward eCommerce proficiency.

Through the structured application of HTML, we've built the skeleton of our
digital marketplace. With CSS and a touch of Bootstrap, we've dressed it up
to meet the aesthetic expectations of modern web users.

Though today's foray might not have included the functionality that
JavaScript brings, it's vital to recognize the role each language plays in web
development. Consider this project as the groundwork of your eCommerce
venture, a mock-up from which you can expand, refine, and innovate.

As you continue to build and learn, let each project refine your skills and
expand your capabilities. The world of eCommerce is ever-evolving, and
staying abreast of new technologies and coding techniques is part of the
exciting challenge.