ออกแบบเว็บสมัยใหม่ด้วย Tailwind CSS 3.0

Day 1

Module 1: Introduction to Tailwind CSS 3.0

• การเตรียมเครื่องมือ VS Code ลงปลั๊กอินที่จำเป็น
• ติดตั้ง Tailwind CSS 3.0 ลงโปรเจ็กต์
• เรียนรู้ระบบ Grid System ใน Tailwind 3.0
• เรียนรู้การกำหนด Container
• เรียนรู้ Flexbox ใน Tailwind 3.0
• Typography
• Width & Height
• Margins and paddings
• Borders & Colors
• Box Alignment
• Background Properties
• Box Shadow and Opacity
• Hover Effects

Module 2: Transition and Animation in Tailwind CSS

• Transition Properties
• Default Animations of TailwindCSS
• Transition Duration
• Transition Timing Function
• Transition Delay
• Animation
• Transform

Module 3: Workshop Landing page with Tailwind CSS 3.0

• เตรียม Resources สำหรับสร้างหน้า Landing page
• ขึ้นโปรเจ็กต์ด้วย Tailwind CSS 2.0
• ออกแบบส่วน Navigation
• ออกแบบส่วน Feature
• ออกแบบส่วน Content
• ออกแบบส่วน Footer
• ปรับแต่งให้รองรับ Mobile Site

Day 2

Module 4: Responsive Design in Tailwind CSS

• Responsive Designing with Tailwind CSS
• Mobile First
• Customizing breakpoints
• Extending the default breakpoints
• Max-width breakpoints
• Multi-range breakpoints
• Custom media queries

Module 5: Explore JIT Compiler for Tailwind CSS

• ทำความรู้จัก JIT Compiler
• สำรวจและติดตั้ง JIT Compiler ลงในโปรเจ็กต์ Tailwind CSS
• การ config ค่าสำหรับการ build JIT
• แนวทางการประยุกต์ไปใช้งาน

Module 6: Workshop Admin Template with Tailwind CSS 3.0

• การเตรียม Resources สำหรับสร้างหน้า Admin
• ขึ้นโปรเจ็กต์ร่วมกับ JIT Compiler
• สร้างหน้า Login page
• สร้างหน้า Register page
• สร้างหน้า Forgotpassword Page
• สร้างส่วน Navigation เมนู
• สร้างส่วน Sidebar
• สร้างส่วน Content
• สร้างส่วน Footer

Module 7: การ Deployed โปรเจ็กต์ Tailwind CSS

• ตัวอย่างการนำโปรเจ็กต์ไปใช้งานบน Github page
• ตัวอย่างการนำโปรเจ็กต์ไปใช้งานบน Netlify