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,004

Học viên

78

Đá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, giảng dạy từ web publishing đến thực hành JavaScript·React và phát triển ứng dụng với AI.

Tôi đã giảng dạy cho người không chuyên, người mới bắt đầu và người đang chuẩn bị tìm việc tại ESTSOFT KDT, Học viện Máy tính Green cùng nhiều đơn vị khác. Tôi hướng đến phương pháp giảng dạy lấy dự án làm trọng tâm, chia các khái niệm phức tạp thành những bài thực hành nhỏ và giúp học viên tự mình hoàn thiện sản phẩm.

Lĩnh vực đào tạo chính

  • Dàn trang web HTML/CSS

  • Kiến thức cơ bản về JavaScript và tương tác web

  • Phát triển frontend dựa trên React

  • Triển khai dịch vụ web bằng Firebase

  • Thiết kế UI bằng Figma và liên kết với phát triển sản phẩm

  • Phát triển web cùng AI tạo sinh

  • Thực hành chứng chỉ Kỹ thuật viên Thiết kế Web

Đào tạo cho doanh nghiệp và tổ chức

Tiến hành đào tạo nhân viên doanh nghiệp, các khóa KDT và các buổi chuyên đề tại trường đại học/trung tâm đào tạo.

Chúng tôi xây dựng chương trình giảng dạy và dự án thực hành phù hợp với đối tượng đào tạo, kiến thức nền tảng, thời lượng đào tạo và sản phẩm đầu ra mong muốn. Có thể triển khai giảng dạy trực tiếp, lớp học trực tuyến theo thời gian thực và sản xuất nội dung đào tạo dạng ghi hình.

Sản xuất nội dung đào tạo trực tuyến

Tiến hành các công việc sản xuất nội dung đào tạo trực tuyến như sau.

  • Thiết kế chương trình học và mục tiêu học tập của khóa học

  • Biên soạn giáo trình và bài thuyết trình

  • Cấu trúc mã thực hành theo từng bước và các dự án ví dụ

  • Soạn kịch bản bài giảng dùng cho quay hình

  • Quay bài giảng và bàn giao nội dung

Hoạt động chính

  • Bài giảng frontend KDT của ESTSOFT

  • Giảng dạy xuất bản web và phát triển frontend tại Học viện Máy tính Green

  • Điều hành kênh YouTube về lập trình web ‘ezweb’

  • Biên soạn sách trong lĩnh vực xuất bản web và thiết kế web

Sách đã xuất bản

Tôi đang tiếp nhận các yêu cầu về việc giảng dạy tại doanh nghiệp, cơ quan và sản xuất nội dung đào tạo trực tuyến.

Liên hệ: ezwebpub@gmail.com

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

    • alsghd26123722님의 프로필 이미지
      alsghd26123722

      Đánh giá 1

      ∙

      Đánh giá trung bình 5.0

      5

      61% đã tham gia

      • racoon726235님의 프로필 이미지
        racoon726235

        Đánh giá 6

        ∙

        Đánh giá trung bình 4.8

        4

        30% đã 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.034.384 ₫

        25%

        1.379.174 ₫