Advanced CSS Course Exercises

Contact Me

Kobi Hari my email: hari@applicolors.com

Course Agenda

1. Selectors

   • Simple Selectors
   • Attribute Selectors
   • Combinator Selectors
   • Psaudo Selectors
   • Specifity
   • Angular selectors

2. Box Model, Sizing

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

3. Flex boxes

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

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

5. Sizes and Position

   • Media Queries
   • Sizing functions
   • Sizing constants
   • Automatic row creation
   • Introduction to Positioning
   • Sticky position
   • Combining absolute Position with Grid

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

7. Advanced Graphics

   • Using Vector Icons
   • Advanced Backgrounds and Gradients
   • Transformations
   • Transitions
   • Animations and Keyframes

More Links

• CSS Guess Game