CSS and Sass for Web Application Developers

CSS Selectors in Depth

• The various types of atomic selectors in CSS
• Attribute selectors
• How to combine them using CSS Combinators
• Pseudo class and Pseudo element selectors
• Understanding (and predicting) Specificity

CSS Box model

• Classic displays in CSS
• CSS Box layers
• Size units
• Fun with borders and outlines
• Box sizing in CSS 3

CSS Flex boxes

• Understanding the new CSS layout algorithms
• Flex basics: Axes, Containers, Wrapping.
• Flex Sizing: Grow, Shrink and Basis
• Flex Alignment
• Some pro techniques with Flex

CSS Grid

• Introduction to Grid layout
• Grid Templates sizing
• Grid placement and generation
• Grid Alignment
• Pro Techniques with Grid: auto-fit, auto-fill, minmax and more

CSS Sizing and Responsiveness

• CSS Sizing functions and constants
• Media queries (and how to rarely use them)
• CSS Relative and absolute position.
• CSS Fixed and Sticky position.
• Combining Positions with Flex and Grid

Advanced Topics

• Image and Video sizing using object-fit
• Custom properties and the @property rule
• The calc function
• The before and after pseudo elements
• Gradients
• Transitions
• Animations

Sass and Scss

• Introduction to preprocessors
• Variables and Functions
• Hierarchies
• Flow control in Sass
• Understanding Mixins
• Using partials and modules

• Built in modules: lists, maps, colors, and selectors

• Basic knowledge of HTML
• Basic knowledge of CSS (optional but helpful)