GD with GDDEMOLAND BookType + Code

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.

Select a chapter

Introduction to HTML and CSS

Let’s make websites!

1.1HTML 1.2HTML Elements 1.3Block vs. Inline Elements 1.4HTML Typesetting 1.5EXERCISE: HTML Elements 1.6CSS 1.7Styling Text 1.8Inline CSS 1.9Classes 1.10Inheritence 1.11EXERCISE: Computational Poetry 1.12Links 1.13Multiple Pages 1.14Images 1.15Custom Fonts 1.16EXERCISE: Choose Your Own Adventure

2.1EXERCISE: Short story 2.2Short story example (for fun) 2.3Box model 2.4Margin collapse 2.5Box sizing 2.6Block vs. inline elements 2.7“Good” typesetting 2.8Absolute positioning 2.9EXERCISE: Drawing with CSS 2.10Variable fonts 2.11Hover and active states 2.12Keyframed animations 2.13Media queries 2.14EXERCISE: Buttons 2.15EXERCISE: Animations

What Is DEMOLAND?

Coding Cheatsheet

Start a new file

More from GD with GD

Current bookType + Code

CourseType + 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.

Introduction to HTML and CSS

Let’s make websites!

1.1HTML 1.2HTML Elements 1.3Block vs. Inline Elements 1.4HTML Typesetting 1.5EXERCISE: HTML Elements 1.6CSS 1.7Styling Text 1.8Inline CSS 1.9Classes 1.10Inheritence 1.11EXERCISE: Computational Poetry 1.12Links 1.13Multiple Pages 1.14Images 1.15Custom Fonts 1.16EXERCISE: Choose Your Own Adventure

2.1EXERCISE: Short story 2.2Short story example (for fun)2.3Box model 2.4Margin collapse 2.5Box sizing 2.6Block vs. inline elements 2.7“Good” typesetting 2.8Absolute positioning 2.9EXERCISE: Drawing with CSS 2.10Variable fonts 2.11Hover and active states 2.12Keyframed animations 2.13Media queries 2.14EXERCISE: Buttons 2.15EXERCISE: Animations