Beginner HTML5, JavaScript, jQuery, Backbone, and CSS3 Resources

A Beginner's Journey

I was recently approached by someone at a .NET User Group about how to get started in HTML5, JavaScript, jQuery, CSS3, etc... The developer's primary background was writing thick client Windows applications. I figured the best place to start is to focus on the bare essentials and then work up to more advanced concepts and resources. I started to respond to the developer in an e-mail, but then I remembered what Scott Hanselman said in a recent post and video ...

"Instead, consider writing a blog post or adding to a wiki with your keystrokes, then emailing the link to the original emailer." --Scott Hanselman
So, I decided to make this blog post for the developer and also for anyone else who may be interested in similar resources.

HTML5

So, it is pretty obvious that you are going to need to learn HTML5 if you are doing to do front-end web development. From my experience most developers regardless of their language of choice know the basics of HTML. What they may or may not know are all the newer semantic tags, cross-browser tricks, and native JavaScript APIs. There is plenty to learn in HTML5 without getting into the JavaScript APIs just yet. Once you learn JavaScript and feel comfortable in it, that may be the best time to tackle topics such as Geolocation, Web Sockets, Canvas, IndexDB, Web Workers, etc...

Resources

JavaScript

Even if you think you know JavaScript it might behoove you to go back and learn it from the beginning. A common danger is that developers think it looks just like their back-end language of choice (C, C++, C#, or Java) that they don't invest time to learn how it is different. JavaScript is a dynamic and functional language, which is considerably different than C# or Java for example. So, please take your time and pick up the language. If you don't learn it appropriately you will invariably run into barriers down the road due to lack of understanding.

Resources

jQuery

The jQuery library has been around for several years and has catapulted as one of the most used tools in the web developer's belt. The reason for its vast usage is that it solves many of the cross-browser issues that creep up during development. The library is popular for both web developers and web designers. The community around jQuery is amazing and there are tons of jQuery plugins to choose from.

Resources

Backbone.js

If you find yourself writing more and more JavaScript and jQuery then you may want to consider picking up Backbone.js to help you organize your web application. This library is also a great fit for Single Page Applications (SPA). Backbone.js uses the familiar MVC/MVP concepts of Models, Collections, Views, and Routers. In addition there is a nice Event model, History support, and a Sync mechanism. The community for Backbone.js is also very large and you can find many extensions and plugins to fit your needs.

Resources

CSS3

You may or may not have experience with CSS. Brushing up on CSS concepts would be a good thing. If you already feed proficient at CSS1-2, then you should pick up CSS3 as well. A lot of features have been added recently that is in most modern browsers. There are many things that you can do in CSS3 now where you used to use JavaScript or custom images.

Resources

Feature Detection

Inevitably you'll need to support browsers that don't support the native feature you are trying to use. Thankfully you can use Feature Detection to determine if the browser you are in implements that feature and if it doesn't then you can provide functionality to mimic that feature (a.k.a. a polyfill or shim).

Resources

Responsive Web Design

Instead of implementing a different UI for mobile devices, tablets, and desktop browsers you can use responsive web design techniques to provide one experience that restructures the UI according to its size.

Resources

Conclusion

Hopefully the above resources will get you started in your transition to front-end web development. There is a lot to learn, but it is an exciting space that changes frequently. Having a desire to learn is a good trait to have in this field.

If you have any resources that you think I missed please add them in the comments and I'll try to update the lists above if I think they are appropriate.