If you are a web developer, you know the importance of creating a website that not only looks great but also functions properly. One of the fundamental aspects of creating a website includes designing a product card. A product card is a summary of an item or service offered on a web page, typically found on ecommerce websites. It is important that the product card not only looks visually appealing but also allows the user to easily gather important information about the product.
This article will guide you on how to create a product card using HTML and CSS. You’ll learn the basics of HTML and CSS and how to create a visually appealing product card that’s mobile responsive.
What Do You Need to Know Before Starting?
Before creating a product card, it’s important to understand some basic concepts of HTML and CSS. This includes:
- HTML tags: HTML elements are designed to describe the content on a website. You must have a clear understanding of HTML tags, their attributes, and their purpose.
- CSS selectors: CSS selectors are the style rules that determine the appearance of the HTML elements. To be able to create a visually appealing product card, you must be familiar with CSS selectors.
- Responsive design: A website design must be responsive to ensure it adjusts to different screen sizes. Learn about media queries and how to create a mobile responsive website.
With these concepts in mind, let’s get started with creating a product card.
Step-by-Step Guide: Creating the HTML Markup
The first step is to create the HTML markup for the product card. In this step, you will create a container to hold all the product details and create the elements to show the product image, name, price, and description.
Step 1: Creating the Container
Create a <div> element and give it a class of “product-card”. This is the container that will hold all the product details.
<div class="product-card">
</div>Step 2: Adding the Product Image
The product image is an essential element in a product card. It needs to be placed in the container we just created. We can use the <img> tag to add an image.
<div class="product-card">
<img src="path/to/product/image.png" alt="Product Image">
</div>Step 3: Adding the Product Name
The next element to add is the product name. Use the <h2> tag to add the product name.
<div class="product-card">
<img src="path/to/product/image.png" alt="Product Image">
<h2 class="product-name">Product Name</h2>
</div>Step 4: Adding the Product Price
The next element to add is the product price. Use the <p> tag and give it a class of “product-price” to add the product price.
<div class="product-card">
<img src="path/to/product/image.png" alt="Product Image">
<h2 class="product-name">Product Name</h2>
<p class="product-price">$10.00</p>
</div>Step 5: Adding the Product Description
The final element to add is the product description. Use the <p> tag and give it a class of “product-description” to add the product description.
<div class="product-card">
<img src="path/to/product/image.png" alt="Product Image">
<h2 class="product-name">Product Name</h2>
<p class="product-price">$10.00</p>
<p class="product-description">This is a product description.</p>
</div>With these steps, you have successfully created the HTML markup for the product card.
Creating the CSS Styling
The next step is to style the product card using CSS. You will be using CSS selectors to style the individual elements.
Step 1: Styling the Container
The first step is to style the container. We want to position the elements in the container and give it a border for better visualization.
.product-card {
border: 1px solid #ddd;
display: flex;
flex-direction: column;
justify-content: space-between;
margin-bottom: 40px;
padding: 20px;
}border creates a border around the container, making it more visible. display: flex is used to make the container a flex container. flex-direction: column tells the container to arrange its contents in a column format. justify-content: space-between allocates the available space between the elements. margin-bottom: 40px adds space at the bottom to create a gap between product cards.
Step 2: Styling the Product Image
We want the product image to be centered. We can apply margin: auto to center it.
.product-card img {
display: block;
height: auto;
margin: auto;
max-width: 100%;
}display: block is used to center the image. height: auto and max-width: 100% ensures that the image doesn’t overflow from the container and scales based on its container.
Step 3: Styling the Product Name
We want the product name to be larger than the other text content, and we want to apply text alignment.
.product-card .product-name {
font-size: 1.25rem;
text-align: center;
}font-size: 1.25rem increases the font size of the product name. text-align centers the product name.
Step 4: Styling the Product Price
We want the product price to be bold and slightly larger than the product description.
.product-card .product-price {
font-size: 1.1rem;
font-weight: bold;
}font-size: 1.1rem increases the font size of the product price. font-weight: bold makes the text bold.
Step 5: Styling the Product Description
We want the product description to have a smaller font size than the product name and price.
.product-card .product-description {
font-size: 0.9rem;
}font-size: 0.9rem decreases the font size of the product description.
Mobile Responsive Design
Creating a website that’s mobile responsive is important as mobile users have surpassed the number of desktop users. The best way to make a website mobile-responsive is to use media queries. They allow us to apply different styles to different screen sizes.
Step 1: Adding Media Queries
Add media queries to adjust the styles of the product card at a specific screen size.
/* Small Screen */
@media (max-width: 767.98px) {
.product-card {
padding: 15px;
}
.product-card img {
height: auto;
max-width: 100%;
width: auto;
}
.product-card .product-name {
font-size: 1.1rem;
margin-top: 10px;
text-align: left;
}
.product-card .product-price {
font-size: 1rem;
}
.product-card .product-description {
font-size: 0.8rem;
text-align: justify;
}
}This media query adjusts the styles when the screen size is between 0px and 767.98px. We have decreased the padding, font sizes, and have moved the product name to the left.
Conclusion
In this article, we learned how to create a product card using HTML and CSS. We covered the basic HTML tags, CSS selectors, responsive design, and styling techniques. We also went through the process of mobile responsiveness using media queries.
Now that you have a good grasp of creating a product card, use these techniques to create impressive product cards for your website. Happy coding!
📕 Related articles about CSS
- Adding CSS file to HTML
- How to Create a CSS File
- CSS How to Make Background Transparent
- How to Create a Menu in HTML and CSS
- Everything You Need to Know About CSS Border Images
- How to make website with HTML and CSS
