GD with GD
DEMOLAND
Book
Type + Code
Chapter 3 of 3
Advanced CSS
All chapters
Chapter 3
Advanced CSS
Select a demo
3.1
Choose your own adventure
3.2
Exercise: adventure time!
3.3
HTML template
3.4
Good digital typesetting
3.5
Good digital typesetting with flexbox
3.6
Flexbox
3.7
A shifting wall of text
3.8
A single line of text
3.9
Horizontally scrolling story
3.10
A navbar
3.11
Centered content
3.12
CSS grid
3.13
Grid areas
3.14
Portfolio example
3.15
Exercise: digital museum
Current book
Type + Code
All books
Course
Type + Code
Websites are full of text, a.k.a. “type.” This type is special because it’s made out of code! In this course, you’ll discover how to bring type to life using code.
Chapter 1
Introduction to HTML and CSS
Let’s make websites!
1.1
HTML
1.2
HTML Elements
1.3
Block vs. Inline Elements
1.4
HTML Typesetting
1.5
EXERCISE: HTML Elements
1.6
CSS
1.7
Styling Text
1.8
Inline CSS
1.9
Classes
1.10
Inheritence
1.11
EXERCISE: Computational Poetry
1.12
Links
1.13
Multiple Pages
1.14
Images
1.15
Custom Fonts
1.16
EXERCISE: Choose Your Own Adventure
Chapter 2
Fun with CSS
2.1
EXERCISE: Short story
2.2
Short story example (for fun)
2.3
Box model
2.4
Margin collapse
2.5
Box sizing
2.6
Block vs. inline elements
2.7
“Good” typesetting
2.8
Absolute positioning
2.9
EXERCISE: Drawing with CSS
2.10
Variable fonts
2.11
Hover and active states
2.12
Keyframed animations
2.13
Media queries
2.14
EXERCISE: Buttons
2.15
EXERCISE: Animations
Chapter 3
Advanced CSS
3.1
Choose your own adventure
3.2
Exercise: adventure time!
3.3
HTML template
3.4
Good digital typesetting
3.5
Good digital typesetting with flexbox
3.6
Flexbox
3.7
A shifting wall of text
3.8
A single line of text
3.9
Horizontally scrolling story
3.10
A navbar
3.11
Centered content
3.12
CSS grid
3.13
Grid areas
3.14
Portfolio example
3.15
Exercise: digital museum