ก่อนอื่น ‘CSS’ คืออะไร?
‘Cascading Style Sheet’ คนส่วนมากจะเรียกติดปากว่า ‘สไตล์ชีต’ เป็นภาษาที่ใช้ในด้านการเขียนโค้ด มีความสามารถในการจัดรูปแบบการแสดงผลของเอกสาร HTML ไม่ว่าจะเป็นรูปแบบของเนื้อหา เช่น ขนาดกล่องข้อความ การจัดวางกล่องข้อความ สีพื้นหลัง หรือ ฟอนต์ตัวอักษร
หากพูดให้เข้าใจง่ายๆ ก็คือภาษาสำหรับการเขียนโค้ดของโปรแกรมเมอร์ ที่มีความสามารถในการตกแต่งเว็บไซต์ให้มีความสวยงามมากยิ่งขึ้นได้
ซึ่งเป็นเรื่องที่ค่อนข้างเข้าใจยากหากไม่ได้มีพื้นฐานการศึกษาด้านภาษาคอมพิวเตอร์มาก่อน แต่ในยุคดิจิทัลแบบนี้ ทักษะทางด้านเทคโนโลยีเป็นสิ่งที่จำเป็นต่อการทำงานอย่างมาก อย่างไรก็ตามควรที่จะศึกษาและเรียนรู้ติดตัวไว้
Future Trends ได้ไปเจอกับเว็บไซต์ที่น่าสนใจ มีชื่อว่า ‘Coding Fantasy’ เป็นเว็บไซต์ที่สอนเกี่ยวกับการเขียนโค้ดด้วยรูปแบบของ ‘เกม’ หรือก็คือการเรียนเขียนโค้ดผ่านเกมนั่นเอง
ด้วยแนวคิดที่ว่าการเขียนโค้ด หากเรียนรู้ด้วยตัวเองผ่านวิดีโอในแพลตฟอร์มต่างๆ จะสร้างความน่าเบื่อและความไม่เข้าใจให้กับผู้เรียนอย่างมาก จึงนำไปสู่การหาทางออกให้กับปัญหานี้ด้วยการเล่นเกม เกมเป็นหนึ่งในทางเลือกของการสอนทักษะโดยที่ผู้เรียนไม่เบื่อ จึงเกิดมาเป็น Coding Fantasy ที่ต้องการจะมอบความรู้อย่างมีคุณภาพและสนุกไปพร้อมๆ กัน
[ ‘Flex Box Adventure’ ]
ภายในเว็บไซต์มีเกมให้เลือกมากมาย แบ่งแยกตามประเภทโค้ดที่ต้องการเรียน แต่ในวันนี้เราจะมานำเสนอเกมที่น่าสนใจชื่อว่า ‘Flex Box Adventure’ ที่จะช่วยให้คุณเข้าใจในหลักการทำงานของ ‘สไตล์ชีต’
เกมจะมาในธีมของ ‘ตำนานกษัตริย์อาร์เทอร์’ แต่เป็นกษัตริย์อาร์เทอร์ที่ลงทุนใน Bitcoin (😂) เนื้อเรื่องของเกมคือ
“กาลครั้งหนึ่งนานมาแล้ว มีกษัตริย์องค์หนึ่งนามว่า ‘อาร์เทอร์’ พระองค์ทรงปกครองอาณาจักรอย่างยุติธรรม ซึ่งประชาชนต่างก็จงรักภักดีในตัวท่าน แต่ว่ามีข้อเสียอยู่หนึ่งอย่างที่น่ากังวลใจ ท่านเป็นกษัตริย์ที่ไร้เดียงสามาก”
“ในวันหนึ่งมีนักเล่นแร่แปรธาตุสามคนมาเสนอให้อาร์เทอร์แลกเปลี่ยนเหรียญทองทั้งหมดของเขา ให้กลายมาเป็นเหรียญที่มีค่าชนิดใหม่ชื่อว่า ‘Bitcoin’ ด้วยความไร้เดียงสาอาร์เทอร์เปลี่ยนเหรียญทองทั้งหมดให้กลายมาเป็น Bitcoin”
“นักเล่นแร่แปรธาตุทั้งสามสัญญาว่า Bitcoin จะสร้างมูลค่ามหาศาลภายในเจ็ดวัน แต่เมื่อผ่านไปครบเวลากลับไม่มีวี่แววว่า Bitcoin จะสร้างมูลค่าให้อาร์เทอร์ จึงเกิดมาเป็นการเดินทางเพื่อแก้แค้นนักเล่นแร่แปรธาตุทั้งสาม”
เนื้อเรื่องของเกมจึงปูมาให้เราต้องนำมาตัวอาร์เทอร์และทีมของเขาผ่านอุปสรรคต่างๆ เพื่อไปชำระหนี้แค้นกับนักเล่นแร่แปรธาตุทั้งสามคน เข้าสู่วิธีการเรียนรู้การเขียนโค้ดผ่านเกมนี้
[ วิธีการเล่นเกม ‘Flex Box Adventure’ ]
เริ่มต้นเกมจะมีโหมดให้เลือก 3 ระดับ
👶 Easy – ระดับง่าย เหมาะสำหรับผู้ที่ไม่มีพื้นฐานเลย
🧑 Medium – ระดับปานกลาง เหมาะสำหรับผู้ที่มีความเข้าใจพื้นฐานเกี่ยวกับสไตล์ชีตแล้ว
🧑🏫 Hard – ระดับยาก เหมาะสำหรับผู้เชี่ยวชาญในการเขียนโค้ด
(โหมดการเล่นจะแตกต่างกันในเรื่องของการอธิบายหลักการทำงานเป็นส่วนมาก)
แน่นอนสำหรับเรา Future Trends ต้องเลือกระดับ Easy อยู่แล้วเพราะเราต้องการจะเรียนรู้ไปพร้อมๆ กับผู้อ่านทุกคน โดยเกมจะมีทั้งหมด 24 เลเวล เทียบกับเนื้อเรื่องคือการเดินทางตั้งแต่ต้นของอาร์เทอร์ ในเลเวลที่ 1 เราจะได้เรียนรู้วิธีการเล่นเบื้องต้น
ตัวอย่าง
เลเวล 1 – อาร์เทอร์อยากกินแอปเปิ้ล
เกมจะบอกโจทย์เรามา คือ “ออกคำสั่งด้วยการเขียนโค้ดให้อาร์เทอร์เดินไปกินแอปเปิ้ล” เกมก็จะสอนเราในโค้ดแรกที่มีชื่อว่า ‘justify-content’ โดยเป็นโค้ดที่ใช้สำหรับการเรียงและจัดวางองค์ประกอบ ให้อยู่ตำแหน่งไหนของกล่อง
เช่น justify-content: center; เมื่อต้องการให้อยู่ตรงกลางของกล่อง เป็นต้น
รูปแบบของการสอนและการเล่นก็จะเข้าใจง่าย อ่านคำอธิบายและลงมือทำด้วยการเขียนโค้ดตามที่เกมสอน และไต่ระดับไปเรื่อยๆ จนกว่าจะช่วยอาร์เทอร์แก้แค้นในการโดนหลอกให้ซื้อ Bitcoin
หลังจากที่เราได้ลองเล่นจนจบระดับ Easy แล้ว เราได้เรียนรู้ทักษะการเขียนโค้ดอย่างน้อยๆ 4 ประเภทโค้ด ซึ่งในุมมองของคนที่เป็นมือใหม่พื้นฐานเท่ากับศูนย์ อยากจะบอกว่าเป็นการเรียนรู้ที่สนุกมาก และใครที่กำลังมองหาโอกาสใหม่ๆ ในการเปลี่ยนสายงานก็ดี เพิ่มทักษะที่จำเป็นก็ดี อยากให้ลองเปิดใจเล่นเกมนี้ดู มันจะช่วยให้คุณเข้าใจการเขียนโค้ดได้ดีขึ้นมาก ที่สำคัญสนุกอีกด้วย
เขียนโดย ธนพนธ์ หัสกรรัตน์
Source: ทดลองเล่นเกม ‘Flex Box Adventure’ ได้ที่ลิงก์: https://codingfantasy.com/games/flexboxadventure