Học CSS có thể là một trải nghiệm khó chịu, nhưng ít nhất nó không gây nhàm chán! Một trong những điều tuyệt vời nhất khi học viết mã là những người giỏi viết mã cũng có kỹ năng tạo trò chơi dạy người khác viết mã. Không thể thay thế cho việc thực hành và thử nghiệm trong việc học CSS cơ bản, nhưng trò chơi chắc chắn sẽ hữu ích và các mô hình bố cục mới hơn như lưới và flexbox đặc biệt được hưởng lợi từ mô hình học thực hành.
Dưới đây là một số trò chơi cho phép bạn thành thạo CSS ngay lập tức.
1. CSS Diner:Bộ chọn CSS
Khá cơ bản, phải không? Chọn phần tử, lớp, id… có thể là lớp giả? Còn gì nữa không? Trên thực tế, có nhiều cách để chọn các phần tử hơn bạn nghĩ và CSS Diner muốn hướng dẫn bạn cách sử dụng chúng bằng cách yêu cầu bạn chọn các phần thức ăn bằng CSS. Một số thử thách có thể hơi khó hiểu, nhưng đây là mã hóa - không có gì phải xấu hổ khi truy cập vào Google.
2. Flexbox Zombies
Flexbox Zombies là một trò chơi / khóa học được phát triển cực kỳ tốt, hứa hẹn sẽ dạy bạn cách sử dụng flexbox với một trò chơi trực quan, hấp dẫn và tự cường, chủ yếu xoay quanh việc bạn bắn zombie bằng vũ khí được điều khiển bằng mã flexbox. Nó đưa bạn từ những điều rất cơ bản đến những thứ nâng cao trong suốt một số cấp độ hoàn chỉnh với cốt truyện, đồ họa tuyệt vời và hành động tiêu diệt thây ma - bạn thậm chí có thể quên rằng mình đang học CSS.
Bản thân Flexbox là một công nghệ tuyệt vời để tổ chức nội dung một cách phản ứng theo một chiều và nếu bạn làm bất cứ điều gì với phát triển web front-end, bạn phải tự tìm hiểu nó. Cho dù bạn có đặt nó hay không, Flexbox Zombies là một lý do tuyệt vời để chơi một trò chơi thực sự dạy bạn điều gì đó. Giá như tất cả giáo dục có thể theo cách này, phải không?
Cũng chính người sáng tạo này đã thiết kế một khóa học trò chơi cho CSS Grid có tên là “Grid Critters”. Nó không miễn phí, nhưng nếu bạn thích Flexbox Zombies, bạn có thể chọn bỏ tiền mặt vào nó.
3. Vườn lưới
Cá nhân tôi nghĩ rằng flexbox là tốt, nhưng nó thực sự tỏa sáng trên một chiều (hàng hoặc cột), vì vậy, đối với các dự án và mẫu lớn hơn, bạn sẽ muốn chuyển sang dạng lưới (có thể với một số vùng chứa flexbox bên trong các ô lưới). Một khi bạn đã tìm ra, nó sẽ gọn gàng và sạch sẽ và đáng kinh ngạc, nhưng có thể có một chút đường cong học tập mà Grid Garden (và Grid Critters nói trên) có thể giúp đỡ.
Grid Garden là một trò chơi miễn phí, nơi bạn phải bố trí một khu vườn để cà rốt của bạn được tưới nước và cỏ dại đang bị nhiễm độc - và hóa ra lưới đó là hoàn hảo cho nhiệm vụ này! Nó sẽ cung cấp cho bạn kiến thức chắc chắn về vị trí lưới cơ bản mà sau đó bạn có thể áp dụng cho bố cục trang web của riêng mình
4. Phòng thủ Flexbox
Bạn đã biết những điều cơ bản về flexbox nhưng không thể giữ cho "căn đều" và "căn chỉnh" khá thẳng? Flexbox Defense là một hướng dẫn flexbox được ngụy trang dưới dạng một trò chơi phòng thủ tháp sẽ đảm bảo rằng bạn nhớ rằng bạn nhớ nội dung biện minh của mình và tự căn chỉnh - hoặc chết. Nhưng bạn chỉ có thể thử lại. Nếu bạn chưa bao giờ là người yêu thích những trò chơi chỉ chấp nhận một câu trả lời đúng, bạn sẽ thích trò chơi này, vì nó cho phép bạn định vị các tháp ở bất cứ đâu bạn thích và thành công hay thất bại theo ý bạn.
5. Flexbox Froggy
Bạn có thể có được một buổi chiều chơi game thoải mái chỉ bằng cách xem qua các hướng dẫn Flexbox hiện có, nhưng có lẽ tốt hơn nên giải phóng nó trong vài ngày hoặc vài tuần chỉ để đảm bảo rằng bạn nhận được nhiều bộ nhớ làm mới. Flexbox Froggy là sự lựa chọn hoàn hảo cho điều đó - nó không đưa bạn lên từ con số 0, nhưng nếu bạn thấy mình quên lệnh, bạn có thể lướt qua trò chơi này sau vài phút để lấy lại tốc độ.
6. Trò chơi CodePip
Nếu bạn đã xem qua Grid Garden và Flexbox Froggy, bạn đã thấy một số ví dụ về công việc của CodePip. Đó chỉ là hai trò chơi miễn phí mà họ cung cấp. Nếu bạn đăng ký tài khoản chuyên nghiệp trên trang web của họ, họ cũng có các trò chơi từ đánh giá CSS chung cho đến JavaScript.
Điều này sẽ dạy cho tôi bao nhiêu CSS?
Chạy qua các trò chơi này có thể giúp bạn học khá tốt một số khái niệm cơ bản - đặc biệt nếu bạn muốn học flexbox. Tuy nhiên, cuối cùng thì trò chơi chỉ có thể dạy bạn gõ những từ nào. Bạn sẽ phải đưa chúng vào thực tế nếu bạn muốn thực sự tìm ra cách sử dụng chúng. Hãy kiếm cho mình một trình soạn thảo mã tốt và một số ý tưởng mà bạn muốn triển khai và bắt đầu lộn xộn!