Skip to main content

สารจากผู้เขียน

ในการที่เราจะออกแบบเว็บไซต์สักเว็บไซต์หนึ่ง จำเป็นต้องมีทักษะเกี่ยวกับ HTML และ CSS ซึ่ง CSS ก็เปรียบเสมือนหน้าตาและส่วนตกแต่งของเว็บ เพื่อดึงดูดผู้ใช้งานและเพิ่มสีสันให้กับเว็บไซต์ของเรา

สำหรับใครที่อยากจะอัพสกิลในเรื่องของ CSS รวมถึงมือใหม่ที่อยากจะพัฒนาเว็บไซต์ วันนี้ เราเลยจะมาแชร์ 4 เกม CSS สำหรับการเรียนรู้ทักษะ Front-End ได้อย่างมีประสิทธิภาพ บอกเลยว่า 4 เกมที่เราแนะนำมานั้น ใช้งานฟรี! และยังไม่พอ นอกจากจะใช้ฟรีแล้ว ยังได้ทั้งความรู้ในการใช้ CSS มากยิ่งขึ้น รวมถึงความสนุกในตัวเกมอีกด้วย จะมีเกมอะไรบ้างนั้น มาดูกันเลยย

1. Flexbox Froggy

เป็นเกมที่สนุกและโต้ตอบได้ซึ่งจะสอนวิธีใช้ CSS Flexbox เกมนี้มีทั้งหมด 24 ด่าน เป้าหมายของเราก็คือ เขียน Code เพื่อย้ายกบไปที่แผ่นลิลลี่ แต่ละด่านจะมีความท้าทายที่แตกต่างกันออกไป เริ่มต้นด้วยพื้นฐานของ Flexbox และค่อยๆ ซับซ้อนมากขึ้น เป็นเกมที่นอกจากจะได้ความสนุกแล้ว ยังทำให้เราได้รู้จักการใช้ Flexbox เพิ่มขึ้นอีกด้วย

2. 100 Days CSS Challenge

ในเว็บนี้มีตัวอย่าง HTML และ CSS ที่แตกต่างกัน 100 รายการใน 100 วันติดต่อกัน ให้เราได้ฝึกฝนทักษะ ทั้งนี้เราจะได้รับการออกแบบพร้อมCSS 100 วัน พร้อมกับเทมเพลต Codepen เพื่อเขียนโค้ด เรียกได้คุ้มค่าสำหรับการฝึกฝนจริงๆ

3. GRID GARDEN

เกมนี้จะสอนวิธีใช้ CSS Grid หน้าตา UI คล้าย เกม Flexbox Froggy เป้าหมายของเราก็คือ การรดน้ำแครอทในสวนของของเรา โดยใช้ CSS Grid เกมนี้มีทั้งหมด 28 ด่าน เป็นเกมที่ฝึกฝนสกิลได้ดีเลยค่ะ เพราะนอกเหนือเราจะได้เรียนรู้ในเรื่องของ CSS Grid เพิ่มขึ้นแล้ว เกมนี้มีการอธิบายเกี่ยวกับ Grid ได้ดีอีกด้วย

4. Flexbox defense

เกมนี้เราจะต้องป้องกันหอคอยเพื่อไม้ให้ศัตรูเข้ามาได้ เกมนี้มีทั้งหมด 12 ด่าน เราจะใช้ CSS justify-content เพื่อวาง Layout อย่างเหมาะสม เพื่อย้ายหอคอยเดี่ยวไปยังตำแหน่งที่มีประสิทธิภาพ

สรุป

นอกเหนือจากที่ได้ศึกษาภาษา CSS กันเบื้องต้นแล้ว ยังมีเกมดีๆที่สามารถช่วยพัฒนาทักษะ CSS ให้ได้เห็นภาพมากขึ้น รวมถึงโจทย์ตัวเอง และ Workshop ที่มีให้เราทำในไม่ซ้ำในแต่ละวันเลย

เป็นยังไงกันบ้างคะกับบทความนี้ อ่านมาถึงตรงนี้แล้ว นอกเหนือจากที่เราได้เรียนรู้พื้นฐานของ CSS ไปแล้ว ยังมีเกม ที่ได้ทั้งความรู้และรวมถึงความสนุกในเล่นอีกด้วย ทำให้เรานั้นได้มองเห็นภาพมากขึ้น เหมาะกับการอัพสกิลและสำหรับมือใหม่ที่อยากเรียน CSS เพิ่มเติม Blog นี้เป็นแค่ตัวอย่างในหลาย ๆ ตัวอย่าง ที่เพื่อให้ผู้อ่านนั้น ได้เห็นภาพมากยิ่งขึ้น สามารถตามดูในลิงก์ที่อยู่ด้านนี้ได้เลย

Reference

1. 6 Free CSS Games and Challenges for Mastering Front-End Skills in 2023: https://kombai.com/css/free-css-games-and-challenges/

2. Learn CSS By Playing Games: https://medium.com/geekculture/learn-css-by-playing-games-cf70a79a38

Lalita Ruttanarungsri

Author Lalita Ruttanarungsri

More posts by Lalita Ruttanarungsri

เราใช้คุกกี้เพื่อพัฒนาประสิทธิภาพ และประสบการณ์ที่ดีในการใช้เว็บไซต์ของคุณ คุณสามารถศึกษารายละเอียดได้ที่ นโยบายความเป็นส่วนตัว และสามารถจัดการความเป็นส่วนตัวเองได้ของคุณได้เองโดยคลิกที่ ตั้งค่า

ตั้งค่าความเป็นส่วนตัว

คุณสามารถเลือกการตั้งค่าคุกกี้โดยเปิด/ปิด คุกกี้ในแต่ละประเภทได้ตามความต้องการ ยกเว้น คุกกี้ที่จำเป็น

ยอมรับทั้งหมด
จัดการความเป็นส่วนตัว
  • คุกกี้ที่จำเป็น
    เปิดใช้งานตลอด

    ประเภทของคุกกี้มีความจำเป็นสำหรับการทำงานของเว็บไซต์ เพื่อให้คุณสามารถใช้ได้อย่างเป็นปกติ และเข้าชมเว็บไซต์ คุณไม่สามารถปิดการทำงานของคุกกี้นี้ในระบบเว็บไซต์ของเราได้
    รายละเอียดคุกกี้

  • คุกกี้สำหรับการติดตามทางการตลาด

    ประเภทของคุกกี้ที่มีความจำเป็นในการใช้งานเพื่อการวิเคราะห์ และ นำเสนอโปรโมชัน สินค้า รวมถึงหลักสูตรฟรี และ สิทธิพิเศษต่าง ๆ คุณสามารถเลือกปิดคุกกี้ประเภทนี้ได้โดยไม่ส่งผลต่อการทำงานหลัก เว้นแต่การนำเสนอโปรโมชันที่อาจไม่ตรงกับความต้องการ
    รายละเอียดคุกกี้

บันทึกการตั้งค่า