강의

멘토링

로드맵

Inflearn brand logo image
Programming

/

Web Development

Hướng dẫn đầy đủ để tạo trang web mua sắm phản hồi bằng Figma

Bạn có kiến thức cơ bản về HTML, CSS, JavaScript (jQuery) chưa? Nhưng bạn không biết cách tạo toàn bộ một trang web hoàn chỉnh? Vậy thì hãy thử thách bản thân bằng cách thực hiện trang chủ của một trang web bán hàng tham khảo một thiết kế có sẵn. Chúng tôi sẽ chia sẻ bí quyết để thực hiện một trang web bằng cách tham khảo một thiết kế hoàn chỉnh, nắm bắt ý định thiết kế và các chi tiết cụ thể.

(4.8) 4 đánh giá

30 học viên

  • ezweb
반응형웹
Figma
HTML/CSS
JavaScript
jQuery

Đánh giá từ những học viên đầu tiên

Dịch cái này sang tiếng Việt

  • Giải thích thiết kế Figma và trích xuất hình ảnh

  • Thiết lập ban đầu cho file HTML/CSS

  • Viết biến CSS và style toàn cục

  • Thiết lập sử dụng web font

  • Thiết kế bố cục: Sử dụng Grid và Flexbox

  • Triển khai CSS responsive bằng cách sử dụng Media Query

  • Triển khai CSS đáp ứng bằng cách sử dụng truy vấn container

  • Tạo slide đánh giá bằng Swiper.js

  • Thiết kế hiệu ứng trượt toggle cho menu di động và giỏ hàng bằng jQuery

  • Xuất bản trang web bằng GitHub Pages

Khóa học này yêu cầu kiến ​​thức cơ bản về HTML, CSS, Javascript và jQuery.

Vui lòng kiểm tra các liên kết bên dưới để tìm hiểu về từng phần.

Sở thích dự án

  • Cài đặt các plugin cần thiết

    • Xuất hình ảnh gốc

    • Xuất Kiểu sang Biến CSS

    • Máy quét phông chữ

  • Tổ chức các tập tin dự án

    • Tạo thư mục: images , css , js

    • Tạo các tệp HTML và CSS phổ biến: common.html , common.css

Trong quá trình thiết kế, chúng tôi lưu trữ các hình ảnh cần thiết cho trang web và viết các kiểu và thẻ thường dùng trong common.html và common.css để tạo ra một trang web nhất quán và dễ bảo trì trong tương lai.

Tổ chức các tập tin dự án

Hiểu về thiết kế Figma

  • Tìm hiểu cách dễ dàng nhập hình ảnh và kiểu bạn cần vào Figma.

  • Tìm hiểu những kiến ​​thức cơ bản về việc triển khai tầm nhìn thiết kế của bạn trên web.

Trong khóa học này, bạn sẽ học cách tạo cấu trúc HTML và kiểu CSS bằng cách tham chiếu thiết kế trong khi triển khai Trang chủ.

Hiểu về thiết kế Figma

Cấu hình các tập tin cơ bản

  • Bắt đầu với reset.css và normalize.css.

  • Hãy tạo một cấu trúc thư mục và các tập tin chung để làm việc hiệu quả.

Sử dụng reset.css để khởi tạo các thuộc tính vốn có trong HTML và sử dụng normalize.css để cấu hình dự án sao cho cùng một UI có thể được triển khai trên tất cả các trình duyệt.

Thiết lập tùy chọn kiểu dáng

  • Đặt màu sắc và kích thước phông chữ thường dùng làm biến.

  • Áp dụng phông chữ đẹp với Google Fonts.

Viết CSS phổ biến

Cấu hình bố cục

  • Tạo cấu trúc màn hình linh hoạt bằng Grid và Flexbox.

  • Thiết kế các khu vực chính của trang web.

Khu vực chính HTML

Xác định các khu vực chính trong thiết kế

Hoạt hình cuộn

  • Hãy tạo hiệu ứng cố định khi cuộn bằng cách sử dụng thuộc tính CSS.

  • Được triển khai bằng CSS thuần túy mà không cần viết tập lệnh.


Triển khai một phần tử cố định khi cuộn

