Hướng dẫn simple e-commerce website html code - mã html trang web thương mại điện tử đơn giản

Này các lập trình viên! Hãy cùng học cách tạo một trang web thương mại điện tử bằng cách sử dụng HTML, CSS và JavaScript với mã nguồn đầy đủ. Chúng tôi giải thích mọi mã từng bước. Chúng tôi tạo cấu trúc cơ bản của trang web thương mại điện tử bằng mã HTML, sau đó tạo kiểu trang web thương mại điện tử của chúng tôi bằng mã CSS. Sau đó, chúng tôi sử dụng một số chức năng trong một trang web thương mại điện tử để chúng tôi sử dụng mã JavaScript cho việc này. & NBSP;

Trải cảm mua sắm tại Amazon, Flipkart hoặc bất kỳ trang web thương mại điện tử nào khác muốn làm một cái gì đó mới, sau đó là thời gian để chuyển sang trang web thương mại điện tử của bạn.

Hơn 100 dự án đầu tiên cho các nhà phát triển web (mã nguồn)

Heyy… .., đợi một giây bạn không có trang web của bạn? Đừng cảm thấy tồi tệ, tôi ở đây để giúp bạn làm cho bạn học & nbsp; Cách xây dựng một trang web thương mại điện tử & nbsp; vì vậy hãy kết nối với blog cho đến cuối cùng và cuối cùng, bạn có trang web thương mại điện tử của bạn sau đó mua sắm Như bạn muốn.

Hướng dẫn video về trang web thương mại điện tử bằng cách sử dụng HTML CSS và JavaScript

Trước khi thảo luận về quy trình để làm cho trang web, hãy để Lôi xem xét nó trông như thế nào. Bạn có thể nhìn vào trang web thương mại điện tử tuyệt đẹp của tôi.

Dự án trực tiếp:-nơi bạn có thể kiểm tra nó.Here you can check it.

Xem Pen Thương mại điện tử của Himanshu Singh (@Him Biếnu) trên Codepen.

Bạn đã thấy bố cục trang web thương mại điện tử đáp ứng của tôi và bạn bắt đầu tưởng tượng trang web của mình.

Các thành phần quan trọng bạn nên có để xây dựng một trang web thương mại điện tử. Sau đây là một số kỹ năng cần thiết để xây dựng trang web này:-.

1. HTML.2. CSS.3. JavaScript (cơ bản).
2. CSS.
3. Javascript(Basics).

HTML cho mã trang web thương mại điện tử phản hồi:-

Giống như hệ thống Skelton (khung/cấu trúc của xương) của cơ thể con người cho cấu trúc/bố cục cho cơ thể con người. Tương tự, mã HTML thực hiện cùng một bố cục của các trang web.

Don Tiết lo lắng bạn không cần bất kỳ kiến ​​thức sinh học nào cho trang web này.

Mỗi trang web có ba phần chính: -1.header (thanh điều hướng/menu/logo, v.v.) 2. Phần (nội dung chính) .3. Chân trang.
1.Header(Navigation bar/menu/logo,etc.)
2.Main section(main content).
3. Footer.

1. Tiêu đề:-

Bên dưới có một hình ảnh của thanh điều hướng chứa tên thương hiệu/logo, thanh tìm kiếm và các mục menu, tất cả đều nằm dưới tiêu đề.

1. Trong phần tiêu đề, trước tiên thực hiện ba div. Một cho logo, thứ hai cho thanh tìm kiếm và thứ ba cho danh sách menu.

Trong lớp thứ hai, tôi đã sử dụng biểu tượng tìm kiếm mà tôi đã nhập thông qua & nbsp; ionicon & nbsp ;, cho bất kỳ loại biểu tượng nào được sử dụng trong phát triển trang web mà bạn có thể sử dụng.ionicon , for any type of icons used in website development you can use it.

Hơn 50 dự án mặt trước với mã nguồn | Các dự án phía trước có mã nguồn

Đầu vào là một thẻ được sử dụng cho nhiều mục đích cho các hộp kiểm, radio, đầu vào email, ngày, thời gian và các mục khác. Nhưng ở đây chúng tôi đang sử dụng cho thanh tìm kiếm để loại là văn bản. Để biết thêm ý tưởng, bạn có thể tham khảo các blog khác của chúng tôi.

 
  
 
ShoPperZ
  
 
  
         
           
         
     
  
     
  
       
  
         
