Fundamental before learning the main course
VDO Orientation
online learning HTML & CSS 
Pre-Learning
HTML Fundamentals Part I-II
Javascript Fundamentals
Week 1
Basic Web Frontend, Responsive Design
HTML Fundamentals Part I
What is HTML
HTML version
Why we learn HTML
Download และติดตั้งเครื่องมือ เพื่อเขียนโปรแกรม
ติดตั้ง Text editor VScode เพื่อเขียนโปรแกรม
Components in Web page design
โครงสร้างเอกสาร HTML
HTML Tree structure
ประเภทของ HTML
HTML Element
HTML Attribute [พี่โท ขอถ่ายใหม่]
สรุปคำสั่งที่ใช้บ่อยของ HTML [พี่โท ขอถ่ายใหม่]
Week 2
Basic CSS
What is CSS and Why we learn CSS
CSS Syntax
Where to use CSS : การแทรก css ใช้ได้สามแบบ
การควบคุมการแสดงผลของ HTML Element
การควบคุมการแสดงผลของ HTML Element
การจัดกลางหน้า
Google developer tools เพื่อใช้ในการแก้ไข CSS 
สรุปคำสั่งที่ใช้บ่อยของ CSS
CSS Reference
การจำลอง Server ผ่าน Live Server Extension
Lab 1: Basic HTML and CSS
การประยุกต์ใช้ HTML Layout กับ CSS 
Div vs Table
ตัวอย่าง Responsive Design

Week 3
HTML Fundamentals Part II
HTML Form
HTML Form Tag
สรุปคำสั่ง HTML Form Tag ที่ใช้ง่ายบ่อย
Lab 2: HTML Layout and Form
HTML Media and Graphics
Graphics
ตัวอย่าง - Canvas
ตัวอย่าง - SVG
Media
HTML Web API
Key takeaways
Homework
Week 4
Git basic
Git คืออะไร
ทำไมเราต้องเรียน Git version control
Git Basic
คำสั่งที่ใช้บ่อย
สถานะของไฟล์ Git
Git ignore
ตัวอย่าง .gitignore ของ Node.JS/React
Git comment (อย่าทำแบบนี้)
ตัวอย่างการเขียน commit 
Git setup
Pipeline ที่ต้องทำก่อนติดตั้ง git
สอนสมัครสมาชิกที่ Github
ติดตั้ง Git
Setup Git Extension
Set Default Shell (Windows Only)
Lab Git
Key takeaways
Week 5
Advance css + Flex Model  + Responsive Design
CSS Selector
CSS Display (box model inline, block, inline block, flex, inline flex, grid)
CSS Spacing (Margin, Padding)
CSS Text
CSS Form Button
Responsive Design: Sizing
Responsive Design: Media Query
Key takeaways
Homework
Week 6
Tailwind
What is Tailwind?
How to install Tailwind.
Text
Spacing
Button
Sizing
Display
Lab
Flex
Lab
Form
Table
Lab
Tailwind Responsive
Lab
Key takeaways
Homework
Week 7
Basic javaScript
Pre-Learning with Codekit ปรับพื้นฐานการเรียนรู้ด้วย CodeKit (ยังไม่ได้อัด)
What is javaScript
JavaScript History
Why we learn javaScript
Web Architecture Overview
Javascript Variable Declaration
Google Chrome Developer Tools (F12)
Lab 1: Variables
สรุป Variables 
Variable Data Type
Primitive Data Types
Object type
Global Objects / Standard built-in objects
คุณสมบัติของ Javascript
Object == Array
Array and Object Declaration
Lab Codekit
Lab 2: Variable in Object / Array
สรุป Object
Function คืออะไร 
การกำหนด function 
การเรียก function 
Lab 3: Function 
Lab Codekit Lab 1 function
Function ที่ใช้บ่อยใน javascript
Function ที่ใช้บ่อย (1)
Array Function/Property อื่นๆ (Cheat List)
Useful Class
Javascript Reference
Lab 4: Function
Lab Codekit Lab 2 function
Coding Standard
เลิกใช้ var ใช้แต่ let
ตั้งชื่อตัวแปรให้สื่อความหมาย
อย่าใส่คำที่ไม่มีความหมายลงในชื่อ
อย่าตั้งชื่อให้อ่านยากหรือไม่ใช่คำย่อมาตรฐาน
อย่าเขียน Function ที่ทำหน้าที่มากกว่า 1 อย่าง
ใช้ JSON ในการกำหนดค่าเริ่มต้น
ควรตกลงกับเพื่อนร่วมทีมให้เหมือนกัน
การใส่ javascript ใน HTML
ตำแหน่งการใส่ tag script ใน html
การแทรก Javascript ใน HTML
การแทรก Javascript ใน HTML 2
การเรียกไฟล์ Javascript จากข้างนอก
Lab 5: แทรก Javascript ใน HTML
การ Debug Javascript
Debug Control Command
Lab 6: Debugger
Flowchart
Control Statement (If Else)
Loop
Flowgorithm 
Loop ซ้อน Loop (Nested Loop)
Lab 7: Debug Nested Loop
Lab 8: Debug Nested Loop
Array 2 มิติ 
การเรียกใช้ Array 2 มิติ
Lab 9: Debug Array 2 มิติ
สรุป Syntax
Key takeaways
Homework
Week 8
Advance javaScript Callback + Event + JSON
What is JSON
Why do we learn JSON?
JSON VS XML
Javascript Object
JSON & Javascript Object
JSON Structure 
Lab JSON Codekit JSON (1 ข้อ)
การอ่าน / เขียน JSON
JSON with Table Structure
JSON functions
Javascript Object
LAB 1 : JSON
Lab JSON Codekit JSON 
Callback Function
What is Callback Function
Why we use callback?
ตัวอย่าง Callback
Pass Function not Value
จบ clip ที่ 2 แล้วทำ Lab ที่ CodeKit
LAB 2 : Callback
อธิบาย lab
Application Programming Interface (API)
API คืออะไร
ประโยชน์ของ API
ตัวช่วยอ่าน Data จาก API (JSON)
การทำงานของ API
Request API
Response API
Lab ลอง api
AXIOS
HTTP Request ?
HTTP Request Type
How to install Axios
AXIOS - Get Example
Anonymous Function
AXIOS - Get Example
AXIOS - Get with Params Example
AXIOS - POST Example
AXIOS - POST Example
LAB 3 : AXIOS
การใช้ Axios ร่วมกับ Function
AXIOS - as Function
AXIOS - as callback
Display as table HTML
Key Takeaways
Homework
Week 9-10
Personal Project