Slide 1

Slide 1 text

CSS

Slide 2

Slide 2 text

block vs inline

Slide 3

Slide 3 text

The way they're doing that effect is clever,
but probably inefficient.
They're actually painting the screen on every call

Slide 4

Slide 4 text

The way they're doing that effect is clever, but probably inefficient. They're actually painting the screen on every call

Slide 5

Slide 5 text

The way they're doing that effect is clever, but probably inefficient. They're actually painting the screen on every call

Slide 6

Slide 6 text

The way they're doing that effect is clever, but probably inefficient. They're actually painting the screen on every call

Slide 7

Slide 7 text

block: article, div, form, h1, p, ul inline: a, b, code, span, img

Slide 8

Slide 8 text

box model

Slide 9

Slide 9 text

The way they're doing that effect is clever, but probably inefficient. They're actually repainting the entire screen on every call of the 'draw' function. But instead of repainting it a full black, they're setting the alpha(transparency) as well. So basically you start off with a bright green line and then the new 'draw' loop colors over that line with a black color that is mostly transparent. This fades the line just slightly and new bright green line is then draw right next to it. On the next 'draw' loop, the black is drawn again so the first green line is now faded even more, the 2nd green line is faded a little and then a new green line is drawn. This just happens over and over and eventually the green lines are faded out completely. Hopefully that makes sense, it's kind of confusing how they're doing it.

Slide 10

Slide 10 text

The way they're doing that effect is clever, but probably inefficient. They're actually repainting the entire screen on every call of the 'draw' function. But instead of repainting it a full black, they're setting the alpha(transparency) as well. So basically you start off with a bright green line and then the new 'draw' loop colors over that line with a black color that is mostly transparent. This fades the line just slightly and new bright green line is then draw right next to it. On the next 'draw' loop, the black is drawn again so the first green line is now faded even more, the 2nd green line is faded a little and then a new green line is drawn. This just happens over and over and eventually the green lines are faded out completely. Hopefully that makes sense, it's kind of confusing how they're doing it. (margin) (border) (padding)

Slide 11

Slide 11 text

at a certain point, the video stops while the audio continues! if anyone has this problem pls answer and state the quality and condition of your computer so we can figure out the cause of this problem. You said it uses a library called processing- i'm trying to use this course as part of a web curriculum, with html, css and js- and wondering if it's just going in the wrong direction. The way they're doing that effect is clever, but probably inefficient. They're actually repainting the entire screen on every call of the 'draw' function. But instead of repainting it a full black, they're setting the alpha(transparency) as well. So basically you start off with a bright green line and then the new 'draw' loop colors over that line with a black color that is mostly transparent. This fades the line just slightly and new bright green line is then draw right next to it. On the next 'draw' loop, the black is drawn again so the first green line is now faded even more, the 2nd green line is faded a little and then a new green line is drawn. This just happens over and over and eventually the green lines are faded out completely. Hopefully that makes sense, it's kind of confusing how they're doing it. (margin) (border) (padding)

Slide 12

Slide 12 text

width: 100%; is not the answer!

Slide 13

Slide 13 text

width: auto; is the answer!

Slide 14

Slide 14 text

is the answer!

Slide 15

Slide 15 text

at a certain point, the video stops while the audio continues! if anyone has this problem pls answer and state the quality and condition of your computer so we can figure out the cause of this problem. You said it uses a library called processing- i'm trying to use this course as part of a web curriculum, with html, css and js- and wondering if it's just going in the wrong direction. The way they're doing that effect is clever, but probably inefficient. They're actually repainting the entire screen on every call of the 'draw' function. But instead of repainting it a full black, they're setting the alpha(transparency) as well. So basically you start off with a bright green line and then the new 'draw' loop colors over that line with a black color that is mostly transparent. This fades the line just slightly and new bright green line is then draw right next to it. On the next 'draw' loop, the black is drawn again so the first green line is now faded even more, the 2nd green line is faded a little and then a new green line is drawn. This just happens over and over and eventually the green lines are faded out completely. Hopefully that makes sense, it's kind of confusing how they're doing it. (margin) (border) (padding)

Slide 16

Slide 16 text

The way they're doing that effect is clever, but probably inefficient. They're actually repainting the entire screen on every call of the 'draw' function. But instead of repainting it a full black, they're setting the alpha(transparency) as well. So basically you start off with a bright green line and then the new 'draw' loop colors over that line with a black color that is mostly transparent. This fades the line just slightly and new bright green line is then draw right next to it. On the next 'draw' loop, the black is drawn again so the first green line is now faded even more, the 2nd green line is faded a little and then a new green line is drawn. This just happens over and over and eventually the green lines are faded out completely. Hopefully that makes sense, it's kind of confusing how they're doing it. (margin) (border) (padding)

Slide 17

Slide 17 text

The way they're doing that effect is clever, but probably inefficient. They're actually repainting the entire screen on every call of the 'draw' function. But instead of repainting it a full black, they're setting the alpha(transparency) as well. So basically you start off with a bright green line and then the new 'draw' loop colors over that line with a black color that is mostly transparent. This fades the line just slightly and new bright green line is then draw right next to it. On the next 'draw' loop, the black is drawn again so the first green line is now faded even more, the 2nd green line is faded a little and then a new green line is drawn. This just happens over and over and eventually the green lines are faded out completely. Hopefully that makes sense, it's kind of confusing how they're doing it. (margin) (border) (padding)

Slide 18

Slide 18 text

The way they're doing that effect is clever, but probably inefficient. They're actually repainting the entire screen on every call of the 'draw' function. But instead of repainting it a full black, they're setting the alpha(transparency) as well. So basically you start off with a bright green line and then the new 'draw' loop colors over that line with a black color that is mostly transparent. This fades the line just slightly and new bright green line is then draw right next to it. On the next 'draw' loop, the black is drawn again so the first green line is now faded even more, (margin) (border) (padding)

Slide 19

Slide 19 text

The way they're doing that effect is clever, but probably inefficient. They're actually repainting the entire screen on every call of the 'draw' function. But instead of repainting it a full black, they're setting the alpha(transparency) as well. So basically you start off with a bright green line and then the new 'draw' loop colors over that line with a black color that is mostly transparent. This fades the line just slightly and new bright green line is then draw right next to it. On the next 'draw' loop, the black is drawn again so the first green line is now faded even more, (margin) (border) (padding)

Slide 20

Slide 20 text

-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;

Slide 21

Slide 21 text

specificity

Slide 22

Slide 22 text

.red { color: red; } .green { color: green; }
what color am I?

Slide 23

Slide 23 text

.green { color: green; } .red { color: red; }
what color am I?

Slide 24

Slide 24 text

div.green { color: green; } .red { color: red; }
what color am I?

Slide 25

Slide 25 text

(ids, classes, elements)

Slide 26

Slide 26 text

(0, 1, 1) div.green (0, 1, 0) .red

Slide 27

Slide 27 text

(1, 0, 0) #monkey (0, 2, 1) div.giraffe + .iguana (0, 1, 0) .gorilla (0, 0, 2) ul li (0, 0, 0) *

Slide 28

Slide 28 text

demo!

Slide 29

Slide 29 text

67% 33%

Slide 30

Slide 30 text

67% 33%

Slide 31

Slide 31 text

67% 67% 33% 33%