HOME
  
         
SHOP
  
         
OUR PRODUCTS
  
         
CONTACT US
  
         
ABOUT US
  
       
  
     
  
  
  

Vì trang web của chúng tôi phải đáp ứng (một trang web phản hồi được điều chỉnh tự động cho các kích thước và chế độ xem màn hình khác nhau.)A Responsive website is automatically adjusted for different screen sizes and viewports.)

Ví dụ: trang web -Blogger cũng phản hồi, bạn có thể dễ dàng sử dụng nó một cách thoải mái trên điện thoại (màn hình nhỏ) và PC (màn hình có kích thước lớn).

Vì vậy, khi chúng tôi đang sử dụng trang web, có một vấn đề là nó không thể hiển thị tất cả các danh sách menu trên thanh điều hướng. Cuối cùng, chúng tôi quyết định lập một danh sách menu hoạt động nút. Vì vậy, khi bạn nhấp vào biểu tượng menu, nó sẽ mở vào danh sách menu mà bạn có thể thấy trong hình ảnh tiếp theo.

Bạn đã thấy cách giải quyết vấn đề nhưng bây giờ là thời gian để mã. Thêm một lớp menu trong đó một biểu tượng gần bạn có thể thấy trong hình ảnh trên và cũng thêm biểu tượng menu trong lớp Heading1.

 
  
     
ShoPperZ
  
     
  
         
       
  
         
HOME
  
         
SHOP
  
         
OUR PRODUCTS
  
         
CONTACT US
  
         
ABOUT US
  
       
  
     
  
     
  
         
           
         
     
  
     
  
       
  
         
HOME
  
         
SHOP
  
         
OUR PRODUCTS
  
         
CONTACT US
  
         
ABOUT US
  
       
  
     
  
     
  
         
     
  
   
  

Bây giờ, phần tiêu đề đã kết thúc. Hãy để tiến về phía trước đến phần chính..

2. Phần:-

Phần phần chủ yếu chứa nội dung của một trang web được chia phần chủ yếu thành hai phần:-

Phần1 chứa một trình trượt hình ảnh chứa hình ảnh. Phần2 chứa lớp container chứa các mục khác nhau.

Trong trình trượt hình ảnh, hãy thêm các hình ảnh khác nhau bằng thẻ & nbsp; IMG. & Nbsp; trong Phần2 Thêm một lớp chứa có tên bên trong đó thêm các mục có tên là nhiều mục bạn muốn trên trang web của bạn. Trong mỗi mục, thêm tên vật phẩm, giá vật phẩm, hình ảnh vật phẩm và các lớp thông tin vật phẩm. Nếu bạn muốn bạn cũng có thể thêm một lớp nữa cho các danh mục.img tag. In section2 add a container named class inside that add items named classes as many items you want on your website. In every item add item name, item price, item image and item info classes. If you want you can also add one more class for categories.

 
  
     
  
       
  
         
  
           
  
           
  
           
  
           
  
           
  
         
  
       
  
       
  
         
  
           
  
             
  
             
SHOES
  
             
$5
  
             
Lorem ipsum dolor sit amet consectetur.
  
           
  
           
  
             
  
             
MEN's T-SHIRT
  
             
$6.34
  
             
Lorem ipsum dolor sit.
  
           
  
           
  
             
  
             
JEANS
  
             
$9
  
             
Lorem ipsum dolor sit amet.
  
           
  
           
  
             
  
             
WATCH
  
             
$9.1
  
             
Lorem ipsum dolor sit.
  
           
  
           
  
             
  
             
SMART PHONE
  
             
$20
  
             
Lorem ipsum dolor sit.
  
           
  
           
  
             
  
             
TELEVISION
  
             
$18
  
             
Lorem ipsum dolor sit amet consectetur.
  
           
  
           
  
             
  
             
HOODIES
  
             
$6.7
  
             
Lorem ipsum dolor sit.
  
           
  
           
  
             
  
             
DINNER SET
  
             
$10
  
             
Lorem ipsum dolor sit amet consectetur adipisicing elit.
  
           
  
           
  
             
  
             
BLANKETS
  
             
$9.9
  
             
Lorem ipsum dolor sit amet consectetur adipisicing.
  
           
  
           
  
             
  
             
LAPTOP
  
             
$99
  
             
Lorem ipsum dolor sit amet consectetur, adipisicing elit.
  
           
  
           
  
             
  
             
MICROWAVE
  
             
$30
  
             
Lorem ipsum dolor sit amet consectetur, adipisicing elit.
  
           
  
           
  
             
  
             
COFFEE MAKER
  
             
$29.7
  
             
Lorem ipsum dolor sit amet consectetur, adipisicing elit.
  
           
  
           
  
             
  
             
BED
  
             
$100
  
             
Lorem ipsum dolor sit amet consectetur, adipisicing elit.
  
           
  
           
  
             
  
             
AIR CONDITIONER
  
             
$78
  
             
Lorem ipsum dolor sit amet consectetur, adipisicing elit.
  
           
  
           
  
             
  
             
BOOK
  
             
$9
  
             
Lorem ipsum dolor sit amet consectetur, adipisicing elit.
  
           
  
           
  
             
  
             
BAG
  
             
$36.5
  
             
Lorem ipsum dolor sit amet consectetur, adipisicing elit.
  
           
  
           
  
             
  
             
SAREES
  
             
$25.6
  
             
Lorem ipsum dolor sit amet consectetur, adipisicing elit.
  
           
  
           
  
             
  
             
WASHING MACHINE
  
             
$56
  
             
Lorem ipsum dolor sit amet consectetur, adipisicing elit.
  
           
  
         
  
       
  
     
  
   
  

