[CSS] 10 trang web game giúp bạn giỏi CSS hơn

1. Flexbox Froggy: https://flexboxfroggy.com/#vi

Game này có 24 level và sẽ giúp bạn học và thực hành về flexbox.

Trong game, bạn sẽ phải sử dụng CSS để đặt những con ếch vào đúng vị trí (cùng màu)

2. Flexbox Defense: http://www.flexboxdefense.com/

Bạn sẽ phải sử dụng Flexbox CSS để đặt các tụ súng vào nơi thích hợp, từ đó giúp loại bỏ tất cả kẻ địch.

3. Knights of the Flexbox Table: https://knightsoftheflexboxtable.com/

Game sẽ giúp bạn luyện tập Tailwind CSS. Bạn sẽ phải sử dụng các class name của Tailwind để đặt các hiệp sĩ đúng kho báu.

4. Flex Box adventure: https://codingfantasy.com/games/flexboxadventure/play

Game này thì khá giống Flexbox Froggy, bạn sẽ phải sử dụng CSS (flexbox) để vượt qua 24 levels.

5. Flexbox zombies: https://mastery.games/flexboxzombies

Game cũng giúp bạn học Flexbox, nhưng với đồ họa rất đỉnh, cộng với có cốt truyện sẽ giúp dễ hiểu hơn.

6. Grid Garden: https://cssgridgarden.com/

Học và thực hành về Grid Layout để vượt qua 28 levels. Bạn sẽ phải tưới nước đúng cho các củ cà rốt, cũng như xóa sổ cỏ dại.

7. Grid attack: https://codingfantasy.com/games/css-grid-attack/play

Cũng là một game để bạn thực hành về Grid Layout (80 levels).

8. CSS Diner: https://flukeout.github.io/

Game này sẽ giúp bạn học về các CSS Selector với 32 levels

9. Guess CSS: https://www.guess-css.app/

Game sẽ đưa ra từng layout, và bạn sẽ phải chọn đáp án có CSS đúng. Tất cả kiến thức về CSS, rất đáng để học.

10. CSS Speedrun: https://css-speedrun.netlify.app/

Thêm một game selector, nhưng có tính thời gian và có thể sử dụng gợi ý nếu cảm thấy quá khó.

SteveBlog