Làm chủ Web Publishing - figma to web với javascript

Khóa học này giải thích từng bước về quá trình hiện thực hóa thiết kế Figma thành trang web. Khóa học bao gồm toàn bộ các kỹ năng thực tế trong xuất bản web, từ lưu trữ hình ảnh đến viết HTML, CSS và Javascript. Nội dung được trình bày một cách hệ thống để ngay cả những người mới bắt đầu cũng có thể dễ dàng làm theo. Thông qua việc học tập tập trung vào thực hành, bạn có thể học được cách chuyển đổi thiết kế web thành mã nguồn một cách hiệu quả.

(4.5) 2 đánh giá

17 học viên

Độ khó Cơ bản

Thời gian Không giới hạn

HTML/CSS
HTML/CSS
JavaScript
JavaScript
Figma
Figma
HTML/CSS
HTML/CSS
JavaScript
JavaScript
Figma
Figma

Bạn sẽ nhận được điều này sau khi học.

  • Cách lưu và tối ưu hóa hình ảnh cho web trong Figma

  • Thiết kế cấu trúc HTML và cách viết markup hiệu quả

  • Áp dụng CSS Styling cơ bản và Reset

  • Cách sử dụng bố cục Flexbox

  • Áp dụng hiệu ứng nút, biểu tượng và hoạt ảnh

  • Thiết kế giao diện web (Publishing) cân nhắc đến tiêu chuẩn web và khả năng tiếp cận

"Không nhận bây giờ là lỗ! Chỉ cần đăng ký kênh YouTube, học phí sẽ giảm một nửa"

Sự kiện Đăng ký & Thích & Bình luận

Hoàn thành nhiệm vụ đơn giản và nhận ngay mã giảm giá 50%. Ưu đãi lớn nhất từ trước đến nay chỉ có trong thời gian có hạn, hãy nắm bắt ngay bây giờ!

Tham gia sự kiện xác nhận Đăng ký & Bình luận YouTube: https://forms.gle/wcD2wRVeaG7B7fSj7

Hãy hiện thực hóa thiết kế thành trang web một cách hoàn hảo!

Học cách hiện thực hóa trang web bằng cách tham khảo thiết kế Figma, nắm bắt các bố cục đa dạng, các yếu tố thiết kế khác nhau và ý đồ lập kế hoạch.

Mục tiêu học tập

  • Hiểu quy trình hiện thực hóa thiết kế Figma lên web.


    Học cách phân tích các tệp thiết kế và áp dụng chúng vào việc xuất bản web (web publishing).

  • Nắm vững các khái niệm cơ bản và kỹ năng thực tế về xuất bản web.
    Học các kỹ thuật markup và tạo kiểu bằng cách sử dụng HTML và CSS.



  • Tìm hiểu cách lưu và tối ưu hóa hình ảnh cho web trong Figma.


    Bạn sẽ học cách chọn định dạng hình ảnh phù hợp và các phương pháp tối ưu hóa hình ảnh để cải thiện hiệu suất trang web.



  • Nâng cao khả năng viết mã có tính đến các tiêu chuẩn web và khả năng tiếp cận.
    Học cách cung cấp UI/UX nhất quán trong nhiều môi trường khác nhau.



  • Nuôi dưỡng khả năng hiện thực hóa thanh Header và Navigation.
    Học cách áp dụng thiết kế thanh điều hướng và đầu trang vào trang web.



  • Tìm hiểu cách áp dụng các yếu tố thiết kế như phông chữ, màu sắc và kiểu nút.


    Thực hành cách duy trì tính thống nhất trong thiết kế trang web.



  • Học cách áp dụng hiệu ứng hoạt ảnh và hiệu ứng động.
    Cải thiện trải nghiệm người dùng bằng cách sử dụng hiệu ứng CSS animation và transition.



  • Tìm hiểu các kỹ thuật tối ưu hóa có cân nhắc đến hiệu suất web.
    Học cách nâng cao hiệu quả của mã nguồn và cải thiện hiệu suất.

  • Hoàn thành dự án thực tế để tăng cường năng lực chuyên môn.
    Dựa trên những nội dung đã học để trực tiếp xây dựng trang web và phát triển kỹ năng xuất bản web (publishing).


Bạn đang hướng tới mục tiêu trở thành Web Publisher hay nhà phát triển Front-end phải không?

