A Beginner's Journey
So, I decided to make this blog post for the developer and also for anyone else who may be interested in similar 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
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.
- jQuery API API
- jQuery Plugin Repository Library
- jQuery Fundamentals by Bocoup Book Free
- Learn jQuery in 30 Days by NETTUTS Video Free
- 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
- 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
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).
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.
- 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
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.