การเรียนรู้ CSS อาจเป็นประสบการณ์ที่น่าผิดหวัง แต่อย่างน้อยก็ไม่ต้องน่าเบื่ออีกต่อไป! สิ่งที่ดีที่สุดประการหนึ่งเกี่ยวกับการเรียนรู้การเขียนโค้ดก็คือคนที่เก่งด้านการเขียนโค้ดก็มีทักษะในการสร้างเกมที่สอนคนอื่นให้เขียนโค้ดด้วย ไม่มีอะไรมาทดแทนการฝึกฝนและการทดลองในการเรียนรู้ CSS พื้นฐานได้ แต่เกมช่วยได้อย่างแน่นอน และโมเดลเลย์เอาต์ที่ใหม่กว่า เช่น grid และ flexbox จะได้รับประโยชน์จากโมเดลการเรียนรู้แบบลงมือปฏิบัติเป็นพิเศษ
นี่คือเกมบางเกมที่ช่วยให้คุณเชี่ยวชาญ CSS ได้ในเวลาไม่นาน
1. CSS Diner:ตัวเลือก CSS
ค่อนข้างพื้นฐานใช่มั้ย เลือกองค์ประกอบ คลาส รหัส … อาจเป็นคลาสหลอก? มีอะไรอีกบ้าง? จริงๆ แล้ว มีหลายวิธีในการเลือกองค์ประกอบมากกว่าที่คุณคิด และ CSS Diner ต้องการสอนวิธีใช้องค์ประกอบเหล่านี้โดยขอให้คุณเลือกชิ้นส่วนของอาหารด้วย CSS ความท้าทายบางอย่างอาจทำให้สับสนเล็กน้อย แต่นี่เป็นการเขียนโค้ด — ไม่ใช่เรื่องน่าอายที่จะค้นหาใน Google
2. ซอมบี้เฟล็กซ์บ็อกซ์
Flexbox Zombies เป็นเกม/หลักสูตรที่ได้รับการพัฒนามาอย่างดีอย่างเหลือเชื่อ ซึ่งสัญญาว่าจะสอนวิธีใช้ flexbox ให้กับคุณด้วยเกมที่ใช้งานง่าย น่ามีส่วนร่วม และเสริมกำลังตัวเอง ซึ่งส่วนใหญ่หมุนรอบตัวคุณในการยิงซอมบี้ด้วยอาวุธที่ควบคุมโดยโค้ด flexbox จะพาคุณตั้งแต่พื้นฐานไปจนถึงขั้นสูงในหลายระดับที่มาพร้อมกับเนื้อเรื่อง กราฟิกสุดเจ๋ง และแอ็คชั่นสังหารซอมบี้ คุณอาจลืมไปเลยว่ากำลังเรียนรู้ CSS
Flexbox นั้นเป็นเทคโนโลยีที่ยอดเยี่ยมสำหรับการจัดระเบียบเนื้อหาที่ตอบสนองในมิติเดียว และหากคุณทำอะไรกับการพัฒนาเว็บส่วนหน้า คุณจะต้องเรียนรู้มันด้วยตัวเอง ไม่ว่าคุณจะเลิกเล่นแล้วหรือไม่ก็ตาม Flexbox Zombies เป็นข้อแก้ตัวที่ยอดเยี่ยมในการเล่นเกมที่สอนอะไรบางอย่างแก่คุณจริงๆ ถ้าการศึกษาทั้งหมดเป็นแบบนี้ได้ใช่ไหม
ผู้สร้างคนเดียวกันยังได้ออกแบบหลักสูตรเกมสำหรับ CSS Grid ที่เรียกว่า "Grid Critters" ไม่ฟรี แต่ถ้าคุณชอบ Flexbox Zombies คุณอาจเลือกที่จะทิ้งเงินสดไว้
3. สวนกริด
โดยส่วนตัวแล้ว ฉันคิดว่า flexbox นั้นใช้ได้ แต่มันฉายแสงในมิติเดียวจริงๆ (แถว หรือ คอลัมน์) เลย์เอาต์ ดังนั้นสำหรับโปรเจ็กต์และเทมเพลตที่ใหญ่กว่า คุณจะต้องเปลี่ยนเป็นกริด (อาจมีคอนเทนเนอร์ flexbox บางตัวอยู่ภายในเซลล์กริด) เมื่อคุณเข้าใจแล้ว ก็เรียบร้อย สะอาด และน่าทึ่ง แต่อาจมีช่วงการเรียนรู้เล็กน้อยซึ่ง Grid Garden (และ Grid Critters ดังกล่าว) สามารถช่วยได้
Grid Garden เป็นเกมฟรีที่คุณต้องจัดสวนเพื่อให้แครอทของคุณถูกรดน้ำและวัชพืชถูกวางยาพิษ - และปรากฎว่ากริดนั้นสมบูรณ์แบบสำหรับงานนี้! มันจะช่วยให้คุณเข้าใจอย่างถ่องแท้เกี่ยวกับการวางตำแหน่งกริดพื้นฐาน ที่คุณสามารถนำไปใช้กับเลย์เอาต์ไซต์ของคุณเองได้
4. เฟล็กบ็อกซ์ ดีเฟนซ์
รู้พื้นฐานของ flexbox แล้ว แต่ไม่สามารถ "ปรับ" และ "จัดตำแหน่ง" ให้ตรงได้ใช่หรือไม่ Flexbox Defense เป็นบทช่วยสอน flexbox ที่ปลอมตัวเป็นเกมป้องกันหอคอยที่จะทำให้คุณจำได้ว่าคุณจำเนื้อหาที่มีเหตุผลและปรับตัวเอง - หรือตาย แต่คุณสามารถลองอีกครั้ง หากคุณไม่เคยเป็นแฟนของเกมเหล่านั้นที่ยอมรับคำตอบที่ถูกต้องเพียงข้อเดียว คุณจะต้องชอบเกมนี้ เพราะจะช่วยให้คุณสามารถวางตำแหน่งหอคอยได้ทุกที่ที่คุณต้องการ และประสบความสำเร็จหรือล้มเหลวได้ด้วยตัวเอง
5. กบเฟล็กบ็อกซ์
คุณอาจเล่นเกมยามบ่ายได้สบายๆ เพียงแค่อ่านบทแนะนำการใช้งาน Flexbox ที่มีอยู่ แต่ควรเว้นช่วงสองสามวันหรือสัปดาห์เพื่อให้แน่ใจว่าคุณได้รับหน่วยความจำรีเฟรชจำนวนมาก Flexbox Froggy นั้นสมบูรณ์แบบสำหรับเรื่องนั้น มันไม่ได้ทำให้คุณเพิ่มขึ้นจากศูนย์ แต่ถ้าคุณพบว่าตัวเองลืมคำสั่ง คุณสามารถรีบผ่านเกมนี้ได้ในเวลาไม่กี่นาทีเพื่อให้ตัวเองกลับมาทำงานได้เร็ว
6. เกม CodePip
หากคุณลองใช้ Grid Garden และ Flexbox Froggy คุณเคยเห็นตัวอย่างงานของ CodePip แล้ว นี่เป็นเพียงสองเกมฟรีที่พวกเขาเสนอ หากคุณลงชื่อสมัครใช้บัญชีมือโปรบนไซต์ พวกเขายังมีเกมที่มีตั้งแต่การตรวจทาน CSS ทั่วไปไปจนถึง JavaScript
สิ่งนี้จะสอน CSS ได้มากน้อยเพียงใด
การเล่นเกมเหล่านี้จะช่วยให้คุณเรียนรู้แนวคิดพื้นฐานได้ดีทีเดียว โดยเฉพาะอย่างยิ่งหากคุณต้องการเรียนรู้ flexbox ท้ายที่สุดแล้ว เกมสามารถสอนคุณได้เท่านั้นว่าควรพิมพ์คำใด คุณจะต้องนำไปปฏิบัติหากต้องการทราบวิธีใช้งานจริงๆ รับตัวแก้ไขโค้ดที่ดีและแนวคิดบางอย่างที่คุณต้องการนำไปใช้และเริ่มยุ่ง!
