การเรียน CSS อาจทำให้หงุดหงิด แต่มันไม่จำเป็นต้องน่าเบื่อ! สิ่งดีๆ ของการเรียนเขียนโค้ดคือ คนที่เก่งเขียนโค้ดก็มีทักษะสร้างเกมสอนเขียนโค้ดให้ผู้อื่น ไม่มีอะไรแทนการฝึกปฏิบัติและทดลองในการเรียน CSS พื้นฐาน แต่เกมช่วยได้แน่นอน โดยเฉพาะโมเดลเลย์เอาต์ใหม่ๆ เช่น Grid และ Flexbox ที่ได้ประโยชน์มากจากการเรียนรู้แบบลงมือทำ
นี่คือเกมที่ช่วยให้คุณเก่ง CSS ได้ในเวลาอันรวดเร็ว
1. CSS Diner: CSS Selectors
ค่อนข้างพื้นฐานใช่ไหม? เลือก elements, classes, ids... หรือ pseudo-classes? อะไรอีก? จริงๆ แล้วมีวิธีเลือก elements มากกว่าที่คุณคิด และ CSS Diner ต้องการสอนวิธีใช้โดยให้คุณเลือกชิ้นอาหารด้วย CSS บางระดับอาจสับสน แต่เป็นการเขียนโค้ด - ไม่ต้องอับอายไป Google หาคำตอบ
2. Flexbox Zombies
Flexbox Zombies เป็นเกม/คอร์สที่พัฒนาอย่างยอดเยี่ยม สัญญาว่าสอนการใช้ Flexbox ด้วยเกมที่เข้าใจง่าย สนุก และเสริมสร้างตัวเอง ซึ่งส่วนใหญ่เกี่ยวกับการยิงซอมบี้ด้วยอาวุธที่ควบคุมด้วยโค้ด Flexbox นำคุณจากพื้นฐานจนถึงระดับขั้นสูงผ่านหลายระดับ พร้อมเรื่องราว กราฟิกสวย และการฆ่าซอมบี้ - คุณอาจลืมว่ากำลังเรียน CSS
Flexbox เองเป็นเทคโนโลยียอดเยี่ยมสำหรับจัดเรียงเนื้อหา responsive ตามมิติเดียว และหากคุณทำอะไรกับ front-end web development คุณควรเรียนมัน ไม่ว่าคุณจะเลื่อนมาหรือไม่ Flexbox Zombies เป็นข้ออ้างที่ดีสำหรับการเล่นเกมที่สอนจริง หวังว่าการศึกษาทุกอย่างจะเป็นแบบนี้!
ผู้สร้างคนเดียวกันยังออกแบบเกม-คอร์สสำหรับ CSS Grid ชื่อ "Grid Critters" ไม่ฟรี แต่หากชอบ Flexbox Zombies อาจเลือกจ่ายเงินซื้อ
3. Grid Garden
ส่วนตัวคิดว่า Flexbox ใช้ได้ แต่มันส่องสว่างในเลย์เอาต์มิติเดียว (แถว หรือ คอลัมน์) ดังนั้นโปรเจกต์ใหญ่และเทมเพลต คุณจะอยากใช้ Grid (อาจมี Flexbox containers ภายในเซลล์ Grid) เมื่อเข้าใจแล้ว มันสะอาด สะดวก และยอดเยี่ยม แต่มี learning curve ซึ่ง Grid Garden (และ Grid Critters ที่กล่าวมา) ช่วยได้
Grid Garden เป็นเกมฟรี ที่คุณต้องจัดวางสวน เพื่อให้แครอทได้น้ำ และวัชพืชได้ยาพิษ - และ Grid เหมาะกับงานนี้อย่างยิ่ง! จะให้คุณเข้าใจการจัดตำแหน่ง Grid พื้นฐานที่นำไปใช้ในเลย์เอาต์เว็บของตัวเองได้
4. Flexbox Defense
รู้พื้นฐาน Flexbox แล้วแต่มุ่งไม่คุ้น "justify" และ "align"? Flexbox Defense เป็น tutorial Flexbox แปรรูปเป็นเกมป้องกันหอคอย จะทำให้คุณจำ justify-content และ align-self ได้ - หรือตาย แต่คุณลองใหม่ได้ หากคุณไม่ชอบเกมที่รับคำตอบเดียว คุณจะชอบเกมนี้ เนื่องจากอนุญาตให้วางหอคอยที่ไหนก็ได้ และประสบความสำเร็จหรือล้มเหลวด้วยตัวเอง
5. Flexbox Froggy
คุณอาจเล่น tutorial Flexbox ที่มีอยู่ครบช่วงบ่ายได้ แต่อาจดีกว่าที่จะกระจายไปหลายวันหรือสัปดาห์ เพื่อให้แน่ใจว่าคุณได้รีเฟรชความจำมากพอ Flexbox Froggy เหมาะสำหรับนั้น - มันไม่สอนจากศูนย์ แต่หากคุณลืมคำสั่ง สามารถ衝ผ่านเกมนี้ในไม่กี่นาทีเพื่อกลับมาคุ้นเคยได้
6. CodePip Games
หากคุณลอง Grid Garden และ Flexbox Froggy คุณได้เห็นตัวอย่างงานของ CodePip แล้ว นั่นคือแค่ 2 เกมฟรีที่พวกเขาเสนอ หากสมัครโปรบนไซต์ของพวกเขา ยังมีเกมตั้งแต่ CSS ทั่วไปถึง JavaScript
เกมเหล่านี้สอน CSS ได้มากแค่ไหน?
การเล่นเกมเหล่านี้ช่วยเรียนรู้แนวคิดพื้นฐานได้ค่อนข้างดี - โดยเฉพาะหากอยากเรียน Flexbox แต่สุดท้ายเกมสอนได้แค่ "คำสั่งที่ต้องพิมพ์" คุณต้องนำไปปฏิบัติจริงหากอยากเข้าใจจริงๆ ว่าใช้อย่างไร หา code editor ที่ดี และไอเดียที่อยากทำ แล้วเริ่มเล่นกับมัน!
