88726065: Front-end Web Development

3(2-2-5)

Join Classroom

คำอธิบายรายวิชา:
การสร้างเว็บเพจด้วยเอชทีเอ็มแอล การจัดรูปแบบเว็บเพจด้วยสไตล์ชีท การโปรแกรมเว็บด้วยจาวาสคริปต์ โมเดลโครงสร้างของเอกสารเอชทีเอ็มแอล การโปรแกรมเชิงวัตถุในจาวาสคริปต์ การพัฒนาเว็บแบบโมบายเฟิร์สด้วย CSS เฟรมเวิร์ค การใช้ไลบรารีจาวาสคริปต์เพื่อจัดการกับเอกสารเอชทีเอ็มแอล การจัดการเหตุการ์ แอนิเมชัน เอแจกซ์ การออกแบบส่วนติดต่อผู้ใช้อย่างมีประสิทธิภาพ เครื่องมือและสภาพแวดล้อมสำหรับการพัฒนาโปรแกรมประยุกต์บนเว็บ ข้อคำนึงถึงด้านความปลอดภัยบนเว็บ

Creating web pages with hypertext markup language (HTML), styling web pages using cascading style sheets (CSS); websites programming using JavaScript; document object model (DOM), object-oriented in JavaScript programming; mobile-first front-end web development with CSS frameworks, HTML DOM tree manipulation and transversion using JavaScript library, event handling, CSS animation, and Ajax; user interface design for effective interaction and processing; tools and environments for web application development; security issues for web application
วัตถุประสงค์รายวิชา
  1. อธิบายสถาปัตยกรรมเว็บและกระบวนการสื่อสารบน HTTP/HTTPS ได้
  2. ออกแบบโครงสร้างเว็บเพจด้วย HTML5 semantic elements และสร้างรูปแบบด้วย CSS ตามหลัก responsive design ได้
  3. เขียนโปรแกรม JavaScript เชิงโมดูลเพื่อโต้ตอบกับ DOM จัดการเหตุการณ์ และเรียกใช้ข้อมูลผ่าน Fetch API ได้
  4. ประยุกต์ใช้เฟรมเวิร์ค/ไลบรารี CSS และแนวทาง mobile-first เพื่อพัฒนา UI ที่ใช้งานได้จริงและเข้าถึงได้ (a11y) ได้
  5. ประเมินและปรับปรุงประสิทธิภาพ ความปลอดภัยเบื้องต้น และคุณภาพโค้ดด้วยเครื่องมือสมัยใหม่ได้
ตารางการเรียน (16 สัปดาห์)
สัปดาห์ หัวข้อเรียน บรรยาย ปฏิบัติการ/งาน
1 เครื่องมือ & Web Basics
  • ภาพรวมวิชา
  • เครื่องมือพัฒนา (VS Code, Git, DevTools)
  • HTTP/HTTPS พื้นฐาน

Lab01
GIT USECASE พร้อมคำสั่ง
Markdown Guide
ปัญหา push code ขึ้น github แล้ว เป็นชื่อคนอื่น

ติดตั้งเครื่องมือ สร้าง Git repo สร้าง HTML แรก
2 HTML
HTML5
  • HTML5 structure
  • Semantic tags
  • Forms & attributes
 Lab02
ฝึก semantic layout, สร้าง form พื้นฐาน
Assignment#1
3 CSS
Positioning
Display & Layout
Flexbox
Grid
  • CSS selectors
  • Box model
  • Flexbox layout
  • Responsive units
 Lab03 -- Guideline for Lab03
Assignment#2

ฝึก Flexbox, responsive layout ทีละขั้น
Lab03 - Flexbox & Grid | Quiz: Flexbox, Grid และ Responsive Design
4 Responsive & Framework
Responsive CSS 		สร้าง responsive page ด้วย CSS Framework
Lab04 - Bootstrape Framework | Quiz: HTML, CSS, Bootstrap 5
5 JS Basics
การใช้งาน JavaScript กับ HTML

ติดตั้ง Charset, Markdown Reader extension เพื่ออ่านไฟล์ .md

Functions
  • Variables
  • Data types
  • Functions
  • Control flow
  • *ไม่รวม DOM*
 ฝึก: ตัวแปร, ฟังก์ชัน, loop แบบง่ายๆ
Lab05-1
Lab05-2 - ทำ 2 คน

Lab05-3
6 Objects & Arrays
Object, Array
  • Objects
  • Arrays
  • .map(), .filter(), .reduce()
 ฝึก: ประมวลผลข้อมูล array/object
Lab06
7 DOM & Events

DOM Methods & Event Listeners
  • DOM selectors
  • Modify elements
  • Event handling
  • Event delegation
 ฝึก: select/modify DOM, handle events
