เรียนรู้การพัฒนาเว็บแบบครบกระบวนการ ตั้งแต่โครงสร้างหน้าเว็บ การออกแบบ Responsive UI, JavaScript, Vue 3, การเชื่อมต่อ API, CRUD, Authentication และการ Deploy ใช้งานจริง
รายวิชานี้มุ่งเน้นการพัฒนาเว็บแอปพลิเคชันสมัยใหม่ ตั้งแต่พื้นฐาน HTML, CSS, JavaScript, การออกแบบหน้าเว็บแบบ Responsive, การใช้ Bootstrap, การสร้าง Single Page Application ด้วย Vue 3, การเชื่อมต่อ REST API, ระบบ Login/Register, ระบบจัดการข้อมูล และการเผยแพร่เว็บไซต์ขึ้นใช้งานจริง
ออกแบบ UI/UX สร้างหน้าเว็บ Responsive และโต้ตอบกับผู้ใช้ได้
เชื่อมต่อ API จัดการข้อมูล และพัฒนาเว็บแอปที่ใช้งานจริงได้
ผู้เรียนจะสามารถสร้างหน้าเว็บและเว็บแอปแบบ Frontend ได้อย่างเป็นระบบ พร้อมเชื่อมต่อ API และนำไปต่อยอดเป็นโครงงานจริง
ค้นหาและกรองบทเรียนได้ทันที พร้อมลิงก์ PDF สื่อเสียง แบบฝึกหัด และโค้ดตัวอย่าง
แสดง 10 จาก 10 บทเรียน
แนวคิดเว็บไซต์ เว็บแอป Client-Server, HTTP/HTTPS, Browser, Hosting และเครื่องมือที่ใช้
ติดตั้งและใช้งาน VS Code, โครงสร้างไฟล์เว็บ, HTML Document, Tag, Attribute และ Live Server
Semantic HTML, Heading, Paragraph, Link, Image, List, Table, Form และการจัดโครงสร้างหน้าเว็บ
Selector, Box Model, Color, Typography, Flexbox, CSS Grid, Media Query และ Responsive Layout
Variable, Data Type, Operator, Condition, Loop, Function, Array, Object และ Error เบื้องต้น
เลือก Element, จัดการ Event, สร้าง Interactive UI, ตรวจสอบฟอร์ม และใช้งาน Fetch API เบื้องต้น
Grid System, Component, Navbar, Card, Modal, Form, Icon และการออกแบบหน้าเว็บให้ใช้งานง่าย
สร้างโปรเจกต์ด้วย Vite, Vue Component, Reactive Data, Directive, v-if, v-for, v-model และ Event Binding
สร้างหลายหน้าใน Vue, เชื่อมต่อ REST API, ทำระบบ CRUD, Login/Register และจัดการข้อมูลสินค้า
Build, Deploy, GitHub, Netlify/Vercel, Basic Security, Performance, Accessibility และแนวทางส่งโครงงาน
ลองใช้คำค้นอื่น เช่น HTML, CSS, JavaScript, Vue, API หรือ Deploy
จัดลำดับจากพื้นฐานเว็บ ไปสู่ Vue 3, API และโครงงานเว็บแอป แบ่งเป็น 4 ช่วงการเรียนรู้
โครงสร้างคะแนน เครื่องมือ และภาพรวม Web Programming
Client-Server, HTTP, Browser, Hosting และ Workflow
โครงสร้างเอกสาร HTML และเครื่องมือพัฒนา
Form, Table, Media และโครงสร้างหน้าเว็บ
Box Model, Flexbox, Grid และ Responsive
Variable, Function, Condition, Loop, Array/Object
Event, DOM, Validation และ Interactive UI
HTML, CSS, JavaScript พื้นฐาน และงานปฏิบัติ
Grid, Component, Form, Modal และ Layout
Vite, Component, Directive และ Reactive Data
Routing, Props, Events และ Component Structure
Fetch/Axios, GET/POST/PUT/DELETE และ JSON
Authentication, Route Guard และ Local Storage
ตรวจความก้าวหน้า Wireframe, Code และ API
นำเสนอ Demo, Repository และคู่มือผู้ใช้
Vue, API, CRUD, Deploy และสรุปองค์ความรู้
วัดทั้งความเข้าใจพื้นฐาน ทักษะปฏิบัติ และความสามารถในการพัฒนาเว็บแอปจริง
HTML, CSS, JavaScript พื้นฐาน และโจทย์ปฏิบัติหน้าเว็บ
พัฒนาเว็บแอป เช่น Login/Register, Product Management หรือ Dashboard
ประยุกต์ใช้ Vue 3, API, CRUD, Deploy และการออกแบบระบบเว็บ
ตามเกณฑ์ที่ผู้สอนกำหนดในแต่ละภาคเรียน
ผู้เรียนเลือกหัวข้อพัฒนาเว็บแอปโดยใช้ HTML/CSS/JavaScript/Vue 3 และเชื่อมต่อ API ตามความเหมาะสม พร้อมส่งโค้ด เอกสารสรุป Wireframe และสาธิตการใช้งาน
ระบุผู้ใช้ ขอบเขต และฟังก์ชันหลักของเว็บแอป
ออกแบบหน้าจอหลัก เช่น Login, Dashboard, Product List และ Form
จัดโครงสร้าง Component, Router, CRUD และ Validation
ตรวจสอบการทำงานบนมือถือ เตรียม Repository และสาธิตระบบ
ตารางรวมสื่อประกอบครบ 10 บท เพื่อให้นักศึกษาเข้าถึงเอกสารได้ง่าย
| บท | หัวข้อ | PDF / Slide | เสียงบรรยาย | แบบฝึกหัด / โค้ด | สถานะ |
|---|---|---|---|---|---|
| 01 | พื้นฐานการพัฒนาและเขียนโปรแกรมบนเว็บ | ฟัง | — | พร้อมเรียน | |
| 02 | เครื่องมือพัฒนาเว็บและ HTML เบื้องต้น | — | แบบฝึกหัด | พร้อมเรียน | |
| 03 | ภาษา HTML และโครงสร้างหน้าเว็บ | — | แบบฝึกหัด | พร้อมเรียน | |
| 04 | CSS และการออกแบบ Responsive Web | — | แบบฝึกหัด | เตรียมอัปโหลด | |
| 05 | JavaScript พื้นฐานสำหรับเว็บ | — | โค้ดตัวอย่าง | เตรียมอัปโหลด | |
| 06 | DOM, Event และ Form Validation | — | แบบฝึกหัด | เตรียมอัปโหลด | |
| 07 | Bootstrap และการออกแบบ UI/UX | — | แบบฝึกหัด | เตรียมอัปโหลด | |
| 08 | Frontend ด้วย Vue 3 | — | โค้ดตัวอย่าง | พร้อมเรียน | |
| 09 | Vue Router, REST API และ CRUD | — | โค้ดตัวอย่าง | เตรียมอัปโหลด | |
| 10 | Deployment, Security และโครงงานเว็บ | — | คู่มือโครงงาน | เตรียมอัปโหลด |
เริ่มจากพื้นฐานเว็บ แล้วค่อยต่อยอดสู่ JavaScript, Vue 3, API และโครงงานจริง