เรียนรู้หลักการสร้างเว็บ การออกแบบและตกแต่งเว็บ ฝึกพัฒนาทั้งส่วนฟรอนต์เอนด์และแบ็กเอนด์ ด้วย HTML, CSS, JavaScript, Web Framework และ Server-side Script จนถึงการเผยแพร่เว็บสู่สาธารณะ
หลักการสร้างเว็บ โครงสร้างและองค์ประกอบของเว็บ การออกแบบและการตกแต่งเว็บ เครื่องมือสำหรับการพัฒนาเว็บ แนะนำเทคโนโลยีเว็บสมัยใหม่ ฝึกปฏิบัติออกแบบและพัฒนาเว็บในส่วนฟรอนต์เอนด์และแบ็กเอนด์ การใช้ภาษาเอชทีเอ็มแอล ซีเอสเอส จาวาสคริปต์ และเว็บเฟรมเวิร์คสำหรับการพัฒนาเว็บในส่วนฟรอนต์เอนด์ และการใช้สคริปต์ด้านเซิร์ฟเวอร์ สำหรับการพัฒนาเว็บในส่วนแบ็กเอนด์ การนำเทคโนโลยีเว็บมาประยุกต์ใช้ในการทำงาน การนำเสนอข้อมูลบนเว็บออกสู่สาธารณะ
Web development principles, web elements, web design and decoration, web development tools, an introduction to modern web technology; practicing designing and developing frontend and backend, using HTML, CSS, JavaScript, and web frameworks for frontend development, using server-side script for developing backend, applications of web technology, and web publication.
ฝึกสร้างหน้าเว็บที่สวยและใช้งานง่าย แล้วเชื่อมกับระบบหลังบ้านและฐานข้อมูลจริง
นำผลงานขึ้น Hosting พร้อมโดเมนและ SSL เพื่อใช้งานและนำเสนอต่อสาธารณะ
ผู้เรียนจะเข้าใจหลักการทำงานของเว็บ ออกแบบและพัฒนาเว็บแอปพลิเคชันได้ครบทั้งฝั่งหน้าบ้านและหลังบ้าน และนำผลงานเผยแพร่สู่สาธารณะได้จริง
แผนบทเรียน 12 บท จากหลักการเว็บ สู่การพัฒนา Frontend–Backend และการเผยแพร่เว็บจริง
แสดง 12 จาก 12 บทเรียน
Client–Server, HTTP/HTTPS, URL, DNS, เว็บเบราว์เซอร์ และวิวัฒนาการของเทคโนโลยีเว็บ
องค์ประกอบของเว็บ สถาปัตยกรรมข้อมูล UX/UI Wireframe การจัดวาง สี และตัวอักษร
VS Code, Browser DevTools, Git และ GitHub, Package Manager และการตั้งค่าสภาพแวดล้อมการพัฒนา
แท็กพื้นฐาน Semantic HTML ตาราง ฟอร์ม สื่อมัลติมีเดีย และการเข้าถึงได้ (Accessibility)
Selector, Box Model, Flexbox, CSS Grid, Media Query, Animation และ CSS Framework
ตัวแปร ฟังก์ชัน เงื่อนไข อาร์เรย์ อ็อบเจกต์ Event และการควบคุมหน้าเว็บผ่าน DOM
ES6+, Module, Promise, async/await, JSON และการเรียกข้อมูลจาก Web API
แนวคิด Component และ Reactive UI ด้วย Vue.js การจัดการ State และการเชื่อมต่อ API
การทำงานฝั่งเซิร์ฟเวอร์ด้วย PHP การรับส่งข้อมูลฟอร์ม Session/Cookie และการตรวจสอบข้อมูล
MySQL, CRUD, การเชื่อมต่อฐานข้อมูลอย่างปลอดภัย และการออกแบบ API ให้ Frontend เรียกใช้
PWA, Web API ของเบราว์เซอร์, AI บนเว็บ, ประสิทธิภาพเว็บ และพื้นฐานความปลอดภัย (OWASP)
Hosting, Domain, DNS, SSL, การ Deploy ผ่าน cPanel/Git, SEO และการดูแลเว็บหลังเผยแพร่
ลองใช้คำค้นอื่น เช่น HTML, CSS, JavaScript, PHP หรือ Deploy
บรรยาย 2 ชั่วโมง + ปฏิบัติการ 2 ชั่วโมงต่อสัปดาห์ แบ่งเป็น 4 ช่วงการเรียนรู้
หลักการทำงานของเว็บ HTTP และเบราว์เซอร์
องค์ประกอบเว็บ UX/UI และ Wireframe
VS Code, DevTools, Git และ GitHub
Semantic HTML ฟอร์ม และสื่อมัลติมีเดีย
Flexbox, Grid และ Media Query
Event และการควบคุมหน้าเว็บ
async/await และการเรียกใช้ Web API
ทฤษฎี + ปฏิบัติ HTML, CSS, JavaScript
Component, Reactive UI และ State
ฟอร์ม Session/Cookie และ Validation
MySQL, CRUD และ REST API
เชื่อม Frontend กับ Backend ในโปรเจกต์
PWA, Performance และ Web Security
Hosting, Domain, SSL, Deploy และ SEO
Demo บน URL จริง พร้อมรายงาน
สรุปความรู้ Frontend–Backend–Deploy
เน้นการลงมือปฏิบัติ วัดทั้งความเข้าใจหลักการ ทักษะการพัฒนา และคุณภาพผลงานที่เผยแพร่จริง
หลักการเว็บ HTML, CSS และ JavaScript
แบบฝึกปฏิบัติรายสัปดาห์ Frontend และ Backend
ออกแบบ พัฒนา และเผยแพร่เว็บจริง พร้อมนำเสนอ
Framework, Server-side, ฐานข้อมูล และการเผยแพร่
ผู้เรียนทำงานเป็นทีมเพื่อเลือกโจทย์จริง ออกแบบหน้าเว็บ พัฒนาทั้งส่วนฟรอนต์เอนด์และแบ็กเอนด์ที่เชื่อมต่อฐานข้อมูล แล้วนำขึ้นเผยแพร่บนอินเทอร์เน็ตพร้อมโดเมนและ SSL ก่อนนำเสนอผลงานผ่าน URL จริง
กำหนดผู้ใช้ ฟีเจอร์ Sitemap Wireframe และ UI Design
HTML, CSS, JavaScript และ Vue.js รองรับทุกขนาดหน้าจอ
PHP, MySQL, REST API และการตรวจสอบความปลอดภัยเบื้องต้น
Deploy ขึ้น Hosting พร้อมโดเมนและ SSL แล้วนำเสนอผ่าน URL จริง
ตารางสรุปสถานะเอกสาร แบบฝึกปฏิบัติ และตัวอย่างโค้ดสำหรับรายวิชา
| บท | หัวข้อ | หมวด | สื่อประกอบ | สถานะ |
|---|---|---|---|---|
| 01 | หลักการทำงานของเว็บและอินเทอร์เน็ต | Web Basics | PDF / Exercise | เตรียมอัปโหลด |
| 02 | โครงสร้าง องค์ประกอบ และการออกแบบเว็บ | Design | PDF / Template | เตรียมอัปโหลด |
| 03 | เครื่องมือสำหรับการพัฒนาเว็บ | Web Basics | PDF / Video | เตรียมอัปโหลด |
| 04 | HTML5 และโครงสร้างเว็บแบบ Semantic | Frontend | PDF / Lab | เตรียมอัปโหลด |
| 05 | CSS3 การตกแต่งเว็บและ Responsive Design | Frontend | PDF / Lab | เตรียมอัปโหลด |
| 06 | JavaScript พื้นฐานและการจัดการ DOM | Frontend | PDF / Lab | เตรียมอัปโหลด |
| 07 | JavaScript สมัยใหม่ JSON และ Fetch API | Frontend | PDF / Lab | เตรียมอัปโหลด |
| 08 | Web Framework สำหรับ Frontend | Frontend | PDF / Code | เตรียมอัปโหลด |
| 09 | Server-side Script สำหรับ Backend | Backend | PDF / Lab | เตรียมอัปโหลด |
| 10 | ฐานข้อมูลและการสร้าง REST API | Backend | PDF / SQL | เตรียมอัปโหลด |
| 11 | เทคโนโลยีเว็บสมัยใหม่และความปลอดภัย | Modern Web | PDF / Exercise | เตรียมอัปโหลด |
| 12 | การเผยแพร่เว็บสู่สาธารณะ | Publishing | PDF / Checklist | เตรียมอัปโหลด |
เริ่มจากหลักการเว็บ ลงมือเขียนโค้ดทุกสัปดาห์ แล้วเผยแพร่ผลงานให้ทุกคนเข้าถึงได้จริง