Media Temple Hosting

Skills for Front-End Developers

Don't use the N WordAs a front-end developer, I’m constantly trying to learn new skills and technologies and adding to what I already know. Front-end developer job postings, however, vary from posting to posting so the list of different languages, libraries, and technologies that could theoretically fall under the category of front-end developer skills is quite large.

Here’s a list (that I’ll continue to update) containing a wide variety of skills and technologies that I think all front-end developers should be working on learning, at least to some extent. I certainly don’t know all of these, nor do I expect anyone else to.

The list is not necessarily in any particular order, but I tried to keep the more rudimentary stuff at or near the top. Also, many of the items overlap others, so there’s a lot of cross-over within the list. And of course the list has lots of potential for improvements (more on that below).

  • HTML (XHTML, HTML4, HTML5)
  • CSS (2.1, CSS3, etc.)
  • JavaScript / Ajax
  • jQuery
  • Popular Frameworks (HTML5 Boilerplate, Twitter Bootstrap, etc.)
  • Modernizr
  • OOCSS / BEM / SMACSS (Modular coding methodologies)
  • CSS Grids
  • CSS Frameworks / Resets
  • Progressive Enhancement / Graceful Degradation
  • HTML and CSS Specifications (W3C / WHATWG)
  • UX / Usability
  • Website Speed / Performance
  • Developer/Debugging Tools (Chrome Dev Tools, Firebug, etc)
  • YUI Library
  • Dojo / MooTools / Prototype
  • Responsive Web Design
  • Mobile Web Development
  • Mobile Web Performance
  • Cross-Browser / Cross-Platform Development
  • Document Object Model (DOM)
  • Cross-Browser Bugs and Inconsistencies (primarily IE6-8)
  • CSS Pre-Processors (LESS / Sass)
  • Version Control (Git / GitHub / CVS / Subversion)
  • HTML5 APIs (Canvas, Geolocation, Video, etc.)
  • Object-oriented Programming (OOP)
  • Back-end Templating languages/technologies (PHP, Ruby, .NET, etc)
  • Scaffolding, Task Runner tools (Yeoman, Grunt, Bower, etc.)
  • MVC Frameworks (Angular, Backbone, etc.)
  • Unit testing
  • MySql
  • Accessibility / WAI-ARIA
  • Microdata / Microformats
  • HTML5/CSS3 Polyfills
  • CMS (WordPress, Drupal, Joomla, etc)
  • Functional Programming
  • Data Formats (e.g. JSON, XML)
  • Internationalization / Localization
  • Content Strategy
  • Offline Web Apps
  • Regular Expressions
  • .htaccess
  • SVG
  • Image Editing Tools (Photoshop, Fireworks, etc.)
  • Web Font Embedding / Licensing
  • SEO
  • Haml
  • CoffeeScript

I may eventually turn this post into an extended list divided into categories plus links to articles and tutorials where these subjects can be learned or mastered — but for now you’ll just have to trust your Google searching abilities if you want to learn more on any of these.

Please Contribute

The list is a rough first draft, and I’d be happy to update it and refine it based on any feedback. So please offer your suggestions on how it could be improved and/or expanded and I’ll make any necessary updates.