Phần phần đã kết thúc.

Lưu ý:- Này, .. Bạn vẫn đang nghĩ rằng tại sao chúng ta lại đặt thẻ một tên lớp, vì vậy câu trả lời là nó sẽ giúp bạn trong khi tạo kiểu cho nó. Hãy giả sử rằng bạn muốn áp dụng cùng một kiểu dáng trên nhiều thẻ, sau đó bạn cần tạo kiểu cho từng thẻ một thì câu trả lời là không cóHey….. are you still thinking that why are we giving tag a class name, so the answer is that it will help you while styling it. Let’s assume you want to apply the same styling on many tags, then you need to style every tag one by one then the answer is No…

Bạn có thể chỉ cần cung cấp cho tất cả các thẻ cùng lớp được đặt tên và áp dụng kiểu dáng cho một lớp sẽ tạo kiểu cho tất cả các thẻ có cùng một lớp.

3. Footer:-

Footer là phần cuối cùng của trang web. Trong đó thêm một số chi tiết. Bông chân của trang web trên được hiển thị dưới đây trong hình.

Bây giờ chúng ta sẽ thực hiện nó như thế nào ????

Hy vọng hình trên sẽ giúp bạn hiểu cách thực hiện nó. Thứ nhất, chia chân trang thành 4 lớp chính là Footer0, Footer1, Footer2 và Footer3.

Bây giờ nó thời gian để thực hiện mã của nó.

Bên trong lớp Footer1, thêm một lớp cho các biểu tượng truyền thông xã hội, sau đó bên trong thêm biểu tượng của chúng.

Tương tự, thêm nhiều lớp trong Footer2 và Footer3 như được đưa ra dưới đây trong mã.

<—–Now, HTML code ends—->

Mã nguồn cho trang web E Commerce trong HTML và CSS

Bây giờ, thời gian để thêm các tệp CSS và JavaScript vào HTML.

   
   
   
     
     
     
     
     
     
   
   
   
  
     
ShoPperZ
  
     
  
         
       
  
         
HOME
  
         
SHOP
  
         
OUR PRODUCTS
  
         
CONTACT US
  
         
ABOUT US
  
       
  
     
  
     
  
         
           
         
     
  
     
  
       
  
         
HOME
  
         
SHOP
  
         
OUR PRODUCTS
  
         
CONTACT US
  
         
ABOUT US
  
       
  
     
  
     
  
         
     
  
   
  
   
  
     
  
       
  
         
  
           
  
           
  
           
  
           
  
           
  
         
  
       
  
       
  
         
  
           
  
             
  
             
