有夢想，有乾貨，微信搜尋 【大遷世界】 關注這個在凌晨還在刷碗的刷碗智。
本文 GitHub https://github.com/qq449245884/xiaozhi 已收錄，有一線大廠面試完整考點、資料以及我的系列文章。
學透 CSS可能是一個相當大的挑戰。但沒有啥捷徑，只能多練多寫。不過還是有一些有趣的方法來學習的，就是通過遊戲。本文將重點介紹十種你可以邊玩邊學習CSS的神奇遊戲。
1. Flexbox froggy
《Flexbox froggy》這是一個非常有趣遊戲，主要用來學習flex佈局。它有 24 個級別，難度逐漸加深。我們可以使用flex 相關的屬性將青蛙放到正確的位置，即可過關。
2. Flexbox defense
地址：http://www.flexboxdefense.com/
《Flexbox defense》也是一個學習 flex佈局的遊戲，在這個遊戲中，我們必須通過 flex 佈局，將炮臺移到正確的位置，以保衛一條道路不被攻擊。它有 12 個級別，難度逐漸加深，考查 flex 的程式也越深。
3. Knights of the Flexbox Table
地址：https://knightsoftheflexboxta...
也是一個學習 flex佈局的遊戲，不過它是採用 TailwindCSS 風格，如果你喜歡用 TailwindCSS，那麼這個遊戲適合你，它有 18 個級別，難度逐漸加深，考查 flex 的程式也越深。
4. Flex Box adventure
地址：https://codingfantasy.com/gam...
《 Flex Box adventure》也是一個學習 flex佈局的遊戲。它有 24關，除了風格不同外，還有一個比較人性化的體驗，就是有提示，如果我們想不出答案，可通過提示，找到我們想要的正確答案。
5. Flexbox zombies
地址：https://mastery.games/flexbox...
《 Flexbox zombies》也是一個學習 flex佈局的遊戲。這款遊戲的畫面設定得超級好!我被這個故事情節的酷炫程度給震驚了。
6. Grid garden
《Grid garden》是學習CSS網格的一種超級有趣的方式。我們必須使用網格佈局來確保所有的胡蘿蔔得到水才能過關。它有28個關卡，可以練習大量的CSS網格選項!
7. Grid attack
地址：https://codingfantasy.com/gam...
這款遊戲是由《 Flexbox adventure 》的同一個作者開發的，遊戲體驗也非常的好。
在遊戲中，我們必須使用CSS網格來改變土地，使惡魔無法生存。它有80個關卡，讓我們可以選擇超級有趣的方式學習CSS網格。
8. CSS Diner
地址：https://flukeout.github.io/
CSS Diner 是一個學習CSS選擇器的遊戲。通過題目，我們需要寫出具體的css 選擇器來選擇餐桌上指定的物品才算過關。當我們選中物品時，會出現有趣的動畫特效，來增加我們的遊戲體驗。
9. Guess CSS
這個遊戲與CSS Diner非常相似，給出一個畫面，然後提供3上選項，我們根據已有的知識在腦海裡構造我們的答案，然後從3個選項，選擇一個我們認為的正確答案即可過關。
10. CSS Speedrun
地址：https://css-speedrun.netlify....
在這個遊戲中，我們要根據箭頭的標誌，然後寫出對應的CSS選擇器，這裡有題目的計時，我們必須儘可能快速完成它，對那些喜歡在遊戲中增加難度的開發者來說是一個很大的挑戰。。
這個遊戲有十個級別，你的以多玩幾次，以提你解題速度。我在第三題就卡住了，大家道怎麼解嗎。
編輯中可能存在的bug沒法實時知道，事後為了解決這些bug,花了大量的時間進行log 除錯，這邊順便給大家推薦一個好用的BUG監控工具 Fundebug。
參考：https://dev.to/dailydevtips1/...
交流
有夢想，有乾貨，微信搜尋 【大遷世界】 關注這個在凌晨還在刷碗的刷碗智。
本文 GitHub https://github.com/qq449245884/xiaozhi 已收錄，有一線大廠面試完整考點、資料以及我的系列文章。
