Creative environments

    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).

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

    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.

    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.

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

    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.

    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.

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

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

    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.

    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:

    • Basic option:

    Next: We’ll be talking about transitions!