Complete CSS

A course by Piccalilli

Welcome

  1. Intro

    1. #1
      Intro
    2. #2
      Getting things ready

  2. Principles

    1. #3
      The art of concise, effective communication
      Free to read
    2. #4
      Giving and receiving feedback
      Free to read
    3. #5
      Move slowly and methodically to go fast
      Free to read
    4. #6
      Be the browser’s mentor, not its micromanager
      Free to read
    5. #7
      Fluid typography and space
      Free to read
    6. #8
      Flexible layout compositions
      Free to read
    7. #9
      Principles for organising CSS code
      Free to read
    8. #10
      Progressive enhancement with CSS
      Free to read

  3. Planning and feedback

    1. #11
      Identifying designer oversights
    2. #12
      Feeding back designer oversights
    3. #13
      Creating a sketch-up plan
    4. #14
      Sketch-up: Identifying layouts
    5. #15
      Sketch-up: Slicing up the design into reusable components
    6. #16
      Feeding back our sketch-up findings to the designer
    7. #17
      Identifying a fluid typography and spacing scale
    8. #18
      Identifying and planning our build passes

  4. Design prototyping

    1. #19
      Disposable prototypes
    2. #20
      Prototyping our masthead flexbox layout
    3. #21
      Feeding back issues found with prototypes
    4. #22
      Rolling out another prototype with the new approach

  5. Core build

    1. #23
      Identifying the core build and flair pass
    2. #24
      Global CSS part 1
    3. #25
      Global CSS part 2
    4. #26
      Prose pattern
    5. #27
      Labelled icon pattern
    6. #28
      Headline pattern
    7. #29
      Corner pattern
    8. #30
      Button pattern
    9. #31
      Card pattern
    10. #32
      Hero pattern
    11. #33
      Navigation pattern
    12. #34
      Site head pattern part 1
    13. #35
      Site head pattern part 2
    14. #36
      Site footer pattern
    15. #37
      Closer pattern
    16. #38
      Masthead pattern
    17. #39
      Rolodex pattern
    18. #40
      Gallery pattern

  6. Flair pass build

    1. #41
      Let’s create an indent utility
    2. #42
      Integrate docked treatment on Rolodex
    3. #43
      Implementing container filling text
    4. #44
      Inspo pattern

  7. Page compositions

    1. #45
      Composing the home page with our patterns
    2. #46
      Dealing with designer snags
    3. #47
      Implementing the designer snags
    4. #48
      Front-end wrap-up

  8. Wrapping up

    1. #49
      The Icebox
    2. #50
      Getting our documentation in shape
    3. #51
      Wrapping up