Vậy thì hãy để việc thiết kế cho nhà thiết kế, và tập trung vào việc hiện thực hóa dựa trên bản thiết kế đã hoàn thành.

Trong khóa học này, chúng tôi sử dụng các thiết kế miễn phí từ cộng đồng Figma.

Địa chỉ tệp thiết kế: https://www.figma.com/community/file/1383362001941293031



Nội dung học tập chính

Phần đầu (buổi 1~5)

Hiểu các khái niệm cơ bản về Web Publishing

Web publishing là quá trình hiện thực hóa thiết kế bằng HTML và CSS. Bạn sẽ được học cách viết mã tuân thủ các tiêu chuẩn web và khả năng truy cập, đồng thời học cách phân tích các tệp thiết kế và thiết kế cấu trúc markup. Ngoài ra, khóa học cũng hướng dẫn cách viết mã dễ bảo trì để có thể áp dụng trực tiếp vào công việc thực tế.

Cách lưu và sử dụng hình ảnh trong Figma

Học cách chọn và lưu định dạng hình ảnh phù hợp cho việc xuất bản web trong Figma. Hiểu sự khác biệt giữa PNG, JPG, SVG, v.v., đồng thời nắm vững các phương pháp tối ưu hóa độ phân giải và cải thiện hiệu suất web. Thông qua đó, bạn sẽ học được kỹ thuật áp dụng thiết kế vào trang web một cách tự nhiên.

Viết cấu trúc HTML cơ bản

Học cách soạn thảo cấu trúc cơ bản của trang web bằng HTML. Tìm hiểu các nguyên tắc thiết kế mã nguồn (markup) dễ bảo trì và cân nhắc đến khả năng truy cập bằng cách sử dụng các thẻ ngữ nghĩa (semantic tags). Thông qua đó, người học sẽ nắm vững phương pháp viết mã hiệu quả và tuân thủ các tiêu chuẩn web.

Giai đoạn giữa (Buổi 6~15)

Triển khai Header và thanh Điều hướng (Navigation)

Học cách triển khai phần đầu trang (header) và thanh điều hướng (navigation bar) của trang web bằng HTML và CSS. Bạn sẽ nắm vững các nguyên tắc thiết kế để bố trí logo, menu, biểu tượng một cách hợp lý, giúp người dùng dễ dàng điều hướng. Ngoài ra, bạn cũng sẽ học cách áp dụng phong cách cho thanh điều hướng và duy trì thiết kế nhất quán trên nhiều thiết bị khác nhau.


Thiết lập bố cục và tạo kiểu CSS


Học cách thiết lập phong cách và cấu trúc bố cục cho trang web bằng cách sử dụng CSS. Bạn sẽ nắm vững các kỹ thuật sắp xếp và bố trí nội dung bằng Flexbox và Grid, đồng thời học cách hiện thực hóa các thiết kế trực quan. Ngoài ra, bạn cũng sẽ học cách áp dụng phong cách dễ bảo trì để có thể vận dụng hiệu quả trong thực tế.

Áp dụng phông chữ, màu sắc và hình ảnh nền

Học cách áp dụng phông chữ, màu sắc và hình ảnh nền phù hợp để nâng cao khả năng đọc và cải thiện thiết kế của trang web. Tìm hiểu cách sử dụng phông chữ web và các kỹ thuật tối ưu hóa hình ảnh nền để duy trì hiệu suất web.

Phần sau (Bài 16~23)

Thêm nút và hiệu ứng hoạt ảnh

Học cách áp dụng các kiểu nút bấm và thêm các hiệu ứng hoạt ảnh đa dạng để cải thiện trải nghiệm người dùng trên trang web. Sử dụng CSS để triển khai các hiệu ứng hover và click cho nút bấm, đồng thời nắm vững các kỹ thuật tạo tương tác tự nhiên bằng cách áp dụng transition và keyframe animation. Thông qua đó, người học sẽ nâng cao độ hoàn thiện về mặt thị giác và học cách tận dụng hiệu quả các yếu tố web động.

Hiệu ứng hoạt ảnh khi di chuột (Mouse hover animation)

Hiệu ứng cuộn (Scroll Animation), Hiệu ứng số chạy (Number Animation)

Triển khai nhiều loại slide khác nhau

