강의

멘토링

로드맵

Programming

/

Web Publishing

Làm chủ CSS GRID: Thực hành thiết kế FIGMA và triển khai web

CSS Grid là một công cụ mạnh mẽ cho phép bạn triển khai các bố cục phức tạp một cách đơn giản và trực quan. Trong bài giảng này, bạn sẽ được học từng bước một cách dễ dàng từ các khái niệm cốt lõi của CSS Grid đến cách sử dụng thực tế. Đừng để bị ràng buộc vào float và flexbox phức tạp nữa, hãy học cách thiết kế bố cục hiệu quả! Bắt đầu ngay bây giờ!

(5.0) 2 đánh giá

15 học viên

  • ezweb
실습 중심
HTML/CSS
jQuery
Figma

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

  • Tổng hợp đầy đủ cú pháp và thuộc tính cơ bản của CSS Grid

  • Thực hành dự án với các ví dụ thực tế

  • Bí quyết triển khai trang web tham khảo thiết kế

Khi nào nên sử dụng CSS GRID?

Bạn sẽ thiết kế một thiết kế như bên dưới như thế nào?

Bạn có thể sử dụng float hoặc flex để định vị các phần tử, phải không? Trong trường hợp các thành phần được căn chỉnh theo chiều ngang và chiều dọc theo lưới 12 cột, chẳng hạn như trong thiết kế, sẽ hiệu quả hơn khi sử dụng float hoặc flex để sắp xếp chúng.

Thiết kế như thế này thì sao?


Thiết kế trên không dễ sắp xếp bằng float hoặc flex. Cũng khó để xử lý tất cả các thành phần như absolute. Nếu bạn làm như vậy, sẽ khó bảo trì sau này và nếu bạn triển khai nó một cách phản hồi, nó sẽ trở thành một trang web thậm chí còn khó bảo trì hơn.

Khi triển khai thiết kế như ví dụ trên, bạn phải sử dụng CSS GRID để thiết lập lưới như minh họa bên dưới và đặt các thành phần vào lưới đã thiết lập.


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

Tìm hiểu các thuộc tính khác nhau của CSS Grid.

  1. Lưới cơ bản

  2. Phân số


  3. Định vị - Sử dụng số dòng

  4. Định vị - Sử dụng tên ô lưới


  5. tự động điều chỉnh, chức năng min-max


    Tìm hiểu cách đặt càng nhiều thành phần càng tốt trong chiều rộng của một vùng chứa.

  6. Tự động sắp xếp hàng
    Các hàng không chỉ định chiều cao riêng có thể được thiết lập chiều cao tự động nếu không có đủ không gian.

  7. Đặt theo tên đường lưới


  8. Thuộc tính mới chỉ có trong Grid
    Một thuộc tính tương tự như align-items của flex có thể được sử dụng không chỉ trên trục chéo mà còn trên trục chính.

  9. Thuộc tính FLEX có sẵn trong Grid
    Bạn cũng có thể sử dụng nhiều thuộc tính flex khác nhau trên các phần tử có áp dụng display:grid.

  10. Tự động đặt hàng - tự động điều chỉnh, tự động điền
    Tìm hiểu cách đặt càng nhiều cột càng tốt và xử lý không gian còn lại.



  11. Triển khai trang web - bố cục bài viết
    Chúng ta hãy triển khai một trang web đơn giản bằng cách sử dụng các thuộc tính lưới đã học.



  12. Sử dụng Grid và Flex
    Tìm hiểu cách tạo kiểu cho trang web bằng lưới CSS và flex.


Tìm hiểu cách triển khai trang web tham khảo thiết kế.

Xác định thiết kế và tạo ra các yếu tố

Đảm bảo thiết kế của bạn được sắp xếp theo nhóm và lớp theo cách thân thiện với mã hóa và kiểm tra xem các kiểu và biến có được phản ánh trong thiết kế hay không. Lưu hình ảnh cần thiết theo tình huống.

Viết HTML theo từng phần

Tạo các phần HTML lớn bằng cách tham chiếu đến tên nhóm và viết các thẻ HTML phù hợp với bản chất của nội dung bằng cách tham chiếu đến thiết kế chi tiết. Hiện tại, nội dung được viết theo tiêu chuẩn tối ưu hóa công cụ tìm kiếm, tiêu chuẩn web, v.v.

Thiết lập toàn bộ bố cục GRID

Thêm hướng dẫn để căn chỉnh các thành phần nhằm giúp bạn dễ dàng nhìn thấy chiều rộng của hàng và cột hơn.

Viết CSS theo từng phần

Viết CSS theo từng phần, phân tách bằng chú thích.

Triển khai trình chiếu bằng thư viện

Di chuyển các slide bằng các nút hoặc triển khai slide tự động bằng thư viện jQuery.

Sử dụng Thư viện Slide

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à tệp ví dụ thực hành cho tất cả các thuộc tính của flex.


Cung cấp một ví dụ ban đầu.

Thư mục 01_grid cung cấp các tệp ví dụ về các thuộc tính lưới cốt lõi. Bạn có thể học bằng cách xem bài giảng.


Cung cấp một ví dụ hoàn chỉnh.

Mã nguồn đầy đủ được cung cấp. So sánh với các ví dụ bạn đã hoàn thành trên lớp.


Tôi đề xuất các bài giảng sau:

Cơ bản về Javascript

Tìm hiểu những kiến ​​thức cơ bản về JavaScript thông qua các ví dụ thực tế.

jQuery cơ bản

Tìm hiểu những kiến ​​thức cơ bản về jQuery, các ví dụ thực tế và cách sử dụng các thư viện chính.

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

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

  • Dành cho những bạn đã có kiến thức cơ bản về HTML, CSS nhưng gặp khó khăn trong việc thiết kế bố cục

  • Những người gặp khó khăn trong quá trình hiện thực hóa bản thiết kế thành mã

  • Dành cho những ai muốn xây dựng giao diện người dùng (UI) ngăn nắp bằng cách sử dụng CSS Grid.

  • Những ai muốn chuyển đổi từ phương pháp float, flexbox hiện có sang quản lý bố cục hiệu quả

  • Dành cho những ai muốn tự tay tạo ra một trang web hiện đại và gọn gàng.

  • Những bạn muốn tích lũy kinh nghiệm thực tế thông qua dự án

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

  • HTML cơ bản

  • CSS cơ bản

Xin chào
Đây là

2,553

Học viên

50

Đánh giá

3

Trả lời

4.9

Xếp hạng

10

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ả

24 bài giảng ∙ (4giờ 51phú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á

5.0

2 đánh giá

  • tomomo님의 프로필 이미지
    tomomo

    Đánh giá 7

    Đánh giá trung bình 5.0

    5

    100% đã tham gia

    良い講義をありがとうございます。

    • jinimini님의 프로필 이미지
      jinimini

      Đánh giá 4

      Đánh giá trung bình 4.8

      5

      33% đã tham gia

      596.751 ₫

      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!