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

 (cssgridgarden.com)
5 คะแนน โดย GN⁺ 2024-06-04 | 1 ความคิดเห็น | แชร์ทาง WhatsApp
  • Grid Garden เป็นเครื่องมือการเรียนรู้แบบเกมที่ให้เขียนโค้ด CSS เพื่อรดน้ำสวนแครอต และฝึกการจัดวาง CSS Grid แบบเป็นขั้นตอน
  • ด่านแรกใช้การกำหนดคอลัมน์เริ่มต้นด้วยพร็อพเพอร์ตี grid-column-start เพื่อให้น้ำไปรดเฉพาะบริเวณที่มีแครอต
  • grid-column-start: 3; หมายถึงให้พื้นที่รดน้ำเริ่มต้นจากเส้นกริดแนวตั้งเส้นที่สามจากด้านซ้าย
  • สวนตัวอย่างประกอบด้วยกริด 5x5 ที่สร้างด้วย display: grid, grid-template-columns และ grid-template-rows โดยแต่ละแถวและคอลัมน์แบ่งเป็น 20%
  • ทั้งหมดมี 28 ด่าน และถ้าอยากเรียน CSS ต่อ ก็สามารถเล่น Flexbox Froggy และ Anchoreum ได้

วิธีเรียนรู้ CSS Grid ผ่านกติกาของเกม

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

ด่านแรก: grid-column-start กับสวน 5x5

  • grid-column-start: 3; จะเริ่มพื้นที่รดน้ำจากเส้นขอบแนวตั้งเส้นที่สามจากด้านซ้ายของกริด
  • #garden ในโค้ดตัวอย่างถูกตั้งค่าเป็นคอนเทนเนอร์ CSS Grid
    • display: grid;
    • grid-template-columns: 20% 20% 20% 20% 20%;
    • grid-template-rows: 20% 20% 20% 20% 20%;
  • การตั้งค่านี้สร้างกริด 5x5 ที่แต่ละคอลัมน์และแถวแบ่งเป็น 20%

