inflearn logo

Thực hành xuất bản web - Hoàn thiện website đáp ứng với thiết kế Figma

Nếu bạn đã nắm được những kiến thức cơ bản về HTML/CSS/JavaScript, giờ là lúc hoàn thiện chúng thành một website hoàn chỉnh. Hãy trải nghiệm toàn bộ quy trình xuất bản web thực tế: phân tích thiết kế Figma, triển khai bằng HTML/CSS, thực hiện các tương tác bằng JavaScript(jQuery), tối ưu responsive và đưa website lên môi trường triển khai.

(4.3) 3 đánh giá

25 học viên

Độ khó Cơ bản

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

jQuery
jQuery
Figma
Figma
publishment
publishment
Responsive Web
Responsive Web
css
css
jQuery
jQuery
Figma
Figma
publishment
publishment
Responsive Web
Responsive Web
css
css

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

  • Kỹ năng thực tiễn trong việc phân tích thiết kế Figma và triển khai bằng HTML/CSS

  • Kinh nghiệm toàn bộ quy trình phát triển, từ xây dựng đến triển khai website responsive

  • Năng lực tự thiết kế và phán đoán cấu trúc mã dựa trên bản thiết kế giao diện

"Không nhận ngay là thiệt! Chỉ cần đăng ký YouTube là học phí giảm một nửa"

Sự kiện đăng ký & thích & bình luận

Hãy hoàn thành nhiệm vụ đơn giản và nhận ngay phiếu giảm giá 50%. Ưu đãi cực khủng chỉ được cung cấp trong thời gian có hạn, hãy nhanh tay nhận ngay!

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

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

Học cách tham khảo thiết kế Figma, nắm bắt nhiều bố cục, các yếu tố thiết kế đa dạng và ý đồ lập kế hoạch để triển khai thành trang web.

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

  • Hiểu quy trình chuyển thiết kế Figma thành giao diện web.


    Tìm hiểu cách phân tích tệp thiết kế và áp dụng vào việc xuất bản web.

  • 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 đánh dấu và tạo kiểu bằng HTML và CSS.



  • Nắm vững cách lưu và tối ưu hóa hình ảnh cho web trong Figma.


    Tìm hiểu cách lựa chọn định dạng hình ảnh phù hợp và tối ưu hóa hình ảnh, cân nhắc đến hiệu suất 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.



  • Phát triển khả năng triển khai Header và thanh Navigation.
    Học cách áp dụng thanh điều hướng và thiết kế header 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ì thiết kế website nhất quán.



  • Học cách áp dụ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 tận dụng hiệu ứng hoạt ảnh và chuyển tiếp CSS.



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

  • Hoàn thành dự án thực tế để nâng cao năng lực chuyên môn.
    Dựa trên những kiến thức đã học, bạn sẽ trực tiếp xây dựng website và phát triển năng lực xuất bản web.


Bạn đang hướng đến trở thành nhà xuất bản web hoặc nhà phát triển frontend phải không?

Vậy hãy giao phần thiết kế cho nhà thiết kế và tập trung vào việc triển khai dựa trên thiết kế hoàn chỉnh.

Trong khóa học này, chúng ta sẽ 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ề phát triển giao diện web

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

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

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

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

Học cách xây dựng cấu trúc cơ bản của website bằng HTML. Tìm hiểu các nguyên tắc thiết kế mã đánh dấu dễ bảo trì, đồng thời cân nhắc khả năng tiếp cận bằng cách sử dụng các thẻ semantic. Qua đó, học cách 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 Navigation

Học cách triển khai phần đầu trang và thanh điều hướng của website bằng HTML và CSS. Nắm vững các nguyên tắc bố trí logo, menu, biểu tượng... một cách phù hợp và thiết kế để người dùng dễ dàng điều hướng. Ngoài ra, học cách áp dụng kiểu dáng 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.


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


Học cách thiết lập kiểu dáng và xây dựng bố cục cho website bằng CSS. Nắm vững các kỹ thuật căn chỉnh và sắp xếp nội dung bằng Flexbox và Grid, đồng thời học cách triển khai thiết kế trực quan. Ngoài ra, tìm hiểu các phương pháp áp dụng kiểu dáng dễ bảo trì để có thể sử dụng trong công việc thực tế.

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

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

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 kiểu dáng cho nút và thêm nhiều hiệu ứng hoạt ảnh khác nhau để nâng cao trải nghiệm người dùng trên website. Sử dụng CSS để triển khai hiệu ứng di chuột và nhấp chuột cho nút, đồng thời áp dụng transition và hoạt ảnh keyframe để tạo ra những tương tác tự nhiên. Qua đó, học cách nâng cao mức độ hoàn thiện về mặt thị giác và tận dụng hiệu quả các thành phần web động.

