Trainer: Vlad Zelinschi
Duration: 3 days
Agenda
- What is CSS and why is it hard?
- 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 - Box model
- Display types
a. Block
b. Inline-block
c. Inline
d. Table
e. Flex - Layering in CSS
a. Layer creation criteria
b. Repainting layers
c. Composing layers - CSS positioning
a. Static
b. Relative
c. Absolute
d. Fixed
e. Sticky - Flexbox API
- Grid API
- Centering elements
a. Horizontally
b. Vertically
c. Independent of dimensions and content - Going responsive with media queries
- 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. - Understanding your CSS in Dev Tools (Chrome)
- Introduction to CSS architecture
- File organization
- Pre-processors and benefits
- The specificity model and specificity graph of your application
- Large scale methodologies
a. BEM
b. OOCSS
c. SMACSS - Architecture in practice
a. Design SRP classes
b. Composing classes & flexibility - Short recap
General Prerequisites
- Video projector
- WiFi access (students need to be able to clone Git repositories and download npm packages from the internet)
- Flipchart + flipchart sheets OR writing board (please inform us if this is something you cannot provide)
- Markers for writing - different colors (please inform us if this is something you cannot provide)
- Ability to plug to power source for every computer in the room (extension cords if needed, etc.)
Students Prerequisites
- Every student will have his/her own laptop. For best results, it is not advisable to multiple people working on the same machine
- Git v2.16.0 installed (https://git-scm.com/downloads)
- 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.