SHOES
  
             
$5
  
             
Lorem ipsum dolor sit amet consectetur.
  
           
  
           
  
             
  
             
MEN's T-SHIRT
  
             
$6.34
  
             
Lorem ipsum dolor sit.
  
           
  
           
  
             
  
             
JEANS
  
             
$9
  
             
Lorem ipsum dolor sit amet.
  
           
  
           
  
             
  
             
WATCH
  
             
$9.1
  
             
Lorem ipsum dolor sit.
  
           
  
           
  
             
  
             
SMART PHONE
  
             
$20
  
             
Lorem ipsum dolor sit.
  
           
  
           
  
             
  
             
TELEVISION
  
             
$18
  
             
Lorem ipsum dolor sit amet consectetur.
  
           
  
           
  
             
  
             
HOODIES
  
             
$6.7
  
             
Lorem ipsum dolor sit.
  
           
  
           
  
             
  
             
DINNER SET
  
             
$10
  
             
Lorem ipsum dolor sit amet consectetur adipisicing elit.
  
           
  
           
  
             
  
             
BLANKETS
  
             
$9.9
  
             
Lorem ipsum dolor sit amet consectetur adipisicing.
  
           
  
           
  
             
  
             
LAPTOP
  
             
$99
  
             
Lorem ipsum dolor sit amet consectetur, adipisicing elit.
  
           
  
           
  
             
  
             
MICROWAVE
  
             
$30
  
             
Lorem ipsum dolor sit amet consectetur, adipisicing elit.
  
           
  
           
  
             
  
             
COFFEE MAKER
  
             
$29.7
  
             
Lorem ipsum dolor sit amet consectetur, adipisicing elit.
  
           
  
           
  
             
  
             
BED
  
             
$100
  
             
Lorem ipsum dolor sit amet consectetur, adipisicing elit.
  
           
  
           
  
             
  
             
AIR CONDITIONER
  
             
$78
  
             
Lorem ipsum dolor sit amet consectetur, adipisicing elit.
  
           
  
           
  
             
  
             
BOOK
  
             
$9
  
             
Lorem ipsum dolor sit amet consectetur, adipisicing elit.
  
           
  
           
  
             
  
             
BAG
  
             
$36.5
  
             
Lorem ipsum dolor sit amet consectetur, adipisicing elit.
  
           
  
           
  
             
  
             
SAREES
  
             
$25.6
  
             
Lorem ipsum dolor sit amet consectetur, adipisicing elit.
  
           
  
           
  
             
  
             
WASHING MACHINE
  
             
$56
  
             
Lorem ipsum dolor sit amet consectetur, adipisicing elit.
  
           
  
         
  
       
  
     
  
   
  
     
     
     
   
   

Vì vậy, cấu trúc của trang web của chúng tôi đã sẵn sàng.

Trang web thương mại điện tử mã CSS:-E-commerce website:-

Cấu trúc của bố cục trang web được hoàn thành nhưng nó trông không đẹp mà không có kiểu dáng. Vì bộ xương người một mình có thể trông đẹp mà không cần da. Vì vậy, ở đây công việc của kiểu dáng được thực hiện với sự trợ giúp của & nbsp; CSS.

Các chủ đề được biết đến trước hướng dẫn CSS:-

Trang web danh mục đầu tư bằng cách sử dụng HTML CSS và JavaScript (Mã nguồn)

1.Flexbox.2.css Basics (bộ chọn, màu, hộp biên giới, v.v.) .3. ; & nbsp;
2.CSS basics(selectors,color,border-box,etc).
3.pseduo effects(hover, active) and pseudo elements(before).
4.media queries(responsive) and keyframes(animation).  

