Skip to content

Instantly share code, notes, and snippets.

@bbatsche

bbatsche/CSS Exercises.md

Created March 10, 2016 17:49
Show Gist options
  • Save bbatsche/9e2a68d334f8e47cac64 to your computer and use it in GitHub Desktop.
Save bbatsche/9e2a68d334f8e47cac64 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
CSS Exercises.md

Exercise 1

  • Make a wave of boxes. (Similar to visible spectrum exercise, but comes back in and out).
  • It should hold the lines of a poem. Any poem. Songs work too.
  • Make it look nice. Matching color scheme (practice good design principles - no more than 5 colors per page.)
  • The text should be centered inside the box using padding.

Examples / Inspiration

  1. Pinterest
  2. Pinterest

Exercise 2

Build a page for TV listings. Have 30 minute blocks going across the top and channels going down the left hand side. Show at least three hours and 6 channels. Color code the shows by their type (comedy, drama, news, sports, etc.). Use (small) images and links for the station and show information.

Advanced Topics

  • Use a hover pseudo class to aid in usability on the grid.
  • For shows that last longer than 30 minutes, use colspan to list them under all the correct time slots.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment