Learn how to create a responsive and interactive ecommerce product list using HTML and CSS. Follow our step-by-step guide for best practices and code examples.
Table of Contents
Creating an ecommerce product list is crucial for any online store. A well-structured and visually appealing product list can enhance user experience and drive sales. In this guide, we will walk you through the process of creating a responsive and interactive product list using HTML and CSS. By the end of this article, you'll have the knowledge and tools to build a product list that not only looks great but also functions seamlessly across different devices.
Source Code
Step 1 (HTML Code):
To begin, we need to create the basic HTML structure for our product list. This involves setting up a container element and individual product items. Here's an explanation of each part of the HTML code:
<!DOCTYPE html>: Declares the document type and version of HTML being used (HTML5 in this case).
<html lang="en">: Defines the root element of the HTML document and specifies the language as English (en).
<head>: Contains meta-information about the HTML document, such as its title, character set, viewport settings, and links to external resources like CSS stylesheets and fonts.
<title>Ecommerce Product List Template</title>: Sets the title of the web page displayed in the browser tab.<meta charset="UTF-8" />: Declares the character encoding for the document as UTF-8, which supports a wide range of characters.<meta name="viewport" content="width=device-width" />: Ensures the page is scaled correctly on different devices by setting the viewport width to the device's width.<link rel="stylesheet" href="styles.css" />: Links an external CSS stylesheet (styles.css) to define the page's visual presentation.<link rel="preconnect" href="https://fonts.googleapis.com">: Preconnects to Google Fonts API to reduce latency when fetching fonts.<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>: Preconnects to Google Fonts' host for font files.<link href="https://fonts.googleapi..." rel="stylesheet">: Imports the Google Fonts stylesheet for the 'Poppins' font family with various weights and styles.
<body>: Contains the content of the HTML document that is displayed to the user.
<div class="container">: Wraps all content in a container for styling purposes.<div class="sub-container">: Further organizes content within a sub-container.<h1 class="heading">Collection of Ebooks</h1>: Displays a heading indicating the type of products listed (in this case, ebooks).<ul class="product-container">: Defines an unordered list to contain individual product items.<li class="product">: Represents a single product item within the list.<div class="header">: Contains the header section of the product item.<img class="product-img" src="..." alt="...">: Displays an image of the product with a specific source (src) and alternative text (alt) for accessibility.<div class="footer">: Contains the footer section of the product item.<p class="product-cat">Sale!!</p>: Indicates the product status (e.g., on sale) with text.<h3 class="product-name"><a href="..." target="_blank">Product Name</a></h3>: Displays the product name as a clickable link (<a>tag) that opens in a new tab (target="_blank").<p class="product-price"><s>$10</s>$5</p>: Shows the product's original price with a strikethrough (<s>tag) and the discounted price without a strikethrough.
Closing tags (</div>, </body>, </html>): Close the opened elements (<div>, <body>, <html>) to maintain proper HTML structure.
Step 2 (CSS Code):
Next, we'll add some basic styling to our product list using CSS. This will help to make our product list more visually appealing. Let's go through the CSS code step by step:
1. Universal Box Sizing:
* {
box-sizing: border-box;
}
- This rule sets the box-sizing property to border-box for all elements (*). This means that padding and border are included in the element's total width and height.
2. Body Styles:
body {
margin: 0;
font-family: 'Poppins', sans-serif;
}
margin: 0;removes any default margin around the body of the webpage.font-family: 'Poppins', sans-serif;sets the default font family to 'Poppins', with a fallback to generic sans-serif fonts.
3. Paragraph Styles:
p {
margin: 0;
}
- This rule removes the default margin from all paragraphs (
<p>tags).
4. List Styles:
ul {
list-style: none;
margin: 0;
padding: 0;
}
list-style: none;removes default list styles (like bullets) from<ul>(unordered list) elements.margin: 0; padding: 0;removes default margins and padding from<ul>elements.
5. Image Styles:
img {
max-width: 100%;
height: auto;
display: block;
vertical-align: middle;
}
max-width: 100%;ensures images resize responsively to fit their container.height: auto;maintains the aspect ratio of images when resizing.display: block;removes extra spaces below images caused by default inline display.vertical-align: middle;aligns images vertically in the middle of their container.
6. Anchor Styles:
a {
color: inherit;
text-decoration: inherit;
}
color: inherit;ensures anchor tags (<a>) inherit the text color of their parent element.text-decoration: inherit;inherits the text decoration (like underline) from the parent element.
7. Container Styles:
.container {
display: flex;
max-width: none !important;
margin-left: auto;
margin-right: auto;
margin-bottom: 1.25rem;
}
.containeris a class applied to a container element.display: flex;makes the container a flex container, allowing easy alignment of child elements.max-width: none !important;overrides any maximum width constraints (though using !important should generally be avoided if possible).margin-left: auto; margin-right: auto;centers the container horizontally.margin-bottom: 1.25rem;provides some bottom margin for spacing.
8. Heading Styles (with Responsive Media Query):
.heading {
margin: 1.25rem;
font-size: 1.5rem;
line-height: 2rem;
font-weight: 500;
text-align: center;
}
@media (min-width: 640px) {
.heading {
font-size: 1.875rem;
line-height: 2.25rem;
}
}
.headingstyles headings with margins, font size, line height, font weight, and centered text alignment.- The @media query adjusts .heading styles for screens with a minimum width of 640px, increasing font size and line height for larger screens.
9. Product Container Grid Styles (with Responsive Media Queries):
.product-container {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1rem;
margin-top: 1.5rem;
}
@media (min-width: 768px) {
.product-container {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (min-width: 1024px) {
.product-container {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
.product-containerstyles a grid layout for displaying products, with responsive columns.grid-template-columnsdefines the grid structure, adjusting the number of columns based on screen size using @media queries.
10. Product Styles (Header, Footer, Image, Name, Price):
.product {
position: relative;
display: flex;
flex-direction: column;
overflow: hidden;
background-color: #fff;
border-radius: 0.375rem;
border: 2px solid rgb(17 24 39);
}
.header {
overflow: hidden;
}
.footer {
display: flex;
flex-direction: column;
flex: 1 1 0%;
padding: 1.25rem;
}
.footer .product-cat {
color: rgb(185 28 28);
font-size: 0.75rem;
line-height: 1rem;
font-weight: 700;
letter-spacing: 0.025em;
text-transform: uppercase;
flex: 1 1 0%;
}
.header .product-img {
width: 100%;
height: 100%;
object-fit: cover;
transition-property: all;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 300ms;
}
.footer .product-name {
margin: 0;
font-size: 1rem;
line-height: 1.5rem;
font-weight: 700;
margin-top: 0.625rem;
}
.footer .product-price {
color: rgb(75 85 99);
font-size: 0.875rem;
line-height: 1.25rem;
font-weight: 700;
margin-top: 0.5rem;
}
.productstyles the overall product container with borders, background color, and other properties..headerand.footerstyle sections within the product container, setting up layout and styles for images, names, and prices of products.- Various styles (font-size, line-height, font-weight, etc.) are applied to different elements within .footer and .header.
11. Product Hover Effect:
.product:hover .product-img {
transform: scale(1.25);
}
- On hover (.product:hover), the .product-img within the product container scales up (transform: scale(1.25);), creating a zoom effect.
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: 'Poppins', sans-serif;
}
p{
margin: 0;
}
ul{
list-style: none;
margin: 0;
padding: 0;
}
img {
max-width: 100%;
height: auto;
display: block;
vertical-align: middle;
}
a {
color: inherit;
text-decoration: inherit;
}
.container {
display: flex;
max-width: none !important;
margin-left: auto;
margin-right: auto;
margin-bottom: 1.25rem;
}
.sub-container {
padding-left: 1rem;
padding-right: 1rem;
}
.heading {
margin: 1.25rem;
font-size: 1.5rem;
line-height: 2rem;
font-weight: 500;
text-align: center;
}
@media (min-width: 640px) {
.heading {
font-size: 1.875rem;
line-height: 2.25rem;
}
}
.product-container {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1rem;
margin-top: 1.5rem;
}
@media (min-width: 768px) {
.product-container{
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (min-width: 1024px) {
.product-container{
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
.product{
position: relative;
display: flex;
flex-direction: column;
overflow: hidden;
background-color: #fff;
border-radius: 0.375rem;
border: 2px solid rgb(17 24 39);
}
.header{
overflow: hidden;
}
.footer{
display: flex;
flex-direction: column;
flex: 1 1 0%;
padding: 1.25rem;
}
.footer .product-cat{
color: rgb(185 28 28);
font-size: 0.75rem;
line-height: 1rem;
font-weight: 700;
letter-spacing: 0.025em;
text-transform: uppercase;
flex: 1 1 0%
}
.header .product-img{
width: 100%;
height: 100%;
object-fit: cover;
transition-property: all;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 300ms;
}
.footer .product-name{
margin: 0;
font-size: 1rem;
line-height: 1.5rem;
font-weight: 700;
margin-top: 0.625rem;
}
.footer .product-price{
color: rgb(75 85 99);
font-size: 0.875rem;
line-height: 1.25rem;
font-weight: 700;
margin-top: 0.5rem;
}
.product:hover .product-img{
transform: scale(1.25);
} Final Output:
See the Pen Untitled by Faraz (@codewithfaraz) on CodePen.
Conclusion:
By following these steps, you can create a responsive and interactive ecommerce product list using HTML and CSS. A well-designed product list not only enhances the aesthetic appeal of your website but also improves user experience and can ultimately boost sales. Remember to test your product list on various devices to ensure it works seamlessly across all screen sizes. With these skills, you're well on your way to building a professional and user-friendly ecommerce site.
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 😊
