Demystifying CSS

Trainer: Vlad Zelinschi
Duration: 3 days

Agenda

  1. What is CSS and why is it hard?
  2. Browser rendering process
    a. Byte to string conversion
    b. Tokenizing
    c. Lexing
    d. DOM, CSSOM, render tree
    e. Layout and paint
    f. How browsers see a webpage
  3. Box model
  4. Display types
    a. Block
    b. Inline-block
    c. Inline
    d. Table
    e. Flex
  5. Layering in CSS
    a. Layer creation criteria
    b. Repainting layers
    c. Composing layers
  6. CSS positioning
    a. Static
    b. Relative
    c. Absolute
    d. Fixed
    e. Sticky
  7. Flexbox API
  8. Grid API
  9. Centering elements
    a. Horizontally
    b. Vertically
    c. Independent of dimensions and content
  10. Going responsive with media queries
  11. Advanced CSS3 selectors, pseudo-selectors and pseudo-classes
    a. The “>” selector
    b. The “+” selector
    c. The “~” selector
    d. nth-child, first-child, first-of-type, etc.
    e. first-letter, etc.
  12. Understanding your CSS in Dev Tools (Chrome)
  13. Introduction to CSS architecture
  14. File organization
  15. Pre-processors and benefits
  16. The specificity model and specificity graph of your application
  17. Large scale methodologies
    a. BEM
    b. OOCSS
    c. SMACSS
  18. Architecture in practice
    a. Design SRP classes
    b. Composing classes & flexibility
  19. Short recap

General Prerequisites

  1. Video projector
  2. WiFi access (students need to be able to clone Git repositories and download npm packages from the internet)
  3. Flipchart + flipchart sheets OR writing board (please inform us if this is something you cannot provide)
  4. Markers for writing - different colors (please inform us if this is something you cannot provide)
  5. Ability to plug to power source for every computer in the room (extension cords if needed, etc.)

Students Prerequisites

  1. Every student will have his/her own laptop. For best results, it is not advisable to multiple people working on the same machine
  2. Git v2.16.0 installed (https://git-scm.com/downloads)
  3. An IDE/code editor of choice (Sublime Text, Atom, Visual Studio Code, WebStorm, etc.)

Expectations

This training assumes the participants are already familiar with basic CSS knowledge, such as common rules, selectors, classes vs. IDs, etc. Thus, the aforementioned concepts will not be discussed or detailed during the training.

This training targets intermediate developers who would like to upgrade their CSS knowledge by finding out more about how CSS works in-depth and understanding what it takes to build a scalable and maintainable CSS codebase.

Thank you for reading. Now help us spread the ❤️ by sharing.