1. Đầu tiên là phong cách tiêu đề. Sử dụng thuộc tính Flex để sắp xếp mọi mục Flex trong tiêu đề trong một dòng. Sau đó sử dụng cùng một menu tìm kiếm và danh sách tiêu đề là FlexBox. sau đó căn chỉnh chúng theo A & NBSP; Đường ngang bằng cách sử dụng các thuộc tính.2. Đặt khả năng hiển thị của lớp menu và lớp tiêu đề được ẩn vì nó sẽ xuất hiện khi kích thước của màn hình ít hơn. (Khi chúng tôi đang sử dụng nó trong điện thoại hoặc tab) .3. Áp dụng các thuộc tính khác và hiệu ứng di chuột (& NBSP; hiệu ứng di chuột hoạt động khi con trỏ đi qua thẻ mà nó được áp dụng) cho các tệp tiêu đề như hiển thị bên dưới.4. Sử dụng thuộc tính KeyFrame được sử dụng cho hình ảnh động (tôi sử dụng cho thanh trượt hình ảnh) .5. Áp dụng kiểu dáng trên các mặt hàng/sản phẩm và các lớp của chúng (Flex và một số thuộc tính khác) .6. Tương tự, áp dụng một số kiểu dáng trên chân trang như hình dưới đây.7. Cuối cùng, khi trang web của bạn đã sẵn sàng bây giờ, thời gian để làm cho nó phản hồi để nó cũng hoạt động tốt trên màn hình nhỏ (điện thoại) .8. Sử dụng thuộc tính Truy vấn truyền thông để làm cho nó phản hồi và bên trong nó đề cập đến các thuộc tính bạn muốn xem khi kích thước của màn hình nhỏ. Về mặt thông thường, hãy kiểm tra trang web của bạn đã sẵn sàng.
then use the same for search menu and heading lists as flexbox. then align them in a  horizontal line using properties.
2. set visibility of the menu class and heading class to be hidden because it should appear when the size of the screen is less. (when we are using it in phones or tab).
3. Apply other properties and hover effects( HOVER effect works when the cursor goes over the tag on which it is applied) to the header files as shown below.
4. Using the keyframe property which is used for the animation (I use for the image slider).
5. Apply styling on the items/products and their classes (flex and some other properties).
6. Similarly, apply some styling on Footer as shown below.
7. Finally when your webpage is ready now it’s time to make it responsive so that it also works fine on small screens(phones).
8. Use media queries property to make it responsive and inside it mention the properties you want to see when the size of a screen is small.
finally, check your website is ready.

