Start here
Tutorial
Get started with DEMOLAND and learn how to code websites!
Learn it all
The Designer’s Guide to Web Programming
Learn web programming from a designer’s perspective. Learn more at this collection’s dedicated website!
Demos
1
Introduction
2
A Basic HTML File
3
HTML Elements for Typography
4
Typographic Hierarchy
5
CSS Properties and Classes
6
Inline CSS
7
Color Codes
8
Using the Inspect Tool
9
Custom Fonts
10
Variable Fonts
11
Basics of the Box Model
12
Units
13
Box Sizing
14
CSS Overrides
15
Using the “display” Property
16
Working with Divs
17
Grouping Elements
18
Anchor Links and IDs
19
Responsive Images
20
Hover and Active States
21
@keyframes Animations
22
Nested CSS Selectors
23
1-Dimensional Layouts Using Flexbox
24
Centering Content
25
2-Dimensional Layouts Using Grid
26
Responsive Layouts Using @media Queries
27
Relative and Absolute Positioning
28
Sticky Positioning
29
Floats
30
Designing a Portfolio
31
Horizontal Scrolling
32
Independently Scrolling Columns
Creative coding projects
test-project-1.html
Creative coding projects for any skill level. Learn more at this collection’s dedicated website!
Fun with fonts
Variable Fonts Workshop
Tutorials on importing, animating, and interacting with variable fonts. Featuring fonts by Too Much Type!
Demos
1
Importing variable fonts
2
Using variable fonts
3
Variable font weight
4
Animating variable fonts
5
Interacting with variable fonts
6
Toggling variable states
7
Targeting elements using “this”
8
Manually setting values
9
Using CSS variables for variable axis values
10
Swapping out content
11
Setting values using sliders
12
Randomizing variable axis values
13
Repeatedly randomizing variable axis values
14
Tracking variable axis values
15
Tracking the cursor position
16
Tracking the scroll position
17
Randomizing individual letters
18
Animating individual letters
Make things move
Workshop: Motion Design for the Web
An introduction to animating using HTML and CSS!