สอนตัวเอง CSS Flexbox ด้วยเกม Flexbox Froggy

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

ด้วย Flexbox Froggy คุณทำได้ เรียนรู้พื้นฐานทั้งหมดของ flexbox ด้วยเว็บเกมแสนสนุกที่เกี่ยวข้องกับกบและลิลลี่. ฉันรู้ว่ามันฟังดูบ้า แต่นี่เป็นเว็บแอพที่ยอดเยี่ยมอย่างจริงจัง.

คุณเริ่มที่ระดับ 1 และ ค่อยๆทำงานผ่าน 24 ระดับที่แตกต่างกัน การสอนการวางแนว flexbox ในหลาย ๆ ด้าน ระดับเริ่มต้นง่ายโดยขอให้คุณ จัดกบหนึ่งหรือสองตัวตามภาชนะเดียว. บทเรียนตอนต้นยังมีเคล็ดลับและคำแนะนำที่จะช่วยคุณไปตลอดทาง.

แต่เมื่อคุณได้บทเรียนที่ผ่านมา 10 อย่างร้อนขึ้นจริงๆ คุณจะต้องเรียนรู้วิธีการ-จัดระเบียบรายการภายในคอนเทนเนอร์, ทำอย่างไร จัดระเบียบ เนื้อหา ดิ่ง, และวิธีการสร้าง ระยะห่างเท่ากัน ระหว่างแถวที่แตกต่างกันของเนื้อหาที่แตกต่างกัน.

กบตัวน้อยที่น่ารักอาจล่อคุณเข้า แต่มั่นใจได้ว่านี่เป็นเกมที่ยากลำบาก.

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

ซอร์สโค้ดเกมแบบเต็มมีให้บริการฟรีบน GitHub เพื่อให้คุณสามารถดาวน์โหลดและเล่นในเครื่องหากคุณต้องการ.

รวมถึงแอพพลิเคชั่นหลายภาษา เสนอ 20 ภาษา รวมถึงภาษาอังกฤษฝรั่งเศสเยอรมันอิตาลีจีนญี่ปุ่นและรัสเซีย (รวมถึงอื่น ๆ อีกมากมาย).

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

หากคุณเป็น นักพัฒนาเว็บทุกระดับความสามารถ คุณควรตรวจสอบ Flexbox Froggy อย่างแน่นอน มันฟรีอย่างสมบูรณ์สนุกมากในการเล่นและการศึกษาที่น่าประหลาดใจ.