1:  *{  
2:    margin: 0;  
3:    padding: 0;  
4:    box-sizing: border-box;  
5:  }  
6:  header{  
7:  display: flex;  
8:  justify-content: space-evenly;  
9:  align-items: center;  
10:  height:60px;  
11:  width:100%;  
12:  background:black;  
13:  }  
14:  .heading ul{  
15:    display:flex;  
16:    }  
17:  .logo a{  
18:    color:white;  
19:    transition-duration: 1s;  
20:    font-weight: 800;  
21:  }  
22:  .logo a:hover{  
23:    color:rgb(240, 197, 6);  
24:    transition-duration: 1s;  
25:  }  
26:  .heading ul li{  
27:    list-style: none;  
28:  }  
29:  .heading ul li a{  
30:    margin:5px;  
31:    text-decoration: none;  
32:    color:black;  
33:    font-weight: 500;  
34:    position:relative;  
35:    color:white;  
36:    margin:2px 14px;  
37:    font-size: 18px;  
38:    transition-duration: 1s;  
39:  }  
40:  .heading ul li a:active{  
41:    color:red;  
42:  }  
43:  .heading ul li a:hover{  
44:    color:rgb(243, 168, 7);  
45:    transition-duration: 1s;  
46:  }  
47:  .heading ul li a::before{  
48:    content:'';  
49:    height:2px;  
50:    width:0px;  
51:    position:absolute;  
52:    left:0;  
53:    bottom:0;  
54:    background-color: white;  
55:    transition-duration: 1s;  
56:  }  
57:  .heading ul li a:hover::before{  
58:    width:100%;   
59:    transition-duration: 1s;  
60:    background-color:rgb(243, 168, 7);  
61:  }  
62:  #input{  
63:    height:30px;  
64:    width:300px;  
65:    text-decoration: none;  
66:    border:0px;  
67:    padding:5px;  
68:  }  
69:  .logo a{  
70:    color: white;  
71:    font-size: 35px;  
72:    font-weight: 500;  
73:    text-decoration:none;  
74:  }  
75:  ion-icon{  
76:    width:30px;  
77:    height:30px;  
78:    background-color: white;  
79:    color:black;  
80:  }  
81:  ion-icon:hover{  
82:    cursor: pointer;  
83:  }  
84:  .search a{  
85:    display:flex;  
86:  }  
87:  header a ion-icon{  
88:    position:relative;  
89:    right:3px;  
90:  }  
91:  .img-slider img{  
92:    height:720px;  
93:    width:1080px;  
94:  }  
95:  @keyframes slide{  
96:    0%{  
97:      left:0px;  
98:    }  
99:    15%{  
100:      left:0px;  
101:    }  
102:    20%{  
103:      left:-1080px;  
104:    }  
105:    32%{  
106:      left:-1080px;  
107:    }  
108:    35%{  
109:      left:-2160px;  
110:    }  
111:    47%{  
112:      left:-2160px;  
113:    }  
114:    50%{  
115:      left:-3240px;  
116:    }  
117:    63%{  
118:      left:-3240px;  
119:    }  
120:    66%{  
121:      left:-4320px;  
122:    }  
123:    79%{  
124:      left:-4320px;  
125:    }  
126:    82%{  
127:      left:-5400px;  
128:    }  
129:    100%{  
130:      left:0px;  
131:  }}  
132:  .img-slider{  
133:    display:flex;  
134:    float:left;  
135:    position:relative;  
136:    width:1080px;  
137:    height:720px;  
138:    animation-name:slide;  
139:    animation-duration: 10s;  
140:    animation-iteration-count: infinite;  
141:    transition-duration:2s ;  
142:  }  
143:  .heading1 {  
144:    opacity:0;  
145:  }  
146:  .search{  
147:    display:flex;  
148:    position: relative;  
149:  }  
150:  .section1{  
151:    width:1080px;  
152:    overflow:hidden;  
153:    justify-content: center;  
154:    align-items: center;  
155:    margin:0px auto;  
156:  }  
157:    .section2 .container{  
158:      display:flex;  
159:      width:100%;  
160:      height:max-content;  
161:      flex-wrap: wrap;  
162:      justify-content:center;  
163:      margin:10px auto;  
164:    }  
165:    .section2 .container .items{  
166:      margin: 10px;  
167:      width:200px;  
168:      height: 300px;  
169:      background-color:white;  
170:      border:2.5px solid black;  
171:      border-radius: 12px;  
172:    }  
173:    .section2 .container .items .name{  
174:  text-align:center;  
175:  background-color:rgb(240, 197, 6);  
176:  height:25px;  
177:  padding-top:4px;  
178:  color:white;  
179:  margin: 0;  
180:    }  
181:    .section2 .container .items .price{  
182:  float:left;  
183:  padding-left:10px;  
184:  display: block;  
185:  width:100%;  
186:  color:rgb(255, 0, 0);  
187:  font-weight: 650;  
188:    }  
189:    .section2 .container .items .info{  
190:      padding-left:10px;  
191:      color:rgb(243, 168, 7);  
192:    }  
193:    .section2 .container .items .img img{  
194:  width:200px;  
195:  height:200px;  
196:  margin: 0;  
197:  padding: 0;  
198:  border-radius:12px;  
199:  transition-duration:0.8s;  
200:    }  
201:    .section2 .container .items .img {  
202:      overflow: hidden;  
203:      margin: 0;  
204:    }  
205:    .section2 .container .items:hover .img img{  
206:      transform: scale(1.2);  
207:      transition-duration:0.8s;  
208:      border-radius:12px;  
209:    }  
210:  footer{  
211:    display:flex;  
212:    flex-direction: column;  
213:   background-color: black;  
214:    align-items: center;  
215:    color:white;  
216:  }  
217:  .footer1{  
218:    display:flex;  
219:  flex-direction: column;  
220:  align-items: center;  
221:  color:white;  
222:  margin-top:15px;  
223:  }  
224:  .social-media{  
225:    display:flex;  
226:    justify-content: center;  
227:    color:white;  
228:    flex-wrap: wrap;  
229:  }  
230:  .social-media a{  
231:    color:white;  
232:    margin:20px;  
233:    border-radius: 5px;  
234:    margin-top:10px;  
235:    color:white;  
236:  }  
237:  .social-media a ion-icon{  
238:    color:white;  
239:    background-color: black;  
240:  }  
241:  .social-media a:hover ion-icon{  
242:    color:red;  
243:    transform: translateY(5px);  
244:  }  
245:  .footer2{  
246:    display: flex;  
247:    width:100%;  
248:    justify-content:space-evenly;  
249:    align-items: center;  
250:    text-decoration: none;  
251:    flex-wrap: wrap;  
252:  }  
253:  .footer0{  
254:    font-weight:1200;  
255:    transition-duration: 1s;  
256:  }  
257:  .footer0:hover{  
258:    color:rgb(243, 168, 7);  
259:  }  
260:  .footer2 .heading {  
261:    font-weight: 900;  
262:    font-size: 18px;  
263:  }  
264:  .footer3 {  
265:    margin-top:60px;  
266:    margin-bottom: 20px;  
267:    display:flex;  
268:    flex-wrap: wrap;  
269:    justify-content: center;  
270:  }  
271:  .footer2 .heading:hover{  
272:    color:rgb(243, 168, 7) ;  
273:  }  
274:  .footer2 .div:hover{  
275:  transform: scale(1.05);  
276:  }  
277:  .footer3 h4{  
278:    margin:0 10px;  
279:  }  
280:  .footer2 div{  
281:    margin:10px;  
282:  }  
283:  .menu{  
284:    visibility:hidden;  
285:  }  
286:  .heading1 .ham:active{  
287:    color: red;  
288:  }  
289:  .items{  
290:    overflow:hidden;  
291:  }  
292:  .ham,.close{  
293:  cursor:pointer;  
294:  }  
295:  @media screen and (max-width:1250px){  
296:    .heading ul li{  
297:      display:none;  
298:    }  
299:    .items{  
300:      transform:scale(0.9);  
301:    }  
302:    .img-slider img{  
303:      height:60vw;  
304:      width:80vw;  
305:      }  
306:    .ham:active {  
307:       color:red;  
308:     }   
309:      .menu {  
310:      display:flex;  
311:      flex-direction: column;  
312:      align-items: center;  
313:      }    
314:      .menu a ion-icon{  
315:        position: absolute;  
316:      }  
317:     @keyframes slide1{  
318:      0%{  
319:        left:0vw;  
320:      }  
321:      15%{  
322:        left:0vw;  
323:      }  
324:      20%{  
325:        left:-80vw;  
326:      }  
327:      32%{  
328:        left:-80vw;  
329:      }  
330:      35%{  
331:        left:-160vw;  
332:      }  
333:      47%{  
334:        left:-160vw;  
335:      }  
336:      50%{  
337:        left:-240vw;  
338:      }  
339:      63%{  
340:        left:-240vw;  
341:      }  
342:      66%{  
343:        left:-320vw;  
344:      }  
345:      79%{  
346:        left:-320vw;  
347:      }  
348:      82%{  
349:        left:-400vw;  
350:      }  
351:      100%{  
352:        left:0vw;  
353:    }}  
354:    .menu ul{  
355:      display:flex;  
356:      flex-direction:column;  
357:      position: absolute;  
358:      width:100vw;  
359:      height:100vh;  
360:      background-color: black;  
361:      left:0;  
362:      top:0;  
363:      z-index:11;  
364:      align-items: center;  
365:      justify-content: center;  
366:      opacity:1;  
367:      }  
368:  .close{  
369:  z-index:34;      
370:    color:white;  
371:  background-color: black;  
372:  }  
373:  .close:active{  
374:    color:red;  
375:  }  
376:    .menu ul li{  
377:      list-style: none;  
378:      margin: 20px;  
379:      border-top:3px solid white;  
380:      width:80%;  
381:      text-align:center;  
382:      padding-top:10px;  
383:     }  
384:     .menu ul li a{  
385:  text-decoration: none;  
386:  padding-top: 10px;  
387:  color:white;  
388:  font-weight: 900;  
389:     }  
390:     .menu ul li a:hover{  
391:       color:rgb(240, 197, 6);  
392:     }  
393:    .img-slider{  
394:      display:flex;  
395:      float:left;  
396:      position:relative;  
397:      width:80%;  
398:      height:60%;  
399:      animation-name:slide1;  
400:      animation-duration: 10s;  
401:      animation-iteration-count: infinite;  
402:      transition-duration:2s ;  
403:    }  
404:    .section1{  
405:      width:80%;  
406:      overflow:hidden;  
407:      justify-content: center;  
408:      align-items: center;  
409:      margin:0px auto;  
410:    }  
411:  .heading1{  
412:  opacity: 1;  
413:  position:relative;  
414:  bottom:8px;  
415:    }  
416:    .search a{  
417:      display:flex;  
418:      flex-wrap: nowrap;  
419:    }  
420:  .heading1 .ham{  
421:      background-color: black;  
422:      color:white;  
423:    }  
424:    #input{  
425:      width:200px;  
426:      flex-shrink:2;  
427:    }  
428:    header{  
429:      height:150px;  
430:    }  
431:  }  
432:  @media screen and (max-width:550px){  
433:    .heading ul li{  
434:      display:none;  
435:     }  
436:     .heading1{  
437:      opacity: 1;  
438:      bottom:8px;  
439:      }  
440:      header{  
441:        height:250px;  
442:      flex-wrap: wrap;  
443:      display: flex;  
444:      flex-direction: column;  
445:          }  
446:    #input{  
447:      width:150px;  
448:    }  
449:    .close{  
450:  z-index:34;}  
451:  .search a{  
452:    display:flex;  
453:    flex-wrap: nowrap;  
454:  }  
455:  }  