Thêm chút sức sống cho các nút bấm của bạn

  • Tạo hiệu ứng nút ấn tượng bằng CSS và jQuery.

  • Triển khai nút 3D mà bạn muốn nhấp vào.

Hoạt ảnh nút sử dụng CSS và jQuery

Hoạt ảnh nút sử dụng CSS và jQuery

Tạo thanh trượt đánh giá

  • Thực hiện làm mới slide bằng Swiper.js.

  • Tạo thanh trượt hoạt động tốt trên mọi thiết bị.

Triển khai slide đánh giá bằng swiper.js

Triển khai các tính năng tương tác

  • Hãy cùng tạo một hàm giỏ hàng tiện lợi bằng jQuery.

  • Thiết kế giỏ hàng thân thiện với người dùng.

  • Hãy cùng tạo một tính năng menu trên thiết bị di động.

Triển khai các tính năng tương tác (menu di động, giỏ hàng)

Hoàn thiện thiết kế đáp ứng

  • Chúng tôi đã cải tiến để nó hoạt động hoàn hảo trên mọi thiết bị.

  • Chúng tôi triển khai menu và giỏ hàng tiện lợi ngay cả trên thiết bị di động.

Hoàn thiện thiết kế đáp ứng (PC, máy tính bảng, điện thoại di động)

Triển khai

  • Tối ưu hóa hiệu suất của trang web.

  • Đưa tác phẩm của bạn đến với thế giới với GitHub Pages hoặc Netlify.

Tổ chức các mã lặp lại để có thể sử dụng lại và loại bỏ các nguồn không cần thiết.

Tải trang web tĩnh của bạn lên GitHub Pages hoặc Netlify và triển khai để mọi người có thể truy cập.

hoàn thành

Khóa học này không nhằm mục đích triển khai một trung tâm mua sắm thực tế. Để triển khai một trung tâm mua sắm thực tế, cần phải tích hợp với cơ sở dữ liệu. Đối với phần này, vui lòng tiến hành học thêm liên quan đến ngôn ngữ lập trình phụ trợ và cơ sở dữ liệu. Trong khóa học này, với tư cách là nhà xuất bản web, bạn sẽ tham khảo thiết kế và sử dụng HTML, CSS và Javascript (jQuery) để hoàn thiện màn hình mà người dùng cuối sẽ nhìn thấy.

Nếu bạn đã thành thạo khóa học này và quan tâm đến phát triển web, hãy xem nội dung bên dưới và thử thách bản thân trở thành nhà phát triển front-end hoặc back-end!

  • Khung/Thư viện JavaScript

    • phản ứng, vue.js, Angular

  • Học TypeScript

  • Hiểu những điều cơ bản về phần phụ trợ

    • Cấu trúc REST API và yêu cầu/phản hồi HTTP

    • Cách xử lý dữ liệu JSON

  • Trải nghiệm backend đơn giản

    • Tạo một máy chủ đơn giản bằng Node.js và Express.js

    • Kết nối cơ sở dữ liệu (MongoDB, Firebase, MySQL, v.v.)

Cửa sổ giao tiếp (khảo sát, phòng trò chuyện mở 1:1)

Học sinh có thể cung cấp ý kiến ​​và câu hỏi của mình bất kỳ lúc nào thông qua khảo sát của Googlephòng trò chuyện mở 1:1 được giới thiệu trong phần Có gì mới .


Khuyến nghị cho
những người này

Khóa học này dành cho ai?

  • Người học có kiến thức cơ bản về HTML, CSS và jQuery.

  • Người mới bắt đầu phát triển với ít kinh nghiệm trong công việc publishing nhưng muốn hoàn thành một dự án thực tế.

  • Người chưa có kinh nghiệm sử dụng các công cụ thiết kế (Figma) nhưng muốn học.

  • Người học muốn tìm hiểu quy trình thực tế về triển khai web responsive và publishing.

  • Những người muốn học các nguyên tắc cơ bản của web publishing và phát triển front-end.

  • Dành cho những bạn đã có kiến thức cơ bản về coding nhưng gặp khó khăn trong việc áp dụng một cách tổng thể.

