Code Playground - ทดลองเขียนโค้ด

🎮 ทดลองเขียนโค้ดได้เลย!

เขียน HTML, CSS, และ JavaScript แล้วดูผลลัพธ์ทันที

📄 HTML

<!DOCTYPE html>
<html lang="th">
<head>
    <meta charset="UTF-8">
    <title>My Page</title>
</head>
<body>
    <h1>สวัสดี Playground!</h1>
    <p>ลองแก้ไขโค้ดและกดปุ่ม Run</p>
</body>
</html>

🎨 CSS

body {
    font-family: 'Sarabun', sans-serif;
    padding: 20px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

h1 {
    text-align: center;
    animation: fadeIn 1s ease-in;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
}

⚡ JavaScript

// ลองเขียน JavaScript ที่นี่
console.log('Hello from Playground!');

// ตัวอย่าง: เพิ่ม Event Listener
document.addEventListener('DOMContentLoaded', function() {
    console.log('Page loaded!');
});

🖥️ Output

📋 Console

💡 Tips การใช้งาน

Run Code: กดปุ่ม ▶ Run Code หรือกด Ctrl+Enter (Windows) / Cmd+Enter (Mac)
Save/Load: บันทึกโค้ดไว้ใน Browser เพื่อกลับมาแก้ไขต่อได้
Templates: เลือก Template สำเร็จรูปเพื่อเริ่มต้นได้เร็วขึ้น
Console: ดูผลลัพธ์จาก console.log() ได้ที่ช่อง Console ด้านล่าง

🎯 แนะนำให้ลอง

แก้ไขสีพื้นหลังใน CSS
เพิ่มปุ่มใน HTML และใส่ Event Listener ใน JavaScript
ลองสร้าง Animation ด้วย CSS
ทดลองใช้ Flexbox หรือ Grid Layout
สร้างฟอร์มและตรวจสอบข้อมูลด้วย JavaScript

พร้อมเรียนรู้เพิ่มเติม? กลับไปที่หน้าแรก หรือดูแหล่งเรียนรู้

บทเรียนการสร้างเว็บไซต์พื้นฐาน

Code Playground - ทดลองเขียนโค้ด

🎮 ทดลองเขียนโค้ดได้เลย!

💡 Tips การใช้งาน

🎯 แนะนำให้ลอง

เรียนจบบทนี้แล้ว?

Code Playground - ทดลองเขียนโค้ด

🎮 ทดลองเขียนโค้ดได้เลย!

💡 Tips การใช้งาน

🎯 แนะนำให้ลอง

แชร์บทเรียนนี้

เรียนจบบทนี้แล้ว?