<div class="breadcrumb">
<span>หน้าแรก</span> / <span>บทนำ</span>
</div>
<h2><span class="emoji">🚀</span>ยินดีต้อนรับ!</h2>
<p>บทเรียนนี้ออกแบบมาเพื่อช่วยให้คุณเข้าใจพื้นฐานของการเขียนเว็บไซต์ตั้งแต่เริ่มต้น ไม่ว่าคุณจะไม่มีประสบการณ์ด้านการเขียนโปรแกรมมาก่อน เราจะนำคุณผ่านแต่ละขั้นตอนอย่างช้าๆ และอธิบายทุกสิ่งอย่างละเอียด</p>
<h3>คุณจะได้เรียนรู้อะไร?</h3>
<div class="feature-grid">
<div class="feature-card">
<h4><span class="emoji">🏗️</span>HTML</h4>
<p>โครงสร้างพื้นฐานของเว็บเพจ - กระดูกสันหลังของเว็บไซต์</p>
</div>
<div class="feature-card">
<h4><span class="emoji">🎨</span>CSS</h4>
<p>การจัดแต่งสไตล์และเลย์เอาต์ - ทำให้เว็บดูสวยงาม</p>
</div>
<div class="feature-card">
<h4><span class="emoji">⚡</span>JavaScript</h4>
<p>การทำให้เว็บมีชีวิตชีวา - เพิ่มปฏิสัมพันธ์กับผู้ใช้</p>
</div>
<div class="feature-card">
<h4><span class="emoji">🛠️</span>Tools</h4>
<p>เครื่องมือที่จำเป็นสำหรับการพัฒนาเว็บ</p>
</div>
<div class="feature-card">
<h4><span class="emoji">💾</span>ฐานข้อมูล</h4>
<p>วิธีการจัดเก็บและจัดการข้อมูล</p>
</div>
<div class="feature-card">
<h4><span class="emoji">📱</span>Responsive</h4>
<p>ทำให้เว็บทำงานได้ดีบนทุกอุปกรณ์</p>
</div>
</div>
<h3>ข้อกำหนดเบื้องต้น</h3>
<p>คุณไม่จำเป็นต้องมีประสบการณ์ด้านการเขียนโปรแกรมมาก่อน เพียงแค่มี:</p>
<ul>
<li>คอมพิวเตอร์ (Windows, Mac, หรือ Linux)</li>
<li>เว็บเบราว์เซอร์ (Chrome, Firefox, Safari ฯลฯ)</li>
<li>Text Editor (เราจะแนะนำ VS Code)</li>
<li>ความสนใจที่จะเรียนรู้</li>
</ul>
<div class="tip">
<strong>💡 เคล็ดลับ:</strong> อย่ารีบร้อน! ลองเขียนโค้ดตามตัวอย่างด้วยตัวเองแทนที่จะคัดลอก นี่คือวิธีที่ดีที่สุดในการเรียนรู้
</div>
<h3>วิธีการใช้บทเรียนนี้</h3>
<div class="step-card">
<h4>1. อ่านเนื้อหาอย่างระมัดระวัง</h4>
<p>ให้เวลาตัวเองในการเข้าใจแต่ละแนวคิด อย่ารีบร้อนไปยังบทต่อไป</p>
</div>
<div class="step-card">
<h4>2. ลองเขียนโค้ดตามตัวอย่าง</h4>
<p>อย่าแค่อ่านตัวอย่างโค้ด ให้ลองเขียนมันด้วยตัวเองในตัวแก้ไขข้อความของคุณ</p>
</div>
<div class="step-card">
<h4>3. ทดลองและแก้ไข</h4>
<p>พยายามแก้ไขโค้ดและดูว่าจะเกิดอะไรขึ้น นี่คือวิธีที่ดีที่สุดในการเรียนรู้</p>
</div>
<div class="step-card">
<h4>4. สร้างโปรเจกต์เล็กๆ</h4>
<p>หลังจากเรียนแต่ละบท พยายามสร้างบางสิ่งด้วยตัวเองโดยใช้ความรู้ที่ได้เรียนรู้</p>
</div>
<div class="highlight">
<strong>⚠️ สำคัญ:</strong> ไม่มีใครสามารถเรียนรู้การเขียนโปรแกรมได้โดยเพียงแค่อ่าน คุณต้องเขียนโค้ดด้วยตัวเองเพื่อให้ความรู้ติดตัว
</div>
<div class="navigation">
<button class="btn btn-primary" id="prev-btn" data-current="intro" disabled>← ก่อนหน้า</button>
<button class="btn btn-primary" id="next-btn" data-current="intro">ถัดไป →</button>
</div>
<div class="lesson-quiz">
<h3>แบบทดสอบสั้นๆ (บทนำ)</h3>
<div data-quiz-src="exercises/intro-quiz.json"></div>
</div>