/2111-microfocus-css

Primary LanguageHTML

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