เรียนรู้การพัฒนาเว็บแบบครบกระบวนการ ตั้งแต่โครงสร้างหน้าเว็บ การออกแบบ 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, สื่อเสียง, แบบฝึกหัด และโค้ดตัวอย่าง
ติดตั้ง/ใช้งาน 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 และโครงงานเว็บแอป
โครงสร้างคะแนน เครื่องมือ และภาพรวม 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 | เสียง | แบบฝึกหัด/โค้ด | สถานะ |
|---|---|---|---|---|---|
| 1 | พื้นฐานการพัฒนาและเขียนโปรแกรมบนเว็บ | Audio | พร้อม | ||
| 2 | เครื่องมือพัฒนาเว็บและ HTML เบื้องต้น | พร้อม | |||
| 3 | ภาษา HTML และโครงสร้างหน้าเว็บ | พร้อม | |||
| 4 | CSS และการออกแบบ Responsive Web | รออัปโหลด | |||
| 5 | JavaScript พื้นฐานสำหรับเว็บ | รออัปโหลด | |||
| 6 | DOM, Event และ Form Validation | รออัปโหลด | |||
| 7 | Bootstrap และการออกแบบ UI/UX | รออัปโหลด | |||
| 8 | Frontend ด้วย Vue 3 | พร้อม | |||
| 9 | Vue Router, REST API และ CRUD | รออัปโหลด | |||
| 10 | Deployment, Security และโครงงานเว็บ | รออัปโหลด |
เริ่มจากพื้นฐานเว็บ แล้วค่อยต่อยอดสู่ JavaScript, Vue 3, API และโครงงานจริง