Heyyy ……… đợi thêm một giây! Những gì bạn nói là trang web của bạn không hoạt động bình thường khi kích thước của màn hình nhỏ. Bạn không thể mở danh sách menu. Chúng tôi sẽ giải quyết vấn đề này bằng JavaScript. Vì vậy, hãy để Lừa chuyển sang phần JavaScript.
we will solve this problem using Javascript. So, Let’s move on to the Javascript portion.

Mã JavaScript cho trang web Thương mại điện tử đáp ứng:-

Một trang web chỉ có cấu trúc và kiểu dáng giống như một người đang ngủ (nó có thể thực hiện bất kỳ chức năng nào). Vì vậy, đối với hoạt động tốt của trang web, chúng tôi sử dụng JavaScript.

Các chủ đề bạn nên biết trước khi triển khai mã JavaScript:-

1. DOM (Mô hình đối tượng tài liệu) Thao tác.2. JavaScript cơ bản.
2. Javascript basics.

Vì vậy, trước tiên, chúng tôi muốn rằng khi chúng tôi nhấp vào biểu tượng menu được hiển thị trong hình ảnh đầu tiên dưới đây thì danh sách menu sẽ được mở như trong hình tiếp theo và khi chúng tôi nhấp vào biểu tượng Đóng thì một lần nữa chúng tôi lại quay lại trang đầu tiên như được hiển thị Trong hình đầu tiên.

