|
Week - 1
|
|
Modular CSS architecture with SASS, the concept of a preprocessor and SASS syntax, variables, nesting rules and defining mixins, sustainable style organization with partial file structure.
|
|
|
Week - 2
|
|
CSS Grid Layout I, basic structure and line based placement, grid container and item properties, defining rows and columns, explicit and implicit grids, simple two dimensional page layouts.
|
|
|
Week - 3
|
|
CSS Grid Layout II, advanced techniques, grid areas, the minmax function, automatic placement, repeat and auto-fit approaches, design of complex page skeletons.
|
|
|
Week - 4
|
|
The Flexbox model and flexible layout, control of main and cross axes, grow and shrink ratios, order and alignment properties, use of Flexbox in one dimensional layout scenarios.
|
|
|
Week - 5
|
|
Responsive design I, the mobile first approach, breakpoint strategies, media queries, design patterns that expand from small to large screens.
|
|
|
Week - 6
|
|
Responsive design II, hybrid architectures, combined use of Grid and Flexbox, producing responsive solutions in complex interface scenarios such as e-commerce and application dashboards.
|
|
|
Week - 7
|
|
Advanced animation design, transition and transform properties, keyframe animations, GPU accelerated performant animation techniques, micro animations that improve user experience.
|
|
|
Week - 8
|
|
Midterm examination.
|
|
|
Week - 9
|
|
Dynamic theming with CSS custom properties, variable scope and inheritance, building dark and light mode infrastructure without the need for JavaScript.
|
|
|
Week - 10
|
|
CSS performance optimization, critical CSS, render blocking styles, minification and purge techniques, performance analysis and reporting with the Lighthouse tool.
|
|
|
Week - 11
|
|
Browser compatibility, feature queries, progressive enhancement, fallback solutions for older browsers, cross browser testing and compatibility checking tools.
|
|
|
Week - 12
|
|
Next generation CSS, logical properties, writing direction aware style authoring, container queries, modern units and color functions.
|
|
|
Week - 13
|
|
Term project I, architectural setup, requirement analysis, creation of the SASS file structure, definition of design tokens, building the basic grid architecture.
|
|
|
Week - 14
|
|
Term project II, code review and project presentation, performance analysis, accessibility audit, browser compatibility tests, evaluation of projects and general recap.
|
|