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

• HTML5 for Web Developers API
• HTML5 Semantics by Bruce Lawson Blog
• Semantics in HTML5 by John Allsopp Blog
• Designing a blog with HTML5 by Bruce Lawson Blog
• HTML5 Rocks Tutorials Blog
• Move the Web Forwards Misc
• HTML5 Doctor Blog
• HTML5 Specification API
• Dive Into HTML5 by Mark Pilgrim Book Free

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

• Eloquent JavaScript by Marijn Haverbeke Book Free
• JavaScript Enlightenment by Cody Lindley Book Free
• JavaScript: The Good Parts by Douglas Crockford Book Paid
• Professional JavaScript for Web Developers by Nicholas Zakas Book Paid
• What to Read to Get Up to Speed in JavaScript by Rey Bango Blog
• Learn jQuery & JavaScript for free by appendTo Video

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

• jQuery API API
• jQuery Plugin Repository Library
• Learn jQuery & JavaScript for free by appendTo Video
• jQuery Fundamentals by Bocoup Book Free
• Learn jQuery in 30 Days by NETTUTS Video Free

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

• Backbone.js API API
• Annotated Backbone.js Code API
• Backbone Extensions, Plugins, & Resources Library
• Backbone Boilerplate Misc
• Backbone Fundamentals eBook by Addy Osmani Book Free
• Peep Code: Backbone.js Video Series by Geoffery Grosenbach and David Goodlad Video Paid
• The Pragmatic Bookshelf: Hands-on Backbone.js by Derick Bailey Video Paid
• Backbone.js Screencasts by Joey Beninghove Video Paid
• Pluralsight: Backbone.js Fundamentals by Liam McLennan Video Paid
• The Skinny on BackboneJS by Ben Howdle Blog
• Backbone Tutorials Misc
• Backbone.js Tutorials via Nettuts Blog
• Exploring Backbone.js Series by Jack Franklin Blog

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

• Bulletproof Web Design Book
• Getting Started (CSS Tutorial) by MDN Wiki
• Mastering CSS Coding: Getting Started by Soh Tanaka Blog
• The 30 CSS Selectors you Must Memorize by Jeffrey Way Blog
• CSS3 Please Tool
• CSS3 Mastery Blog
• CSS Lint Tool
• CSS Comb Tool

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

• Modernizr Library
• HTML5 Please Tool
• HTML5 Cross Browser Polyfills Library
• Can I Use? Tool

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

• Responsive Web Design by Ethan Marcotte Blog
• Responsive Web Design: What It Is and How To Use It by Kayla Knight Blog
• Design Process In The Responsive Age by Drew Clemens Blog
• Responsive Web Design Techniques, Tools and Design Strategies by Smashing Editorial Blog

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.