<!DOCTYPE html>
<html lang="th">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>บทเรียนเริ่มต้นเขียนเว็บ - Step by Step</title>
<!-- Google Fonts for beautiful Thai typography -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Kanit:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="syntaxhighlightercomponent.css">
</head>
<body>
<div class="container">
<header>
<h1><span class="emoji">💻</span>เริ่มต้นเขียนเว็บ: Step by Step</h1>
<p>คู่มือครบถ้วนสำหรับผู้เริ่มต้นจากศูนย์</p>
</header>
<div class="content-wrapper">
<div class="sidebar" id="sidebar">
<div class="sidebar-item active" data-section="intro">บทนำ</div>
<div class="sidebar-item" data-section="html">HTML</div>
<div class="sidebar-item" data-section="css">CSS</div>
<div class="sidebar-item" data-section="javascript">JavaScript</div>
<div class="sidebar-item" data-section="tools">Tools</div>
<div class="sidebar-item" data-section="database">ฐานข้อมูล</div>
<div class="sidebar-item" data-section="responsive">Responsive Design</div>
<div class="sidebar-item" data-section="next-steps">ก้าวต่อไป</div>
<div class="sidebar-item" data-section="portfolio">Portfolio</div>
<div class="sidebar-item" data-section="blog">Static Blog</div>
<div class="sidebar-item" data-section="api-fetch">API & Fetch</div>
<div class="sidebar-item" data-section="accessibility">Accessibility</div>
</div>
<div class="main-content">
<div class="progress-bar">
<div class="progress-fill" id="progressFill"></div>
</div>
<div id="content-loader" class="content-loader">
<!-- เนื้อหาจะถูกโหลดที่นี่ -->
</div>
</div>
</div>
</div>
<!-- CodeMirror 6 (basic bundles via CDN) -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/codemirror@5.65.13/lib/codemirror.css">
<script src="https://cdn.jsdelivr.net/npm/codemirror@5.65.13/lib/codemirror.js"></script>
<script src="https://cdn.jsdelivr.net/npm/codemirror@5.65.13/mode/javascript/javascript.js"></script>
<script src="https://cdn.jsdelivr.net/npm/codemirror@5.65.13/mode/xml/xml.js"></script>
<script src="https://cdn.jsdelivr.net/npm/codemirror@5.65.13/mode/css/css.js"></script>
<script src="https://cdn.jsdelivr.net/npm/codemirror@5.65.13/mode/htmlmixed/htmlmixed.js"></script>
<!-- Local SyntaxHighlighterComponent (custom) -->
<script src="SyntaxHighlighterComponent.js"></script>
<!-- Editor & Quiz scaffolding scripts -->
<script src="editor-skeleton.js"></script>
<script src="quiz.js"></script>
<script src="script.js"></script>
</body>
</html>