Dạy cho mình CSS Flexbox với Trò chơi Froggy Flexbox

Trước đây, chúng tôi đã giới thiệu về flexbox và những điều cơ bản về cách thức hoạt động của nó. Nhưng thực sự việc áp dụng flexbox vào quy trình công việc của bạn có thể khó khăn vì đây là một bổ sung phức tạp cho thông số CSS.

Với Flexbox Froggy bạn có thể tìm hiểu tất cả những điều cơ bản của flexbox với một webgame vui nhộn liên quan đến ếch và lilypads. Tôi biết nghe có vẻ điên rồ nhưng đây thực sự là một ứng dụng web tuyệt vời.

Bạn bắt đầu từ cấp 1 và từ từ làm việc theo cách của bạn thông qua 24 cấp độ khác nhau giảng dạy nhiều khía cạnh của định hướng flexbox. Các cấp độ bắt đầu dễ dàng bằng cách yêu cầu bạn sắp xếp một hoặc hai con ếch dọc theo một thùng chứa. Những bài học đầu tiên cũng bao gồm những lời khuyên và gợi ý để giúp bạn trên đường đi.

Nhưng một khi bạn vượt qua bài học 10 điều thực sự nóng lên. Bạn sẽ cần học cách làm lại-sắp xếp các mục trong một container, làm thế nào để tổ chức Nội dung theo chiều dọc, và cách tạo khoảng cách đều nhau giữa các hàng nội dung khác nhau.

Những chú ếch nhỏ dễ thương có thể dụ bạn vào, nhưng hãy yên tâm rằng đây là một trò chơi khó.

Tuy nhiên, từ người mới hoàn thành đến các nhà phát triển web có kinh nghiệm hơn, Trò chơi được thực hiện cho tất cả các cấp. Những bài học đầu tiên rất dễ dàng và những bài học sau có thể khiến bạn phải cúi mình trên màn hình với những lọn tóc bên cạnh.

Mã nguồn trò chơi đầy đủ có sẵn miễn phí trên GitHub để bạn có thể tải xuống và chơi tại địa phương nếu muốn.

Cộng với webapp là đa ngôn ngữ cung cấp 20 ngôn ngữ bao gồm tiếng Anh, tiếng Pháp, tiếng Đức, tiếng Ý, tiếng Trung, tiếng Nhật và tiếng Nga (cộng với nhiều người khác).

Tôi sẽ thừa nhận rằng sắp xếp lại ếch sẽ không ngay lập tức biến bạn thành chủ của flexbox. Nhưng những bài học này có nghĩa là làm quen với cú pháp flexbox để bạn có thể cảm thấy thoải mái hơn khi làm việc trong các tình huống thực tế.

Nếu bạn là một nhà phát triển web ở mọi cấp độ kỹ năng bạn chắc chắn nên kiểm tra Flexbox Froggy. Nó hoàn toàn miễn phí, khá thú vị để chơi và giáo dục đáng ngạc nhiên.