Trang web thương mại điện tử sử dụng HTML CSS và JavaScript

Trang web thương mại điện tử sử dụng HTML CSS và JavaScript

Ý tưởng bây giờ rõ ràng là thời gian để thực hiện nó trong mã.

1:  const close=document.querySelector(".close");  
2:  const open=document.querySelector(".ham");  
3:  const menu=document.querySelector(".menu")  
4:  close.addEventListener("click",()=>{  
5:    menu.style.visibility="hidden";  
6:  })  
7:  open.addEventListener("click",()=>{  
8:    menu.style.visibility="visible";  
9:  })  

Đầu tiên tôi đã chọn các lớp Đóng, Ham và Menu được đặt tên bằng bộ chọn truy vấn.

Sau đó, sử dụng AddEventListener (một hàm cho phép chúng tôi chạy các chức năng khi một số sự kiện nhất định được thực hiện).

Tôi đã chọn sự kiện nhấp chuột cho cả Class Class và Ham Class, vì vậy khi bạn nhấp vào các biểu tượng của Đóng và Menu, nó sẽ thực hiện mã được viết bên trong chức năng được cho là chạy.

Khi chúng tôi nhấp vào biểu tượng ĐÓ

Trong khi chúng tôi nhấp vào biểu tượng menu (lớp HAM), nó sẽ đặt khả năng hiển thị của danh sách menu thành hiển thị (vì vậy bây giờ chúng tôi có thể thấy đoạn mã chạy được viết bên trong lớp menu).

<———Finally, a Simple and Responsive E-commerce website using HTML, CSS, and  Basics of Javascript is completed———>

Mã nguồn cho trang web E Commerce trong HTML và CSS😎.

Bây giờ, thời gian để thêm các tệp CSS và JavaScript vào HTML.

Vì vậy, cấu trúc của trang web của chúng tôi đã sẵn sàng.Himanshu Singh.

Trang web thương mại điện tử mã CSS:-

Đây chỉ là mã frontend của trang web Thương mại điện tử?

Vâng, đây chỉ là mã phần Frontend, không phải bất kỳ mã phụ trợ nào được viết cho dự án trang web thương mại điện tử này

Bạn sử dụng trình soạn thảo mã nào cho mã hóa dự án trang web thương mại điện tử này?

Cá nhân tôi khuyên bạn nên sử dụng VS Code Studio.its rất đơn giản và dễ sử dụng

Bạn có thể xây dựng một trang web thương mại điện tử với HTML không?

Làm cách nào để mã hóa trang web thương mại điện tử của tôi?

Làm cách nào để tạo một trang web thương mại điện tử đơn giản?

Làm cách nào để tạo một trang web đơn giản bằng cách sử dụng HTML với các ví dụ?