Product page design HTML CSS source code

Hello everyone, in this post we will be creating a product page design in HTML and CSS. In the last post, we created a Simple coming soon HTML page for a website. Now, we are ready to develop a Product page design in HTML and CSS without using a single line of javascript.

Product page design in HTML and CSS:

Product page design HTML CSS source code

Javascript is not used in this project because javascript is a dynamic language. Now let us see why we have used HTML and CSS.


Html is best known as a markup language. It is used to create the skeleton of our web pages. It is part of a single page. Boxes, pictures, text, and buttons are created using HTML.

Text is added using a paragraph tag. Heading is created using <h1, h2, h3…..> tags. The picture is imported using an image tag in HTML. Then designing part is done in CSS.


The background color is added using the background-color property. Then div tag is used to create the box. Above this, a new box is created. In this box, the text is added at the top of the box. It is created using a heading tag. Then on the right side icons are added.

You might like it:

Below this, we have text, headings, and prices and they are created using heading and paragraph tags. Then we have size and color attributes. Below this, we have added the icons of buy now and add to cart icons along with the text. They are imported from the same website. On the left side, we have added a picture of the product. It is a single picture of the product.

This Product page design is responsive across all devices. You can embed its code into your eCommerce store for better design. So, if you want to learn how to create this type of product page then follow this tutorial till the end.

How to create a Product page design in HTML and CSS?

If you want to learn how to create this type of design using HTML and CSS then you have to follow the below steps for the best possible results.

Download a code editor:

A code editor is the first step toward any project. Without using the code editor it is difficult for everyone to become an expert in any programming language. There are a lot of code editors available for writing HTML and CSS but we will be using vs code for our page design.

Html source code for product page design:

Now open your code editor after downloading. Then create a new file for HTML. Now save it using the .html extension at the end of the file name. It will convert your file into an HTML file and it is easy to understand the type of file for a code editor and web browser. Then use this HTML code in your file.

CSS source code:

We can’t finish our project by just using HTML. We have to use CSS along with HTML. For that create a new file and then save this CSS file with the extension of .css because it will help the browser and code editor to understand the type of the file easily. After that paste this CSS code into your new file of CSS.

Without linking both files with each other, the properties of CSS will not be applied to the HTML files. In this way, the design of the page will remain incomplete. Use link tag in HTML file. It will help you to insert the path of the HTML file in CSS. CSS code properties will be inserted into the HTML file.

Download source code:

We have described the way how to use the above code and create this type of single-page design in HTML and CSS for your website. But if you are still facing any issues related to this page design then download the source code of this project for free from here. It is available below.

Task and Conclusion:

This product page has the features and they are highlighted above. Now I am assigning some tasks and you have to fulfill them. The image is placed on the left side and you have to change its position. Change its position from left to right. Also, change the background color of the products. Font family can be changed and you have to change it.

I hope it was helpful a post for you on Product page design. If you have learned anything from this post don’t forget to share or comment. The comment section is available for your problems.

Thanks for reading this article.

Download Source CodeClick to Download
Latest Post
Notify of
Inline Feedbacks
View all comments
Would love your thoughts, please comment.x