How To Make A Shopping Website Using HTML And CSS
| Youtube : | https://youtu.be/BEHH3XSnVaw |
| Views : | 1265 |
| Skills : | HTML, CSS |
| Category : | Web Design |
| Tag : | Shopping Website, Ecommerce Website, Online Shopping Website |
In this tutorial, we are going to learning how to make responsive grocery shopping website using html and css. This grocery shopping website is going to be design only using HTML and CSS.
Creating a shopping website using HTML and CSS is an excellent project to improve web development skills and understand the basics of creating an e-commerce platform. This process involves designing the visual interface and structuring the webpage for an optimal user experience. Here's a guide to designing and structuring your shopping website effectively:
Sections We Are Going To Make In Our Grocery Shopping Website Using HTML And CSS
In our Responsive Shopping Website project, we are going to design mainly three section : header section, main content section And Last is footer section
With the help of their subsections, we are going to design these three section.
Header Section Will Contain :
- Logo And Main menu
Main Content Body Section Will Contain :
- Slider section
- Category section
- Product Section
- Adversitement Banner section
Footer Section Will Contain :
- About Us
- Opening Timing
- Contact information
Video Tutorial
To understand more easily, you can also watch full coding video on How To Make A Shopping Website Using HTML And CSS. You can watch the video tutorial below.
Let's Start Design Simple HTML Code For Online Shopping Website
Firstly, I am going to make one folder on dekstop, my folder name is grocery-ecommerce-website. Inside grocery-ecommerce-website folder , make two more folder : - 1) css and 2) images
Inside css folder, we are going to store CSS file which we will use in this website
In images folder, we are going to store all images which we will use in this website
Inside grocery-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
1) Meta Section
Let's start coding with writing basic HTML 5 code in head tag of index.html.
Inside <> tag link our style.css file in index.html file
You can simply copy 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
* {
font-family sans-serif, arial;
margin:0px;
padding:0px;
box-sizing:border-box;
font-size:16px;
color: green;
}
a {
text-decoration:none;
}
:target {
display:block!important;
}
2) Header section Online Shopping Website Using HTML And CSS.
In our header section, we are having logo in left side and nav bar in right side. Use semantic tags like <> and <>
For designing list of nav bar we are using ul > li tag
We are using ASCII code in shopping website html code to create nav open button and close button
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
<!---------- META HEADER STARTS ------>
<>
<>
<>
<><><>
<><>☰ <>
<>
<>
<>✕<>
<>
<>Home<>
<>About Us<>
<>Shop Now<>
<>Gallery<>
<>Cart<>
<>Contact us<>
<>
<>
<>
<>
<>
<>
<>
<!---------- META HEADER 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:6px 0px 4px 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:18px;
}
.menu ul li {
font-weight: 500;
font-size: 18px;
}
.openicon {
display:none;
position: relative;
float: right;
font-size: 34px;
right: 8px;
font-weight: bold;
}
.closeicon {
display:none;
float:right;
font-size: 28px;
}
/** FOR MOBILE VERSION **/
@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 In HTML Code For Shopping Website
In our slider section, we are having one full width image. For Creating slider image we are using img tag.
Slider section HTML code. Copy this code and paste in index.html
<!---------- SLIDER SECTION STARTS ------>
<>
<>
<>
<!---------- SLIDER SECTION ENDS ------>
Slider section CSS code. Copy this code and paste in style.css file
/********** SLIDER CSS STARTS **********/
.w-100 {
width:100%;
}
.slider {
object-fit: cover;
width: 100%;
height:550px;
object-position:bottom;
}
/*** iPad Screens ***/
@media screen and (max-width: 768px) {
.slider
{
height:350px;
}
}
/*** Mobile Screens ***/
@media screen and (max-width: 480px) {
.slider
{
height:180px;
}
}
/********** SLIDER CSS END **********/
Output Of Slider Section
4) Now, We Will Design Category Section
In our category section, we are having six category in one row with ctegory image and category name.
Category section HTML code. Copy this code and paste in index.html file
<!---------- META CATEGORY STARTS ------>
<>
<>
<>
<>
<>Fruits & Vegetables<>
<>
<>
<>
<>Fruits & Vegetables<>
<>
<>
<>
<>Fruits & Vegetables<>
<>
<>
<>
<>Fruits & Vegetables<>
<>
<>
<>
<>Fruits & Vegetables<>
<>
<>
<>
<>Fruits & Vegetables<>
<>
<>
<>
<!---------- META CATEGORY ENDS ------>
Category section CSS code. Copy this code and paste in style.css file
/********** CATEGORY CSS STARTS **********/
.category {
grid-template-columns: repeat(auto-fit, minmax(175px, 1fr));
display: grid;
gap: 15px;
margin:80px 0px;
text-align:center
}
.category div {
padding: 20px 0px;
border-radius: 12px;
background: #fafffa;
border:2px dashed green;
}
.category img {
height:120px
}
.category h4 {
font-weight: 500;
margin-top: 15px;
}
/*** iPad screens ***/
@media only screen and (min-device-width: 768px) and (max-device-width: 768px) {
.category {
gap: 35px;
}
}
/********** CATEGORY CSS END **********/
Output Of Category Section
5) Now, We Will Design Product Section Of Shopping Site HTML Code
In our Product Section, we are having product image, with product, price and Add To Cart button.
By default, in dekstop version, four 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
Product section HTML code. Copy this code and paste in index.html file
<!---------- PRODUCT SECTION STARTS ------>
<>
<>
<>
<>
<>Fresh Fruits Name<>
<><>$20.99<> per kg <>
<>Add To Cart<>
<>Delivery In 20mint<>
<>
<>
<>
<>Fresh Fruits Name<>
<><>$20.99<> per kg <>
<>Add To Cart<>
<>Delivery In 20mint<>
<>
<>
<>
<>Fresh Fruits Name<>
<><>$20.99<> per kg <>
<>Add To Cart<>
<>Delivery In 20mint<>
<>
<>
<>
<>Fresh Fruits Name<>
<><>$20.99<> per kg <>
<>Add To Cart<>
<>Delivery In 20mint<>
<>
<><>
<>Fresh Fruits Name<>
<><>$20.99<> per kg <>
<>Add To Cart<>
<>Delivery In 20mint<>
<>
<>
<>
<>Fresh Fruits Name<>
<><>$20.99<> per kg <>
<>Add To Cart<>
<>Delivery In 20mint<>
<>
<>
<>
<>Fresh Fruits Name<>
<><>$20.99<> per kg <>
<>Add To Cart<>
<>Delivery In 20mint<>
<>
<><>
<>Fresh Fruits Name<>
<><>$20.99<> per kg <>
<>Add To Cart<>
<>Delivery In 20mint<>
<>
<>
<>
<>Fresh Fruits Name<>
<><>$20.99<> per kg <>
<>Add To Cart<>
<>Delivery In 20mint<>
<>
<>
<>
<>Fresh Fruits Name<>
<><>$20.99<> per kg <>
<>Add To Cart<>
<>Delivery In 20mint<>
<>
<>
<>
<>Fresh Fruits Name<>
<><>$20.99<> per kg <>
<>Add To Cart<>
<>Delivery In 20mint<>
<>
<>
<>
<>Fresh Fruits Name<>
<><>$20.99<> per kg <>
<>Add To Cart<>
<>Delivery In 20mint<>
<>
<>
<>
<!---------- PRODUCT SECTION ENDS ------>
Product section CSS code. Copy this code and paste in style.css file
/********** PRODUCT CSS STARTS **********/
.product {
margin:100px 0px;
display: grid;
gap: 15px;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
.pro {
border: 1px solid #d0d0d0;
padding: 0px 0px 30px 0px;
text-align: center;
margin-bottom:20px;
}
.pro h2 {
font-size: 18px;
margin: 20px 0px 5px 0px;
}
.pro b {
font-size: 28px;
font-weight:500;
}
.pro a {
text-align: center;
background: forestgreen;
color: white;
padding: 11px 4px;
width: 200px;
display: inline-block;
border-radius: 5px;
margin-top: 20px;
}
.pro p {
margin-top: 5px;
color: forestgreen;
font-size: 14px;
}
/********** PRODUCT CSS END **********/
Output Of Product Section
6) Now, We Will Adversitement Banner Section
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 BANNER SECTION STARTS ------>
<>
<>
<>
<>
<>
<>
<!---------- ADVERSITEMENT BANNER SECTION ENDS ------>
Adversitement section CSS code. Copy this code and paste in style.css file
/********** ADVERSITEMENT BANNER CSS STARTS **********/
.banner {
margin:40px 0px;
display: grid;
gap: 30px;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
/********** ADVERSITEMENT BANNER CSS END **********/
Output Of Adversitement Banner Section
7) Now, We Will Design Footer Section
In our Footer Section, we are having 'about us' section, 'opening time' section and 'contact info' section. Use semantic tags like <>
Footer section HTML code. Copy this code and paste in index.html
<!---------- FOOTER SECTION 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 SECTION ENDS ------>
Footer CSS code. Copy And paste the below code in style.css
/********** FOOTER CSS STARTS **********/
footer{
background:#f2ffe4;
padding:40px 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;
line-height:28px;
}
.foots table td{
padding:10px 0px;
}
.col-foot h2 {
font-size:18px;
margin-bottom:25px;
}
.col-foot li {
margin-bottom:15px;
list-style-type: disclosure-closed;
}
/********** FOOTER CSS END **********/
Output Of Footer Section
Introduction : how to make a shopping website using html and css
A shopping website serves as an online storefront where businesses showcase and sell their products . This require well-structured shopping website html code designs to ensure a seamless user experience. While advanced e-commerce platforms use backend technologies for interactivity, this guide focuses on creating a static shopping website using only HTML and CSS. This project is ideal for beginners to grasp the shopping site html code basics of web development.
HTML (HyperText Markup Language) and CSS (Cascading Style Sheets) play crucial roles in the development of make a shopping website using html and css. While HTML structures the content, CSS enhances its visual appeal, creating an engaging and user-friendly experience.
By following these steps for designing online shopping website using html and css, you can create a visually appealing shopping website using just HTML and CSS. Once the design is ready, consider integrating backend technologies like PHP or JavaScript frameworks to make the website fully functional.
Building a shopping website using HTML and CSS is an excellent starting point for anyone interested in web development. These technologies provide the foundation for structuring and styling a site, ensuring it is visually appealing and user-friendly. While additional tools are required for dynamic functionality, mastering HTML and CSS lays the groundwork for creating effective e-commerce platforms.
HTML Code For Online Shopping Website Free
With the help of modern website builders and pre-made HTML templates, you can set up a professional-looking e-commerce platform quickly and cost-effectively.
A shopping website is an online platform that facilitates the buying and selling of products or services. It provides customers with a virtual store where they can browse items, add them to a cart, and complete purchases securely. From global giants like Amazon and eBay to niche boutique sites, shopping websites cater to diverse customer needs and preferences.
HTML templates are pre-designed web pages that can be customized to meet your needs. They are ideal for beginners and non-developers. We are providing HTML code for online shopping website free download so that you can easily tweak the design and content to match your brand.
Style Your Shopping Website Using CSS
CSS brings your website to life by making it visually appealing and user-friendly.
Global Styles:
- Set a uniform font family and color palette for consistency.
- Reset browser default margins and paddings for a clean slate.
Header and Navigation:
- Use Flexbox to create a horizontally aligned navigation bar.
- Add hover effects for interactive links.
Product Grid:
- Use CSS Grid or Flexbox for a responsive product display.
- Add shadows or hover animations to product cards for a professional look.
Buttons and Call-to-Actions:
- Design buttons with rounded corners, hover effects, and contrasting colors to stand out.
Responsive Design:
- Use media queries to make the website functional across various devices.
Test and Optimize
- Responsive Design: Check how your website looks on different devices.
- Cross-Browser Compatibility: Ensure the site works on all major browsers.
- Performance Optimization: Minimize CSS files and compress images to reduce loading times
Conclusion
Responsive web design ensures that a shopping website functions well on devices of all sizes, from desktops to smartphones. This article have guide you through the basics of making a shopping responsive website using HTML and CSS.
In an era where mobile devices dominate online shopping, creating a responsive shopping 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.
Building a shopping website using HTML and CSS is a valuable project that enhances your web development skills. This static design lays the groundwork for further enhancements like interactivity, dynamic content, and database integration. By following this guide, you'll create a clean, responsive, and visually appealing shopping website that demonstrates the power of HTML and CSS.
where can i download shopping site html code . Please provide me download link.
Great tutorial on online shopping project in html with source code free download
Thank you so much for providing html code for online shopping website free