Cần biết trước khi bắt đầu?

  • HTML

  • CSS

  • JavaScript

  • jQuery

Xin chào
Đây là

2,523

Học viên

49

Đánh giá

3

Trả lời

4.9

Xếp hạng

8

Các khóa học

■ [현재] 그린컴퓨터아트학원 웹퍼블리싱, 프론트엔드 강의
■ [현재] 웹 퍼블리싱 유튜브 채널 'Rock's Easyweb' 운영
■ 더조은 컴퓨터아카데미 웹 퍼블리싱 강사
■ 한빛 컴퓨터아카데미 웹 퍼블리싱 강사
■ 프론트엔드 퍼블리셔, 프론트엔드 퍼블리싱 전문강사
■ UI/UX 웹 디자인 포트폴리오 강의


[ 도서 ]
2021.07.19 출간 / 웹디자인 & 웹퍼블리싱을 위한 피그마 완벽 활용서 / 비제이퍼블릭

2022.08.25 출간  / 코딩을 처음이라 with 웹 퍼블리싱  / 영진출판사

2023.10 출간 /2024 SD에듀 유선배 웹디자인기능사 실기 과외노트 / 시대고시기획

2024.11 재판 /2025 SD에듀 유선배 웹디자인기능사 실기 과외노트 / 시대고시기획

 

[ 수상경력 ]
2022.08 그린컴퓨터 아트 학원 종로지점 - 우수강사 2021.06 그린컴퓨터 아트 학원 종로지점 - 우수강사 2018.06 그린 컴퓨터아카데미 신촌 지점 - 우수강사 2017.05 그린 컴퓨터아카데미 신촌 지점 - 우수강사 2016.05 그린 컴퓨터아카데미 신촌 지점 - 우수강사 2015.10 그린 컴퓨터아카데미 신촌 지점 - 우수강사 

 

 

 

Chương trình giảng dạy

Tất cả

21 bài giảng ∙ (8giờ 39phút)

Tài liệu khóa học:

Tài liệu bài giảng
Ngày đăng: 
Cập nhật lần cuối: 

Đánh giá

Tất cả

4 đánh giá

4.8

4 đánh giá

  • tomomo님의 프로필 이미지
    tomomo

    Đánh giá 7

    Đánh giá trung bình 5.0

    5

    100% đã tham gia

    Khi tạo trang web trên figma thấy rất hữu ích. Cảm ơn bài giảng hay.

    • ezweb
      Giảng viên

      Thật mừng là nó đã giúp ích. Rất mong quý vị tiếp tục ủng hộ. ^^

  • skylove62557603님의 프로필 이미지
    skylove62557603

    Đánh giá 10

    Đánh giá trung bình 5.0

    5

    100% đã tham gia

    Đây là một buổi học xuất bản tham khảo Figma, và đó là một kinh nghiệm hữu ích để có được kinh nghiệm thực tế. Thật hữu ích vì tôi có thể học cách triển khai trang web lên Github ở cuối buổi. Thầy/Cô dạy rất kỹ càng và bài bản!

    • ezweb
      Giảng viên

      Cảm ơn bạn vì những đánh giá quý giá. Tôi rất vui vì nó hữu ích cho bạn. Cảm ơn bạn!

  • pcdoomco8345님의 프로필 이미지
    pcdoomco8345

    Đánh giá 15

    Đánh giá trung bình 5.0

    5

    19% đã tham gia

    Chúc bạn nghe thật hay.

    • ezweb
      Giảng viên

      Cảm ơn bạn. Nếu có bất kỳ thắc mắc nào, vui lòng để lại câu hỏi trong phần bình luận nhé ^^

  • bonggyeong9225님의 프로필 이미지
    bonggyeong9225

    Đánh giá 1

    Đánh giá trung bình 4.0

    4

    38% đã tham gia

    Việc chú ý đến từng chi tiết nhỏ thể hiện đây thực sự là bài giảng của một nhà thiết kế chân chính.

    1.165.962 ₫

    Khóa học khác của ezweb

    Hãy khám phá các khóa học khác của giảng viên!

    Khóa học tương tự

    Khám phá các khóa học khác trong cùng lĩnh vực!