Learn front-end development

So perhaps you're a you're a designer looking to get your hands dirty with code, or a back-end developer wanting to improve your skills on the front-end?

My suggestion is to use this list as a starting point to explore these and other tools/ideas further. Definitely jump straight in and try to design and build something to both learn and to have more projects to show off.

Pretty early on you're going to need a solid understanding of JavaScript. jQuery does a lot of heavy lifting and is something you should understand.

To improve your skills, the best thing you can do is build some small projects. You can use GitHub Pages to host them.

It's worth have a play interacting with a public API in a client-side application. For example, services such as GitHub, Dribbble and Lastfm are easy to work with. Look into using jQuery ajax/getJSON methods.

Or displaying a set of data on a map and handling interactions using Leaflet.js.

Perhaps build a small application using jQuery UI or similar?

In terms of extending your development workflow, some preprocessors we use are Sass, Haml and Coffeescript. Similar to Sass is Less which you'll be able to get started with very easily.

I suggest checking out Sublime Text as a text editor.

Macbook Air with Sublime Text

Whilst no one would expect you to be a Ruby on Rails expert anytime soon, definitely check out the Rails Guides and try getting an app running locally. It's a good way to start using the command line, run a development server and compile preprocessors. It also helps give you a better idea of back-end development, and Ruby is an easy introduction.

We use Git for version control, here's some help getting started.

You'll find some great open source projects on Github and getting involved yourself will open up that world for you. Going from there to the command line in the next step.


Some helpful front-end resources:

Some blogs/sites with helpful content:

With regards to design, below are a few sites/apps that I believe showcase some clean, minimalist & engaging designs for your inspiration! (as of March 2015)

Dribbble is of course an endless source of inspiration/distraction.

Some more advanced javascript (worth a look)

This are just a basic starter guide for furthering your learning, so use it as a launching pad for even more.