Tôi có thể tạo trang web Thương mại điện tử bằng HTML không?

Nếu bạn là nhà phát triển hoặc nhà thiết kế, bạn cần học cách tạo trang đích bằng HTML, CSS, SCSS và JavaScript

Khi bạn đã thành thạo với CSS và SCSS, bạn có thể mở rộng kiến ​​thức của mình bằng cách thêm một số khung CSS như Bootstrap, Tailwind CSS, Foundation, Bulma, v.v. vào ngăn xếp của bạn

Một số khung CSS này ngăn bạn viết mã thừa và tập trung hơn vào phần logic của trang đích

Các khung giao diện người dùng đáp ứng này cung cấp lưới, HTML, SASS hoặc SCSS và các phần tử Giao diện người dùng CSS, mẫu và mã bao gồm bố cục, điều hướng, cảnh báo, nút, kiểu chữ, biểu mẫu, v.v.  

Sau khi hiểu rõ và thực hành với HTML, SASS, CSS, JavaScript và một số khung giao diện người dùng CSS, bạn có thể dễ dàng chuyển sang các khía cạnh nâng cao hơn của phát triển giao diện người dùng bằng cách tìm hiểu một số giao diện người dùng JavaScript phổ biến

Bạn có thể đã nghe một số nhà phát triển nói rằng bạn không cần khung giao diện người dùng JavaScript nhưng tôi có thể mạnh dạn nói rằng các khung JavaScript này ở đây để giúp chúng tôi bằng cách tự động hóa quy trình phát triển giao diện người dùng

Nếu bạn là người mới bắt đầu chưa xây dựng bất kỳ trang đích nào bằng HTML, SASS, CSS và JavaScript thì tôi khuyên bạn nên theo dõi bài viết này để tìm hiểu một số mẹo và thủ thuật trong SASS, CSS3 và HTML5

Trong hướng dẫn này, chúng ta sẽ từng bước xây dựng trang web Thương mại điện tử thời trang cho một công ty hư cấu tên là Codevo. Chúng tôi sẽ tận dụng sức mạnh của SASS để tạo trang web Thương mại điện tử thời trang tuyệt đẹp này từ thiết kế tệp Figma

Ở cuối bài viết này, bạn sẽ học

• Cách thiết lập dự án SASS
• Cách xây dựng Biểu mẫu đăng nhập và đăng ký
• Cách thêm tính năng lọc sản phẩm bằng JavaScript thuần túy

Trong phần trước của loạt bài này, Cách xây dựng một trang web đặt hàng thực phẩm, Bạn sẽ học cách xây dựng một trang web đặt hàng thực phẩm bằng HTML, SCSS, CSS và JavaScript

Mục lục

Mục đích của công ty hư cấu này là bán thời trang và các sản phẩm thủ công cho khách hàng

Khách hàng đã yêu cầu chúng tôi xây dựng một trang đích tĩnh đáp ứng đẹp mắt cho công ty Thương mại điện tử thời trang để khách hàng có thể thực hiện hành động bằng cách mua một sản phẩm hoặc chọn nhận bản tin khi họ truy cập vào sản phẩm đó

Mã nguồn website Thương mại điện tử thời trang sẽ được cung cấp ở cuối bài viết để tải về

Cấu trúc tệp

Tôi đã cấu trúc dự án để tuân theo quy ước mà hầu hết các nhà phát triển giao diện người dùng sử dụng khi làm việc với các dự án SASS

Cấu trúc thư mục đơn giản vì chúng tôi chỉ làm việc trên trang chủ của trang web Thương mại điện tử thời trang này

Để theo dõi hướng dẫn này, hãy tải xuống các tệp khởi động trên GitHub, giải nén dự án từ tệp zip và mở nó bằng trình soạn thảo văn bản yêu thích của bạn (Visual Studio Code)

Tệp khởi động GitHub nếu bạn đến từ video YouTube

Chúng tôi sẽ xây dựng trang web Thương mại điện tử thời trang theo từng phần để nó không trở nên phức tạp trong quá trình này

Cách thiết lập SASS trong trang web thương mại điện tử thời trang

Việc thêm SASS vào các dự án của chúng tôi mang lại cho chúng tôi nhiều tính năng hơn như làm việc với mixin và các thành phần không có trong CSS thuần túy

Chúng tôi sẽ viết các kiểu trong SCSS trong suốt hướng dẫn này và các phông chữ chúng tôi sẽ sử dụng là Roboto và Aclonica

Trong tệp

npm install sass -g

8, tôi đã bao gồm phông chữ Roboto và Aclonica, thêm một số biến SCSS, mã đặt lại trình duyệt cơ bản và một số đoạn mã SCSS có thể sử dụng lại

Giả sử bạn đã hiểu rõ về SASS, HTML và CSS nhưng trong trường hợp bạn không cảm thấy thoải mái với SASS, HTML và CSS thì hãy đọc một số blog về chúng hoặc xem một số hướng dẫn hữu ích trên YouTube

Đây là mã khởi động SASS

/* ========== Google Fonts =========== */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Aclonica&display=swap');

