Practice & Assessment
Test your understanding of Animations, Transitions, and Advanced Patterns
Multiple Choice Questions
6Which class should you use to transition only color properties?
What does animate-ping do in Tailwind?
What does the peer class enable in Tailwind?
Which plugin adds the prose class for styling markdown or CMS content?
What is the key difference between container queries (@md:) and viewport breakpoints (md:)?
What is the correct way to add a custom keyframe animation to Tailwind?
Coding Challenges
1Build a skeleton loading screen with Tailwind animations
Create a 2x2 grid of skeleton cards using Tailwind animations. Each skeleton card must simulate: a rectangular image placeholder (aspect-video, gray bg), a title line (h-4, rounded, w-3/4), two body lines (h-3, rounded, w-full and w-2/3), and a button placeholder (h-8, rounded, w-24). All skeleton shapes must use animate-pulse with bg-gray-200. Add a toggle button that swaps between skeleton state and loaded state (showing real card content). Expected: convincing skeleton loader that transitions to content on click. Time estimate: 20-25 minutes.
Mini Project
Complete SaaS Landing Page
Build a fully responsive, dark-mode-enabled SaaS landing page using all skills from the entire course. Required sections: fixed frosted-glass navbar (backdrop-blur, semi-transparent bg, dark mode aware) with logo, nav links, and CTAs; hero section (centered, responsive heading, subtext, two buttons, pill badge); features section (3-column responsive grid with feature cards); testimonials (3-column grid of quote cards with avatar, name, role); pricing (3-tier cards, featured center card elevated, all with feature lists and CTAs); footer (4-column grid, logo, links, copyright). Technical requirements: custom design tokens in config; dark mode via class strategy with working JS toggle; at least 3 animations (hero fade-in, card hover transitions, animate-pulse on a loading state); one use of the peer modifier (custom checkbox or floating label); responsive across all breakpoints; all components keyboard accessible.