Học cách triển khai các slide hiển thị hình ảnh hoặc nội dung một cách động trên trang web. Bạn sẽ nắm vững các kỹ thuật sử dụng CSS và JavaScript để áp dụng các hiệu ứng như di chuyển lên xuống, trượt trái phải tự động, đồng thời học các nguyên tắc thiết kế slide có tính đến trải nghiệm người dùng (UX).

Triển khai slide bằng JavaScript

Cung cấp tệp ví dụ và bản hoàn thiện.

Cung cấp giải thích về tất cả các thuộc tính của flex và tệp ví dụ thực hành.

Vui lòng kiểm tra tài liệu học tập ở bài giảng buổi thứ 2 và buổi cuối cùng.

Cung cấp bản PDF tóm tắt nội dung cốt lõi.

Cung cấp giải thích về tất cả các thuộc tính của flex và liên kết ví dụ thực hành.


Kênh giao tiếp (Khảo sát, Phòng chat mở 1:1)

Các học viên có thể đưa ra ý kiến và đặt câu hỏi bất cứ lúc nào thông qua Khảo sát GooglePhòng chat mở 1:1 được giới thiệu trong mục Tin mới.


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

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

  • Những người muốn học thiết kế web sử dụng Figma

  • Nhà thiết kế muốn học cách chuyển đổi thiết kế web thành trang web thực tế

  • Nhà phát triển web muốn nâng cao năng lực publishing trong thực tế công việc

  • Người học muốn thực hiện dự án thực tế sau khi đã nắm vững kiến thức cơ bản về HTML/CSS

  • Sinh viên và người đang tìm việc có nhu cầu xây dựng trang web hồ sơ năng lực (portfolio)

Xin chào
Đây là ezweb

2,820

Học viên

63

Đánh giá

4

Trả lời

4.9

Xếp hạng

14

Các khóa học

■ [Hiện tại] Giảng viên Front-end tại ESTSOFT KDT
■ Giảng dạy Web Publishing, Front-end tại Học viện Nghệ thuật Máy tính Green
■ Vận hành kênh YouTube về Web Publishing 'Rock's Easyweb'
■ Giảng viên Web Publishing tại Học viện Máy tính The Joeun
■ Giảng viên Web Publishing tại Học viện Máy tính Hanbit
■ Chuyên gia Front-end Publisher, Giảng viên chuyên nghiệp về Front-end Publishing
■ Giảng dạy Portfolio Thiết kế Web UI/UX


[ Sách ]
Xuất bản 19.07.2021 / Sách hướng dẫn sử dụng Figma hoàn hảo cho Thiết kế Web & Web Publishing / BJ Public

Xuất bản ngày 25.08.2022 / Lần đầu học Coding với Web Publishing / Nhà xuất bản Youngjin

Xuất bản 10.2023 /Sổ tay gia sư thực hành Kỹ thuật viên Thiết kế Web 2024 SD Edu Yu-seon-bae / Sidae Gosi Planning

Tái bản 11/2024 /Sổ tay hướng dẫn thực hành Kỹ thuật viên Thiết kế Web 2025 SD Edu của Tiền bối Yoo / Sidae Gosi Planning

Tái bản 11.2025 /2026 Sổ tay gia sư thực hành Kỹ thuật viên Thiết kế Web SD Edu của Tiền bối Yoo / Sidae Gosi Planning

 

[ Giải thưởng ]
08.2022 Học viện Green Computer Art chi nhánh Jongno - Giảng viên xuất sắc 06.2021 Học viện Green Computer Art chi nhánh Jongno - Giảng viên xuất sắc 06.2018 Học viện Green Computer Art chi nhánh Sinchon - Giảng viên xuất sắc 05.2017 Học viện Green Computer Art chi nhánh Sinchon - Giảng viên xuất sắc 05.2016 Học viện Green Computer Art chi nhánh Sinchon - Giảng viên xuất sắc 10.2015 Học viện Green Computer Art chi nhánh Sinchon - Giảng viên xuất sắc

 

 

 

Thêm

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

Tất cả

23 bài giảng ∙ (7giờ 29phú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ả

2 đánh giá

4.5

2 đánh giá

  • racoon726235님의 프로필 이미지
    racoon726235

    Đánh giá 6

    Đánh giá trung bình 4.8

    4

    30% đã tham gia

    • alsghd26123722님의 프로필 이미지
      alsghd26123722

      Đánh giá 1

      Đánh giá trung bình 5.0

      5

      61% đã tham gia

      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!

      1.402.818 ₫