Creative environments

“You don’t learn to walk by following rules. You learn by doing, and by falling over.”Richard Branson

Today we’re going to look at ways we can build and see our CSS animations in the browser. Before we get started with the coding, it’s a good idea to have a workflow that makes it easy to get started.

We’ll cover two ways of doing this: developing in the browser, and developing offline (locally).

In the browser

The simplest way to get going for small experiments is to develop online. A site I often use is CodePen. Another good one is JS Fiddle.

For the rest of this course I’ll be using CodePen for examples and it’s worth being familiar with the way it works.

CodePen is a coding playground that involves an edit mode where you can make changes to HTML, CSS and JavaScript and see the results immediately. The screen is divided up into four areas. The preview content, the HTML area, CSS and JavaScript. Within each is a settings option that allows you to configure languages (Sass instead of CSS for example) and other cool stuff.

Local development

For more involved projects, I prefer to develop offline. There are ways to do so that can be efficient and quicker than working in the browser.

Basic option: Simple HTML/CSS

The most simple option is to create a HTML file (filename.html) and an associated CSS file (filename.css) and link the two in the HTML. This is ok, but can be slow with lots of flicking back and forth between the browser and the editor.

I’ve created a set of HTML and CSS files you can copy and use to begin creating. Download them here.

Starting files

Dreamweaver / Macaw / Muse / Coda / Sublime

You can of course use whatever tool you find comfortable to create web pages. All you really need is a text editor. Some other tools come with more fancy visual editing, and if that’s your preference, go for it.

Personally I’d recommend trying to get to grips with the code. Understanding the way the CSS works will help when it comes to fixing issues, or creating more expressive effects that visual tools can provide.

Gulp

If you’re familiar with Github, Node and checking out code, you might want to set up a development enviroment on your own machine.

I am a big fan of Gulp. Being Node-based, it’s very fast. Modules can be put together to process Sass into CSS, autoprefix for browser support and sync browsers so that you don’t need to keep refreshing each time you update the code.

If you’ve used Grunt or other build tools, the process should be familiar.

I’ve created a Github repo to make local development faster. If you’re comfortable with using Git, go ahead and follow the readme for setup instructions.

Do improve it if you wish and push the results back. Teamwork!

In summary

As you learn CSS animation, feel free to try different ways to create your code. You might want to host it yourself, or you might prefer to use CodePen. Either is good. Make sure you can get from idea to code as smoothly as you need to.

Homework

Register with CodePen. Have a go adding some HTML and CSS, and see how the results change in response. It’s also a good idea to check out some of the featured CodePens on the home page, and see how it’s done.

Optional: If you want to try local development, download local starting files:

Next: We’ll be talking about transitions!