/* ========== CSS Variables =========== */
:root {
  --primary-color: #ff5e3a;
  --default-color: #4f5665;
  --black-color: #000;
  --grey-color: #f0f0f0;
  --white-color: #fff;
  --lightpink: #ffcce0;
  --blue: #1a1aff;
  --custom: #1a1aff;
  --color: #4d4d4d;
  --lightblue: #ccccff;
  --box-shadow-1: 0 5px 15px rgba(0, 0, 0, 0.1);
  --box-shadow-2: 0 5px 15px rgba(255, 94, 58, 0.2);
  --gradient: linear-gradient(to bottom, #fccb90, #ff9a9e);
  --btn-gradient: linear-gradient(to bottom, #ff5151 50%, #ff5e3a);
}

*,
*::after,
*::before {
  box-sizing: inherit;
  margin: 0;
  padding: 0;
  border: none;
  outline: none;
}

html {
  font-size: 62.5%;
  box-sizing: border-box;
}

body {
  font-family: 'Roboto', sans-serif;
  font-size: 1.6rem;
  font-weight: 400;
  color: var(--black-color);
  background-color: var(--white-color);
}

h1,
h2,
h3,
h4 {
  color: var(--black-color);
  line-height: 1.2;
  font-weight: 500;
}

a {
  text-decoration: none;
  color: inherit;
}

li {
  list-style-type: none;
}

section {
  padding: 5rem 0 5rem;
  overflow: hidden;
}

p {
  line-height: 3rem;
}

img {
  max-width: 100%;
  height: auto;
}

/* ========== Custom Classes =========== */
.container {
  max-width: 120rem;
  padding: 0 3rem;
  margin: auto;
}

@media (min-width: 1600px) {
  .container {
    max-width: 160rem;
  }
}

@media (max-width: 567px) {
  .container {
    padding: 0 1rem;
  }
}

.d-flex {
  display: flex;
  align-items: center;
}

/* ========== Header =========== */

/* ========== Navigation =========== */

/* ========== Hero Area =========== */

/* ========== Collection =========== */

/* ========== Arrivals =========== */

/* ========== Categories Product =========== */

/* ========== Statistics =========== */

/* ========== Blog =========== */

/* ========== Footer =========== */

/* ========== User Form =========== */

Trong đoạn mã SASS ở trên, tôi đã xóa lề và phần đệm mặc định được trình duyệt gán cho tất cả các phần tử

Cách biên dịch SCSS thành CSS

Bước 1. Mở terminal của bạn và chạy lệnh này để cài đặt gói SASS. Bao gồm cờ -g để cài đặt gói trên toàn cầu

npm install sass -g

Bước 2. Sau khi gói SASS đã được cài đặt, hãy chạy lệnh này để biên dịch mã SASS thành CSS. Bao gồm cờ –watch để yêu cầu SASS xem tệp để biết bất kỳ thay đổi nào

sass ./scss/styles.scss ./css/styles.css --watch

Sau khi hoàn thành hai bước trên, bạn sẽ thấy một thư mục CSS mới chứa các kiểu. tập tin css

Cách thêm Menu điều hướng vào trang web thương mại điện tử thời trang

Bạn có thể tải xuống mã nguồn hoàn chỉnh của trang web Thương mại điện tử để so sánh nó với mã của bạn khi bạn bắt đầu gặp lỗi

Chúng tôi sẽ bắt đầu bằng cách tạo menu điều hướng của trang web Thương mại điện tử thời trang như trong thiết kế tệp Figma

Thanh điều hướng sẽ bao gồm một logo ở bên trái, menu điều hướng ở giữa và một số biểu tượng ở ngoài cùng bên phải

Tạo một phần tử tiêu đề với một lớp tiêu đề, sau đó sao chép và dán mã HTML cho thanh điều hướng bên dưới vào giữa các thẻ tiêu đề mở và đóng

Để xem bản xem trước của HTML trong trình duyệt, hãy mở dự án bằng tiện ích mở rộng máy chủ trực tiếp

Thanh điều hướng bây giờ có thể được coi là một khung xương vì vậy chúng ta cần thêm một số phần thịt vào nó bằng CSS

Tôi đã sử dụng CSS Flexbox để định vị logo, menu điều hướng và các biểu tượng ở bên phải theo chiều ngang

.header {
  margin-bottom: 4rem;

  /* ========== Navigation =========== */
  .navbar {
    padding: 2.5rem 0;
    position: relative;
    z-index: 1;

    .row {
      justify-content: space-between;

      .nav-list {
        a {
          display: inline-block;
          padding: 1rem;
          font-size: 1.7rem;
          font-weight: 500;
          color: var(--black-color);

          &.user-link {
            display: none;
          }

          &:not(:last-child) {
            margin-right: 0.5rem;
          }

          &:hover {
            color: var(--primary-color);
          }
        }
      }

      .icons {
        .icon {
          font-size: 2.2rem;
          padding: 0.5rem;
          color: var(--black-color);
          cursor: pointer;
          justify-content: center;
          position: relative;

          &:not(:last-child) {
            margin-right: 3rem;
          }

          span {
            display: block;
            width: 1rem;
            height: 1rem;
            background-color: var(--primary-color);
            border: 1px solid var(--black-color);
            position: absolute;
            top: 0.3rem;
            right: 0.4rem;
            border-radius: 50%;
          }

          &:hover {
            background-color: #f4f4f4;
          }
        }
      }
    }
  }

  .hamburger,
  .close {
    display: none;
  }
}

Đây là những gì nó trông giống như trong trình duyệt

Để làm cho menu điều hướng phản hồi nhanh trên tất cả các thiết bị, chúng tôi sẽ sử dụng thuộc tính vị trí Flexbox và CSS

Trên màn hình rộng, chúng tôi sẽ cung cấp cho menu điều hướng một thuộc tính bên phải là -100% để ẩn menu và khi

npm install sass -g

9 có lớp thứ hai là

sass ./scss/styles.scss ./css/styles.css --watch

0 thì thuộc tính bên phải bây giờ sẽ là 0 để hiển thị nó

Chúng tôi sẽ sử dụng JavaScript để tự động thêm lớp

sass ./scss/styles.scss ./css/styles.css --watch

0 bất cứ khi nào biểu tượng bánh hamburger được nhấp vào

Tóm lại, chúng tôi chỉ muốn làm cho menu điều hướng xuất hiện từ bên phải khi

npm install sass -g

9 có lớp thứ hai là

sass ./scss/styles.scss ./css/styles.css --watch

0

Sao chép và dán truy vấn phương tiện bên dưới ngay sau kiểu của. bánh hamburger &. Thoát

npm install sass -g

2

Sao chép và dán JavaScript để chuyển đổi lớp

sass ./scss/styles.scss ./css/styles.css --watch

0 trên phần tử

npm install sass -g

9

npm install sass -g

5

Đây là những gì nó trông giống như

Cách thêm tiêu đề anh hùng vào trang web thương mại điện tử thời trang

Phần anh hùng bao gồm một người phụ nữ ngồi trong xe đẩy ở bên phải và một số văn bản ở bên trái

Nội dung văn bản sẽ bao gồm một khoảng, một tiêu đề tùy chỉnh 1, một đoạn văn và một nút kêu gọi hành động

Sao chép và dán HTML cho phần anh hùng ngay sau thẻ điều hướng kết thúc

npm install sass -g

6

Dưới đây là mã SASS cho phần Hero, tôi đã sử dụng

npm install sass -g

7

Đây là bản xem trước trong trình duyệt

Cách thêm biểu mẫu đăng ký và đăng nhập vào trang web thương mại điện tử thời trang

Form đăng ký và đăng nhập của website Thương mại điện tử thời trang hơi phức tạp nên mình phải viết bài khác cho nó

Sau này tôi sẽ bao gồm liên kết đến bài viết đó nhưng bạn có thể tải xuống mã nguồn vì nó đã được bao gồm trong mã nguồn

Cách thêm phần Bộ sưu tập sản phẩm bằng tính năng lọc

Phần bộ sưu tập sản phẩm bao gồm một thanh trượt và các chức năng lọc của trang web Thương mại điện tử thời trang

Với thanh trượt, chúng tôi sẽ sử dụng thư viện SwiperJS để làm cho cuộc sống của chúng tôi dễ dàng hơn

Bạn có thể sử dụng các thư viện thanh trượt khác như GlideJS cũng được viết bằng vanilla Javascript

Đây là HTML cho phần bộ sưu tập sản phẩm

/* ========== Google Fonts =========== */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Aclonica&display=swap');

/* ========== CSS Variables =========== */
:root {
  --primary-color: #ff5e3a;
  --default-color: #4f5665;
  --black-color: #000;
  --grey-color: #f0f0f0;
  --white-color: #fff;
  --lightpink: #ffcce0;
  --blue: #1a1aff;
  --custom: #1a1aff;
  --color: #4d4d4d;
  --lightblue: #ccccff;
  --box-shadow-1: 0 5px 15px rgba(0, 0, 0, 0.1);
  --box-shadow-2: 0 5px 15px rgba(255, 94, 58, 0.2);
  --gradient: linear-gradient(to bottom, #fccb90, #ff9a9e);
  --btn-gradient: linear-gradient(to bottom, #ff5151 50%, #ff5e3a);
}

*,
*::after,
*::before {
  box-sizing: inherit;
  margin: 0;
  padding: 0;
  border: none;
  outline: none;
}

html {
  font-size: 62.5%;
  box-sizing: border-box;
}

body {
  font-family: 'Roboto', sans-serif;
  font-size: 1.6rem;
  font-weight: 400;
  color: var(--black-color);
  background-color: var(--white-color);
}

h1,
h2,
h3,
h4 {
  color: var(--black-color);
  line-height: 1.2;
  font-weight: 500;
}

a {
  text-decoration: none;
  color: inherit;
}

li {
  list-style-type: none;
}

section {
  padding: 5rem 0 5rem;
  overflow: hidden;
}

p {
  line-height: 3rem;
}

img {
  max-width: 100%;
  height: auto;
}

/* ========== Custom Classes =========== */
.container {
  max-width: 120rem;
  padding: 0 3rem;
  margin: auto;
}

@media (min-width: 1600px) {
  .container {
    max-width: 160rem;
  }
}

@media (max-width: 567px) {
  .container {
    padding: 0 1rem;
  }
}

.d-flex {
  display: flex;
  align-items: center;
}

/* ========== Header =========== */

/* ========== Navigation =========== */

/* ========== Hero Area =========== */

/* ========== Collection =========== */

/* ========== Arrivals =========== */

/* ========== Categories Product =========== */

/* ========== Statistics =========== */

/* ========== Blog =========== */

/* ========== Footer =========== */

/* ========== User Form =========== */

0

Bạn có thể thấy HTML chỉ chứa một sản phẩm thử nghiệm mà tôi đã nhận xét. Sau đó, chúng tôi sẽ sử dụng Javascript để tìm nạp sản phẩm từ tệp JSON và hiển thị động trên trình duyệt

Dưới đây là các kiểu SASS cho phần bộ sưu tập sản phẩm

/* ========== Google Fonts =========== */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Aclonica&display=swap');

/* ========== CSS Variables =========== */
:root {
  --primary-color: #ff5e3a;
  --default-color: #4f5665;
  --black-color: #000;
  --grey-color: #f0f0f0;
  --white-color: #fff;
  --lightpink: #ffcce0;
  --blue: #1a1aff;
  --custom: #1a1aff;
  --color: #4d4d4d;
  --lightblue: #ccccff;
  --box-shadow-1: 0 5px 15px rgba(0, 0, 0, 0.1);
  --box-shadow-2: 0 5px 15px rgba(255, 94, 58, 0.2);
  --gradient: linear-gradient(to bottom, #fccb90, #ff9a9e);
  --btn-gradient: linear-gradient(to bottom, #ff5151 50%, #ff5e3a);
}

*,
*::after,
*::before {
  box-sizing: inherit;
  margin: 0;
  padding: 0;
  border: none;
  outline: none;
}

html {
  font-size: 62.5%;
  box-sizing: border-box;
}

body {
  font-family: 'Roboto', sans-serif;
  font-size: 1.6rem;
  font-weight: 400;
  color: var(--black-color);
  background-color: var(--white-color);
}

h1,
h2,
h3,
h4 {
  color: var(--black-color);
  line-height: 1.2;
  font-weight: 500;
}

a {
  text-decoration: none;
  color: inherit;
}

li {
  list-style-type: none;
}

section {
  padding: 5rem 0 5rem;
  overflow: hidden;
}

p {
  line-height: 3rem;
}

img {
  max-width: 100%;
  height: auto;
}

/* ========== Custom Classes =========== */
.container {
  max-width: 120rem;
  padding: 0 3rem;
  margin: auto;
}

@media (min-width: 1600px) {
  .container {
    max-width: 160rem;
  }
}

@media (max-width: 567px) {
  .container {
    padding: 0 1rem;
  }
}

.d-flex {
  display: flex;
  align-items: center;
}

/* ========== Header =========== */

/* ========== Navigation =========== */

/* ========== Hero Area =========== */

/* ========== Collection =========== */

/* ========== Arrivals =========== */

/* ========== Categories Product =========== */

/* ========== Statistics =========== */

/* ========== Blog =========== */

/* ========== Footer =========== */

/* ========== User Form =========== */

1

Khi làm việc với SwiperJS, bạn cần tạo một thể hiện của lớp Swiper và truyền hai đối số, bộ chọn lớp hoặc id của phần tử HTML thanh trượt và một đối tượng tùy chọn chứa một số tùy chỉnh

Sao chép và dán mã trượt vào sản phẩm. tập tin js

/* ========== Google Fonts =========== */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Aclonica&display=swap');

/* ========== CSS Variables =========== */
:root {
  --primary-color: #ff5e3a;
  --default-color: #4f5665;
  --black-color: #000;
  --grey-color: #f0f0f0;
  --white-color: #fff;
  --lightpink: #ffcce0;
  --blue: #1a1aff;
  --custom: #1a1aff;
  --color: #4d4d4d;
  --lightblue: #ccccff;
  --box-shadow-1: 0 5px 15px rgba(0, 0, 0, 0.1);
  --box-shadow-2: 0 5px 15px rgba(255, 94, 58, 0.2);
  --gradient: linear-gradient(to bottom, #fccb90, #ff9a9e);
  --btn-gradient: linear-gradient(to bottom, #ff5151 50%, #ff5e3a);
}

*,
*::after,
*::before {
  box-sizing: inherit;
  margin: 0;
  padding: 0;
  border: none;
  outline: none;
}

html {
  font-size: 62.5%;
  box-sizing: border-box;
}

body {
  font-family: 'Roboto', sans-serif;
  font-size: 1.6rem;
  font-weight: 400;
  color: var(--black-color);
  background-color: var(--white-color);
}

h1,
h2,
h3,
h4 {
  color: var(--black-color);
  line-height: 1.2;
  font-weight: 500;
}

a {
  text-decoration: none;
  color: inherit;
}

li {
  list-style-type: none;
}

section {
  padding: 5rem 0 5rem;
  overflow: hidden;
}

p {
  line-height: 3rem;
}

img {
  max-width: 100%;
  height: auto;
}

/* ========== Custom Classes =========== */
.container {
  max-width: 120rem;
  padding: 0 3rem;
  margin: auto;
}

@media (min-width: 1600px) {
  .container {
    max-width: 160rem;
  }
}

@media (max-width: 567px) {
  .container {
    padding: 0 1rem;
  }
}

.d-flex {
  display: flex;
  align-items: center;
}

/* ========== Header =========== */

/* ========== Navigation =========== */

/* ========== Hero Area =========== */

/* ========== Collection =========== */

/* ========== Arrivals =========== */

/* ========== Categories Product =========== */

/* ========== Statistics =========== */

/* ========== Blog =========== */

/* ========== Footer =========== */

/* ========== User Form =========== */

2

Đây là mã Javascript để tìm nạp các sản phẩm từ tệp JSON

/* ========== Google Fonts =========== */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Aclonica&display=swap');

/* ========== CSS Variables =========== */
:root {
  --primary-color: #ff5e3a;
  --default-color: #4f5665;
  --black-color: #000;
  --grey-color: #f0f0f0;
  --white-color: #fff;
  --lightpink: #ffcce0;
  --blue: #1a1aff;
  --custom: #1a1aff;
  --color: #4d4d4d;
  --lightblue: #ccccff;
  --box-shadow-1: 0 5px 15px rgba(0, 0, 0, 0.1);
  --box-shadow-2: 0 5px 15px rgba(255, 94, 58, 0.2);
  --gradient: linear-gradient(to bottom, #fccb90, #ff9a9e);
  --btn-gradient: linear-gradient(to bottom, #ff5151 50%, #ff5e3a);
}

*,
*::after,
*::before {
  box-sizing: inherit;
  margin: 0;
  padding: 0;
  border: none;
  outline: none;
}

html {
  font-size: 62.5%;
  box-sizing: border-box;
}

body {
  font-family: 'Roboto', sans-serif;
  font-size: 1.6rem;
  font-weight: 400;
  color: var(--black-color);
  background-color: var(--white-color);
}

h1,
h2,
h3,
h4 {
  color: var(--black-color);
  line-height: 1.2;
  font-weight: 500;
}

a {
  text-decoration: none;
  color: inherit;
}

li {
  list-style-type: none;
}

section {
  padding: 5rem 0 5rem;
  overflow: hidden;
}

p {
  line-height: 3rem;
}

img {
  max-width: 100%;
  height: auto;
}

/* ========== Custom Classes =========== */
.container {
  max-width: 120rem;
  padding: 0 3rem;
  margin: auto;
}

@media (min-width: 1600px) {
  .container {
    max-width: 160rem;
  }
}

@media (max-width: 567px) {
  .container {
    padding: 0 1rem;
  }
}

.d-flex {
  display: flex;
  align-items: center;
}

/* ========== Header =========== */

/* ========== Navigation =========== */

/* ========== Hero Area =========== */

/* ========== Collection =========== */

/* ========== Arrivals =========== */

/* ========== Categories Product =========== */

/* ========== Statistics =========== */

/* ========== Blog =========== */

/* ========== Footer =========== */

/* ========== User Form =========== */

3

Đây là mã JS để hiển thị động các dự án trên màn hình

/* ========== Google Fonts =========== */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Aclonica&display=swap');

/* ========== CSS Variables =========== */
:root {
  --primary-color: #ff5e3a;
  --default-color: #4f5665;
  --black-color: #000;
  --grey-color: #f0f0f0;
  --white-color: #fff;
  --lightpink: #ffcce0;
  --blue: #1a1aff;
  --custom: #1a1aff;
  --color: #4d4d4d;
  --lightblue: #ccccff;
  --box-shadow-1: 0 5px 15px rgba(0, 0, 0, 0.1);
  --box-shadow-2: 0 5px 15px rgba(255, 94, 58, 0.2);
  --gradient: linear-gradient(to bottom, #fccb90, #ff9a9e);
  --btn-gradient: linear-gradient(to bottom, #ff5151 50%, #ff5e3a);
}

*,
*::after,
*::before {
  box-sizing: inherit;
  margin: 0;
  padding: 0;
  border: none;
  outline: none;
}

html {
  font-size: 62.5%;
  box-sizing: border-box;
}

body {
  font-family: 'Roboto', sans-serif;
  font-size: 1.6rem;
  font-weight: 400;
  color: var(--black-color);
  background-color: var(--white-color);
}

h1,
h2,
h3,
h4 {
  color: var(--black-color);
  line-height: 1.2;
  font-weight: 500;
}

a {
  text-decoration: none;
  color: inherit;
}

li {
  list-style-type: none;
}

section {
  padding: 5rem 0 5rem;
  overflow: hidden;
}

p {
  line-height: 3rem;
}

img {
  max-width: 100%;
  height: auto;
}

/* ========== Custom Classes =========== */
.container {
  max-width: 120rem;
  padding: 0 3rem;
  margin: auto;
}

@media (min-width: 1600px) {
  .container {
    max-width: 160rem;
  }
}

@media (max-width: 567px) {
  .container {
    padding: 0 1rem;
  }
}

.d-flex {
  display: flex;
  align-items: center;
}

/* ========== Header =========== */

/* ========== Navigation =========== */

/* ========== Hero Area =========== */

/* ========== Collection =========== */

/* ========== Arrivals =========== */

/* ========== Categories Product =========== */

/* ========== Statistics =========== */

/* ========== Blog =========== */

/* ========== Footer =========== */

/* ========== User Form =========== */

4

Dưới đây là mã JS để lọc các sản phẩm dựa trên danh mục của chúng

/* ========== Google Fonts =========== */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Aclonica&display=swap');

/* ========== CSS Variables =========== */
:root {
  --primary-color: #ff5e3a;
  --default-color: #4f5665;
  --black-color: #000;
  --grey-color: #f0f0f0;
  --white-color: #fff;
  --lightpink: #ffcce0;
  --blue: #1a1aff;
  --custom: #1a1aff;
  --color: #4d4d4d;
  --lightblue: #ccccff;
  --box-shadow-1: 0 5px 15px rgba(0, 0, 0, 0.1);
  --box-shadow-2: 0 5px 15px rgba(255, 94, 58, 0.2);
  --gradient: linear-gradient(to bottom, #fccb90, #ff9a9e);
  --btn-gradient: linear-gradient(to bottom, #ff5151 50%, #ff5e3a);
}

*,
*::after,
*::before {
  box-sizing: inherit;
  margin: 0;
  padding: 0;
  border: none;
  outline: none;
}

html {
  font-size: 62.5%;
  box-sizing: border-box;
}

body {
  font-family: 'Roboto', sans-serif;
  font-size: 1.6rem;
  font-weight: 400;
  color: var(--black-color);
  background-color: var(--white-color);
}

h1,
h2,
h3,
h4 {
  color: var(--black-color);
  line-height: 1.2;
  font-weight: 500;
}

a {
  text-decoration: none;
  color: inherit;
}

li {
  list-style-type: none;
}

section {
  padding: 5rem 0 5rem;
  overflow: hidden;
}

p {
  line-height: 3rem;
}

img {
  max-width: 100%;
  height: auto;
}

/* ========== Custom Classes =========== */
.container {
  max-width: 120rem;
  padding: 0 3rem;
  margin: auto;
}

@media (min-width: 1600px) {
  .container {
    max-width: 160rem;
  }
}

@media (max-width: 567px) {
  .container {
    padding: 0 1rem;
  }
}

.d-flex {
  display: flex;
  align-items: center;
}

/* ========== Header =========== */

/* ========== Navigation =========== */

/* ========== Hero Area =========== */

/* ========== Collection =========== */

/* ========== Arrivals =========== */

/* ========== Categories Product =========== */

/* ========== Statistics =========== */

/* ========== Blog =========== */

/* ========== Footer =========== */

/* ========== User Form =========== */

5

Cách thêm phần hàng mới

Phần mới đến khá đơn giản vì nó bao gồm ba hình ảnh có lớp phủ văn bản

Đây là HTM cho phần mới đến

/* ========== Google Fonts =========== */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Aclonica&display=swap');

/* ========== CSS Variables =========== */
:root {
  --primary-color: #ff5e3a;
  --default-color: #4f5665;
  --black-color: #000;
  --grey-color: #f0f0f0;
  --white-color: #fff;
  --lightpink: #ffcce0;
  --blue: #1a1aff;
  --custom: #1a1aff;
  --color: #4d4d4d;
  --lightblue: #ccccff;
  --box-shadow-1: 0 5px 15px rgba(0, 0, 0, 0.1);
  --box-shadow-2: 0 5px 15px rgba(255, 94, 58, 0.2);
  --gradient: linear-gradient(to bottom, #fccb90, #ff9a9e);
  --btn-gradient: linear-gradient(to bottom, #ff5151 50%, #ff5e3a);
}

*,
*::after,
*::before {
  box-sizing: inherit;
  margin: 0;
  padding: 0;
  border: none;
  outline: none;
}

html {
  font-size: 62.5%;
  box-sizing: border-box;
}

body {
  font-family: 'Roboto', sans-serif;
  font-size: 1.6rem;
  font-weight: 400;
  color: var(--black-color);
  background-color: var(--white-color);
}

h1,
h2,
h3,
h4 {
  color: var(--black-color);
  line-height: 1.2;
  font-weight: 500;
}

a {
  text-decoration: none;
  color: inherit;
}

li {
  list-style-type: none;
}

section {
  padding: 5rem 0 5rem;
  overflow: hidden;
}

p {
  line-height: 3rem;
}

img {
  max-width: 100%;
  height: auto;
}

/* ========== Custom Classes =========== */
.container {
  max-width: 120rem;
  padding: 0 3rem;
  margin: auto;
}

@media (min-width: 1600px) {
  .container {
    max-width: 160rem;
  }
}

@media (max-width: 567px) {
  .container {
    padding: 0 1rem;
  }
}

.d-flex {
  display: flex;
  align-items: center;
}

/* ========== Header =========== */

/* ========== Navigation =========== */

/* ========== Hero Area =========== */

/* ========== Collection =========== */

/* ========== Arrivals =========== */

/* ========== Categories Product =========== */

/* ========== Statistics =========== */

/* ========== Blog =========== */

/* ========== Footer =========== */

/* ========== User Form =========== */

6

Đối với SCSS, chúng tôi sẽ sử dụng CSS Grid để định vị hình ảnh trong các cột và hàng khác nhau tùy thuộc vào chế độ xem của màn hình

/* ========== Google Fonts =========== */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Aclonica&display=swap');

/* ========== CSS Variables =========== */
:root {
  --primary-color: #ff5e3a;
  --default-color: #4f5665;
  --black-color: #000;
  --grey-color: #f0f0f0;
  --white-color: #fff;
  --lightpink: #ffcce0;
  --blue: #1a1aff;
  --custom: #1a1aff;
  --color: #4d4d4d;
  --lightblue: #ccccff;
  --box-shadow-1: 0 5px 15px rgba(0, 0, 0, 0.1);
  --box-shadow-2: 0 5px 15px rgba(255, 94, 58, 0.2);
  --gradient: linear-gradient(to bottom, #fccb90, #ff9a9e);
  --btn-gradient: linear-gradient(to bottom, #ff5151 50%, #ff5e3a);
}

*,
*::after,
*::before {
  box-sizing: inherit;
  margin: 0;
  padding: 0;
  border: none;
  outline: none;
}

html {
  font-size: 62.5%;
  box-sizing: border-box;
}

body {
  font-family: 'Roboto', sans-serif;
  font-size: 1.6rem;
  font-weight: 400;
  color: var(--black-color);
  background-color: var(--white-color);
}

h1,
h2,
h3,
h4 {
  color: var(--black-color);
  line-height: 1.2;
  font-weight: 500;
}

a {
  text-decoration: none;
  color: inherit;
}

li {
  list-style-type: none;
}

section {
  padding: 5rem 0 5rem;
  overflow: hidden;
}

p {
  line-height: 3rem;
}

img {
  max-width: 100%;
  height: auto;
}

/* ========== Custom Classes =========== */
.container {
  max-width: 120rem;
  padding: 0 3rem;
  margin: auto;
}

@media (min-width: 1600px) {
  .container {
    max-width: 160rem;
  }
}

@media (max-width: 567px) {
  .container {
    padding: 0 1rem;
  }
}

.d-flex {
  display: flex;
  align-items: center;
}

/* ========== Header =========== */

/* ========== Navigation =========== */

/* ========== Hero Area =========== */

/* ========== Collection =========== */

/* ========== Arrivals =========== */

/* ========== Categories Product =========== */

/* ========== Statistics =========== */

/* ========== Blog =========== */

/* ========== Footer =========== */

/* ========== User Form =========== */

7

Đây là bản xem trước của phần mới đến

Cách thêm phần sản phẩm

Phần sản phẩm tương tự như phần bộ sưu tập sản phẩm vì chúng tôi sẽ tìm nạp sản phẩm từ tệp JSON và hiển thị chúng trên màn hình

Phần này cũng có nút tải thêm để tải thêm sản phẩm khi nhấp vào

Đây là mã HTML cho phần sản phẩm

/* ========== Google Fonts =========== */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Aclonica&display=swap');

/* ========== CSS Variables =========== */
:root {
  --primary-color: #ff5e3a;
  --default-color: #4f5665;
  --black-color: #000;
  --grey-color: #f0f0f0;
  --white-color: #fff;
  --lightpink: #ffcce0;
  --blue: #1a1aff;
  --custom: #1a1aff;
  --color: #4d4d4d;
  --lightblue: #ccccff;
  --box-shadow-1: 0 5px 15px rgba(0, 0, 0, 0.1);
  --box-shadow-2: 0 5px 15px rgba(255, 94, 58, 0.2);
  --gradient: linear-gradient(to bottom, #fccb90, #ff9a9e);
  --btn-gradient: linear-gradient(to bottom, #ff5151 50%, #ff5e3a);
}

*,
*::after,
*::before {
  box-sizing: inherit;
  margin: 0;
  padding: 0;
  border: none;
  outline: none;
}

html {
  font-size: 62.5%;
  box-sizing: border-box;
}

body {
  font-family: 'Roboto', sans-serif;
  font-size: 1.6rem;
  font-weight: 400;
  color: var(--black-color);
  background-color: var(--white-color);
}

h1,
h2,
h3,
h4 {
  color: var(--black-color);
  line-height: 1.2;
  font-weight: 500;
}

a {
  text-decoration: none;
  color: inherit;
}

li {
  list-style-type: none;
}

section {
  padding: 5rem 0 5rem;
  overflow: hidden;
}

p {
  line-height: 3rem;
}

img {
  max-width: 100%;
  height: auto;
}

/* ========== Custom Classes =========== */
.container {
  max-width: 120rem;
  padding: 0 3rem;
  margin: auto;
}

@media (min-width: 1600px) {
  .container {
    max-width: 160rem;
  }
}

@media (max-width: 567px) {
  .container {
    padding: 0 1rem;
  }
}

.d-flex {
  display: flex;
  align-items: center;
}

/* ========== Header =========== */

/* ========== Navigation =========== */

/* ========== Hero Area =========== */

/* ========== Collection =========== */

/* ========== Arrivals =========== */

/* ========== Categories Product =========== */

/* ========== Statistics =========== */

/* ========== Blog =========== */

/* ========== Footer =========== */

/* ========== User Form =========== */

8

HTML cho phần sản phẩm cũng đơn giản vì chúng tôi sẽ sử dụng Javascript để tự động thêm các sản phẩm vào HTML

Dưới đây là các phong cách cho phần sản phẩm

/* ========== Google Fonts =========== */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Aclonica&display=swap');

/* ========== CSS Variables =========== */
:root {
  --primary-color: #ff5e3a;
  --default-color: #4f5665;
  --black-color: #000;
  --grey-color: #f0f0f0;
  --white-color: #fff;
  --lightpink: #ffcce0;
  --blue: #1a1aff;
  --custom: #1a1aff;
  --color: #4d4d4d;
  --lightblue: #ccccff;
  --box-shadow-1: 0 5px 15px rgba(0, 0, 0, 0.1);
  --box-shadow-2: 0 5px 15px rgba(255, 94, 58, 0.2);
  --gradient: linear-gradient(to bottom, #fccb90, #ff9a9e);
  --btn-gradient: linear-gradient(to bottom, #ff5151 50%, #ff5e3a);
}

*,
*::after,
*::before {
  box-sizing: inherit;
  margin: 0;
  padding: 0;
  border: none;
  outline: none;
}

html {
  font-size: 62.5%;
  box-sizing: border-box;
}

body {
  font-family: 'Roboto', sans-serif;
  font-size: 1.6rem;
  font-weight: 400;
  color: var(--black-color);
  background-color: var(--white-color);
}

h1,
h2,
h3,
h4 {
  color: var(--black-color);
  line-height: 1.2;
  font-weight: 500;
}

a {
  text-decoration: none;
  color: inherit;
}

li {
  list-style-type: none;
}

section {
  padding: 5rem 0 5rem;
  overflow: hidden;
}

p {
  line-height: 3rem;
}

img {
  max-width: 100%;
  height: auto;
}

/* ========== Custom Classes =========== */
.container {
  max-width: 120rem;
  padding: 0 3rem;
  margin: auto;
}

@media (min-width: 1600px) {
  .container {
    max-width: 160rem;
  }
}

@media (max-width: 567px) {
  .container {
    padding: 0 1rem;
  }
}

.d-flex {
  display: flex;
  align-items: center;
}

/* ========== Header =========== */

/* ========== Navigation =========== */

/* ========== Hero Area =========== */

/* ========== Collection =========== */

/* ========== Arrivals =========== */

/* ========== Categories Product =========== */

/* ========== Statistics =========== */

/* ========== Blog =========== */

/* ========== Footer =========== */

/* ========== User Form =========== */

9

Trong SCSS, chúng tôi đã sử dụng CSS Grid để làm cho các sản phẩm phản hồi nhanh trên các màn hình khác nhau chỉ bằng một dòng mã

npm install sass -g

0

Dưới đây là mã Javascript để hiển thị động các sản phẩm trên màn hình và cũng thêm chức năng tải thêm

npm install sass -g

1

Đây là giao diện của phần sản phẩm trong trình duyệt

Cách thêm phần thống kê

Phần thống kê cũng đơn giản. Phần này có nền màu chuyển sắc với bốn thẻ được đặt trong bốn cột lưới

Mỗi thẻ có một biểu tượng, tiêu đề và một số văn bản đoạn văn

Đây là HTML cho phần thống kê

npm install sass -g

2

Dưới đây là các kiểu cho phần thống kê. Tôi cũng đã sử dụng lưới CSS để làm cho các cột khác nhau phản hồi trên các màn hình khác nhau

npm install sass -g

3

Đây là bản xem trước của phần thống kê trong trình duyệt

Cách thêm phần blog thương mại điện tử thời trang

Phần này chứa các bài đăng blog nổi bật của trang web Thương mại điện tử thời trang. Bạn luôn nên thêm một phần blog vào các trang web Thương mại điện tử của mình để hướng lưu lượng truy cập không phải trả tiền từ các công cụ tìm kiếm

Đây là mã HTML cho phần blog

npm install sass -g

4

Dưới đây là các kiểu SCSS cho phần blog

npm install sass -g

5

Đây là bản xem trước của phần blog

Cách thêm phần chân trang

Cuối cùng, chúng ta đang ở phần cuối cùng của trang web Thương mại điện tử thời trang

Chân trang chứa bốn cột trên màn hình rộng và một cột trên thiết bị di động

Chân trang có các liên kết chung để điều hướng đến các trang khác của trang web Thương mại điện tử thời trang và một số biểu tượng mạng xã hội

Đây là HTML cho chân trang

npm install sass -g

6

Dưới đây là các kiểu cho phần chân trang. Tôi đã sử dụng các cột Lưới để làm cho chân trang thích ứng với các kích thước màn hình khác nhau

npm install sass -g

7

Đây là những gì chân trang trông giống như trong trình duyệt

Phần kết luận

Trong bài viết này, bạn đã học được cách tạo một

• Trang web thương mại điện tử thời trang đáp ứng
• phần blog
• thanh trượt với thư viện SwiperJS

Đây là cách bạn có thể xây dựng trang web Thương mại điện tử thời trang đáp ứng với HTML, CSS và Javascript. Vui lòng thêm nhiều chức năng và trang để làm cho nó hấp dẫn hơn

Click vào nút download bên dưới để tải về toàn bộ mã nguồn của website TMĐT thời trang

Bạn có thể tạo một trang web chỉ bằng HTML không?

Tôi có thể viết mã trang web Thương mại điện tử của riêng mình không?

HTML trong điện tử là gì