Simple HTML Code For Online Shopping Website
| Youtube : | https://youtu.be/p8_ZrWu2UBY |
| Views : | 1183 |
| Skills : | html,css |
| Category : | Web Design |
| Tag : | Shopping Website,ecommerce website |
In this tutorial, we are learning how To create responsive shoe website using HTML and CSS with source code. We are providing simple html code for online shopping website in this tutorial. In this website we are not going to use javascript or jquery. This website is going to be design only using HTML and CSS.
Section in responsive shoe online shopping website using HTML and CSS
In our website, we are going to design three main section in responsive shoe online shopping website : Header section, Main Body And Footer section
In this tutorial we are going to design these three section with the help of their subsections. Subsections are created as per the website content.
Header
- Logo
- Main menu
- Book Table Button
Main Body
- Slider section
- Banner Section
- Product Listing Section
- Advertisement
Footer
- About Us
- Quick link
- Opening Timing
- Contact information
Video Tutorial
You can also watch video of how to create online shopping website using html and css to understand easily. You can watch the complete video tutorial below.
Let's Start The Coding Of Simple Shopping Website HTML Code
Firstly, create the folder on desktop, my folder name is : shopping-website Inside shopping-website folder, create two sub folder : - 1) css and 2) images
Inside the CSS folder, we will save the css file, which we will use on this website.
Inside the images folder, we will save all images which we will use on this website.
Inside shopping-website folder, I am creating one HTML file file name - index.html
Inside css folder, I am creating one CSS file - file name - style.css
Let's start design with writing basic HTML 5 code in index.html, and link style.css file to index.html file
Meta html code. Copy And paste the 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
/**********START META SECTION**********/
* {
font-family sans-serif, arial;
margin:0px;
padding:0px;
box-sizing:border-box;
color:white;
}
a {
text-decoration:none;
}
:target {
display:block!important;
}
.container {
width:100%;
max-width: 1300px;
margin: 0px auto;
padding:0px 10px;
}
/**********END META SECTION**********/
2) Now, we will design header of shoe website HTML code free.
In our top header section, we are logo on left side, nav bar in center and book table button on right side.
For creating logo, we are using img tag, for designing nav bar we are using ul>li tag, and to design book table button we are using anchor tag.
For responsive shoe website HTML code free please copy and paste the below code to design header section.
Header section HTML code. Copy this code and paste in index.html file
<!----------HEADER HTML STARTS----->
<>
<>
<>
<><><>
<><>☰<>
<>
<>✕<>
<>
<>Home<>
<>About Us<>
<>Shop Now<>
<>Category<>
<>Register<>
<>Contact us<>
<>
<>
<>
<>
<>
<>
<!----------HEADER HTML ENDS----->
Header section CSS code . Copy the code and paste in style.css
/**********START HEADER SECTION**********/
header{
background:black;
}
.header {
padding:6px 0px 4px 0px;
display:flex;
}
.menu {
margin-left: auto;
}
.menu ul {
display: flex;
gap: 25px;
list-style: none;
margin-top:14px;
}
.menu li {
font-weight:bold;
}
.openicon, .closeicon {
display:none;
}
/* For Mobile Version */
@media screen and (max-width: 480px) {
#menu {
display: none;
position: fixed;
left: 0px;
background: black;
height: 100%;
width: 80%;
padding: 30px;
}
.openicon {
display:block;
position: relative;
float: right;
font-size: 34px;
right: 8px;
font-weight: bold;
}
.closeicon {
display:block;
float:right;
font-size: 30px;
}
#menu ul {
display: block;
margin-top: 80px;
}
#menu ul li {
margin-bottom:35px;
}
}
/**********END HEADER SECTION**********/
Output Of Top Header Section Of Best Shoe Website Using HTML And CSS
3) Slider section : simple html code for online shopping website with source code
In our slider section, we are having full width image. For designing slider section we are using img>src tag to show image in html.
Please copy and paste the below code to design slider section
Slider section HTML code. Copy this code and paste in index.html
<!----------SLIDER HTML STARTS----->
<>
<!----------SLIDER HTML ENDS----->
Slider section CSS code. Copy this code and paste in style.css file
/**********START SLIDER SECTION**********/
.w-100 {
width:100%;
}
/**********END SLIDER SECTION**********/
Output Of Slider
4) Now, we will design banner section.
In our Banner section, we are having two images. For designing banner section we are using img>src tag to show image in html.
Please copy and paste the below code to design banner section
Banner section HTML code. Copy this code and paste in index.html file
<!----------BANNER HTML STARTS----->
<>
<>
<>
<>
<>
<>
<!----------BANNER HTML ENDS----->
Banner section CSS code. Copy this code and paste in style.css file
/**********START BANNER SECTION**********/
.banner {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 20px;
margin:40px 0px;
}
/**********END BANNER SECTION**********/
Output Of Banner
5) Now, we will design Product listing section of shoe website using html and css.
In our product listing section of best shoe website using html and css, we are having product image, product name, sales price and order now button.
For showing product image, we are using img>src tag and h3 tag for showing product name.
We are using anchor tag of shoe website using html to show shop now button in product listing
Please copy and paste the below code to design Product listing section
Product List HTML code. Copy this code and paste in index.html file
<!----------PRODUCT HTML STARTS----->
<>
<>
<>
<>
<>Laced Stylish Jooger For Men's<>
<><>$20.99<> <>$30.99<> <>
<>Show Now<>
<>
<>
<>
<>Laced Stylish Jooger For Men's<>
<><>$20.99<> <>$30.99<> <>
<>Show Now<>
<>
<>
<>
<>Laced Stylish Jooger For Men's<>
<><>$20.99<> <>$30.99<> <>
<>Show Now<>
<>
<>
<>
<>Laced Stylish Jooger For Men's<>
<><>$20.99<> <>$30.99<> <>
<>Show Now<>
<>
<>
<>
<>Laced Stylish Jooger For Men's<>
<><>$20.99<> <>$30.99<> <>
<>Show Now<>
<>
<>
<>
<>Laced Stylish Jooger For Men's<>
<><>$20.99<> <>$30.99<> <>
<>Show Now<>
<>
<>
<>
<>Laced Stylish Jooger For Men's<>
<><>$20.99<> <>$30.99<> <>
<>Show Now<>
<>
<>
<>
<>Laced Stylish Jooger For Men's<>
<><>$20.99<> <>$30.99<> <>
<>Show Now<>
<>
<>
<>
<>Laced Stylish Jooger For Men's<>
<><>$20.99<> <>$30.99<> <>
<>Show Now<>
<>
<>
<>
<>Laced Stylish Jooger For Men's<>
<><>$20.99<> <>$30.99<> <>
<>Show Now<>
<>
<>
<>
<>Laced Stylish Jooger For Men's<>
<><>$20.99<> <>$30.99<> <>
<>Show Now<>
<>
<>
<>
<>Laced Stylish Jooger For Men's<>
<><>$20.99<> <>$30.99<> <>
<>Show Now<>
<>
<>
<>
<!----------PRODUCT HTML ENDS----->
Product section CSS code. Copy this code and paste in style.css file
/**********START PRODUCT SECTION**********/
.product {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 20px 30px;
margin:100px 0px;
}
.pro {
border: 1px solid lightgrey;
padding: 0px 0px 30px 0px;
text-align: center;
margin-bottom:20px;
}
.pro p {
color: black;
font-size:18px;
margin:5px 0px;
}
.pro b {
color: red;
font-size: 26px;
}
.pro strike {
color: red;
}
.pro a {
text-align: center;
background: black;
padding: 13px 60px;
display: inline-block;
border-radius: 100px;
margin-top: 20px;
}
/**********END PRODUCT SECTION**********/
Output Of Product listing
6) Now, we will design footer section.
In our footer section, we are having about us, quick link, opening timing, contact information.
Please copy and paste the below code to design footer section
Footer section HTML code. Copy this code and paste in index.html
<!----------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. <>
<>
<>
<>Opening Timing<>
<>
<>
<>Mon-Fri...................<>
<>10:00 AM - 08:00 PM<>
<>
<>
<>Saturday.................<>
<>8:00 AM - 02:00 PM<>
<>
<>
<>Sunday....................<>
<>Closed<>
<>
<>
<>
<>
<>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
/**********START FOOTER SECTION**********/
footer{
background:black;
padding:40px 0px;
}
.foot {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 60px;
padding:20px 0px 20px 20px;
margin:0px auto;
}
.column h3 {
margin-bottom:25px;
}
.column p{
line-height:28px;
}
.column table td{
padding:10px 0px;
}
.column li {
margin-bottom:15px;
list-style-type: disclosure-closed;
}
/**********END FOOTER SECTION**********/
Output Of Footer
Online Shopping Website HTML Code: A Beginner's Guide
Creating an online shopping website using HTML is a great way to learn web development while building a functional e-commerce platform. If you're looking for a basic shopping website HTML code, this guide will help you understand the essential elements needed to design a simple shopping website.
Understanding the Basics of an Online Shopping Website
A shopping website typically consists of:
- Slider Section: Showcases featured products and store navigation.
- Product Section: Provides detailed descriptions, images, and pricing.
- Banner Ads: Allows users to review selected items.
- Footer Section: Opening Time And Contact information of webiste.
Why Use HTML for an Online Shopping Website?
HTML forms the foundation of any website. When combined with CSS for styling and JavaScript for interactive features, it helps create an attractive and user-friendly shopping website.
Conclusion
Building an online shopping website with simple HTML is a great starting point for beginners. By understanding the key components and structuring your website effectively, you can create an efficient and user-friendly e-commerce platform. With further enhancements using CSS, JavaScript, and backend technologies, your website can evolve into a fully functional online store.
Creating an online shopping website using HTML and CSS is an excellent way to start learning web development. By understanding the key elements of a shopping website and implementing a structured approach, you can build an effective and visually appealing e-commerce platform. Whether you’re working on a basic shopping website HTML code or looking for a complete shopping website source code, mastering HTML and CSS will give you a strong foundation in web development.
this is one of the perfect source code for e commerce website in html and css
perfect Shoe website source code very easy to understand.
nice work on shoe website using html
very beautiful Men shoe website using html and css design you have done.
very nice website on shoe website using html.
You are doing a great work for providing this simple shopping website using html and css.
great tutorial on online shopping website html code for providing this.
thank you so much for providing simple html code for online shopping website with source code.