Make Your Website Stand Out with HTML, CSS and Web Animations

Sheelah Brennan, Web/UI Developer

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
12 Lessons (1h 7m)
    • 1. Introduction

    • 2. Introduction to CodePen

    • 3. Background Gradients

    • 4. Animated Hero Text

    • 5. CSS Shapes

    • 6. Angled Edges

    • 7. CSS Filters

    • 8. CSS Blend Modes

    • 9. Bonus: SVG Animation, Part I

    • 10. Bonus: SVG, Animation, Part II

    • 11. Site Considerations

    • 12. Conclusion


Project Description

For the class project, pick 2 or more of the techniques covered in the course and implement them in your own web project. You’re highly encouraged to use CodePen for this project so that you can easily share your completed project link in the Project Gallery. Be sure to check out the attached class resources and lesson links below. Feel free to use the starter pen if you'd like a starting point (use the "fork" option in CodePen to create your own copy).

Aim to break out of your comfort zone!  If you don’t normally work with animations, try to include one CSS animation in your project.  If you don’t normally experiment with CSS layout, try to include a block of content using a CSS shape or angled edge.

I’ll be reviewing all project submissions and checking the class discussion forum regularly to answer any questions that come up.

Final Project Starter Pen

Lesson Links

Lesson #1:  Text Overlay on Gradient Background -

Lesson #2: Animated Hero Text -

Lesson #3: CSS Shapes -

Lesson #4: Angled Edges -

Lesson #5: CSS Filters with a Background Image -

Lesson #6: CSS Blend Modes on Overlay Text -

Lesson #7 (Bonus): SVG Animation -



Student Projects