Join us in this Tailwind Extravaganza! You will have the chance to upgrade the Tour of Heroes UI and compete for prizes while learning UI/UX skills, Tailwind concepts, and component library integration strategies throughout the workshop. We’ll begin by ensuring everyone is up-to-speed and ready to conquer UI with some CSS and Angular basics, then go from there! Check out the agenda below for concepts we will cover. Each segment will have challenges and hands-on coding assignments for you to try your hand at.

Beginner UI & CSS Skills

• Quick Intro to the Tour of Heroes & Angular Architecture
• Angular Basics (Styles, Templates, View Encapsulation, & More)

(Feel free to skip this segment if you are familiar with Angular & CSS Basics.)

Tailwind Intro

• Utility First vs Others
• When Tailwind isn’t the Solution
• Getting Started with Tailwind in your Angular Apps & Tailwind Basics

Responsive Design with Tailwind

• Layout, Flexbox, Grid, & Spacing

An Animated Tailwind

• States (:hover) & Pseudo Selectors (:empty)
• Transforms, Transitions, & Animations

Customizability with Tailwind

• Adding Custom Styles
• Reusing Styles

Tailwind Advanced Tidbits

• Functions & Directives
• Tailwind Plugins (Forms)

Component Libraries & Tailwind

• Integrating Kendo UI with Tailwind
• How Tailwind Layers with Your Custom Branding and Style Systems

Wrap Up

• Ensuring You’re Production Ready!
• Resources & Prize Winners 🎉