Polishing Up Your Front-End Development Skills

As interactive designers, we live in such an exciting time. We have rich typography, layout and interaction options that were severely lacking only a few years ago. Many of us have picked up HTML and CSS along the way. If you want to push your front-end development skills, there are some great resources that will help you sharpen your skills.

Responsive Design

As mobile use climbs, responsive design provides several wonderful opportunities for us to better serve our clients. We believed in the power of responsive design when the first articles began appearing on A List Apart.

Below are two great books to help you get started:

http://www.abookapart.com/products/responsive-web-design

http://www.abookapart.com/products/mobile-first

 

HTML5/CSS 3

Last week, I stumbled upon a great resource for sophisticated HMTL5/CSS 3 examples (as well as jQuery integration). The good folks at typanus.net have cooked up some great demos. For example, take a look at the following demo on CSS transitions:

http://tympanus.net/Tutorials/CircleHoverEffects/

Not only are the CSS3 transitions amazing, the design examples in the demo are well done. If you want push your HTML5/CSS 3 skills, head on over to:

http://tympanus.net/codrops/category/development/

 

Javascript/jQuery

I realize that our industry is evolving. Front-end developers are no longer designers who picked up a CSS book. In fact, just search any job site for “front-end developer” positions. You’ll see the list of requirements is pretty demanding. The bonus is that Front-end Developers salaries have increased and have become respected assets to any interaction team (on level with many traditional programming positions). Javascript has become an integral part of the design process. However, if you coming from a design background, Javascript can look very intimidating. You might be asking why the need to learn Javascript, when jQuery eliminates many of the frustrations with writing pure Javascript. An expert Javascript friend of mine said that many of the forums are filled with jQuery users who never took the time to learn Javascript. He mentioned that most of the problems that jQuery users run into are not jQuery issues, but Javascript issues. He recommends that all jQuery users start with learning Javascript and then jump over to jQuery.

So, feeling overwhelmed? I know I was. Hold on… I have the coolest, most efficient training tool to help you learn Javascript. Code Avengers created a free comprehensive interactive tutorial that will guide you through learning Javascript (link below).

http://www.codeavengers.com/javascript

When you finished this, first, you should give yourself a pat on the back. It should take a couple of days to complete, but Code Avengers will be there to hold your hand with each step. Then, you should head over to AppendTo to check out their free videos on jQuery.

http://learn.appendto.com/lessons

But the time you finished the videos, you’ll be ready to get some hands on jQuery experience. And last, go through the demos/tutorials at: http://jqueryfordesigners.com/

With a competitive market, we need to insure we have the best tools available to serve our clients. It may mean stretching our skills a bit.  Of course, all this being said, it is important to know your limits. Choose wisely and have fun learning!