Học CSS có thể令人沮丧, nhưng ít nhất không phải nhàm chán! Một điều tuyệt vời về học lập trình là những người giỏi code cũng có kỹ năng tạo trò chơi dạy người khác code. Không có gì thay thế thực hành và thử nghiệm khi học CSS cơ bản, nhưng trò chơi chắc chắn giúp ích, và các mô hình bố cục mới như grid và flexbox đặc biệt hưởng lợi từ mô hình học tập thực hành.
Dưới đây là các trò chơi giúp bạn thành thạo CSS trong thời gian ngắn.
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à pseudo-class? Còn gì nữa? Thực ra có nhiều cách chọn phần tử hơn bạn nghĩ, và CSS Diner muốn dạy bạn cách dùng chúng bằng cách yêu cầu chọn món ăn bằng CSS. Một số thử thách hơi rối, nhưng đây là code - không xấu hổ gì khi google.
2. Flexbox Zombies
Flexbox Zombies là trò chơi/khóa học phát triển cực tốt, hứa hẹn dạy bạn dùng flexbox qua trò chơi trực quan, hấp dẫn và tự củng cố, chủ yếu xoay quanh việc bắn zombie bằng vũ khí được điều khiển bằng code flexbox. Nó đưa bạn từ cơ bản đến nâng cao qua nhiều cấp độ có cốt truyện, đồ họa đẹp, và hành động chém zombie - bạn có thể quên rằng mình đang học CSS.
Flexbox bản thân là công nghệ tuyệt vời tổ chức nội dung phản hồi theo một chiều, và nếu bạn làm phát triển front-end web, bạn nợ bản thân việc học nó. Dù bạn đã trì hoãn hay không, Flexbox Zombies là cái cớ tuyệt vời chơi game thực sự dạy được điều gì. Nếu chỉ mọi giáo dục đều như vậy!
Người tạo ra cũng thiết kế trò chơi-khóa học cho CSS Grid tên "Grid Critters". Nó không miễn phí, nhưng nếu bạn thích Flexbox Zombies, có thể chi tiền mua.
3. Grid Garden
Cá nhân tôi thấy flexbox ổn, nhưng nó thực sự tỏa sáng trên bố cục một chiều (hàng HOẶC cột), nên cho dự án và mẫu lớn hơn, bạn muốn chuyển sang grid (có thể với container flexbox bên trong ô grid). Khi đã hiểu, nó gọn gàng, sạch sẽ và tuyệt vời, nhưng có đường cong học tập, và Grid Garden (và Grid Critters đã nhắc) có thể giúp.
Grid Garden là trò chơi miễn phí nơi bạn phải bố trí vườn để cà rốt được tưới và cỏ dại bị độc - và grid hoàn hảo cho nhiệm vụ này! Nó sẽ cho bạn nắm vững định vị grid cơ bản để áp dụng cho bố cục trang web của mình.
4. Flexbox Defense
Đã biết cơ bản flexbox nhưng không phân biệt được "justify" và "align"? Flexbox Defense là hướng dẫn flexbox ngụy trang thành game bảo vệ tháp, đảm bảo bạn nhớ justify-content và align-self - hoặc chết. Nhưng bạn có thể thử lại. Nếu bạn không thích game chỉ chấp nhận một đáp án đúng, bạn sẽ thích cái này, vì nó cho bạn đặt tháp ở đâu tùy ý và thành công/thất bại dựa trên quyết định của bạn.
5. Flexbox Froggy
Bạn có thể dành một chiều chơi game qua các hướng dẫn flexbox hiện có, nhưng tốt hơn nên chia ra vài ngày/tuần để làm mới trí nhớ. Flexbox Froggy hoàn hảo cho việc đó - nó không đưa bạn từ con số 0, nhưng nếu bạn quên lệnh, có thể lướt qua game vài phút để nắm lại.
6. CodePip Games
Nếu bạn xem Grid Garden và Flexbox Froggy, bạn đã thấy ví dụ công việc của CodePip. Đó chỉ là hai game miễn phí họ cung cấp. Nếu đăng ký tài khoản pro trên trang của họ, họ còn có game từ ôn tập CSS chung đến JavaScript.
Những Game Này Dạy Duốc CSS Bao Nhiêu?
Chạy qua các game này giúp học tốt một số khái niệm cơ bản - đặc biệt nếu muốn học flexbox. Tuy nhiên, game chỉ dạy bạn gõ từ khóa nào. Bạn phải đưa vào thực tế nếu muốn thực sự hiểu cách dùng. Hãy lấy một trình soạn thảo code tốt và ý tưởng muốn triển khai, rồi bắt đầu làm!