Inflearn brand logo image
Inflearn brand logo image
Inflearn brand logo image
Programming

/

Web Development

Làm chủ Web Publishing - Chuyển đổi Figma sang Web với Javascript

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

(4.0) 1 đánh giá

11 học viên

  • ezweb
웹퍼블리싱
Figma
javascript
자격증
시험
HTML/CSS
JavaScript

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

  • 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à phương pháp viết markup hiệu quả

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

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

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

  • Xuất bản tuân thủ các tiêu chuẩn web và khả năng truy cập

Hãy thổi hồn vào thiết kế của bạn trên một trang web hoàn hảo!

Bằng cách tham khảo các thiết kế của Figma, bạn sẽ học cách triển khai nhiều bố cục, nhiều yếu tố thiết kế và ý định lập kế hoạch vào các trang web.

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

  • Hiểu được quy trình triển khai thiết kế Figma cho web.


    Tìm hiểu 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.

  • Tìm hiểu các khái niệm cơ bản và kỹ năng thực tế về xuất bản web.
    Tìm hiểu các kỹ thuật đánh dấu và định dạng bằ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.


    Tìm hiểu cách chọn định dạng hình ảnh phù hợp và tối ưu hóa hình ảnh của bạn để tăng hiệu suất cho web.



  • Cải thiện khả năng viết code đáp ứng các tiêu chuẩn web và khả năng truy cập.
    Tìm hiểu 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 thanh tiêu đề và thanh điều hướng.
    Tìm hiểu cách áp dụng thanh điều hướng và thiết kế tiêu đề vào trang web của bạn.



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


    Tìm hiểu cách giữ cho thiết kế trang web của bạn nhất quán.



  • Tìm hiểu cách áp dụng hoạt ảnh và hiệu ứng động.
    Cải thiện trải nghiệm của người dùng bằng cách tận dụng hiệu ứng chuyển tiếp và hoạt ảnh CSS.



  • Tìm hiểu các kỹ thuật tối ưu hóa có tính đến hiệu suất trang web.
    Tìm hiểu cách làm cho mã của bạn hiệu quả hơn và cải thiện hiệu suất.

  • Rèn luyện kỹ năng thực tế bằng cách hoàn thành các dự án thực tế.
    Dựa trên những gì đã học, bạn sẽ tạo trang web của riêng mình và phát triển khả năng xuất bản.


Bạn có muốn trở thành nhà xuất bản web hoặc nhà phát triển front-end không?

Sau đó, hãy để nhà thiết kế thực hiện thiết kế và tập trung vào việc triển khai nó bằng cách tham khảo bản thiết kế đã hoàn thiện.

Trong hướng dẫn này, chúng tôi 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

Hiệp 1 (từ hiệp 1 đến hiệp 5)

Hiểu các khái niệm cơ bản về xuất bản web

Xuất bản web là quá trình triển khai thiết kế bằng HTML và CSS. Tìm hiểu cách viết mã có tính đến các tiêu chuẩn web và khả năng truy cập, đồng thời tìm hiểu cách diễn giải các tệp thiết kế và cấu trúc đánh dấu thiết kế. Ngoài ra, bạn sẽ học cách viết mã dễ bảo trì để có thể áp dụng vào công việc của mình.

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

Tìm hiểu cách chọn và lưu định dạng hình ảnh phù hợp để xuất bản trên web trong Figma. Hiểu được sự khác biệt giữa PNG, JPG, SVG và nhiều định dạng khác, đồng thời tìm hiểu cách 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 các kỹ thuật để áp dụng thiết kế một cách tự nhiên vào trang web của mình.

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

Tìm hiểu cách tạ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ế đánh dấu dễ truy cập và dễ bảo trì bằng cách sử dụng thẻ ngữ nghĩa. Thông qua đó, bạn sẽ học cách viết code hiệu quả, tuân thủ các tiêu chuẩn web.

Phần giữa (tiết 6 đến tiết 15)

Triển khai Header và Thanh điều hướng

Tìm hiểu cách triển khai tiêu đề và thanh điều hướng của trang web bằng HTML và CSS. Tìm hiểu các nguyên tắc về cách đặt logo, menu, biểu tượng, v.v. một cách hợp lý và thiết kế chúng sao cho người dùng có thể dễ dàng điều hướng. Bạn cũng sẽ học cách tạo kiểu cho thanh điều hướng và duy trì thiết kế nhất quán trên nhiều thiết bị.


Thiết lập kiểu dáng và bố cục CSS


Tìm hiểu cách định dạng và bố cục trang web của bạn bằng CSS. Tìm hiểu các kỹ thuật căn chỉnh và bố trí nội dung bằng Flexbox và Grid, đồng thời tìm hiểu cách triển khai các thiết kế trực quan. Ngoài ra, bạn sẽ học cách áp dụng các phong cách dễ duy trì để có thể sử dụng trong công việc của mình.

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

Tìm hiểu cách áp dụng phông chữ, màu sắc và hình ảnh nền phù hợp để cải thiện khả năng đọc và 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 nhằm tăng hiệu suất web.

Hiệp 2 (từ hiệp 16 đến hiệp 23)

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

Tìm hiểu cách áp dụng kiểu nút và thêm nhiều hiệu ứng hoạt hình khác nhau để cải thiện trải nghiệm của người dùng trên trang web của bạn. Tìm hiểu cách triển khai hiệu ứng di chuột và nhấp cho các nút bằng CSS và cách tạo tương tác tự nhiên bằng hiệu ứng chuyển tiếp và hoạt ảnh khung hình chính. Thông qua đó, bạn sẽ học cách tăng tính hoàn thiện về mặt hình ảnh và sử dụng các thành phần web động một cách hiệu quả.

Hoạt ảnh di chuột

Hoạt hình cuộn, hoạt hình số

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

Tìm hiểu cách triển khai các slide hiển thị hình ảnh hoặc nội dung động trên trang web của bạn. Bạn sẽ học các kỹ thuật áp dụng slide tự động theo chiều dọc và chiều ngang bằng CSS và JavaScript, đồng thời tìm hiểu các nguyên tắc thiết kế slide có tính đến UX.

thực hiện slide javascript

Các tệp mẫu và phiên bản hoàn thiện đều được cung cấp.

Cung cấp mô tả và tệp ví dụ thực hành cho tất cả các thuộc tính của flex.

Vui lòng kiểm tra tài liệu bài giảng cho bài giảng thứ 2 và bài giảng cuối cùng.

Chúng tôi cung cấp bản tóm tắt PDF về những điểm chính.

Cung cấp mô tả và liên kết tới các ví dụ thực tế cho tất cả các thuộc tính flex.


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?

  • Những ai muốn học web publishing bằng Figma

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

  • Lập trình viên web muốn nâng cao năng lực xuất bản (publishing) trong công việc thực tế.

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

  • Học sinh và người chuẩn bị đi làm muốn tạo trang web portfolio

Xin chào
Đây là

2,509

Học viên

48

Đá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ả

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

1 đánh giá

4.0

1 đánh giá

  • racoon726235님의 프로필 이미지
    racoon726235

    Đánh giá 6

    Đánh giá trung bình 4.8

    4

    30% đã tham gia

    1.402.898 ₫

    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!