Advanced CSS Exercises

If you have some CSS experience and find the other exercises a little basic, try some of these more challenging exercises. Get creative and make something cool with these advanced topics. Experiment!

CSS Patterns

Try to recreate the following patterns using HTML and CSS only.

Screen Shot 2014-10-09 at 1.52.28 PM.png

Screen Shot 2014-10-09 at 1.52.41 PM.png

Screen Shot 2014-10-09 at 1.53.13 PM.png

Screen Shot 2014-10-09 at 1.51.51 PM.png

CSS Gradients

Read about CSS Gradients and try to recreate some of the following examples. Don't worry about matching the colors perfectly.

Screen Shot 2014-10-09 at 1.59.46 PM.png

Screen Shot 2014-10-09 at 2.21.43 PM.png

Screen Shot 2014-10-09 at 2.21.32 PM.png

CSS Animations

CSS Image Slider

Follow this tutorial on how to make a pure CSS3 image slider. Make your own slider and add it to your blog site.