Advanced CSS Course Exercises

Contact Me

Kobi Hari my email: [email protected]

Course Agenda

1. Selectors

   • Simple Selectors
   • Attribute Selectors
   • Combinator Selectors
   • Psaudo Selectors
   • Specifity
   • Exercises

2. Box Model, Sizing

   • Box model parts
   • Sizing Units
   • Displays
   • Fun with Borders
   • Margin Collapsing
   • Box Sizing methods
   • Exercises

3. Flex boxes

   • The flex box axes
   • The flex Container
   • Wrapping elements
   • Sizing - Grow, Shrink and Basis
   • Alignment
   • The order property
   • Exercises

4. Grid

   • Introduction to grid layout
   • Grid container templates
   • Line based placement
   • Placement with line names
   • Placement with grid template areas
   • Grid auto placement and generation
   • Alignment
   • Exercises

5. Sizes and Position

   • Media Queries
   • Sizing functions
   • Sizing constants
   • Automatic row creation
   • Introduction to Positioning
   • Sticky position
   • Exercises

6. Variables and tricks

   • Object fit for images
   • Introduction to CSS Variables
   • The @property rule
   • The calc function
   • The calc function with custom properties
   • Cool tricks with ::before and ::after
   • Gradients in CSS
   • Exercises

7. Transitions and Animations

   • The transform property
     • The possible transforms: scale, translate, rotate and skew
     • Combining the transformations
     • Setting transform origin
   • The transition property
     • Setting global transition time
     • Setting easing function
     • Setting transition per property
     • Setting delay for transition
   • The @keyframe rule
     • Creating animation frames
     • Setting from and to
   • The animation property
     • Setting the animation name and delay
     • Setting iteration count
     • Setting fill mode