HTML Code Play

เรียนรู้ HTML, CSS และ JavaScript ด้วยตัวอย่างโค้ด โปรแกรมแก้ไขโค้ด แบบทดสอบ และเกม

เรียนรู้การพัฒนาเว็บด้วยการแก้ไขโค้ดและดูว่ามันทำงานอย่างไร HTML Code Play ผสานบทเรียน HTML, CSS และ JavaScript เข้ากับโปรแกรมแก้ไขโค้ดบนมือถือ ตัวอย่างที่สามารถรันได้ แบบทดสอบ และเกมเขียนโค้ด ใช้เพื่อศึกษาแนวคิด ลองทำด้วยตัวเอง และติดตามการเรียนรู้ของคุณบนอุปกรณ์เดียวกัน

อ่าน แก้ไข และรัน

สำรวจแคตตาล็อกการเรียนรู้ เปิดบทเรียน และอ่านคำอธิบายพร้อมกับตัวอย่างโค้ดแบบเต็ม ส่งตัวอย่างไปยังโปรแกรมแก้ไข รันตัวอย่างต้นฉบับ จากนั้นเปลี่ยนแท็ก สไตล์ หรือนิพจน์ และเปรียบเทียบผลลัพธ์ กระบวนการทำงานแบบลงมือปฏิบัติจริงนี้จะเชื่อมโยงไวยากรณ์ที่คุณอ่านกับหน้าเว็บหรือพฤติกรรมที่มันสร้างขึ้น

พื้นที่ทำงานรองรับการแก้ไข HTML, CSS และ JavaScript พร้อมการเน้นไวยากรณ์ ใช้ฟังก์ชันเลิกทำและทำซ้ำขณะทดลอง ค้นหาข้อความ ข้ามไปยังบรรทัด และปรับขนาดตัวอักษรของโปรแกรมแก้ไข เริ่มหน้าใหม่หรือเลือกเทมเพลตที่มีอยู่เมื่อคุณต้องการจุดเริ่มต้น เปิดไฟล์ HTML บันทึกงานของคุณ ใช้ฟังก์ชันบันทึกเป็นเพื่อสร้างสำเนาอื่น หรือแชร์ไฟล์โค้ดผ่านตัวเลือกการแชร์ของอุปกรณ์ของคุณ

การเรียนรู้และการฝึกฝนแบบมีผู้แนะนำ

แคตตาล็อกครอบคลุมหัวข้อเทคโนโลยีเว็บ 11 หัวข้อ ตั้งแต่โครงสร้างและการจัดสไตล์หน้าเว็บ ไปจนถึงการเขียนสคริปต์ กราฟิกเวกเตอร์ เลย์เอาต์ที่ตอบสนองต่ออุปกรณ์ต่างๆ และตัวอย่างแบบโต้ตอบ ค้นหาบทเรียนตามชื่อเรื่องหรือส่วนเพื่อเข้าถึงเนื้อหาที่คุณต้องการ ปักหมุดบทเรียนที่เป็นประโยชน์สำหรับการทบทวนอย่างเจาะจง เพิ่มบันทึกบทเรียนของคุณเอง และย้ายไปมาระหว่างบทเรียนต่างๆ ด้วยปุ่มควบคุมก่อนหน้าและถัดไป

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

หกวิธีในการฝึกฝน

เลือกเกมเขียนโค้ดเพื่อฝึกฝนทักษะที่แตกต่างกัน:

- Code Builder: จัดเรียงบล็อกใหม่เพื่อสร้างโค้ดที่ใช้งานได้

- Output Detective: ทำนายว่าส่วนย่อยจะสร้างอะไรออกมา

- Bug Hunt: ระบุบรรทัดที่ผิดพลาด

- Fill the Gap: เลือกโทเค็นโค้ดที่หายไป

- Match Lab: เชื่อมโยงคำศัพท์กับความหมายของมัน - แบบทดสอบเร็ว: ตอบคำถามจริงหรือเท็จแข่งกับเวลา

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

จัดระเบียบการเรียนรู้ของคุณ

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

ความคืบหน้าของบทเรียน บันทึก และผลลัพธ์ของเกมของคุณจะถูกจัดเก็บไว้ในอุปกรณ์ การควบคุมหน้าจอการเรียนรู้ประกอบด้วยแบบอักษรขนาดใหญ่ ความคมชัดสูง และการลดการเคลื่อนไหว การประเมิน HTML, CSS และ JavaScript แยกต่างหากจะให้ใบรับรองความสำเร็จในแอป นี่คือบันทึกการเรียนรู้ของแอป ไม่ใช่คุณวุฒิที่ได้รับการรับรอง

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

สำหรับผู้เริ่มต้น นักเรียน และผู้เรียนที่ทบทวนแนวคิดด้าน front-end ให้เริ่มต้นด้วยตัวอย่างเพียงหนึ่งตัวอย่าง ทำการเปลี่ยนแปลงเล็กน้อย และสร้างความเข้าใจผ่านการฝึกฝน