Create Engaging Layouts with CSS Animation

Catherine Maldonado, Web Developer etc.

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
10 Videos (43m)
    • Intro

      3:29
    • Intro to Codepen

      6:50
    • Writing Reusable Code

      6:00
    • Variables and Mixins

      6:50
    • CSS Grid

      6:07
    • CSS Transitions translating

      4:12
    • CSS Transitions keyframe

      3:27
    • CSS Transitions 3D transform

      4:04
    • Animating Your Links

      1:13
    • Class Wrap-Up

      1:12

About This Class

In this class, I’ll teach you how to build a responsive, animated set of links. We’ll touch the surface of the CSS grid spec, SCSS mixins, CSS keyframe animation, and CSS variables. You’ll finish the class having created custom code to easily integrate into your current website or share with the online community of Codepen.io.

Basic knowledge of html markup and how CSS is used to style html is required

I will provide all the files to help you hit the ground running. We’ll start with an html page that runs on javascript/ jQuery, Mustache templates, and a json file. You can choose to sign up for a free codepen.io account to host and compile your files (great for sharing with your classmates) or download the files from github and read the documentation to install SASS on your computer and run the project on your local machine.

38

Students

--

Projects

Catherine Maldonado

Web Developer etc.

I'm a web developer and run a small business called TeePearls. I love illustration, product design, and, obviously, web development.

My new class is for people who know how CSS works and want to learn a few tips about how to structure their code for successful interactive layouts. I hope you check it out and let me know what you think: https://skl.sh/2JM6Y7D

 

WHERE ARE THE GOODS?

Check out my portfolio ( http://www.idiophonebox.com/) to play...

See full profile

Technology Web Development CSS