โครงสร้างด่านและเกมที่ลองเล่นต่อได้

  • บนหน้าจอจะแสดงด่าน 1 จากทั้งหมด 28 ด่าน
  • เกมสำหรับเรียน CSS เพิ่มเติมที่แนะนำร่วมกันคือ Flexbox Froggy และ Anchoreum

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

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

 
GN⁺ 2024-06-04
ความคิดเห็นจาก Hacker News

  • ผมรู้สึกเสมอว่าซีรีส์นี้ของ Rachel Andrews เป็นสื่อการเรียนรู้ที่ยอดเยี่ยม: https://www.smashingmagazine.com/2020/01/understanding-css-g...
    แม้จากมุมของคนทำแบ็กเอนด์ ก็ให้พื้นฐานที่มั่นคงสำหรับการสร้างแอป UI สมัยใหม่ให้ เบาและเรียบง่าย
    ไม่จำเป็นต้องใช้ Bootstrap หรือ Tailwind เลย

    • Bootstrap ช่วย แยก CSS ออกเป็น abstraction ทำให้ทำงานง่าย ๆ ได้แม้ไม่รู้ CSS ดีพอ แต่ Tailwind นั้นใกล้เคียงกับ CSS ที่ถูกทำเป็นโทเค็นมากกว่า
      ถ้าไม่รู้ CSS ก็ใช้ Tailwind ไม่ได้ และระหว่างที่ใช้ก็จะได้เรียน CSS ไปด้วย
      เพราะอย่างนั้นกลับรู้สึกว่ามันค่อนข้างเบาและเรียบง่าย
    • ขอแนะนำซีรีส์วิดีโอ Layout Land ของ Jen Simmons ด้วย: https://www.youtube.com/layoutland
    • Bootstrap นั้นค่อนข้างเป็นสิ่งที่ใช้เมื่อตั้งแต่แรกคุณไม่อยากยุ่งกับ CSS Grid หรือ Flexbox
      แต่ Tailwind ไม่ได้ทำส่วนนี้แทนให้
      ถ้าไม่รู้ Grid หรือ Flexbox การใช้ Tailwind ก็อาจลำบากพอ ๆ กับ CSS ล้วนได้

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

    • ในฐานะคนเขียนโค้ดฟรอนต์เอนด์ โดยเฉพาะ CSS มันมักเป็นการลองผิดลองถูกเสมอ และอย่างที่ว่า บ่อยครั้งก็ใกล้เคียงกับการ เดาสุ่มแบบ brute force
      มีจังหวะที่ต้องเคาะปัญหาคล้าย ๆ กัน ใช้สิ่งที่เรียนมา แล้วลองปรับไปเรื่อย ๆ จนกว่าจะได้
    • จะโยนปัญหาเรื่องการควบคุมตัวเองไปโทษเกมไม่ได้

  • บันทึกจิปาถะบางอย่าง:

    1. ข้อดี: ตรวจคำตอบด้วย ตำแหน่งแบบ absolute
      ดังนั้นถ้าเป็นคำตอบที่ถูกต้อง ก็ผ่านด่านได้แม้จะใช้วิธีที่ไม่ใช่กริด
    2. ข้อเสีย: ส่ง Google Analytics ทุกครั้งที่ลอง
    • สำหรับข้อ 1 ทุกคนน่าจะเห็นตรงกันว่าโซลูชันที่แข็งแรงสำหรับโจทย์แรกคือ position: relative; left: 31.4em;

  • ที่ทำงานเก่าของผมเคยมี show and tell กับทีมสัปดาห์ละประมาณ 30 นาที และสัปดาห์หนึ่งผมเอาสิ่งนี้ไปให้คนที่ไม่ได้เขียนโค้ดลองหาคำตอบ
    น่าสนใจดีที่ได้ดูว่าแต่ละคนไปได้ไกลแค่ไหน บางคนเข้าใจทันที บางคนก็ลำบากพอสมควร
    โดยรวมทุกคนชอบ และผมคิดว่าเป็นวิธีที่ดีในการสร้างเซนส์พื้นฐานด้านการเขียนโปรแกรมให้คนที่อาจจะไม่มีวันต้องเขียนโค้ดเลย
    หลายปีต่อมา เพื่อนร่วมงานยังเอามาพูดทำนองว่า “นี่คือสิ่งที่นายทำทั้งวันเหรอ?” ซึ่งตลกดี เพราะมันเป็นส่วนที่ง่ายที่สุดในงานของผม แต่พวกเขากลับมองเหมือนผมเป็นนักมายากล
    ถึงอย่างนั้นก็ดีที่การได้ลองทำเองนิดหน่อยน่าจะทำให้พวกเขาเคารพงานนี้มากขึ้น

  • ผมเคยคิดว่า Flexbox เปลี่ยนเกมของ CSS แล้ว จากนั้น Grid ก็ออกมา และมันน่าทึ่งและคาดเดาได้จริง ๆ
    ตอนนี้ความเจ็บปวดที่เหลือใน CSS คือกรณีประหลาด ๆ อย่าง “คอมโพเนนต์หนึ่งต้องกินพื้นที่ว่างที่องค์ประกอบพี่น้องไม่ได้ใช้ และหนึ่งในลูกของมันก็ต้องกินทุกอย่างที่พี่น้องของตัวเองไม่ได้ใช้ด้วย แต่ถ้าพื้นที่ไม่พอก็ต้องกลายเป็น scroll overflow”
    มีหลายกรณีที่การโต้ตอบแปลก ๆ ระหว่าง Flexbox กับ Grid รวมถึง ลำดับความสำคัญ ของเลย์เอาต์ในการคำนวณขนาดเข้ามาพัวพัน ซึ่งผมยังไม่เข้าใจทั้งหมด
    ส่วนใหญ่อาจเป็นปัญหาของผมเอง แต่ต่างจาก Flexbox หรือ Grid ตัวมันเอง ตรงที่ยังรู้สึกไม่ค่อยเป็นธรรมชาติ

  • แวบหนึ่งนึกว่ากำลังพูดถึง https://csszengarden.com/pages/about/
    เมื่อนานมาแล้ว ที่นั่นเป็นทรัพยากรที่น่าทึ่งสำหรับเรียน CSS และหา แรงบันดาลใจด้านดีไซน์

    • ผมยังมองยุคนั้นว่าเป็น ยุคทองของการพัฒนาเว็บ
      เป็นช่วงที่ผลของขบวนการมาตรฐานเว็บเริ่มปรากฏ
      น่าเสียดายที่หลังจากนั้น React ก็มา และสิ่งดี ๆ ถูกโยนออกนอกหน้าต่างไป
      ดูเหมือนว่า tag soup ก็พอกินได้ถ้าถูกฝังไว้ลึก ๆ ใน node_modules

  • การถกเถียงใหญ่ ๆ ในอดีตบางรายการ:
    2019: https://news.ycombinator.com/item?id=21050501
    2018: https://news.ycombinator.com/item?id=18753358
    2017: https://news.ycombinator.com/item?id=14041367

  • เกมนี้กับ Flexbox Froggy เหมาะมากสำหรับเริ่มทำความรู้จักเลย์เอาต์ CSS แบบสนุก ๆ

    • เว็บไซต์ลิงก์ไปยัง Flexbox Froggy ก็จริง แต่ผ่านลิงก์ที่ต้องสมัครบัญชี
      ถ้าจะเข้าโดยตรง ไปที่ https://flexboxfroggy.com/ ได้เลย

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

  • เหตุผลที่ผมไม่ชอบ CSS Grid คือมันแทบจะพราก โครงสร้างเชิงความหมาย ของ HTML ไป
    Flexbox อย่างน้อยต้นไม้ HTML ก็ยังสอดคล้องกับโครงสร้างบางอย่างของหน้า แต่พอใช้ CSS Grid แล้วมันจะดูประมาณนี้
    <-! random amount of divs without classnames -->
    แล้วถ้าจะเข้าใจว่าเกิดอะไรขึ้นในหน้านั้น จู่ ๆ ก็ต้องเอาไปเทียบกับ CSS
    ถึงจะมีประสิทธิภาพมาก แต่ก็ดูไม่น่ามอง

    • แม้จะเป็นอีกประเด็นหนึ่ง แต่ถ้ามี IDE ที่ทำให้สามารถ จัดการด้วยภาพ ได้โดยไม่ต้องเข้าใจความสัมพันธ์ทั้งหมดระหว่าง HTML กับ CSS และไม่ต้องไล่จับคู่สัญลักษณ์ด้วยมือ ก็น่าจะแก้ปัญหานี้ได้