#009: Setting Up our Local Dev Environment

(Updated on )

We certainly aren’t “done” in Photoshop forever for this design, but we have enough to work from to get started creating this design in the browser. After all, this is a website we’re building not a picture of a website (as they say).

We create a folder that will be home for this project and then manually create all the basic elements of a project: an index.html file, resource folders, and the like. We could have used the HTML5 Boilerplate, but decided that it would be best to write from scratch then go back and reference that to make sure we didn’t miss anything in the future.

We set up CodeKit to watch our project folder. That way we can work in whatever preprocessor languages we want, among other cool things that CodeKit will do for us. CodeKit auto-injects newly compiled CSS for us directly into the browser, which is a huge speed helper during development.

We introduce the very basic concepts of Sass, which we’ll be using throughout the project.