Hoạt ảnh khi di chuột lướt qua

Hoạt ảnh cuộn, hoạt ảnh số@endsection

Triển khai nhiều dạng slide

Học cách triển khai slide hiển thị hình ảnh hoặc nội dung động trên website. Nắm vững các kỹ thuật sử dụng CSS và JavaScript để áp dụng chuyển động lên xuống, tự động trượt trái phải, đồng thời học các nguyên tắc thiết kế slide có cân nhắc đến 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 phần 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 trong bài giảng lần 2 và bài giảng cuối cùng.

Cung cấp PDF tóm tắt nội dung chính.

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


Kênh trao đổi (khảo sát, phòng trò chuyện mở 1:1)✒

Học viên có thể gửi ý kiến và câu hỏi bất cứ lúc nào thông qua mục Tin tức, biểu mẫu Google và phòng chat mở 1:1 được giới thiệu trong đó.


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

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

  • Người học đã học những kiến thức cơ bản về HTML/CSS/JavaScript nhưng còn thiếu kinh nghiệm thực hiện các dự án thực tế

  • Lập trình viên tương lai muốn phát triển năng lực xây dựng website từ bản thiết kế mẫu.

  • Lập trình viên mới cần một dự án website thực tế để làm portfolio xin việc

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

  • Hiểu về thẻ HTML và cấu trúc cơ bản

  • Kiến thức cơ bản về bộ chọn CSS, mô hình hộp và bố cục

  • Kiến thức cú pháp JavaScript cơ bản và kinh nghiệm thao tác với DOM

Xin chào
Đây là ezweb

Xác minh sự nghiệp

3,001

Học viên

77

Đánh giá

4

Trả lời

4.9

Xếp hạng

15

Các khóa học

Tôi là giảng viên chuyên về frontend web, cung cấp đào tạo thực tiễn về frontend, giảng dạy tại doanh nghiệp và cơ quan, cũng như sản xuất các khóa học trực tuyến.

■ Các khóa học chuyên sâu về frontend
HTML/CSS, JavaScript, React, Firebase, Figma, phát triển web ứng dụng AI, v.v.
Đào tạo theo từng bước từ xuất bản web đến nghiệp vụ frontend thực tế.

■ Có thể giảng dạy tại doanh nghiệp, cơ quan và cơ sở giáo dục
Đào tạo nhân sự doanh nghiệp, chương trình KDT, chuyên đề tại trường đại học·học viện, v.v.
Có thể xây dựng chương trình giảng dạy và trực tiếp giảng dạy phù hợp với đối tượng và trình độ học viên.

■ Có thể thiết kế và sản xuất khóa học trực tuyến
Từ lên kế hoạch chương trình giảng dạy, biên soạn giáo trình, PPT, tài liệu thực hành và mã ví dụ,
đến quay bài giảng và bàn giao nội dung, có thể thực hiện toàn bộ quy trình sản xuất nội dung đào tạo trực tuyến.

■ Có thể giảng dạy cả trực tuyến và trực tiếp
Không chỉ giảng dạy trực tiếp tại học viện mà còn thực hiện nhiều hình thức khác nhau như giảng dạy trực tuyến theo thời gian thực, sản xuất nội dung ghi hình
phù hợp với môi trường giáo dục.


■ Hoạt động chính

  • Khóa học frontend KDT của ESTSOFT

  • Bài giảng xuất bản web và frontend tại Học viện Máy tính Green

  • Vận hành kênh YouTube về xuất bản web ‘ezweb’

  • Biên soạn sách liên quan đến xuất bản web và thiết kế web


■ Sách
2021.07 / Cẩm nang sử dụng Figma toàn diện cho thiết kế web & web publishing / BJ Public

2022.08 / Lần đầu học coding cùng web publishing  / Nhà xuất bản Youngjin

2023.10 / Sổ tay học kèm thực hành Chứng chỉ Kỹ năng Thiết kế Web 2024 SD Edu Yuseonbae / Sidae Gosi Gihoek

2024.11 / Sổ tay ôn thi thực hành Chứng chỉ Kỹ năng thiết kế web Yuseonbae SD Edu 2025 / Nhà xuất bản Sidae Gosi Planning

2025.11 / Sổ tay kèm học thực hành Chứng chỉ Thiết kế Web SD Edu Yoo Sun-bae 2026 / Sidae Gosi Planning

 

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ả

3 đánh giá

4.3

3 đánh giá

  • tmdgml06148258님의 프로필 이미지
    tmdgml06148258

    Đánh giá 2

    ∙

    Đánh giá trung bình 4.5

    4

    30% đã tham gia

    • 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!

        Giảm 25% cho thành viên mới

        1.037.814 ₫

        25%

        1.383.754 ₫