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

      1:00
    • 2. Introduction to CodePen

      0:20
    • 3. Background Gradients

      7:40
    • 4. Animated Hero Text

      5:54
    • 5. CSS Shapes

      7:53
    • 6. Angled Edges

      10:26
    • 7. CSS Filters

      6:21
    • 8. CSS Blend Modes

      6:04
    • 9. Bonus: SVG Animation, Part I

      8:03
    • 10. Bonus: SVG, Animation, Part II

      10:20
    • 11. Site Considerations

      2:43
    • 12. Conclusion

      0:37

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

https://codepen.io/sheelah/pen/VwZQddq

Lesson Links

Lesson #1:  Text Overlay on Gradient Background -  https://codepen.io/sheelah/pen/VoQMgr

Lesson #2: Animated Hero Text - https://codepen.io/sheelah/pen/ymEryy

Lesson #3: CSS Shapes - https://codepen.io/sheelah/pen/jgewXx

Lesson #4: Angled Edges -  https://codepen.io/sheelah/pen/eqPEpa

Lesson #5: CSS Filters with a Background Image - https://codepen.io/sheelah/pen/WVaEXL

Lesson #6: CSS Blend Modes on Overlay Text - https://codepen.io/sheelah/pen/bXmrMQ

Lesson #7 (Bonus): SVG Animation - https://codepen.io/sheelah/pen/oNvxZNE

 

Resources(1)

Student Projects