Angular 19 with Tailwind CSS 4.0

Module 1: แนะนำภาพรวมและแนวคิดของ Angular

• แนะนำภาพรวมของ Angular
• ความแตกต่างระหว่าง Angular JS กับ Angular 9 และ Angular 16
• มีอะไรใหม่ใน Angular 16
• ติดตั้งเครื่องมือและสภาพแวดล้อมที่จำเป็น
• ลงส่วนเสริมและตั้งค่าเครื่องมือให้เหมาะสมสำหรับการเริ่มต้น

Module 2: แนะนำ CSS Framework และ Tailwind CSS

• รู้จัก CSS Framework และประโยชน์ในการใช้งาน
• ทำความเข้าใจกับแนวคิด Utility-First ของ Tailwind CSS
• เปรียบเทียบระหว่าง Tailwind CSS และ Framework อื่น ๆ
• ภาพรวมของการใช้งาน Tailwind CSS ในการพัฒนาเว็บ

Module 3: การติดตั้งและตั้งค่า Tailwind CSS ใน Angular JS

• การตั้งค่า Tailwind CSS ในโปรเจกต์ Angular JS
• การปรับแต่งไฟล์ Vite สำหรับ Angular JS
• Workshop: ตั้งค่า Tailwind CSS ในโปรเจกต์ Angular JS

Module 4: โครงสร้างและการใช้งาน Utility Class

• แนวคิดของ Utility-First CSS
• การใช้งาน Class Utilities สำหรับ Layout
• การปรับแต่ง Typography, Spacing และ Colors
• การจัดการ Grid และ Flexbox ด้วย Tailwind CSS

Module 5: การสร้างคอมโพเนนต์ UI พื้นฐาน

• การออกแบบปุ่ม (Buttons) ด้วย Tailwind CSS
• การสร้าง Navbar และ Footer
• การออกแบบ Card Component
• Workshop: สร้างชุดคอมโพเนนต์ UI สำหรับหน้า Landing Page

Module 6: การปรับแต่งและขยาย Tailwind CSS

• การเพิ่ม Custom Utilities
• การสร้าง Theme Colors และปรับ Typography
• การใช้ Plugins เพื่อเพิ่มความสามารถ
• Workshop: ทดลองปรับแต่ง Tailwind CSS ด้วย Custom Configurations

Module 7: การทำ Responsive Design ใน Tailwind CSS

• การออกแบบเว็บไซต์ให้รองรับหลายหน้าจอ
• การใช้ Breakpoints ของ Tailwind CSS
• การจัดการ Layout ที่ยืดหยุ่น
• Workshop: ปรับแต่งหน้าเว็บให้รองรับหน้าจอหลากหลายขนาด

Module 8: เริ่มสร้างโปรเจกต์ Angular

• เริ่มติดตั้งโปรเจกต์แรกกับ Angular 19
• การตั้งค่าโปรเจกต์ที่สร้างขึ้นมา
• เรียนรู้โครงสร้างโปรเจกต์ Angular 19 พื้นฐาน
• รู้จักภาษา TypeScript และการทำงานร่วมกับโปรเจกต์ Angular
• ทดสอบ Run และปรับแต่งโปรเจกต์ที่สร้างขึ้นมา

Module 9: พื้นฐานการทำงานกับ Component

• รู้จัก Component และความสำคัญใน Angular
• ฝึกสร้าง Component ใหม่
• การปรับแต่ง Component ในโปรเจกต์
• การทำงานกับ Component Templates
• การทำงานกับ Component Style
• เรียนรู้การทำงานกับ Component Selector

Module 10: การทำ Data binding

• รู้จัก Databinding
• การทำงานกับ String Interpolation
• เรียนรู้ Property Binding
• เรียนรู้ Property Binding vs String Interpolation
• เรียนรู้และทำงานกับ Event Binding
• การส่งข้อมูลระหว่าง Component ด้วย Event Binding
• รู้จักการทำงานแบบ Two-Way-Databinding
• ทำงานกับฟอร์มร่วมกับ Databinding

Module 11: การทำงานกับ Directives

• ทำความเข้าใจกับ Directive ต่างๆ ใน Angular
• เรียนรู้ directive แบบต่างๆ เช่น ngIf, ngStyle, ngFor เป็นต้น
• workshop ตัวอย่างการทำงานกับ directive

Module 12: การทำงานกับ Modules

• แนะนำทำความรู้จัก Module ใน Angular
• Analyzing the AppModule
• Getting Started with Feature Modules
• Splitting Modules Correctly
• Adding Routes to Feature Modules
• Component Declarations
• Understanding Lazy Loading
• Implementing Lazy Loading
• Modules & Services

Module 13: การทำงานกับ Routing

• ทำไมต้องใช้ Router
• ทำความเข้าใจการทำงานของ Router จากโปรเจกต์ตัวอย่าง
• Setting up and Loading Routes
• Navigating with Router Links
• Understanding Navigation Paths
• Styling Active Router Links
• Navigating Programmatically
• Using Relative Paths in Programmatic Navigation
• Passing Parameters to Routes
• Fetching Route Parameters
• Fetching Route Parameters Reactively

Module 14: การทำงานและจัดการ Form & Validation

• Creating the Form and Registering the Controls
• Submitting and Using the Form
• Understanding Form State
• Accessing the Form with @ViewChild
• Adding Validation to check User Input
• Built-in Validators & Using HTML5 Validation
• Using the Form State
• Outputting Validation Error Messages
• Set Default Values with ngModel Property Binding
• Using ngModel with Two-Way-Binding
• Grouping Form Controls
• Handling Radio Buttons
• Using Form Data
• Resetting Forms

Module 15: การใช้งาน Pipes

• Introduction & Why Pipes are useful
• Using Pipes
• Parametrizing Pipes
• Chaining Multiple Pipes
• Creating a Custom Pipe
• Parametrizing a Custom Pipe
• Understanding the "async" Pipe

Module 16: การเขียนเชื่อมต่อกับ Http Client Service

• เรียนรู้การใช้ Angular ติดต่อกับส่วน Backend

• The Anatomy of a Http Request
• Backend (Firebase) Setup
• Sending a POST Request
• GETting Data
• Using RxJS Operators to Transform Response Data
• Using Types with the HttpClient
• Outputting Posts
• Showing a Loading Indicator
• Using a Service for Http Requests
• Services & Components Working Together
• Sending a DELETE Request
• Handling Errors

Module 17: Workshop: การสร้างหน้า Landing Page

• วางโครงสร้างของหน้า Landing Page
• การออกแบบ UI ด้วย Tailwind CSS
• การเพิ่มฟีเจอร์ Interactive ด้วย React
• การปรับแต่งหน้า Landing Page ให้รองรับ Responsive Design

Module 18: การเผยแพร่ Build and Deploy Project React & TailwindCSS

• การ Build โปรเจกต์ React สำหรับ Production
• การตั้งค่า Web Hosting (เช่น Vercel, Netlify หรือ Render Cloud)
• การ Deploy Project บน Render Cloud พร้อมการตรวจสอบความสมบูรณ์
• Workshop: ทดลอง Deploy หน้า Landing Page จริง