คอร์สเรียน
![](https://framerusercontent.com/images/uHwDbklEJYFrum9lcZEYMa9gWU.jpg)
สื่อการสอนเป็น docs
จุดกลุ่มหน้า สารบัญ เป็นระบบระเบียน
![](https://framerusercontent.com/images/3sSvGXBI01ZKtc8M3BBZIDwWoU.jpg)
เนื้อหาภาษาไทย
เนื้อหาภาษาไทยที่ยังคงคำทับศัพท์ไว้บ้าง
![](https://framerusercontent.com/images/cqoNLIJEPF7u7zAx0R0zzuJlzI.jpg)
ตัวอย่างประกอบ
รูปภาพ ภาพเคลื่อนไหว วีดีโอ
![](https://framerusercontent.com/images/MkKHwclQIiXo2dOrYvimUrFoRpg.jpg)
วีดีโอสรุปแต่ละคอร์ส
วีดีโอสรุปแต่ละคอร์สที่กระชับ
![](https://framerusercontent.com/images/2YduONB0dHX3HaQMiJnlfheXYPA.jpg)
ทดลองให้เห็นเป็นจริง
ไปทดลองมาให้ แล้วแคปรูปหรืออัดวีดีโอมาให้ดู
![](https://framerusercontent.com/images/oPWHAc4asFk9CERMpK9Cahj4KY.jpg)
ชี้ไปยังแหล่งอ้างอิงเสมอๆ
ชี้ไปทั้งยังแหล่งอ้างอิงภายในเว็บไซต์หรือภายนอก
![](https://framerusercontent.com/images/H3eVF18dnQJsu1rPdM4WMX3yaU.jpg)
จัดกลุ่มเนื้อหาเป็นระบบระเบียบ
มีการจัดกลุ่ม เรียงหน้าและสารบัญ
![](https://framerusercontent.com/images/ZFNBO1ZNqiDGkYkSFTXPkZ96k.jpg)
ข้อมูลตาราง
ตารางเปรียบเทียบเพื่อให้เข้าใจได้ครบกว่า
ตัวอย่างคอร์สเรียน
![](https://framerusercontent.com/images/kg9K3pstF2cON4B8LMkp7r7KEUE.jpg)
เนื้อหาและสไตล์
เนื้อหา
หน้าและการจัดกลุ่ม
หัวข้อและคำอธิบาย
ตัวอย่างภาพประกอบ ตัวอย่างโค้ด
ลิงค์ที่ชี้ยังไปยังหน้าหรือเว็บไซต์อ้างอิง
สไลด์ ประกอบวิดีโอสรุป
วีดียาวสรุป ที่ตัดต่อแล้วเป็นอย่างดี
ภาษา
หัวข้อภาษาอังกฤษ หรือภาษาไทย
รายละเอียดภาษาไทย ที่ทับศัพท์บ้าง
ลักษณะการเขียน
สั้นๆ กระชับ
เห็นภาพ
โปรเจ็คและการสร้างโปรเจ็ค
แหล่งเรียนรู้เพิ่มเติม
![](https://framerusercontent.com/images/ixEbfRZTlX6Cp80gShFDXXLR0Xg.png)
HTML
สร้าง Web Structure
Introduction
Tooling
Usage
Comment
Debugging
Elements
Attributes
Accessibility
SEO
Search engine
![](https://framerusercontent.com/images/yQWUPNuT8ZPtZbYbAA2qmM6CPxU.png)
CSS
ใส่ Styles ให้เว็บไซต์สวย ให้ใช้ง่าย
Introduction
Comment
Properties
Selectors
At-rules
Functions
Debugging
Preprocessor
![](https://framerusercontent.com/images/Xm4gn2xNsHOdymVjcxcOmcBbRDc.png)
JavaScript
Programming Language เพื่อทำ User Interactive
Introduction
Statement
Scope
Variables
Expression
Operators
Data Type
Conditional
Strict Mode
Comment
Modules
Debugging
Keywords
Functions
Objects
Error handling
Built-in Functions
Built-in Objects
Browser BOM
Document Objects DOM
![](https://framerusercontent.com/images/QkMCxEnvBxpRPfYZAx6qLUAQk2M.png)
Git
Version Control เพื่อการจัดการการเปลี่ยนแปลงโค้ดและการทำงานร่วมกัน
Introduction
Git CLI
Workflows
Initialize
Ignore File
Remote
Branch
Change
Commit
Checkout
Tags
Stash
Checkout
Pull Push
Status
History
Undo Change
Submodules
Merging
LFS
![](https://framerusercontent.com/images/jImhfZoXf9fXCtK5WuIYzwmMB4.png)
Github
Remote Repository สำหรับจัดเก็บโค้ด และทำงานร่วมกัน
Introduction
Code
Issue
Pull requests
Discussion
Actions
Projects
Security
Insights
Settings
![](https://framerusercontent.com/images/FYeDwohASXQvnB9XsN20zGe8Eo.png)
PNPM
Package Manager ที่เร็วสำหรับ Nodejs
Introduction
Tooling
Usage
Comment
Debugging
Elements
Attributes
Accessibility
SEO
Search engine
![](https://framerusercontent.com/images/r9o9jYWF75w8Uvzspk1YrooVQ.png)
Vue
Progressive JavaScript Framework ที่ง่ายในการทำ UI
Introduction
Tooling
Usage
Comment
Debugging
Elements
Attributes
Accessibility
SEO
Search engine
![](https://framerusercontent.com/images/CDpkqKTP4NaOj2BNi0NqyoFaQ.png)
Nuxt
Fullstack web framework ที่เขียนด้วย Vue
Introduction
Tooling
Usage
Comment
Debugging
Elements
Attributes
Accessibility
SEO
Search engine
![](https://framerusercontent.com/images/tSJWS90P13gmWJAZqpvvU2ecIM.png)
Nodejs
JavaScript Runtime รัน JavaScript บน Server
Introduction
Tooling
Usage
Comment
Debugging
Elements
Attributes
Accessibility
SEO
Search engine
![](https://framerusercontent.com/images/h5WbvvaR517uy0oCEGsDIaSR3s.png)
Vitepress
สร้าง Web Structure
Introduction
Tooling
Usage
Comment
Debugging
Elements
Attributes
Accessibility
SEO
Search engine
![](https://framerusercontent.com/images/REPDcWnZoPDgzjiHBEh9e9vIGk.png)
Figma
Prototype Tools สำหรับทำ Design System
Introduction
Tooling
Usage
Comment
Debugging
Elements
Attributes
Accessibility
SEO
Search engine
![](https://framerusercontent.com/images/jxau6RJbgJ65LLxnsRAKLwmHNSM.png)
Framer
Nocode Website เพียงแค่ออกแบบและ Publish ก็ได้เว็บไซต์
Introduction
Tooling
Usage
Comment
Debugging
Elements
Attributes
Accessibility
SEO
Search engine
![](https://framerusercontent.com/images/3FlkYES8Zv22earQDt3SorqULw.png)
Obsidian
Noting App ที่ฟรี เร็ว ใช้ง่าย มี Plugins ให้ติดตั้งหลากหลาย
Introduction
Tooling
Usage
Comment
Debugging
Elements
Attributes
Accessibility
SEO
Search engine
![](https://framerusercontent.com/images/M9IoZWpXJ9LOARvJJxvn3F4Uw.png)
Clickup
จัดการงานและทำงานร่วมกัน Clickup
Introduction
Tooling
Usage
Comment
Debugging
Elements
Attributes
Accessibility
SEO
Search engine
![](https://framerusercontent.com/images/h5WbvvaR517uy0oCEGsDIaSR3s.png)
Vitepress
สร้าง Docs สวยๆด้วย Markdown ปรับแต่งด้วย Vue
Introduction
Tooling
Usage
Comment
Debugging
Elements
Attributes
Accessibility
SEO
Search engine
![](https://framerusercontent.com/images/gh3IFWQEgJg70HOQIRcCEPN6W3w.png)
Cloudflare
Static Web Hosting ที่ประสิทธิภาพสูง ราคาไม่ต้องจ่าย
Introduction
Tooling
Usage
Comment
Debugging
Elements
Attributes
Accessibility
SEO
Search engine
![](https://framerusercontent.com/images/6YhTJfsxA0iMzfnmUiYsdRsvew.png)
Stripe
สร้าง Web Structure
Introduction
Tooling
Usage
Comment
Debugging
Elements
Attributes
Accessibility
SEO
Search engine
![](https://framerusercontent.com/images/O32EGlv4FlVkAnBjEUJUe3T0OD8.png)
Wordpress
CMS ทำเว็บไซต์เพื่อธุรกิจ
Introduction
Tooling
Usage
Comment
Debugging
Elements
Attributes
Accessibility
SEO
Search engine
![](https://framerusercontent.com/images/qEfHTirTsquL3NOkNIoKbDxs.png)
VSCode
Code Editor ที่ดี ที่ฟรี ที่คนใช้กันเยอะที่สุดในโลก
Introduction
Tooling
Usage
Comment
Debugging
Elements
Attributes
Accessibility
SEO
Search engine
สั่งซื้อ
![](data:framer/asset-reference,Rw4cnE9bUGPdlKUeZlqdgs2PigE.png?originalFilename=image.png&preferredSize=auto)