Flexbox Froggy

 (flexboxfroggy.com)
2 คะแนน โดย GN⁺ 2023-10-01 | 1 ความคิดเห็น | แชร์ทาง WhatsApp
  • บทความแนะนำเกม 'Flexbox Froggy' ที่ช่วยเรียนรู้การเขียนโค้ด CSS
  • เกมที่ใช้พร็อพเพอร์ตี 'justify-content' เพื่อนำกบไปยังใบบัว
  • พร็อพเพอร์ตี 'justify-content' ใช้จัดเรียงไอเท็มในคอนเทนเนอร์ตามแนวนอน
  • พร็อพเพอร์ตีนี้รองรับหลายค่า เช่น 'flex-start' (จัดไอเท็มไปทางซ้าย), 'flex-end' (จัดไอเท็มไปทางขวา), 'center' (จัดไอเท็มไว้กึ่งกลาง), 'space-between' (เว้นระยะระหว่างไอเท็มให้เท่ากัน), 'space-around' (เว้นระยะรอบไอเท็มให้เท่ากัน)
  • มีตัวอย่าง justify-content: flex-end; ที่ทำให้กบเคลื่อนไปทางขวา
  • เกม 'Flexbox Froggy' สร้างโดย Codepip พร้อมลิงก์ GitHub และ Twitter
  • บทความแนะนำ 'Grid Garden' สำหรับผู้ที่อยากเรียนรู้ CSS Grid

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

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

 
GN⁺ 2023-10-01
ความคิดเห็นจาก Hacker News
  • บทความเกี่ยวกับ 'Flexbox Froggy' เกมสำหรับเรียนรู้ CSS
  • ผู้ใช้แนะนำเกมลักษณะคล้ายกันสำหรับเรียนรู้ CSS ได้แก่ cssgridgarden.com, cssbattle.dev, flukeout.github.io, และ css-animations.io
  • ผู้ใช้บางคนบอกว่าจำพร็อพเพอร์ตีของ flex อย่าง align-content และ align-items ได้ยาก โดยเปรียบเทียบกับปัญหาทั่วไปอย่างการเสียบสาย USB ผิดด้าน
  • ผู้ใช้ชื่นชม CSS Grid และตัวเลือกการจัดเลย์เอาต์ที่มันมอบให้
  • ผู้ใช้แชร์ว่าพวกเขาเรียนรู้อะไรได้มากจากเกมอย่าง 'Flexbox Froggy'
  • ชีตสรุปที่ผู้ใช้ทำขึ้นสำหรับคนที่จำพร็อพเพอร์ตีทั้งหมดของ flexbox ได้ยาก: darekkay.com/flexbox-cheatsheet
  • ผู้ใช้มองว่า 'Flexbox Froggy' มีประโยชน์เป็นพิเศษสำหรับการทบทวนความรู้เกี่ยวกับ flexbox
  • ผู้ใช้เสนอฟีเจอร์ที่ให้ลากวางกบลงในกริด 3x3 เพื่อให้ได้โค้ด CSS ของ flexbox เป็นผลลัพธ์
  • มีการแนะนำอีกเกมหนึ่งที่เน้นการอ่าน CSS มากกว่า คือ guess-css.app
  • ผู้ใช้พูดคุยถึงประสบการณ์เกี่ยวกับ flexbox โดยบางคนได้เรียนรู้พร็อพเพอร์ตี order ขณะที่บางคนสับสนกับความแตกต่างของการตั้งชื่อระหว่าง justify-content และ align-items
  • อีกเกมหนึ่งที่ถูกแนะนำว่าเป็นวิธีสนุก ๆ ในการเรียนรู้ CSS คือ flexboxzombies.com