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:
<ul><li>Create layered background gradients</li>
<li>Make homepage or landing page hero text stand out using CSS animations</li>
<li>Add Photoshop-like effects like blend modes and filters to text and background images</li>
<li>Wrap text around a circle or other shape</li>
<li>Add angled edges to page sections</li>
<li>Layer images like PNGs and SVGs to apply unique animations</li>
</ul>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.
Note: For the best viewing experience, watching the videos in full-screen mode is recommended. If your screen real estate is limited, see the CodePen links provided to view the source code for lessons.

Introduction

Introduction to CodePen

Background Gradients

Animated Hero Text 

CSS Shapes

Angled Edges

CSS Filters

CSS Blend Modes

Bonus: SVG Animation, Part I

Bonus: SVG, Animation, Part II

Site Considerations

Conclusion

Class Resources.pdf

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

Sheelah Brennan gave you 1 free month of Skillshare

Get 1 free month of Skillshare

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

Creative Learning Made Easy

Company

Community

Teaching

Mobile

English

English