As anyone who follows web standards knows, we’ve seen a dramatic shift in the industry over the past few years. As the evolution of what we’re able to build within the confines of the browser has been ongoing for both the desktop and the mobile device, the demand for front-end developers has grown.
However, it’s not just the demand for front-end developers but the demands on them that are growing. Simply knowing how to convert a Photoshop template to HTML is not enough — nor is just doing simple DOM (document object model) trickery with jQuery. Nowadays, you’re expected to be an expert in many areas.
In this post, I’ll cover what I feel are the skills you’ll need to break into front-end development. Or, if you already are one, to become a front-end developer superstar!
What Changed? Keeping up with Standards
Let’s take a look at what I mean when I say that the demands on front-end developers have grown dramatically
First, of course, is the advent of HTML5. Yes, at times, HTML5 is just a buzzword, but it also represents a real, significant shift in what front-end developers are capable of doing within the confines of the browser.
Things like local storage, geolocation, and web sockets have made web applications more capable. Things like 2D and 3D transforms, transitions, and animations have made CSS more powerful and complex.
Even for experienced web developers, the ever changing standards and browser compatibility landscape can feel overwhelming. In fact, it is. Thankfully though, there are a lot resources within the community to help developers get a handle on this. If you are just looking for a resource to determine what standard is supported on what browser, WhenCanIUse is an invaluable resource that you’ll probably refer to regularly.
There are a lot of other resources available to help you determine what features you should or shouldn’t use in your application. You can refer to my article on “How to take advantage of web standards” for Adobe Inspire, where I cover this topic in detail. Of course, knowing how to use a feature is at least as important as knowing when you can use it. For some of the best tutorials on the topics of new web standards, I highly recommend the Adobe Developer Connection (of course, I am biased), as well as HTML5 Rocks and MDN.
I’d be remiss if I didn’t mention the necessity of becoming familiar with mobile development. This doesn’t mean you necessarily need to go out and learn Objective-C. Even if your focus is purely on the browser, you must be designing and testing with an eye for the multitude of device screens available.
Speaking of targeting the browser, Responsive Web Design is already a very hot topic and is widely used. Originally coined by Ethan Marcotte in his article for A List Apart in 2010, Responsive Web Design uses things like CSS media queries to make the look and feel of your web page adapt to various device sizes. This is different than the more traditional technique of creating separate mobile versions of web sites that are targeted at phones and other devices.
However, if you need to build apps, you can even leverage your new and improved front-end development skills to do so using tools such as PhoneGap. PhoneGap allows you to build what are often referred to as “hybrid apps” because although they look and feel like native applications on each platform, they’re actually built with web technologies. Services such as PhoneGap Build even help take the complexity of setup and compiling for various platforms out of the equation.
Testing your site on mobile devices has historically been painful. Thankfully, lots of new tools and services such as Adobe Edge Inspect, BrowserStack and AppThwack are continually improving the experience.
I think it’s pretty clear that becoming a front-end developer or improving your skills as an existing front-end developer is no easy task. However, the payoff isn’t the growing demand for these skills from employers — and it’s not the growth opportunities. The payoff is that front-end development is a field and a job that can be fun, challenging and rewarding. So good luck in your endeavors, and feel free to ping me with questions via Twitter or via e-mail at email@example.com.