test-project-1.html

Creative coding projects for any skill level. By GD with GD.

1.1

ascii-art.html Turn text into art!

ascii-art.html Turn text into art!
ascii-art.html Turn text into art!
ascii-art.html Turn text into art!
ascii-art.html Turn text into art!
ascii-art.html Turn text into art!

Difficulty

Topics

How text works on websites

Description coming soon!

See an example Start the project
1.2

programmatic-poetry.html Conjure a poem through code!

programmatic-poetry.html Conjure a poem through code!
programmatic-poetry.html Conjure a poem through code!
programmatic-poetry.html Conjure a poem through code!
programmatic-poetry.html Conjure a poem through code!
programmatic-poetry.html Conjure a poem through code!

Difficulty

Topics

HTML elements for typography
Inline CSS
CSS styles for typography
CSS colors

Description coming soon!

See an example Start the project
1.3

text-textile.html Tailor a tapestry of typography!

text-textile.html Tailor a tapestry of typography!
text-textile.html Tailor a tapestry of typography!
text-textile.html Tailor a tapestry of typography!
text-textile.html Tailor a tapestry of typography!
text-textile.html Tailor a tapestry of typography!

Difficulty

Topics

CSS units

Description coming soon!

See an example Start the project
1.4

interconnected-images.html Assemble an exhibition!

interconnected-images.html Assemble an exhibition!
interconnected-images.html Assemble an exhibition!
interconnected-images.html Assemble an exhibition!
interconnected-images.html Assemble an exhibition!
interconnected-images.html Assemble an exhibition!

Difficulty

Topics

Links
Images

Description coming soon!

See an example Start the project
2.1

pixelated-pattern.html Design a digital decoration!

pixelated-pattern.html Design a digital decoration!
pixelated-pattern.html Design a digital decoration!
pixelated-pattern.html Design a digital decoration!
pixelated-pattern.html Design a digital decoration!
pixelated-pattern.html Design a digital decoration!

Difficulty

Topics

The box model

Description coming soon!

See an example Start the project
2.2

brilliant-blog.html Author an amazing article!

brilliant-blog.html Author an amazing article!
brilliant-blog.html Author an amazing article!
brilliant-blog.html Author an amazing article!
brilliant-blog.html Author an amazing article!
brilliant-blog.html Author an amazing article!

Difficulty

Topics

Basic page layout
CSS classes

Description coming soon!

See an example Start the project
2.3

geometric-garden.html Sprout flowers with style!

geometric-garden.html Sprout flowers with style!
geometric-garden.html Sprout flowers with style!
geometric-garden.html Sprout flowers with style!
geometric-garden.html Sprout flowers with style!
geometric-garden.html Sprout flowers with style!

Difficulty

Topics

Hover and active states
The “transition” property

Description coming soon!

See an example Start the project
2.4

movie-marquees.html Animate with ease!

movie-marquees.html Animate with ease!
movie-marquees.html Animate with ease!
movie-marquees.html Animate with ease!
movie-marquees.html Animate with ease!
movie-marquees.html Animate with ease!

Difficulty

Topics

Keyframed animations

Description coming soon!

See an example Start the project
2.5

personal-portrait.html Make a mathematical mirror!

personal-portrait.html Make a mathematical mirror!
personal-portrait.html Make a mathematical mirror!
personal-portrait.html Make a mathematical mirror!
personal-portrait.html Make a mathematical mirror!
personal-portrait.html Make a mathematical mirror!

Difficulty

Topics

Relative and absolute positioning

Description coming soon!

See an example Start the project
2.6

sticky-sayings.html Combine sentences into stories!

sticky-sayings.html Combine sentences into stories!
sticky-sayings.html Combine sentences into stories!
sticky-sayings.html Combine sentences into stories!
sticky-sayings.html Combine sentences into stories!
sticky-sayings.html Combine sentences into stories!

Difficulty

Topics

Sticky positioning

Description coming soon!

See an example Start the project
3.1

disco-dancer.html TBD!

disco-dancer.html TBD!
disco-dancer.html TBD!
disco-dancer.html TBD!
disco-dancer.html TBD!
disco-dancer.html TBD!

Difficulty

Topics

@media Queries

Description coming soon!

See an example Start the project
3.2

grid-garden.html TBD!

grid-garden.html TBD!
grid-garden.html TBD!
grid-garden.html TBD!
grid-garden.html TBD!
grid-garden.html TBD!

Difficulty

Topics

CSS Grid

Description coming soon!

See an example Start the project
3.3

card-catalog.html TBD!

card-catalog.html TBD!
card-catalog.html TBD!
card-catalog.html TBD!
card-catalog.html TBD!
card-catalog.html TBD!

Difficulty

Topics

CSS Grid
@media Queries

Description coming soon!

See an example Start the project
3.4

brick-barrier.html TBD!

brick-barrier.html TBD!
brick-barrier.html TBD!
brick-barrier.html TBD!
brick-barrier.html TBD!
brick-barrier.html TBD!

Difficulty

Topics

Flexbox

Description coming soon!

See an example Start the project