Essential Front End Developer skills
(or something along those lines)
Well… obviously…
The most obvious of skills needed to be a good Front End Developer is HTML. It sounds a bit stupid to say it, but it’s surprising the number of people who “make websites” without a decent foundation of html. They spatter their site with divs, spans and other unsemantic tags. They put a h3 before a h1 in their page just because it’s the right size aesthetically. It’s important to remember that a vast majority of html tags have a “raison d’être”, they have meaning, and to throw them around a page doesn’t really do anyone any favours.
Then there’s our “friends” who do SEO. A Front End Developer needs to be able to understand and adapt his code to help further the SEO guru in his/her quest for the holy grail (page 1 on google). Semantic, logical html goes a hell of a long way to putting the Google god on our side.
Having an accessible website is also a modern day requirement. Your code should make sense to everyone who sees it!
CSS (well, duh)
Once again, it seems pretty obvious to say, but I have often seen dirty css code. It got the job done, but there were things in there that didn’t need to be, whose only purpose was to make the css file even longer than it had to be, and harder to understand. For example, adding display:block to the properties of a div. A former colleague had a signature move which basically involved giving 95% of all the sites elements the following properties: display:block; float:left; overflow:hidden…
(for information, an element that is floated automatically becomes a block element).
Situations like this generally occur when the developer has learnt CSS on his own and manages to “get by” but absolutely hates this part of building a website. He lacks a basic understanding of some of the most overused properties on the web. I understand that nobody is perfect and reading the documentation is mind numbingly boring, but from time to time, it is an excellent exercise to question just what the hell you are doing.
One of the most useful things I have done since I began in the business was to paste some of my code here in CSS Lint. Be careful, like it says in the header, it will hurt your feelings, but will make you a better coder.
Another little gem that gives you food for thought, is Revenge CSS. It gives you a bookmarklet that you can activate on any website, (not necessarily your own) and then covers the page in red comments wherever it finds bad code.
Javascript
To go that little step further, being able to do a certain amount of things in javascript, without having to call on your friendly, neighborhood Back End Developer, is definitely a huge bonus.
Personally I would love to be able to do what I need to do using pure javascript. Unfortunately, I haven’t yet found the time (which I could do instead of writing stuff on here for example). I did teach myself how to use jQuery though. The advantage being that it is a framework with an enormous user base, the majority of plugins you find yourself installing on your CMS use it, and let’s face it, it’s a hell of a lot simpler.
I started out using it for a wide variety of things, including animations. Now, I generally use it to test for certain elements and to toggle classes (so I can animate with CSS).
PHP
Say whaaaaaat? I’m not saying you should become a php master, but having a working knowledge allows you to start doing some pretty mean stuff. Wordpress and Drupal use it, so the moment you want to do something a little out of the ordinary, you’re probably going to need to change a template, or add a little extra spice to the functions file. So yep, php!
Added bonuses
The stuff stated above are what I consider to be essentials, but if you look at job offers for Front End Developers, there will always be added surprises.
Trends come and go, but it’s a great idea to try and stay afloat. You don’t need to know everything, but having an understanding of certain things can only help your cause. You should always be on the lookout for new developments in your field. Since starting out in the industry I have witnessed the death of IE6, the arrival of CSS3 and HTML5, Responsive Web Design, Retina screens, SVG and much more, all that in the space of 5 years…
A few suggestions?
Somethings you should take a look at:
- jQuery mobile
- Phonegap
- AngularJS (my current target)
- Git
There are loads of great tutorials out there, finding them is not always an easy task. Personally, I find that a little time spent on w3schools is a good place to start. Their tutorials start from the beginning, and instead of just reading miles and miles of text, you get to play with every new property thanks to their nifty “Try it yourself” button.
You can always go old school and buy a book from a shop (not amazon), but remember, it is important to try stuff out. Have a computer nearby when reading your book, do the exercises, take the tests.
