Hướng dẫn này dạy bạn Học CSS từ cơ bản đến nâng cao thông qua 14 màn hình tương tác. Bạn sẽ học tất cả các khái niệm chính trong khi xây dựng ba bố cục tuyệt vời: một trang web, một lưới hình ảnh và một bài báo. Ngoài ra, bạn sẽ học cách kết hợp CSS Grid với Flexbox.
Nội dung
Bạn sẽ học được gì?
- Các nguyên tắc cơ bản về CSS Grid
- Bắt đầu với lưới
- Lưới đáp ứng
- Đơn vị phân số
- Nói lại
- Định vị các mục
- Khu vực mẫu
- Tự động điều chỉnh
- nhỏ nhất lớn nhất
- Các hàng ngầm định
- Dòng được đặt tên
- biện minh-các mục
- căn chỉnh các mục
- tự động điều chỉnh so với tự động điền
- Tạo bố cục bài viết
- Một lưới hình ảnh tuyệt vời
Điều kiện để học được tốt nhất
Trước khi tham gia khóa học này, bạn nên hiểu cơ bản về HTML và CSS. Đây là tài nguyên được đề xuất của chúng tôi để giúp bạn bắt kịp tốc độ. Ngoài ra bạn cần hiểu về tiếng anh vì các bài giảng sẽ giảng bằng tiếng anh. Nếu đã xác định theo ngành lập trình thì tiếng anh là môn bắt buộc các bạn phải học. Vì tất cả tài liệu có ích đều bằng tiếng anh.
Tại sao khóa học này lại thành công
Mô-đun CSS Grid giúp tạo bố cục trang web dễ dàng hơn bao giờ hết. Nó đơn giản hóa cả HTML và CSS của bạn, đồng thời cho phép bạn kiểm soát nhiều hơn đối với bố cục của mình. Bạn có thể sử dụng nó mà không cần bất kỳ khuôn khổ nào, vì mô-đun CSS Grid là bản địa của trình duyệt.
Vì vậy, nếu bạn muốn luôn cập nhật với tư cách là nhà phát triển giao diện người dùng, bạn sẽ cần học cách sử dụng CSS Grid! May mắn thay, nó không khó. Và khóa học này dạy cho bạn tất cả những gì bạn cần biết. Tất nhiên là miễn phí.
Nội dung khóa học
Khóa học này bao gồm ba phần. Hai phần đầu tiên sẽ dạy cho bạn những khái niệm cốt lõi mà bạn cần biết để bắt đầu. Cùng nhau, chúng tôi sẽ xây dựng cả bố cục trang web và lưới hình ảnh cực kỳ thú vị.
Trong phần thưởng, bạn sẽ học cách tạo bố cục bài viết bằng CSS Grid cùng với một số khái niệm nâng cao hơn.
Những gì bạn sẽ học
- Các nguyên tắc cơ bản về CSS Grid
- Lưới đầu tiên của bạn
- Lưới đáp ứng
- Cách tạo trang, lưới hình ảnh và bài viết
- Cách nhanh chóng tạo mẫu trang web
- Cách sử dụng Grid với Flexbox
- Các khái niệm nâng cao
Bạn sẽ thành thạo các phần sau của CSS Grid khi hoàn thành khóa học:
- hiển thị: lưới, khoảng cách lưới
- lưới-mẫu, lưới-mẫu-cột, lưới-mẫu-hàng
- fr, nói lại, nhỏ nhất lớn nhất, tự động phù hợp, tự động điền
- lưới-tự động-hàng
- lưới cột, hàng lưới
- lưới-mẫu-khu vực và vùng lưới
- biện minh-các mục, căn chỉnh các mục
- biện minh cho bản thân, tự căn chỉnh
Và hãy nhớ, đây không phải là một khóa học video thông thường, mà là một khóa học Scrimba! Có nghĩa là bạn có thể tương tác với mã bên trong các hướng dẫn bất cứ khi nào bạn muốn. Điều này làm cho việc học tập trở nên thú vị hơn rất nhiều!
Học CSS từ cơ bản đến nâng cao
Đầu tiên các bạn truy cập vào đường link phía dưới:
Sau đó bắt đầu mở khoá khoá học. Nếu bạn nào có tài khoản thì cần đăng nhập để học. Nếu chưa các bạn có thể đăng ký 1 tài khoản mới rất dễ dàng.
Câu hỏi thường gặp?
Bạn không chỉ có thể tạo các bố cục mà trước đây không thể thực hiện được nếu không giới thiệu JavaScript, mà mã của bạn sẽ dễ bảo trì và dễ hiểu hơn. Việc hoán đổi Bootstrap bằng CSS Grid sẽ làm cho HTML của bạn sạch hơn. Mặc dù đây không phải là lợi ích quan trọng nhất, nhưng nó có thể là lợi ích đầu tiên bạn sẽ nhận thấy.
Flexbox được tạo cho bố cục một chiều và Grid được tạo cho bố cục hai chiều. Điều này có nghĩa là nếu bạn sắp xếp các mục theo một hướng (ví dụ: ba nút bên trong tiêu đề), thì bạn nên sử dụng Flexbox. Nó sẽ cung cấp cho bạn sự linh hoạt hơn CSS Grid. Nó cũng sẽ dễ bảo trì hơn và yêu cầu ít mã hơn. Tuy nhiên, nếu bạn định tạo toàn bộ bố cục theo hai chiều - với cả hàng và cột - thì bạn nên sử dụng CSS Grid. Tùy thuộc vào trường hợp sử dụng của bạn, cái này có thể phù hợp hơn cái kia. CSS có tốt hơn bootstrap không?
CSS có tốt hơn Flexbox không?