179 Responses

  1. Scripting: SSI/XSSI, Sinatra/Padrino.
    Templating: Haml.

    MySQL, PostgreSQL or any other DBMS seems a bit far fetched for front-end, strictly. A clumsy DB is reason enough for me to substantially raise the price or even deny a live project that needs improvement. ETL work on nonsense data is no fun.

  2. I feel this is way too much. If you know all of this, you might as well apply for any web development related position.

    • komiska:

      Agree with you completely!

    • As mentioned in the post, I don’t expect anyone to have all of these skills. Certainly not advanced knowledge of all of them.

      This is just a list of front-end skills, for reference for those who want to expand their skillset.

      • Ben:

        How would you consider PHP to be a neccessity for front end developers? …. Do you mean that a front end developer should have a understanding of how php works and the syntax etc or actually be able to code in it comfortably? If it is the latter i disagree

        • Although the list might imply that these are all “necessities”, that’s not how I feel. This is a list of stuff that commonly might appear on a front-end developer job posting, nothing more.

          Now, that having been said, I personally think it’s a great asset to front-end development to know your way around PHP. Does this mean you have to know how to build Facebook? No, not necessarily. I could probably build Facebook with PHP. But it would take me a ridiculously long time and I guarantee you it wouldn’t be secure or maintainable. But I think my knowledge of PHP is strong enough to help me get through any challenges when building the front-end for a PHP-based website or app.

          • Zac:

            facebook IS made with PHP.

          • Ben:

            I think your skill set which you applied above is aimed at a web developer and not a front end developer ….. Front end development is hard enough without PHP and Ruby ….. Im not saying there’s no place in front end development for PHP etc but i don’t enjoy reading articles telling me i should know this and that because it puts pressure on front end developers to think ‘Should i know that’ and then you have employers asking for a front end developer who understands every language under the sun.

          • Jean GlandePasUne:

            PhP has no convient IDE. Open a brand new project in Visual Studio and you already have web pages with a tool box of components ready to use and to connect with the code behind.
            Those who don’t like .net have not tried it.

        • Also, see my comment here further down in this thread regarding PHP on a front-end job listing.

        • I think PHP, Ruby, or any other programming language is fair to list, but I would hope that most employers are only expecting a basic understanding of these languages. Front-end Devs need to know how to work in templates, which are often written in some form of “back-end” language. That doesn’t mean they will be creating their own plugins or building entire websites on their own.

          • Ben:

            Exactly right .. +1

          • Adam:

            Exactly. The list is daunting at first, but in the real world a front-end developer will be as much a hindrance as ‘help’ if they’re not able to work within a server-side language without breaking things. I think what this article (and the comments) highlights, is that we as front-end devs are really experiencing a pressure situation with regard to expectations, whereas a pure programmer can specialize in one or two languages and more easily avoid being left behind.

            Aside from HTML, the most critical skill is CSS, and then I think it’s Javascript, made A LOT easier by jQuery.

          • Jean GlandePasUne:

            Well, now front-end dev do specialize regarding the back-end they’re the most confortable working with. Even the IDE. Front-end to work in collaboration with php dev in Zend is not the same experience/skills as Front-end to work with wcf service feeding aspx in VS.
            Not to mention the web server (Apache vs IIS) and the databases (no-sql vs sql)

        • [%= "[sarcasm]I know them all.[/sarcasm]” %]

        • Vishnu:

          how will you create a front end for a web app, without knowing how certain backend functions work? you definitely need to know whats going on. am i wrong?

    • Toemouse:

      I think the list is a good start. Depending on what direction you want to go there are a lot more you can add. If you want to keep relevant and increase your earning potential you need to keep growing that list. I would add Titanium and Phone Gap etc. also languages that compile to js like haxe

  3. I agree with most of this list. However there are two or three that I would remove.

    Being a front end only developer, I wouldn’t expect to have to learn PHP or Ruby on Rails, they are primarily back-end coding language.

    Now I myself am primarily a front-end developer and am currently learning PHP and Ruby on Rails, but I am learning those language to move away from the front-end side.

    Other than that, I really like this list,and thank you for taking the time to compile it. Some of these I have not heard of, and am anxious to start researching.

    ~Happy Coding

    • This depends where you consider the line of front-end development and back-end development.

      PHP let us not forget is a templating language and can heavily influence the front end of a website. It makes pages more dynamic and saves the developer from having to write the same HTML code and modify data manually when the website needs updating.

      If for example a front-end developer was creating a skin for WordPress it would be beneficial for them to have PHP knowledge so they can understand the functions that need to sit within the code and what they will do. You could argue that the front-end developer might make the theme static first and then someone else could add the PHP elements. However in many companies they might expect the same employee to do both these things.

      • Totally agree. I think the comprehensive nature of this list insinuates requiring only a basic level of knowledge for each skill. There’s no way someone can be an expert in all of these languages, but I think it is safe to say a majority of front-end developers will need to work in PHP, Ruby, or another type of templating language besides straight HTML/CSS.

      • Ben:

        Do you not think employers expect this because their are list’s like this online?

  4. karf:

    + XML
    + SVG
    + common sense ;-)

    • I added SVG and Canvas to the list. I don’t think XML needs to be listed.

      • Matt:

        XML should definitely be listed. How do you do standard AJAX without it ?

        REST / SOAP are two that should also be here for front end devs.

        • Ajax really has nothing to do with XML. The “X” part of Ajax is a misnomer. That’s why it’s more correct nowadays to write Ajax using title case, not in all uppercase (i.e. “Ajax”, not “AJAX”).

          At first, it was an acronym that stood for “Asynchronous Javascript and XML”, but it later just became a word that refers to loading content with JavaScript asyncronously, regardless of the type of data being pulled in.

          With Ajax, you can load XML, HTML, a text file, a PHP file, and much more.

          Also, XML is just data and it’s marked up like HTML. Anyone who knows HTML well will know XML basics. I don’t think advanced XML development is a necessary or sought-after “skill” for front-end devs, so for now I’ll keep it off. If anyone can give good reasons for it to be added, then I’ll reconsider.

          • Amós:

            HTML itself is XML. Knowing that has cleared a lot of doubts in the way i thought about markup. You will find it in different places from a flash gallery to an API. JSON as well. If you are so flexible to consider server side languages, XML should definitely be in the list.

            Common data types that a front end will find in his everyday job should be a must IMHO.

          • Johnathan:

            But JSON is?

          • Good point. I suppose you could make an argument for XML, but I just think XML is so similar to HTML (putting aside any namespacing stuff) that it doesn’t even need to be listed, whereas JSON seems more unique. I don’t know, I guess it’s a coin toss, but I don’t think I’m going to add XML to this list.

          • XML “looks” like HTML, but is actually more like JSON functionally. It is a data transport format that is used more than you think. If JSON is on this list, so should be XML.

          • Well… I suppose enough people have spoken in favour of XML. The reason I kept JSON (and functional programming) is because they’re both closely related to JavaScript. But I suppose I could change JSON to “data formats” with XML and JSON in parens.

            I hope that’s a good compromise. :)

          • Try truly knowing Ajax and JSON without getting familiar enough with XML to say you ‘know’ it. Won’t happen. You’ll be able to list XML as a front end dev. It’s not brain surgery.

  5. Sid:

    hello good post, I would like to know which are the skills for back end developer

  6. Rijesh:

    What about ASP.NET?

    • Marrowmaw:

      Ehhhhh!?

    • Personally, I think ASP.NET is a waste of time for any front-end dev. If you already know it, then great. But I would never recommend a front-end dev to expand into that area. Much better to learn RoR or PHP.

      • Typically I would agree with you, but since Microsoft recently embraced the MVC model, any front-end dev that finds themselves working in an ASP.NET shop now has a lot more flexibility to go in and create front end markup, structure, and behavior than they did in the web forms world. I grant that RoR and PHP will continue to rule the landscape, but it can’t hurt to at least be familiar with it. At the very least, it makes you more marketable.

        • I agree, it would definitely make you more marketable. I just question the ROI. That is, the amount of time it would take to be able to develop, run, and test ASP.NET apps on a local machine, seems like a lot of work for potentially little gain.

          But hey, that’s just my opinion, and based on a very superficial brush with .NET many moons ago, so I’m open to the possibility and certainly encourage devs to look into it if they think it would yield results in their future in development.

          • Ayyash:

            Is there a way in php to build master pages to control ur mockups? does it have a good solid IDE? i disagree with u, a front end developer does not need to know the technical tad bits of the server side language at all, unless he is part of developing the site… but asp.net is NOT a server-side tool only, it is more like a tool u use to build mockups, except that dreamweaver is $400! and VS web developer is FREE! and u can connect to SqlExpress and it is also free, and u can buy a plugin for php code intellisense for $70… I think all front end developers should learn a few things about asp.net (after all, it is Object Oriented, unlike CSS, which I must say, if someone believes he can push CSS to be OOCSS, that does not mean all front end developers have to buy into it, i for one, run away from any framework pushing CSS to be what its not)
            Prototype mootools jquery, I think u just need to understand the idea, pick one and use it, if ur good at javascript its enough to know which one to choose, once u do, its enough, no need to know the others

          • I have to say that even though the industry holds onto .NET, it is from some fear of open source not having support. No, there is no way “in” PHP to build solid master pages, and no, it does not have a solid IDE. Neither does ASP.NET. That’s what phpStorm, TextMate or Visual Studio does, for PHP as well as ASP.NET. However, one is consortium driven, and the other is driven by corporate revenue.

        • I’ve had a change of heart and combined all the back-end languages into a single category, with .NET mentioned as one example.

      • Phil:

        What makes asp.net any more a waste of time to a front-end dev than PHP or other server-side languages? Believe it or not, .net apps have front-ends too! I think an understanding of any one or more server-side languages would satisfy most reasonable employers looking for front-end only devs.

      • Zymara:

        It depends on where you live, perhaps. I’m in the Seattle area, and due to the presence of Microsoft, the majority of local companies want some experience with ASP.Net (especially MVC). Chicago is another .Net-friendly location, as are others.

        • Excellent point, Zymara. I should probably just combine the back-end languages into a single category and just list .NET as one of the “examples”. I think, based on the comments here, that makes the most sense.

  7. Emma:

    I think this is a good list, thanks. I’ve only just touched on some of these things but I think its important to at least know WHAT these things are and what they are used for. For example, I can’t write my own javascript, but I know how to implement and adapt jquery. I can’t write php, but I can use snippets to aid my development. It would be nice if this list was my New Year’s resolutions, but I know I’ll never learn even 25% of them!

  8. Very short list of skills :)

  9. What about Photoshop and/or Illustrator? I think they are very important part of creating a web site. If you don’t know how to use them you can’t slice your HTML properly.

    • I originally had Photoshop on the list, but removed it. If I have Photoshop, then I also should include Illustrator, Fireworks, Inkscape, etc.

      Come to think of it, I’ll add something generic like “Image editing tools”, which should suffice to cover that area. Thanks.

  10. I thought that was quite long list at first glance, but as I read through realised I already have the majority of them down. The big things for me to brush up on are performance, microformats, svg and canvas. I might use this as a checklist, thanks!

  11. For those who think it’s wrong to include back-end languages like PHP on a list for Front-end developer skills, here are 3 different job postings on Authentic Jobs that include PHP in the job description:

    Sr. Front-End Developer/Interactive Designer
    Front end web developer
    Front end web developer

    And even one job posting that explicitly uses PHP in the job title:

    Front-end PHP Web Developer

    • Bob:

      And how many are not?

      • I don’t know. Lots, probably. But I found those four in about a minute of searching the recent postings on that site, so I would guess that the majority of front-end developer jobs would list PHP as either a requirement or a “preferred” skill.

        • C_Denney:

          As someone trying to teach myself front-end languages, I often look at job ads as a guide to the sort of things I should be trying to learn and, to be fair, I do see PHP specified in a lot of them.

        • Ben:

          The reason they list these skills is because you have people like you putting list’s up online

          • Ben, you obviously disagree, and I respect that. However, even if I was to leave off PHP (and all back-end languages), then I’d have tons of people posting comments asking why I didn’t list PHP. I can’t please everyone.

            The point of this list is to motivate us to keep learning more, not to scare or intimidate people. I don’t know at least half the things on this list — or else I know them very poorly. But I do think you’d be a great front-end dev if you knew them all to some degree.

            Think of it as a goals list that we can keep striving for, and maybe will never quite attain. There’s nothing wrong with having high expectations to keep pushing yourself to learn more, even if you always fall short of those expectations (which you always will in this field of work).

  12. Davide:

    + Django ?

    • +1!

      I wish every frontend developer at least knew the Django templating language.

      • Vall:

        Django templates are fairly simple (and limiting), so learning that shouldn’t be a problem once you’re familiar with basic loops, some of the more popular tags, and can look through documentation. :-)

  13. indigo:

    Extend this post more widely, and do not copy/paste any speciality founded in the internet. Just mention why this, and not any other is important. Because, in this moment, this does not mean anything at all… Following that, we can add .NET as mentioned, Node.js, relational and non-relational types of databases and everything else, but what is the point ? what’s the clue of posting list like that ?

    • It’s a reference, nothing more. And thank you for the reasoned response. Your previous two comments were deleted because you were being a troll. I don’t care if you criticize, just have some reasons for your criticism.

      So, yes, you’re right. The list is a bit arbitrary, and there isn’t anything clear to show why I include certain things and leave out others. And now that you mention it, I’m going to remove Node.js because although it uses JavaScript, I don’t think it’s fair at this point to expect many “front-end” job postings to include that. Thank you.

  14. Deon:

    A little bit of programming (in general),
    Solid HTML, CSS, Javascript background,
    A good RSS Reader and qualified feeds to read. (That’s why I am here :))

    That’s all. The other things will come to you as you work in the industry IMO.

  15. Typography / Font-Services (Typekit, Google, etc).
    SEO
    Social Media

    The last two are more of an awareness than a thorough understanding.

    • I do not think that front-end developers need to know SEO.
      What about SEO Specialists?

      • Everyone should know basic SEO. I’ve seen (and in my time made the mistake of doing this myself) too many sites where H1/2/3′s are used for styling and you see X number of H1′s on a page, no alt tags on images, no title tags on anchors.

        A basic grounding in SEO makes your sites not only rank better but will also increase semantics & site accessibility which is a very good thing for those that need it.

        However I have to agree that some of these recommendations don’t really make sense for a front-end dev and are straying far too much into other job roles.

      • Rob:

        I think it’s very important that front-end devs have at least a basic understanding of how their work impacts SEO. They may not have to know how to get #1 ranking sites, but they ought to understand how to avoid things that could make this unnecessarily difficult.

  16. Stewart Duffy:

    No flash or as3 / as2? Come on I think that’s far more important for a front end dev than ruby on rails.

  17. thorsten:

    Debugging, debuggers and other related tools on the “Firebug” or “Web Developer Toolbar” line of tools.
    Bradley already mentioned SEO.

    • Good one. I added “Debugging Tools” somewhere in the middle of the list.

      As far as SEO, I think that’s pushing it too much. I might as well add “graphic design”, too. Then who knows where the list will take us. I just want to stick to day-to-day “developer” stuff. Although, in that case, I could probably make a case for removing UX/Usability.

  18. thorsten:

    sorting the list and grouping (markup, code, tools, optimization…) would help a lot. especially since relevance of some items is far higher than that of others.

    where such exists, at least one link to the main documentation would be nice. other links would be nice too, but of course part of it a matter of taste. Though I always hoped for an extensive list with links grouped and ordered by relevance (new, documentation, manuals, blogs of important people), kept up to date by somebody with enough knowledge of the topic to decide what is helpful and what not. Super nice would be different sort options, eg sorting by experience, giving you tutorials for beginners, intermediate and advanced knowledge or having some tags applied to them)

  19. I would add cms. At least some knowledge about how they work.

  20. Max:

    we’ve got another dispute – XSLT?

  21. Spacey:

    I think this list is spot on. Thank you, now i have a check list to follow. And I agree, PHP is a must if you really want to excel in front end development. I believe if you want to create something amazing and be a successful front-end developer you need to have some info regarding the immediate back-end. I’m sure an employer would be more impressed if you had some knowledge regarding PHP, rather than just HTML and CSS. Even if it is some basic and beginner knowledge. Same goes for the rest of the stuff you mentioned.

  22. Dev:

    Can’t understand why Functional Programming is in this list ?

  23. cielo:

    I guess this one is a matter of personal taste, but I think LESS/SASS are extremely powerful extensions of CSS, and are at the top of my list.

    Also, I use WordPress as a CMS framework, so PHP is absolutely essential in my realm.

  24. These can be added
    ———————————
    CMS Theme Development (WordPress, Joomla, Drupal Etc.)
    Regular Expressions
    On Page SEO
    Semantic HTML
    Unobtrusive JavaScript
    Understanding of Mark-up and CSS validation errors
    ——————————————————————————————————–

    But in my opinion
    —————————
    HTML5 Boilerplate is a collection of best practices if you have your own boiler plate then it’s not necessary to use H5BP
    OOCSS – Is not necessary if you don’t use it this approach
    CSS Grids – It depends , I don’t use Grid
    CSS Frameworks / Resets – Most of the CSS Frameworks are Grid based and have already mentioned CSS Grids. and for Reset I would suggest Normalize CSS
    HTML and CSS Specifications (W3C / WHATWG) – What do you mean by adding it? you have already added HTML and CSS at top
    UX / Usability – It’s good if you have this knowledge but many companies expert UX guys and I think UX is not a job of developer
    Dojo / MooTools / Prototype – No necessary to learn all most of the world use jQuery
    Responsive Web Design -It’s not a different thing it’s combination of HTML, CSS and sometime Javascript

    IE6-IE8 Bugs and Inconsistencies – other browser has some bug and differences too
    CSS Pre-Processors (LESS / Sass) – It’s not necessary if you don’t use.
    ———————————————————————————
    And below skills are not necessary to have for a Front-end Developer . If some one asking for these too then he want to hire single man to do all things.
    OOP
    PHP
    Ruby on Rails
    My Sql

    • Definitely regular expressions.

    • The reason I have “HTML/CSS Specifications” as a separate item is because it’s quite possible for anyone to learn HTML and CSS but not even know much about the process of the W3C or what the spec actually says. So I think taking the time to study the spec itself and understand how specs develop can enhance a developer’s skillset, but is not always something that’s absolutely required.

  25. I wish I had more time to learn new things but I’m working on that. Good article, Louis. Thanks!

  26. Damn,

    I don’t have them all, but I do have scheduled to improve them as time goes by. Learning takes a backseat sometimes when things get rough and busy.

  27. Finn:

    When it comes to bigger clients I’m hunted by several Java techniques. Therefore I would add JSP, JSTL and JSF to the list.

  28. Oh man!… your frustrated me with this list. May be, I will get inspired tomorrow but not today at least.

  29. It was good stuff but i think having half way cross is also good, CSS 2.1 and some concepts of css3/HTML5 may be overwhelming, but knowing about browser compatibility(like browser compatibility, platform compatibility, resolution compatibility,interbrowser scripting etc ) is much more concerned.

    all these require patience really and basic concepts shold be clear to make everything possible

  30. “Нужен мне работник: повар, конюх и плотник” — A. S. Pushkin, 1831.

  31. Marry:

    To me PHP has not much to do with front-end, this is back-end technology

  32. Marry:

    The only reason why PHP is added to front-end roles is because either the recruiter is not aware of what front-end/back-end is plus the salary for a front-end developer is significantly lower then that of a back-end developer that doesn’t mean it’s not back-end technology in my opinion

  33. Well I’m surprised that SEO wasn’t on the initial list and when it was added in the comments you guys didn’t think it was that important.

    I’m not talking about the off-site part of SEO, but why can’t you include on-page and on-site SEO in your skill set? Not just some meta tags, unique titles for each page and SE friendly urls, some real on-page and on-site SEO like using heading tags properly instead of using them to force formatting of the text, avoiding bloated coding by using tables and inline styling, etc.. There are tonnes of on-page and on-site SEO stuff you could do instead of loosing the work to an SEO firm that doesn’t necessarily know how to code properly, earn more on your projects by saving the customer money in the end and earn a reputation of being a developer that hands over a site ready for the SEO firm to take over doing the off-site part of SEO.

    Search Engine Journal posted an article about the very subject of search engine friendly today: What the SEF is Your SEO Doing? http://www.searchenginejournal.com/what-the-sef-is-your-seo-doing/38413/

  34. I would change IE6-IE8 bugs and inconsistencies to “browser bugs and inconsistencies”. Modern browsers are far from perfect, even for simple things.

    Don’t really agree with all the frameworks either, but that’s just a sign of the times I guess.

    • Agree with the point on browser bugs. I changed it to be more general, but with a note in parentheses that the primary culprits are IE6-8. Thanks.

  35. You forget one of the most important skills; communication. Every developer could do with spending as much time on developing this than learning the next hot technology. I’m unsure why a front end developer would need to learn lambda calculus? So, why list functional programming there?

  36. Roger White:

    Wow, that is a massive list…..do you really need to know all of them depending?

    Surely it depends on the application platform you are building on/for….a bit like adding ASP.NET to the list?

    You could have the list broken into categories depending on experience:

    First year (the basics): CMS (WordPress etc), HTML & CSS (W3C), Imaging tools, Web Speed etc
    Second year: Mobile development, ROI, etc…
    A few years later (advanced topics): php, asp.net (database/application platform integration)

    I hope that makes sense.

    A good topic though :)

  37. Much Love:

    I think you should also include “ability to see what’s inside that photoshop group named group 238 copy 8″

  38. Since we are talking about front end development and since we are in an era of unifying the designer-frontend developer skills, I would also include “Basic design skills” in the list. Near the top too.

  39. Tsukasa:

    ie6? Only if you are in China.

  40. Really disappointed at this listicle of skills. While I think you could at least pre-sort some of these bullet points, I think you’re approaching this all wrong. If you want to get a job in the web industry, don’t ask what skills you need, but what is it you want to do.

    My response, “On necessary skills and secrets about hiring”:
    http://blog.julieng.me/post/15290078329/on-necessary-skills-and-secrets-about-hiring

    Cheers,
    Julie

    • Julie, thanks for the feedback. To respond to some of the points in your article:

      1) I don’t habitually write “list posts”; it’s something occassional. I’ve written maybe 5 of them in about 4 years of blogging on this site, so I think this one can be excused. :) Also, as you can see from the conversation it’s generated, it is an important topic. You have to realize that writers like myself recognize that the voice of the commenters on a post is *just as important* as the voice of the author. You may not agree with that (I don’t see a way to post a comment on your article) so that’s fine. But I think the comments on this post are part of what makes this post so valuable. :)

      2) I completely agree that nobody should expect to master all of these skills. I said that in the article, and I’ve written about that topic before, and even joked about it.

      3) I completely agree that some of these “skills” are actually not “skills” at all; that was just a basic title I gave to the article. A title like “Skills, Experience, and Technologies for Front-End Developers” would not be as eye-catching, in my opinion.

      4) Although I mentioned “job postings” in the intro to the post, I did not base this list on scouring job postings. I’m a front-end developer, and I know what skills and technologies (and experience!) people need to work in this field. This list was purely based on my own understanding of web development, but was written for the purpose of helping developers to be able to deal with the inevitably diverse types of job postings that they might come across.

      Nonetheless, I understand your point, and I hope everyone takes my list with a grain of salt and does whatever is necessary for them to keep working in this field. :)

  41. Patrick:

    Fluid images?

  42. Kris Handley:

    The only skills you need are the skills to do the job you need to do right now and the ability to learn the skills you lack. A technology is also not a “skill” so this whole thing is pointless.

  43. When applying for some of these positions that ask you for all these “skills” you’ll soon realize that a majority of those posting job advertisements actually don’t know the difference between front end and back end and just list the items they think they need. They are usually looking for a jack of all trades as mentioned above to stretch their budget when they really shouldn’t be.

  44. I realize that you say you don’t know all of the items on the list… but I have to agree with other comments, saying that the list is entirely too long.

    Not only don’t know you all of the things on the list, I doubt anyone does. No developer *should* know that much, because it waters down the experience pool. No one can master that many things – like the old saying, “Jack of all trades, master of none”.

    I think it’s curious that you list the JavaScript frameworks YUI and Dojo on the list, but not ExtJS or Sencha Touch. I know it’s a “short” list of skills, but I think jQuery is the *only* JavaScript library you can reasonably expect a web developer to have experience with. People will certainly dabble in others along the way, but few developers really understand anything other than jQuery. (Which is not always good, IMO)

    I appreciate the post… it’s a bold topic to write about, but keep the posts coming :-)

  45. Juan Valenzuela:

    The title of the article is wrong. It should read “Skills for Front-End Developers who only do freelance work for small to mid-size companies using open source tools”. For large corporations with mission-critical web applications the skills you are listing do not cut it. I happen to work for one and we won’t even look at your resume unless your cover letter mentions xx years of experience in technologies like .NET, J2EE, JSP, ASP.NET (web forms and MVC) and best practice design patterns. If you don’t believe me just try to apply for a job at companies like Google, Microsoft, Oracle or Facebook without one of these and let me know how it goes.

    • Kaitlyn Neese:

      I disagree. Those companies would much rather see that you are smart and able to solve problems, and projects that you’ve done than 837492 technologies you know—all of which you only scrape the surface of. You can’t be a 5/5 on everything above, but big companies want to know that you’re talented, smart and can pick up anything they throw at you fairly easily.

      I would know, as I’ve worked Facebook and Google.

  46. ka:

    You can add TWIG (http://twig.sensiolabs.org/) if you want to be complete

  47. I think the list should be split between “you must have them”, “you should have them”, “you could consider having them” and “with the basics is enough”.

  48. I agree with Kris Handley.
    Tools and skills needed for different projects may vary. Lots of people say you should “specialise” but I think that due to the ever evolving nature of online tech, it would be wiser to adopt and build upon “web generalist” skills…For those that may disagree, that’s my opinion!

  49. Joey Hipolito:

    i really love this list..just now, it sets a definite path for me.
    thank you!

  50. You need to justify everything on the list with paragraphs, even the obvious ones. I don’t get any credibility from a straight list.

    since you are trying to update this I’d also cut the list down to the essentials, as that’s how this was interpreted by most readers, including Smashing Magazine who shared this.

  51. I think the best thing you could do at this point with this list is implement it as a visualization – perhaps a series of concentric circles that radiate from a central point – and add technologies/techniques you have listed here as being relatively nearer or further from the center, and perhaps grouped logically. For example there’s been a worthy debate as to the value of RoR/PHP for a front-end dev. My personal opinion is you should know the aspects and syntax of the language that are likely to be found in the view layer – iterators, partials, templates, variable formats, etc. But you don’t need to know the M and C parts as well. Same with many other languages here – some are ‘core’ to a front end developer, and some are good to know or just be familiar with. But thank you for compiling this list – you’ve added significant value to the Internet and to the discipline of software development.

  52. I would add a JavaScript MVC framework like Backbone.js.

  53. I think firebug needs to be way higher up on that list ;)

  54. i know most of those, that makes me happy =)
    also, a thing to consider, i talk/read/write two popular languages (eng&spa) and that gave me a lot of extra clients =)

  55. I’ve added “Basic .htaccess” to the list, as I think that’s a good one to have growing knowledge of, but not necessarily be an expert in.

  56. I think your list also needs some kind of testing methods. With the current list you can create some stuff, but it should be tested as well to ensure the quality of your work.

  57. Mike:

    RSS/ATOM?

  58. Hi, Did you sort based on the most important to only supplement?

    • No, not really. The top of the list has the most important stuff, but after the first 5 or 6, it’s somewhat random, and very roughly sorted in order of importance. But as many people have pointed out, it really depends on the job and/or the project being worked on.

  59. Thanks for the post… It gives a new way…

  60. Michael LeRoux:

    I get the joke, unlike most of the commenters. Many job descriptions include an even longer list of technologies and buzzwords.

  61. How about unit testing. As web apps complexity grows unit testing (with e.g. jasmine.js) is a very useful skill to have

  62. david:

    here is what basic frontend needs

    all adobe suite projects
    HTML CSS Jquery wordpress
    optional but useful: some API experience. PHP understanding. basic JS/PHP manipulation

    now if you were going into applications, then yes you would need to know how to build JS/PHP from scratch, which is backend.

    what is happening is that some of backend(AKA programming) is getting integrated with frontend because everyone is learning it and companies realized they can pay someone less to do the same job yet call it “frontend” when it is honestly.

    front-back end. it is not the same frontend as it was years ago as that positioning is dying as webapps and mobile keeps getting hotter sadly enough.

    that’s the issue here and that’s why companies post “frontend” with such heavy programming requirements.

  63. Interesting to read everyone’s thoughts on the necessary skills, and picking out some that may not have made the list a year ago.

    At the risk of looking like spam, take a look at a site a friend and I created as a side-project – Skills Log – you can list your own skills, and levels of proficiency, plus you can find skills by occupation.

    I wouldn’t normally promote it in a comment thread, but thought it was relevant to the topic…

  64. Demetrio:

    Very interesting list/discussion. I found this article being someone that’s looking for work as a frontend developer, who has skills primarilly in html, css, jQuery dom scripting, and php basics within wordpress. But then I see a lot of job postings where they say something like: requirements, expert in rails development, OOP Javascript, MySQL, etc. and all the sudden it stops seeming like what traditionally has been known as front-end development.

    If I had to make a standard list, I’d say the basic requirements would be these:

    Some understanding of design-photoshop etc.
    HTML(5)
    CSS(3)..let’s face it, the web is moving this way..
    a Javascript framework-In the real world probably jquery, with a focus on DOM manipulation, and some AJAX.
    knowledge of working within a backend language such as PHP, or within ASP.NET(at least in my area)..

    Seems like a more reasonable list/workflow, than what many companies are asking for today.

  65. Pete:

    Great list, I think that it would be good to put a % next to things, i.e. HTML/CSS 100%, but PHP (when used in a template for a cms) maybe like 15-20%? Also couldn’t you group JS libraries together?

    Again great list, and gives me a couple area’s to work on that I hadn’t thought about before.

    • Personally, I think jQuery needs to be on its own because of how popular it is. It’s much more in demand than the others. So I wouldn’t change that.

      But I’m not sure if the percentages would help at all. Because who would be the expert to define the numbers? Would be tough and probably cause more debate. Also, wouldn’t it be strange if the percentages didn’t all add up to 100%?? :)

      It is good idea though.

  66. Yes, the list goes on and on. It’s time to break the front-end developer role to 2 titles. Front-end developer and Front-end designer. This will make a distinction between the set of expertise and required knowledge.

    I have changed my title to “Adaptive Developer” since I never really learn in depth new stuff, just keep on adapting, testing, applying until the next project requirements.

  67. rachel:

    Randomly found this and it hit home. I’ve been working on a site with a pretty decent sized team and the project manager keeps asking me to do pretty much everything and then I end up sending it off to whichever programmer should actually be doing it. I’m sorry, but I’m not the one you want writing the php overrides so that the mollom is weighted differently and the JS help text can be implemented. Sometimes there needs to be a line.

    I’m not beginning to wish I was simply a php developer. For some reason they get paid more yet I feel like there is a lot more on my plate.

  68. Tom:

    I think every front-end developer should know at least one server side language like php, ruby, asp.net, ColdFusion… otherwise you’d just a UI web developer in the best. But i think PHP has to be considered, is quite used and still in great demand. And finally, I would add to the list some framework like Symphony for PHP and Rails for Ruby.

  69. Bodzio:

    Thank you. This gave me some idea of fronend developer set of skills ;)
    P.S. A button at the begining of Responses with target to “Leave a Reply” would be great ^_^

    • Ha. You made me think. I love that people have to earn the right to reply by cruising through the other comments. It helps people get to know the room tone and topics before they walk through the door spewing ideas.

      • Ha… I agree. This is easily the most commented article on my site, so I think it’s good to have the comment form at the bottom, with no extra link to it. Also, I think people leave better comments when they are forced to work hard. :)

  70. Arun:

    Hi Guys…

    It’s v v interesting …..discussion :-)
    I like it…

  71. Hi,

    I started a project: http://www.betterfrontend.com the goal is to standardize what skills are required for front-end developers and also to help educate to bring consistency to the front-end layer.

    Please check it out and it’s an open-source project so feel free to contribute!

  72. Juststoppingby:

    And the Library of Congress just as a side dabble. Surely expecting front end developers to master all these skills is an overabundance of unnecessary wasted effort. If a developer knows all these skills that makes him/her a pretty well rounded developer, front-end and back-end (in LAMP based environments, at least). Now, if a front end developer knows how to use some of these suggestions then, for many jobs, that’s rather acceptable. BTW, am not against people who want to learn it all.

  73. I am really surprised to see that developers should have this kind of skills.Thank you for suggesting us this list.among that some of i am aware and some of i am unknown.I want to be java developers.So I will keep in mind.

  74. How about Google’s AngularJS framework, a bi-directional data flow framework which is extremely useful!

    http://www.angularjs.org

  75. Also shouldn’t your latest comments / replies be at the top? Descending by date? :)

    • This is just standard WordPress commenting, which doesn’t have that type of sorting. By default, WP comments just list the oldest comments first, which I think is the best way.

  76. Kylie:

    For someone trying to teach themselves front-end web development, this is a scary list.

    What would be the ultimate essentials?

    • I’ve been doing web development for 13 years and it’s a scary list for me too! So you’re not alone.

      The essentials are HTML, CSS, and JavaScript, then after that just learn whatever you need to solve whatever problem you’re trying to tackle.

  77. Alan Mix:

    updating your list anytime soon? as in recording priority of skills to suit mobile web dev?

  78. What about NodeJS? or Jade / Express framework? is it really necessary for a front-end developer? I think it’s more like server-related language.

  79. Mohinder Singh:

    Sir, If I will keep these all things in my list to learn, then I don’t think I would be able to cover new technologies coming everyday… and one day my employer will ask me to leave, don’t you think so ???

  80. Embarcadero Delphi

  81. Todd Moore:

    Perhaps a list of CORE skills, Secondary Skills, Tertiary, and Peripheral Skills would be helpful.

    And of course some sort of notation next to the skill?

    That’s a lot of extra stuff, I know, but to the person who is looking at developing a self-study plan, it would be huge!

    Thanks,

    Todd

  82. This post is a nightmare for anyone that is starting to learn Front-End Web Development. While it’s good to have a list to which you can refer to, it would take decades to learn all of these things. Thus, a newcomer might begin to freak out when they see this list, because they won’t know where to start or anything.

    Why not make a post with some sort of direction you should take before you learn some of the frameworks and concepts you have listed above?

  83. Jessica:

    Nice post, little bit scary list for a beginner!
    If you have second, event third look at the list you will realise that 90% of the skills listed are MUST for front end developer!
    In other hand I am wondering if a front end web developer can work with Back-end Templating languages, MySQL, Object-oriented Programming (OOP) etc… what a back end developer will do…. updating Apache and making coffee all day long in the office?

  84. very useful tool for front end developer http://codebeautify.org/

  85. Michele:

    I’m a new Technical Resource Manager and I’d be interested in seeing this list under high level categories — language, frameworks, tools, etc. Would you be able to provide me with that?

  86. PHP (also other Back End Programming) and MySQL (other database work) is NOT Front End Development. Companies need to stop being cheap and forcing too much on a developer when they already have a lot to master in. Having an understanding is fine (e.g. PHP Website UI Templating), but you can’t be like since you do this, do that, and that more in the back end. The more you push Back End Development on a Front End Developer, the Front End Developer becomes less of a specialist. Period. Because of this, the job market is confused and scaring people when they get jobs with task they weren’t prepared for or even wanting to do in the first place.

    Keep Front End client side and Back End server side. If you don’t know the difference, look them up.

  87. A also think unit testing is used quite often by any developer, including Javascript one. I believe that questions about concept and frameworks should be listed in the skills rundown.

  88. John C Ware:

    I think you need some categorization instead of a laundry list. e.g.,

    OOP, Unit Testing, and Functional Programming, and maybe Accessibility should go under “Techniques” category.

    HTML, CSS variants, plus debuggers in all browsers, should go under “Core Browser Technologies”

    Javascript would be its own category, with various frameworks under-neath it.

    Dev tools would be a category, with Editors, Source Control, etc.

    Then, every item in the list should have a link to its “primary” source of information, so people would have a starting point for investigation and reading.

    Thanks, this is great. I’ve been working on something similar which is how I came upon this.

    –John

    • I agree. I just haven’t had time to revisit this extensively. In fact, I was planning to create a full info-app (a separate website) that categorized everything and linked to sources… But we’ll see how it goes. :)

  89. manav:

    Nice one !, what about Jquery mobile , other UI library

  90. One more for your list: Montage Studio HTML5 Authoring + MontageJS HTML5 Framework. The Montage Studio Authoring tool is developed by the founders of MontageJS for use with the open-source MontageJS framework. Beta sign up and info is at http://www.montagestudio.com

Leave a Reply

Comment Rules: Please use a real name or alias. Keywords are not allowed in the "name" field. If you use keywords, your comment will be deleted, or your name will be replaced with the alias from your email address. No foul language, please. Thank you for cooperating.

Instructions for code snippets: Wrap inline code in <code> tags; wrap blocks of code in <pre> and <code> tags. When you want your HTML to display on the page in a code snippet inside of <code> tags, make sure you use &lt; and &gt; instead of < and >, otherwise your code will be eaten by pink unicorns.