Home|About|Gaming cabinet|Archives|How it works|Starter sites

GeezerVison is showing github.com — GitHub - estelle/cssmastery: Front End Masters CSS Mastery Class

Open more actions menu

Latest commit

History

50 Commits

Folders and files

Name		Name	Last commit message	Last commit date
animations		animations
borders		borders
colors		colors
flexbox		flexbox
generated		generated
gradients		gradients
grid		grid
intro		intro
media		media
other		other
selectors		selectors
tables		tables
transforms		transforms
README.md		README.md
index.html		index.html
outline.md		outline.md

Repository files navigation

cssmastery

Intro
Selectors
1. overview
2. Specificity intro
3. Relational selectors & Combinators
4. Selectors API
5. Attribute Selectors
6. UI Pseudo Class Selectors
7. Structural selectors
8. Other Logical Combinations: Negation, Matching and Parent
9. Language based selectors
10. Link, location & user action pseudo-classes
11. Additional Pseudo Classes
12. Specificity Revisited
Pseudo-Elements
1. first letter
2. first line
3. selection
4. before, after and generated content
5. selection
6. additional pseudo elements
7. browser specific pseudo elements
Generated Content
1. How before and after work
2. How generated content works
3. Generated content: quotes
4. Generated content: Attribute Values
5. Generated content: Counters
6. Generated content: Images
7. Generated content: Strings
8. Special Characters
9. Accessibility
10. Design Elements
Media Queries
1. Media Type, Screen Size, Resolution
2. Browser Capability @supports
3. viewport
4. use cases: Hyphenations, columns, svg
Colors & Appearance
1. colors
2. Opacity v. Alphatransparency
3. appearance
4. additional pseudo elements
Flexbox
1. Purpose and goal of flexbox
2. browser support and specification
3. Overview
4. The basics
5. Flex container properties
6. Flex item properties
7. Flexibility
Tables
1. When to use
2. Semantics
3. Caption
4. Border padding & spacing
5. Other table properties
6. styling columns
7. Good UI
Grid
1. Overview (flex v grid)
2. Basic Grid
  1. Display property
  2. Defining columns and rows
  3. fr unit and repeat() notation
  4. Adding gutters
  5. Try it out
3. Positioning grid items
4. Container properities
  1. Align and justify items
  2. Align and justify content
Backgrounds and Borders
1. Overview
2. Background properties
3. background-color
4. Old background shorthand for single image
5. Overview of added properties
  1. background-image'
  2. background-repeat
  3. background-attachment
  4. background-position
  5. background-clip
  6. background-origin
  7. background-size
  8. background shorthand
Gradients
1. Overview
2. Syntax
3. Color Stops
4. Color Hints
5. Directions
  1. Keyterms
  2. Angles
6. Examples & exercise
7. Repeating Linear Gradients
8. Radial Gradients
9. Position
10. Size & Shape
11. Radial Gradients: color-stops & color-hints
12. Repeating Radial Gradient
Transforms
1. Overview
2. 2D Transform Functions
3. Order of functions
4. Transform Origin
5. 3D Transform Funtions
6. 3D Transform related properties
  1. Perspective
  2. Perspective-origin
  3. transform-origin
  4. transform-style
  5. transform-box
Transitions
1. Overview
2. Transition Properties
3. Properties that can be animated
4. Need to knows
5. Events
Animations
1. Overview
2. @keyframes
3. Animation Properties
4. Specificity
5. Timing functions
  1. steps
6. Iteration count
7. Delays
8. direction
9. shorthand
10. animation-fill-mode
11. stopping animations
12. Events

About

Front End Masters CSS Mastery Class

Resources

Stars

58 stars

Watchers

1 watching

Forks

Report repository

Releases

Packages

Contributors

Languages