Sign up today

Photorealistic CSS Art Course

Coming out May 2023

Pre-sale coming soon. Sign up to get updates on the course!

Learn the basics of CSS and how to create realistic drawings like these:

Course Outline

1. Intro

  1. About me
  2. Why CSS art

2. Basic CSS concepts

  1. Box-sizing
  2. Positioning
    1. Relative
    2. Absolute
  3. Z-index
  4. Pseudo elements

3. CSS selectors

  1. nth of type
  2. Pseudo elements

4. EM, REM, %, VW, VH, PX and Responsiveness

5. Background property

  1. Background vs background-image vs background-color
  2. Background size
  3. Background-position
  4. Background-repeat

6. Box shadows

  1. Values
  2. Inset
  3. Examples

7. Basics of SCSS

  1. What is it
  2. Installing
  3. Variables
  4. Nesting

8. Gradients

  1. Linear gradients
  2. Radial gradients
  3. Conic gradients

9. Creating shapes with gradients

  1. Circles
  2. Squares
  3. Rectangles
  4. Weird shapes

10. Single Div Art

  1. What is it?
  2. Pencil project walkthrough
  3. Stapler project walkthrough

11. Photorealistic CSS Art project walkthrough

  1. Keyboard
  2. Camera