Nếu đã nắm được những kiến thức cơ bản về CSS, giờ đây bạn có thể tự do tạo các bố cục web phức tạp bằng Grid. Thông qua việc thực hành từng bước, từ những khái niệm cốt lõi của CSS Grid đến phân tích thiết kế trên Figma và triển khai website thực tế, hãy phát triển năng lực thiết kế bố cục cần thiết cho công việc xây dựng giao diện web chuyên nghiệp.
25 học viên
Độ khó Cơ bản
Thời gian Không giới hạn
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 cùng các ví dụ thực tế
Kinh nghiệm triển khai trang web tham khảo thiết kế
Sự kiện đăng ký kênh & 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 nắm bắt ngay bây giờ!
Tham gia sự kiện xác nhận đăng ký YouTube & bình luận: https://forms.gle/wcD2wRVeaG7B7fSj7
Nếu là thiết kế như dưới đây, bạn sẽ viết CSS như thế nào?
Có lẽ các bạn sẽ sử dụng float hoặc flex để sắp xếp các phần tử, đúng không? Khi các phần tử được căn chỉnh tốt theo chiều ngang và dọc, phù hợp với lưới 12 cột như trong thiết kế, việc sử dụng float hoặc flex để bố trí sẽ hiệu quả hơn.
Thiết kế trên không dễ sắp xếp bằng float hoặc flex. Tuy nhiên, việc xử lý tất cả các phần tử bằng absolute cũng không khả thi; nếu làm như vậy, việc bảo trì sau này sẽ trở nên bất tiện, và nếu triển khai theo kiểu responsive thì trang web sẽ càng khó bảo trì hơn.
Khi triển khai bằng cách tham khảo thiết kế giống như ví dụ trên, bạn cần sử dụng CSS GRID để thiết lập lưới như bên dưới và sắp xếp các phần tử vào lưới đã thiết lập.
Kiến thức cơ bản về Grid
Phân số
Positioning - Sử dụng số dòng
Positioning - Sử dụng tên ô lưới
hàm auto-fit, min-max
Tìm hiểu cách bố trí số lượng phần tử nhiều nhất có thể tùy theo chiều rộng của container.
Tự động sắp xếp hàng
Ngay cả với các hàng không được chỉ định chiều cao riêng, bạn vẫn có thể tự động thiết lập chiều cao hàng khi không đủ không gian.
Định vị theo tên đường lưới
Thuộc tính mới chỉ có thể sử dụng trong Grid
Có thể sử dụng các thuộc tính tương tự như align-items của flex không chỉ trên trục giao nhau mà còn trên trục chính.
Các thuộc tính FLEX có thể sử dụng 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.
Tự động sắp xếp các hàng - auto-fit, auto-fill
Học cách sắp xếp nhiều cột nhất có thể và xử lý không gian còn lại.
Xây dựng website - bố cục article
Vận dụng các thuộc tính grid đã học để xây dựng một trang web đơn giản.
Ứng dụng Grid và flex
Học cách viết kiểu cho trang web bằng cách sử dụng CSS Grid và flex.
Kiểm tra xem các nhóm và layer trong thiết kế đã được sắp xếp thuận tiện cho việc lập trình hay chưa, đồng thời xác định liệu kiểu dáng hoặc biến đã được phản ánh trong thiết kế hay chưa. Lưu các hình ảnh cần thiết phù hợp với tình huống.
Tham chiếu tên nhóm để tạo các phần lớn trong HTML, đồng thời tham chiếu thiết kế chi tiết để viết các thẻ HTML phù hợp với tính chất của nội dung. Khi đó, hãy tuân thủ các tiêu chuẩn như tối ưu hóa công cụ tìm kiếm và tiêu chuẩn web.
Thêm hướng dẫn phù hợp với các phần tử cần bố trí để dễ dàng kiểm tra độ rộng của hàng và cột.
Viết CSS cho từng phần, phân chia bằng chú thích.
Thông qua các nút, di chuyển giữa các slide hoặc triển khai tính năng tự động chuyển slide bằng thư viện jQuery.
Sử dụng thư viện slide showshow
Cung cấp phần giải thích về tất cả các thuộc tính của flex và các tệp ví dụ thực hành.
Trong thư mục 01_grid có các tệp ví dụ về những thuộc tính cốt lõi của Grid. Bạn có thể vừa xem bài giảng vừa học.
Cung cấp mã nguồn bản hoàn chỉnh. Hãy so sánh với ví dụ bạn đã hoàn thành trong bài học.
Kiến thức cơ bản về Javascript
Học các ví dụ thực tiễn cơ bản về JavaScript thuần.
Học từ những kiến thức cơ bản về jQuery đến các ví dụ thực tế và cách sử dụng những thư viện chính.
Khóa học này dành cho ai?
Dành cho những người 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
Dành cho những ai gặp khó khăn trong quá trình triển khai bản thiết kế thành mã nguồn
Những người muốn xây dựng giao diện người dùng gọn gàng bằng cách sử dụng CSS Grid
Dành cho những ai muốn chuyển từ các phương thức float, flexbox hiện tại sang quản lý bố cục hiệu quả hơn
Những người muốn tự tạo một website gọn gàng và hiện đại
Những người 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?
Kiến thức cơ bản về HTML
Kiến thức cơ bản về CSS
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
Tất cả
24 bài giảng ∙ (4giờ 51phút)
Tài liệu khóa học:
Hãy khám phá các khóa học khác của giảng viên!
Khám phá các khóa học khác trong cùng lĩnh vực!
![[Tiêu chuẩn ra đề năm 2026] Hướng dẫn hoàn hảo cho kỳ thi thực hành Kỹ thuật viên Thiết kế và Phát triển WebHình thu nhỏ khóa học](https://cdn.inflearn.com/public/courses/324878/course_cover/12211037-e74b-46b3-8942-46d465b81bba/webdesign-cover-02.png?w=420)
