Start Using CodeKit – How To Setup Your First Project

Are you still writing your front-end development code in HTML and/or CSS? If so you are starting to fall behind the times and should start considering looking towards the future of coding and to what can essentially speed up your workflow ten times over. What I’m talking about is writing in one of the fabulously new languages, Jade, Sass/Scss, or Less, but in order to use any of those languages, you are going to need a pre-compiler to compile all of those fancy new languages into HTML/CSS so that your browser can still read it. Let me show you how to use one of my favorite compilers, CodeKit.


First things first, you are probably wondering what is CodeKit. Well, this wonderful quote from Chris Coyier sums things up pretty well.

CodeKit is an app that helps you build websites faster. It compiles all the cutting-edge languages like Sass, Less, Stylus and CoffeeScript. It live-refreshes your browsers. It combines, minifies and syntax-checks JavaScript. It even optimizes images. All stuff that speeds up both your website and your workflow. Read Post


Doesn’t that sound like a neat tool? Well, since I now have your full attention let’s get down to business. First off you are going to want download CodeKit from the official website here and try it for free for ten days; $32 for a license. Once you have CodeKit downloaded, open the application and it should look something like this:


Screen Shot 2016-01-14 at 4.35.52 PM


Awesome, now lets get your first project started. What you are going to want to do is create a new folder anywhere on your hard drive that you want to store you project, mine will be on the desktop. Once you have done that, take the folder and drag it on top of the CodeKit icon in your dock or you can just click file > add project.


And there you have it. You have your first CodeKit project setup. Now there are a ton of customization options, such as selecting where compiled files will go and being able to instal frameworks at the touch of the button, so go explore with this amazing new tool and take control of all of your future projects.