|
Week - 1
|
|
Course introduction, presentation of course structure and assessment method, an overview of the modern CSS framework ecosystem, comparison of utility first and component based approaches, introduction to the toolchain used in the course. |
|
|
Week - 2
|
|
Tailwind CSS fundamentals, installation, configuration file, utility classes, responsive breakpoints and state variants, the relationship between the theme system and design tokens. |
|
|
Week - 3
|
|
Component extraction approach with Tailwind, the @apply directive, reusable patterns, ensuring team consistency, dark mode configuration and customization examples. |
|
|
Week - 4
|
|
An overview of accessible component libraries, the headless component philosophy, the shadcn and Radix approaches, keyboard navigation, screen reader compatibility, adapting ready components to project needs. |
|
|
Week - 5
|
|
Introduction to AI assisted interface development, the place of generative AI in the frontend workflow, the limits of code generation, validation and review processes.
|
|
|
Week - 6
|
|
Component generation through prompts, use of tools such as v0, effective prompt writing, adapting generated code to project structure, customization according to brand identity.
|
|
|
Week - 7
|
|
Design to code conversion tools, component generation from design files with Figma plugins, the intersection of designer and developer workflows, quality control of generated code.
|
|
|
Week - 8
|
|
Midterm examination.
|
|
|
Week - 9
|
|
AI assisted accessibility audit, color contrast analysis, label suggestions, screen reader compatibility check, generating accessibility reports with AI assistants.
|
|
|
Week - 10
|
|
Design tokens and design systems, configuration of color, typography, spacing and shadow scales, the relationship between frameworks and the design system.
|
|
|
Week - 11
|
|
The bridge between Figma and development, token synchronization, reading design files, in team feedback processes, collaboration approaches with designers.
|
|
|
Week - 12
|
|
An overview of other framework approaches, local scope with CSS modules, CSS-in-JS approaches, a brief introduction to modern type safe styling tools, comparison of approaches.
|
|
|
Week - 13
|
|
Modern build chain, integration with PostCSS and Vite, automatic vendor prefixing, purging unused styles, optimization techniques for production builds.
|
|
|
Week - 14
|
|
Project based application, end to end development of a small scale interface project by using Tailwind, headless component libraries and AI assistants together, evaluation and general recap.
|
|