เรียนรู้ CSS Grid ผ่านเกมสวนเสมือนจริง

 (cssgridgarden.com)
5 คะแนน โดย GN⁺ 2024-06-04 | 1 ความคิดเห็น | แชร์ทาง WhatsApp

แนะนำ Grid Garden

Grid Garden คืออะไร?

  • Grid Garden เป็นเกมสำหรับเรียนรู้ CSS Grid Layout
  • ผู้ใช้เล่นเกมโดยใช้พร็อพเพอร์ตี grid-column-start เพื่อรดน้ำไปยังพื้นที่ที่มีแครอตอยู่

คำอธิบายโค้ดตัวอย่าง

  • grid-column-start: 3; หมายถึงรดน้ำในพื้นที่ที่เริ่มต้นจากเส้นแนวตั้งเส้นที่สามของกริด
  • แต่ละคอลัมน์และแถวของกริดถูกตั้งค่าให้กินพื้นที่อย่างละ 20%
#garden {
  display: grid;
  grid-template-columns: 20% 20% 20% 20% 20%;
  grid-template-rows: 20% 20% 20% 20% 20%;
}
#water {}

แหล่งเรียนรู้เพิ่มเติม

  • สามารถเรียนรู้ CSS Flexbox ได้ผ่าน Flexbox Froggy

ความเห็นของ GN⁺

  • คุณค่าด้านการเรียนรู้: Grid Garden เป็นเครื่องมือที่ดีสำหรับเรียนรู้ CSS Grid Layout อย่างสนุกสนานผ่านเกม
  • ความสำคัญของการลงมือปฏิบัติ: เครื่องมือการเรียนรู้แบบอินเทอร์แอ็กทีฟเช่นนี้ช่วยให้เรียนรู้ได้มีประสิทธิภาพมากกว่าการเรียนแต่ทฤษฎี
  • การต่อยอดทางเทคโนโลยี: CSS Grid และ Flexbox เป็นเทคโนโลยีสำคัญในงานออกแบบเว็บสมัยใหม่ จึงควรทำความเข้าใจให้ดี
  • แนะนำเครื่องมืออื่น: นอกจาก CSS Grid แล้ว ขอแนะนำให้ลองใช้เครื่องมือเรียนรู้อื่นอย่าง CSS Diner ด้วย
  • ข้อควรระวัง: หลังจากเรียนรู้แนวคิดพื้นฐานผ่านเกมแล้ว การเรียนรู้วิธีนำไปใช้ในโปรเจกต์จริงก็เป็นสิ่งสำคัญเช่นกัน

บทความที่เกี่ยวข้อง

1 ความคิดเห็น

 
GN⁺ 2024-06-04
ความคิดเห็นบน Hacker News
  • ซีรีส์ของ Rachel Andrews ช่วยได้มากในการสร้างแอป UI สมัยใหม่ แม้สำหรับนักพัฒนาแบ็กเอนด์
  • มีการทำโชว์แอนด์เทลกับทีมเป็นเวลา 30 นาที และมีคนที่ไม่ใช่นักพัฒนาเข้าร่วมด้วย จึงเป็นประโยชน์ต่อการพัฒนาทักษะการเขียนโปรแกรมพื้นฐาน
  • เกมสนุก แต่ก็อาจทำให้โฟกัสแค่การแก้โจทย์จนขัดขวางความเข้าใจเชิงลึก ข้อเสนอคือควรมีบทลงโทษตามจำนวนครั้งที่ลอง
  • ข้อดีของเกมคือสามารถตรวจสอบคำตอบได้ด้วยการดูตำแหน่งแบบสัมบูรณ์ ส่วนข้อเสียคือมีการส่ง Google Analytics ทุกครั้งที่ลอง
  • CSS Zen Garden เคยเป็นแหล่งชั้นเยี่ยมสำหรับการเรียนรู้ CSS และหาแรงบันดาลใจด้านการออกแบบ
  • เกมนี้และ Flexbox Froggy เหมาะมากสำหรับการเรียนรู้ CSS layout แบบสนุก ๆ
  • หลังจากเล่น 10 ด่านแรกแล้ว ความไม่พอใจที่มีต่อ CSS กลับเพิ่มขึ้น
  • มีการแชร์ลิงก์ไปยังการถกเถียงครั้งใหญ่ก่อนหน้านี้
  • Flexbox Froggy ช่วยได้มากกว่า Grid Garden ส่วน CSS Grid ยังไม่ค่อยเข้าใจดี
  • มีคำถามว่าเมื่อไม่นานมานี้ได้รวม Subgrid เข้าไปแล้วหรือยัง