CSS 各種小遊戲 (css選擇器, flex, grid)

CSS Diner (CSS selector)

專注在選擇器的介紹，很推薦玩一次看看到底有哪些選擇器
https://flukeout.github.io/

Image Not Showing Possible Reasons

The image file may be corrupted
The server hosting the image is unavailable
The image path is incorrect
The image format is not supported

可以搭配其他教學 (非遊戲)

30個你必須記住的CSS選擇器

https://code.tutsplus.com/zh-hant/tutorials/the-30-css-selectors-you-must-memorize–net-16048

CSS 專家密技

https://github.com/AllThingsSmitty/css-protips/tree/master/translations/zh-TW

Flex

支援度：https://caniuse.com/#search=flex
教學：http://www.oxxostudio.tw/articles/201501/css-flexbox.html

flexbox froggy (有多國語言含中文)

介紹各種flex屬性，最後一關難度會暴增，讓你把前面每一招混合起來融會貫通用的
http://flexboxfroggy.com/#zh-tw

Image Not Showing Possible Reasons

The image file may be corrupted
The server hosting the image is unavailable
The image path is incorrect
The image format is not supported

Flexbox Defense

跟 froggy類似，不過是塔防型態，遊戲樂趣看起來比較高
http://www.flexboxdefense.com

Image Not Showing Possible Reasons

The image file may be corrupted
The server hosting the image is unavailable
The image path is incorrect
The image format is not supported

Flex Pirate 擊倒海盜 (六角學院)

六角學院出品有品質保證，遊戲性也很高，排行榜模式是特色
https://w3c.hexschool.com/flexbox/cc1c1b71

Image Not Showing Possible Reasons

The image file may be corrupted
The server hosting the image is unavailable
The image path is incorrect
The image format is not supported

flexbox-zombies (只有英文)

關卡數非常多，進展曲線也比較慢，玩的時間可以拉蠻長的
https://mastery.games/p/flexbox-zombies

Image Not Showing Possible Reasons

The image file may be corrupted
The server hosting the image is unavailable
The image path is incorrect
The image format is not supported

Grid

支援度：https://caniuse.com/#search=grid
教學：https://blog.techbridge.cc/2017/02/03/css-grid-intro/

Grid Garden

跟flexbox froggy類似，就不做太多解說了
http://cssgridgarden.com/#zh-tw

Image Not Showing Possible Reasons

The image file may be corrupted
The server hosting the image is unavailable
The image path is incorrect
The image format is not supported

tags: `前端`