Web Development · WDC-107

Angular 19 with Tailwind CSS 4.0

18 hours 3 days

Last updated 25 Sep 2026

Angular 19 with Tailwind CSS 4.0 is a 18-hour training course by IT Genius Institute. Angular JS เป็นหนึ่งใน Front end framework ที่กำลังมาแรงและได้รับความนิยมเป็นอย่างสูง ตัวหนึ่ง ถูกพัฒนาขึ้นโดย Google เพื่อนำมาประยุกต์สร้างโปรเจกต์ในรูปแบบ…

Training schedule

No public rounds are open right now — register your interest and we will contact you when the next round opens, or request an in-house session for your team.

Corporate training quote

Angular 19 with Tailwind CSS 4.0 Angular JS เป็นหนึ่งใน Front end framework ที่กำลังมาแรงและได้รับความนิยมเป็นอย่างสูง ตัวหนึ่ง ถูกพัฒนาขึ้นโดย Google เพื่อนำมาประยุกต์สร้างโปรเจกต์ในรูปแบบ Single Page Application (SPA) หรือแอพพลิเคชั่นที่มีเพียงหน้าเดียว ไม่ต้องรีโหลดหรือส่งข้อมูลไปมาหลายหน้า โดยที่ Client จะติดต่อกบทาง Server ด้วยการเรียกผ่านเทคนิค AJAX ไปยัง Restful API (REST) ของ Server ทำให้ประสบการณ์การใช้งานของผู้ใช้ดีขึ้นมาก

โดยในหลักสูตรนี้เป็นจุดเริ่มต้นสำหรับผู้สนใจศึกษา Framework Angular โดยเน้นเรื่องพื้นฐานตั้งแต่การเตรียมความพร้อม การติดตั้ง เรียนรู้ concept ของ framework การทำ binding การส่งข้อมูลระหว่าง Controller กับ View การสร้าง Template ไปจนถึงการติดต่อกับ Web Service พื้นฐาน บน Server ที่ประยุกต์ทำ API

ในโปรเจกต์ต่างๆ และผู้เรียนจะได้เรียนรู้ตั้งแต่การติดตั้งและตั้งค่าโปรเจกต์ไปจนถึงการสร้างเว็บไซต์แบบ Responsive Design โดยใช้ Tailwind CSS ร่วมกับ Angular JS เพื่อสร้างงานออกแบบเว็บไซต์ที่มีประสิทธิภาพ ทั้งในด้านการใช้งานและความสวยงาม เหมาะสำหรับต่อยอดศึกษาการใช้งานใน Angular ในขั้นสูงต่อไป

Objectives

เข้าใจความแตกต่าง Angular Version ต่างๆ
เข้าใจการทำงานและจัดการ Form & Validation
เข้าใจการใช้งาน Pipes
เข้าใจการใช้ Angular ติดต่อกับส่วน Backend
สามารถนำ Angular Framework ไปใช้สร้างโปรเจกต์ต่างๆ ในองค์กรได้
สามารถพัฒนา Web Application ด้วยภาษา Angular JS ขั้นพื้นฐานร่วมกับการปรับแต่งด้วย Tailwind CSS

Who this course is for

ผู้ที่ต้องการพัฒนา Web Application ด้วยภาษา Angular JS ขั้นพื้นฐาน ร่วมกับการปรับแต่งด้วย Tailwind CSS
IT Managers
Developers
ผู้สนใจทั่วไป

Prerequisites

เข้าใจพื้นฐานภาษา Javascript
เข้าใจหลักการทำงานเบื้องต้นของ Web Service
มีพื้นฐานการเขียนโปรแกรมมิ่งเช่น PHP หรือ ASP มาบ้าง

Curriculum

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 จริง

Frequently asked questions

Who is Angular 19 with Tailwind CSS 4.0 for, and what background is needed?

Built for ผู้ที่ต้องการพัฒนา Web Application ด้วยภาษา Angular JS ขั้นพื้นฐาน ร่วมกับการปรับแต่งด้วย Tailwind CSS · IT Managers · Developers Background you should have: เข้าใจพื้นฐานภาษา Javascript · เข้าใจหลักการทำงานเบื้องต้นของ Web Service Not sure the fit is right? Talk to our team on LINE @itgenius or call 02-570-8449.

How much does Angular 19 with Tailwind CSS 4.0 cost and how long does it run?

THB 9,500 (currently THB 8,550 on promotion). The course runs 18 hours. The fee covers course materials, lunch and refreshments throughout. Pay by bank transfer to the company account, confirm it on our payment page, and we can issue the receipt or tax invoice in your company's name.

Do I get a certificate?

Yes. Everyone who completes the course receives a Certificate of Completion from IT Genius Institute. Each certificate carries its own number, and anyone holding that number can verify it online on our certificate page, so you can add it to your portfolio or pass it to HR as evidence of training.

Where does the training take place, and is there an online option?

You can attend onsite at IT Genius Institute or arrange to join online, and we also run it as a private in-house session for your team. Ask about dates and venues on LINE @itgenius or call 02-570-8449.

What if I fall behind or miss a session — can I retake it?

Yes. You may retake the same course free of charge in a later round, under the institute's conditions. Tell our team which course and round you attended, and we will check it and offer you the rounds that still have seats. Ask us on LINE @itgenius or call 02-570-8449.

How do I enrol, or request a quotation for my company?

Enrol online with the registration form on this page. You can register several attendees at once and enter your tax ID and billing address for the tax invoice. Or request a company quotation straight from the quote button. For anything else call 02-570-8449 or reach us on LINE @itgenius.