How To Create Ecommerce Website Using HTML And CSS
| Youtube : | https://youtu.be/399TxfwjJlc |
| Views : | 324 |
| Skills : | HTML, CSS |
| Category : | Web Design |
| Tag : | Shopping Website, Ecommerce Website, Online Shopping Website |
In this tutorial, we are going to learning how to create responsive ecommerce website using html and css. This ecommerce website is going to be design only using HTML and CSS without javascript.
This tutorial will teach you how to design responsive website using only HTML and CSS
Sections We Are Going To Design In Our Responsive Ecommerce Website Using HTML And CSS
In our Responsive Ecommerce Website project, we are going to design three main section : Header section, Main Body And Footer section
In this tutorial we are going to design three main sections with the help of their subsections.
Header
- Logo And Main menu
Main Body
- Slider section
- Banner section
- Product Section
Footer
- About Us
- Quick link
- Contact information
Video Tutorial
To understand easily, you can see full coding video on how to create responsive ecommerce website using html and css. You can watch the video tutorial below.
Let's Start The Coding
Firstly, Create the folder on dekstop, my folder name is ecommerce website. Inside ecommerce website folder , create two more folder : - 1) css and 2) images
In css folder, we are going to save css file which we will use in our ecommerce website design
In images folder, we are going to save all images which we will use in our ecommerce website design
Inside ecommerce website folder we are creating HTML file, file name is - index.html
Inside css folder we are creating CSS file - file name is - style.css
Let's start coding of our ecommerce website with writing basic HTML 5 and head section meta code in index.html.
Inside head tag link our style.css file in index.html file for ecommerce website project
You can simply copy ecommerce website using html and css source code from below and paste this in html and css file.
Meta html code. Copy & paste the below code in index.html
<!---------- META HTML STARTS ------->
<>
<>
<>
<>Ecommerce website using html and css<>
<>
<>
<>
<!---------- META HTML ENDS ------->
Common CSS code. Copy And paste the below code in style.css
/********** COMMON CSS STARTS **********/
* {
font-family Roboto, sans-serif, arial;
margin:0px;
padding:0px;
box-sizing:border-box;
font-size:16px;
}
a {
text-decoration:none;
}
:target {
display:block!important;
}
/********** COMMON CSS END **********/
2) Now, we will design Header section of ecommerce Website Using HTML And CSS.
In our header section, we are having logo our ecommerce webste in left side and menu in right side.
For designing menu bar we are using ul > li tag
Our header section is responsive in mobile view, it will display navbar button to open navbar from left side.
Header section HTML code. Copy this code and paste in index.html file
<!---------- HEADER HTML STARTS ------->
<>
<>
<>
<>
<>
<>
<>
<>
<> ☰ <>
<>
<>
<>✕<>
<>
<><>Home<><>
<><>About Us<><>
<><>Shop Now<><>
<><>Gallery<><>
<><>Cart<><>
<><>Checkout<><>
<>
<>
<>
<>
<>
<>
<>
<!---------- HEADER HTML ENDS ------->
Header section CSS code . Copy the code and paste in style.css
/********** HEADER CSS STARTS **********/
header {
box-shadow: 0px 0px 10px 0px #0000001f;
display: flex;
flex-direction: column;
position: relative;
}
.container {
width:100%;
max-width: 1200px;
margin: 0 auto;
padding:0px 10px;
}
.heads {
margin:10px 0px 10px 0px;
display:flex;
}
.logo {
max-width:30%;
min-width:200px;
}
.menu {
max-width:70%;
min-width:100px;
margin-left: auto;
text-align:center;
}
.menu ul {
display: flex;
list-style: none;
gap: 25px;
margin:0px;
margin-top:12px;
}
.menu ul a {
color: black;
font-weight:600;
color:black;
}
.openicon {
display:none;
position: relative;
top: -3px;
float: right;
font-size: 30px;
color: black;
right: 8px;
}
.closeicon {
display:none;
float:right;
font-size: 28px;
color: black;
}
/* For mobile version css */
@media screen and (max-width: 480px) {
.openicon, .closeicon {
display:block;
}
#menu {
position: fixed;
left: 0px;
background: #00000094;
width: 100%;
height: 100%;
top: 0px;
text-align: left;
display: none;
}
.menu-inner{
background: white;
height: 100%;
top: 0px;
left: 0px;
width: 70%;
position: absolute;
padding: 20px;
}
#menu ul {
display: block;
margin-top: 45px;
}
#menu ul li {
margin-bottom:25px;
}
}
/********** HEADER CSS END **********/
Output Of Header section
3) Now, We Will Slider Section Of Our Responsive Ecommerce Website
In our slider section, we are having only 1 image. For Creating slider image we are using img tag in ecommerce html css.
Slider section HTML code. Copy this code and paste in index.html file
<!---------- BANNER HTML STARTS ------->
<>
<>
<>
<!---------- BANNER HTML ENDS ------->
Slider section CSS code. Copy this code and paste in style.css file
/********** BANNER CSS STARTS **********/
.w-100 {
width:100%;
}
.slider {
object-fit: cover;
width: 100%;
height:600px;
}
/***For IPAD***/
@media screen and (max-width: 768px) {
.slider {
height:350px;
}
}
/***For MOBILE***/
@media screen and (max-width: 480px) {
.slider {
height:180px;
}
}
/********** BANNER CSS END **********/
Output Of Slider Section In Ecommerce Website Using HTML And CSS
4) Now, We Will Adversitement Section Of Ecommerce Website
In our adversitement section, we are having two banner images. For creating adversitement image we are using img tag.
Adversitement section HTML code. Copy this code and paste in index.html file
<!---------- ADVERSITEMENT HTML STARTS ------->
<>
<>
<>
<>
<>
<>
<!---------- ADVERSITEMENT HTML ENDS ------->
Adversitement section CSS code. Copy this code and paste in style.css file
/********** ADVERSITEMENT CSS STARTS **********/
.banner {
margin:40px 0px;
display: grid;
gap: 30px;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
/********** ADVERSITEMENT CSS END **********/
Output Of Adversitement Section
5) Now, We Will Design Reponsive Product Section Of Ecommerce Website
In our Reponsive Product Section, we are having product image, with namve, price and buy now button.
By default, in dekstop version, 4 product will display in one row and in iPad version, 2 product will display in 2 row, and in mobile version 1 product will display in 1 row of our Ecommerce Website using html and css
Product section HTML code. Copy this code and paste in index.html file
<!---------- PRODUCT HTML STARTS ------->
<>
<>
<>
<>
<>Product Name here<>
<><>$50.05<><>$20.99<><>
<>Buy Now<>
<>
<>
<>
<>Product Name here<>
<><>$50.05<><>$20.99<><>
<>Buy Now<>
<>
<>
<>
<>Product Name here<>
<><>$50.05<><>$20.99<><>
<>Buy Now<>
<>
<>
<>
<>Product Name here<>
<><>$50.05<><>$20.99<><>
<>Buy Now<>
<>
<>
<>
<>Product Name here<>
<><>$50.05<><>$20.99<><>
<>Buy Now<>
<>
<>
<>
<>Product Name here<>
<><>$50.05<><>$20.99<><>
<>Buy Now<>
<>
<>
<>
<>Product Name here<>
<><>$50.05<><>$20.99<><>
<>Buy Now<>
<>
<>
<>
<>Product Name here<>
<><>$50.05<><>$20.99<><>
<>Buy Now<>
<>
<>
<>
<>Product Name here<>
<><>$50.05<><>$20.99<><>
<>Buy Now<>
<>
<>
<>
<>Product Name here<>
<><>$50.05<><>$20.99<><>
<>Buy Now<>
<>
<>
<>
<>Product Name here<>
<><>$50.05<><>$20.99<><>
<>Buy Now<>
<>
<>
<>
<>Product Name here<>
<><>$50.05<><>$20.99<><>
<>Buy Now<>
<>
<>
<>
<!---------- PRODUCT HTML ENDS ------->
Product section CSS code. Copy this code and paste in style.css file
/********** PRODUCT SECTION CSS STARTS **********/
.product {
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
margin:50px 0px;
display: grid;
gap: 20px;
}
.pro {
border: 1px solid #d0d0d0;
padding: 0px 0px 30px 0px;
text-align: center;
margin-bottom:20px;
}
.pro h4 {
font-size: 18px;
font-weight: 600;
margin: 20px 0px 5px 0px;
}
.pro strike {
font-size:14px;
}
.pro b {
font-size: 22px;
font-weight: 600;
margin-left: 15px;
color: red;
}
.pro a {
text-align: center;
background: red;
color: white;
padding: 11px 4px;
width: 200px;
display: inline-block;
border-radius: 25px;
margin-top: 20px;
}
/********** PRODUCT SECTION CSS END **********/
Output Of Product Section
6) Now, We Will Design Footer Section
In our Footer Section, we are having 'about us' section, 'quick link' section and 'contact info' section.
Footer section HTML code. Copy this code and paste in index.html file
<!---------- FOOTER HTML STARTS ------->
<>
<>
<>
<>
<>About Us<>
<>If you are going to use of Lorem Ipsum need to be sure there isn't hidden of text. If you are going to use of Lorem Ipsum need to be sure there isn't hidden of text If you are going to use of Lorem Ipsum need to be sure there isn't hidden of text.<>
<>
<>
<>Quick Links<>
<>
<>Home<>
<>Cart<>
<>About Us<>
<>Login<>
<>Shop Now<>
<>Register<>
<>Category<>
<>Contact Us<>
<>
<>
<>
<>Contact Us<>
<>
<>3A-25 Ring road North-east, <>
Delhi, India, 462001<>
<>info@ecommerce.com<>
<>+0 123 456 7890<>
<>
<>
<>
<>
<>
<>
<>
<!---------- FOOTER HTML ENDS ------->
Footer CSS code. Copy And paste the below code in style.css
/********** FOOTER CSS STARTS **********/
footer{
background:#37474F;
padding:40px 0px 20px 0px;
}
.foots {
padding:20px 0px 20px 20px;
display: grid;
gap: 50px;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
margin:0px auto;
}
.foots p{
padding-right:60px;
font-size:16px;
line-height:28px;
}
.col-foot, .col-foot a {
color:white;
}
.col-foot h2 {
font-size:18px;
margin-bottom:25px;
}
.col-foot li {
font-size:14px;
color:white;
margin-bottom:15px;
line-height:26px;
list-style-type: disclosure-closed;
width:38%;
float:left;
margin-left:5%;
}
.contactus li{
width:90%;
}
/********** FOOTER CSS END **********/
Output Of Footer Section
Conclusion
Responsive web design ensures that a ecommerce website functions well on devices of all sizes, from desktops to smartphones. This article will guide you through the basics of creating a ecommerce responsive website using HTML and CSS.
building a unique responsive e-commerce website using HTML and CSS. In an era where mobile devices dominate online shopping, creating a responsive e-commerce website is not just an option but a necessity. A responsive design ensures that your website provides an optimal user experience across devices, helping you retain customers and drive conversions. In this guide, we’ll explore how to build a unique and engaging e-commerce website using HTML and CSS.
wow.. it is working perfectly on mobile also. thank you
thank you so much for providing ecommerce website source code
thank you for providing simple ecommerce website using html and css source code
perfect website using html and css
very easy to learn how to create responsive ecommerce website using html and css
nice tutorial on responsive ecommerce website using html and css