Lab07
8 สอบกลางภาค (ทฤษฎี + ปฏิบัติ)
9 Async Basics
Async-easy
Async-full
  • Promise
  • async/await
  • setTimeout
  • Error handling
 ฝึก: Promise + async/await basics
Lab09-Todo
Lab09-Pomodoro
Lab09-Weather App
10 Fetch API & SPA Start
Fetch API
Cors
SPA
Hash-based Routing
  • Fetch API
  • CORS
  • SPA structure
  • Hash-based routing
 Lab10
Modern JavaScript

GitHub Deploy Guide
  • ESLint/Prettier setup
  • Web Security (XSS/CSRF)
  • Debugging
 รายละเอียดโครงงาน
Phase 1 Task
Phase 2 Task
Phase 3 Task
Phase 4 Task
11 React #1: Basics & Components
  • React คืออะไร + Vite setup
  • JSX syntax
  • Function Components
  • Props (passing data)
  • Rendering lists (.map)
 Lab11
12 React #2: useState & Events
  • useState Hook
  • Event handling in React
  • Form inputs (controlled components)
  • Conditional rendering
 Lab12
13 React #3: useEffect & API
  • useEffect Hook (lifecycle)
  • Fetching data from API
  • Loading + Error states
  • Dependency arrays
 Lab13
14 React #4: Router & Deployment


React Essential Guide
  • React Router (routing basics)
  • useContext (intro state sharing)
  • Deployment (Vercel/Netlify)
 Lab14
15 นำเสนอโครงการ (Demo + Q&A)
16 สอบปลายภาค (ทฤษฎี + ปฏิบัติ)
แผนการทำโครงงาน (Project-Based Learning):

วัตถุประสงค์: นิสิตจะทำโครงงานตลอดภาคเรียน โดยเริ่มจากแบบฝึกหัดเล็กๆ ไปยังโครงการใหญ่

  • สัปดาห์ 1-4: แบบฝึกหัด HTML/CSS ย่อยๆ (Build confidence)
  • สัปดาห์ 5-8: แบบฝึกหัด JavaScript (Basics + DOM + Events + Midterm)
  • สัปดาห์ 9: Async/Await Basics
  • สัปดาห์ 10-12: Single Page App (SPA) - 3 Checkpoints
  • สัปดาห์ 15: นำเสนอโครงการ (Demo + Q&A)

SPA Checkpoint

  • Week 11:
  • Week 12:
  • Week 13:
  • Week 14:
การประเมินผล (Grading):
  • แบบทดสอบระหว่างเรียน (Quizzes): 10%
  • การบ้าน/งานเดี่ยว: 10%
  • งานปฏิบัติการในห้อง Lab: 15%
  • โครงการ (SPA): 15%
  • สอบกลางภาค (สัปดาห์ 8): 25%
  • สอบปลายภาค (สัปดาห์ 16): 25%
เกณฑ์การให้เกรด (Grade Scale):
  • เกรด A: 80 ขึ้นไป
  • เกรด B+: 75-79
  • เกรด B: 70-74
  • เกรด C+: 65-69
  • เกรด C: 60-64
  • เกรด D+: 55-59
  • เกรด D: 50-54
  • เกรด F: ต่ำกว่า 50
📚 ตำรา/หนังสือ/แหล่งที่มา
📖 หนังสือและตำรา
  1. MDN Web Docs
    Available at: developer.mozilla.org
    - Complete reference for HTML, CSS, JavaScript
  2. Flanagan, D. (2020). JavaScript: The Definitive Guide (7th Edition). O'Reilly Media.
    - Comprehensive guide to JavaScript language
  3. Duckett, J. (2011). HTML and CSS: Design and Build Websites. Wiley.
    - Visual approach to web design fundamentals
🌐 Online Resources & Documentation
  • MDN Web Docs
    developer.mozilla.org
    - HTML5 elements, CSS Grid/Flexbox, JavaScript API reference
  • web.dev
    web.dev
    - Modern web development best practices
  • Bootstrap Documentation
    getbootstrap.com
    - CSS Framework for responsive design
  • Tailwind CSS Documentation
    tailwindcss.com
    - Utility-first CSS Framework
🛠️ Tools & Environments
🧪 Testing & Code Quality
🔒 Web Security Resources
  • OWASP (Open Web Application Security Project)
    owasp.org
    - Web security best practices and guidelines
  • OWASP Top 10
    - Common web application security risks
📞 Contact & Support:

Instructor:อ. วิทวัส พันธุมจินดา
Email: wittawas@buu.ac.th
Office Hours: Thursdays 10:00 AM - 12:00 AM OR by appointment

Last Updated: November 2025
Academic Year: 2567
Semester: 2

Free Tools