เรียนรู้ CSS Grid Layout (The Fun Way) กับ Grid Garden

นักพัฒนาเว็บส่วนใหญ่รู้จักเกม Flexbox Froggy สอนพื้นฐานของ flexbox ให้คุณ ตั้งแต่เริ่มต้น เกมฟรีเกมนี้มีไวรัสและยังมีประโยชน์อย่างมากสำหรับการสอนผู้คนถึงวิธีการเขียนโค้ดด้วย flexbox.

ผู้พัฒนาเดียวกันกับผู้สร้างเกมดังกล่าว มีเกมใหม่ล่าสุด เรียกว่า สวนกริด.

เกมนี้ทำงานในลักษณะที่คล้ายกัน แต่สอนคุณ วิธีการโค้ดกริด CSS. มันเป็นคุณสมบัติที่ค่อนข้างใหม่ แต่ก็เป็น จับได้อย่างรวดเร็ว และกริดการ์เด้นเป็นวิธีที่ดีที่สุดในการเรียนรู้.

ทุกอย่างในสวนกริดติดตาม รูปแบบการสอนที่คล้ายกัน เป็น Flexbox Froggy มันถูกสร้างขึ้นโดย Thomas Park ผู้พัฒนารายเดียวกันดังนั้นคุณสามารถคาดหวังความยากง่ายและการใช้งานในระดับใกล้เคียงกัน.

คุณจะเริ่มต้นที่ระดับหนึ่งด้วย a รวม 28 ระดับ ตั้งแต่ต้นจนจบ คุณสามารถ ข้ามระดับ หากคุณคิดว่ามีอะไรยากเกินไป แต่ฉันคิดว่ามันดีที่จะทำงานผ่านพวกเขาทั้งหมดเหมือนเป็นการทบทวน.

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

ฉันขอแนะนำให้เล่นกับ Grid Garden ทุกครั้งที่คุณมีโอกาส มันเป็นเรื่องจริง สนามเด็กเล่นของนักพัฒนา CSS สำหรับการเรียนรู้และศึกษาคุณสมบัติโครงร่างกริดต่างๆ.

ฉันไม่สามารถพูดได้ว่าเกมนี้จะทำให้คุณเป็นผู้เชี่ยวชาญในกริด CSS การสร้างโครงการและฝึกฝนเป็นจำนวนมากสามารถนำคุณไปสู่ระดับผู้เชี่ยวชาญ แต่กริดการ์เด้นเป็นวิธีที่สนุกในการเริ่มต้นโดยปราศจากความเครียดตามปกติที่จะเข้าสู่การเรียนรู้สิ่งใหม่.

โครงการทั้งหมดฟรีและเปิดแหล่งที่มาบน GitHub ถ้าคุณต้องการดาวน์โหลดในพื้นที่เพื่อศึกษาหรือขยาย นอกจากนี้คุณยังสามารถแบ่งปันความคิดของคุณกับผู้สร้างบน Twitter @thashashpark.