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

About This Class

Are you looking to add a bit of creativity and uniqueness to your website? With HTML, CSS, and web animations, anything is possible! 

In this class, I’ll show you how to take your website or web application’s homepage or landing pages up a notch by introducing some extra design elements, primarily using HTML and CSS. We’ll also dive into some CSS-based animations as a way to add a bit of visual interest.

Using CodePen, you’ll learn how to:

  • Create layered background gradients
  • Make homepage or landing page hero text stand out using CSS animations
  • Add Photoshop-like effects like blend modes and filters to text and background images
  • Wrap text around a circle or other shape
  • Add angled edges to page sections
  • Layer images like PNGs and SVGs to apply unique animations

Plus, I’ll share some tips and resources for choosing an appropriate design enhancement for your website, based on your site’s goals.

Whether you’re a freelancer looking to build more effective sites for clients, or a side hustler looking to build a more effective business site, you’ll learn techniques for introducing some design enhancements that provide a more engaging and memorable experience for site visitors.