As a web professional, I’m constantly trying to learn new skills for front-end developers, along with various technologies related to the field in order to add 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 skills for front-end developers 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 important stuff at or near the top. Also, there’s a lot of cross-over within the list and the list.
- HTML (XHTML, HTML4, HTML5)
- CSS (2.1, CSS3, etc.)
- Popular Frameworks (Bootstrap, HTML5 Boilerplate, Tailwind CSS etc.)
- OOCSS / BEM / SMACSS (Modular coding methodologies)
- Asynchronous programming (Ajax, Fetch API)
- Modern CSS Layouts (Flexbox, CSS Grid, etc.)
- CSS Frameworks / Resets (Meyer, Normalize, etc.)
- Progressive Enhancement / Graceful Degradation
- DOM Scripting (DOM APIs, Web APIs, etc.)
- UI Libraries (React, Vue, Svelte, etc.)
- HTML and CSS Specifications (W3C / WHATWG)
- Accessibility / WAI-ARIA
- Progressive Web Apps (PWAs)
- Offline Web Apps, Service Workers, etc.
- UX / Usability
- Website Speed / Performance
- Developer/Debugging Tools (Chrome Dev Tools, Firefox Dev Tools, etc.)
- Responsive Web Design
- Mobile Web Development
- Cross-Browser / Cross-Platform Development
- Functional Programming
- ECMAScript 6, ES.Next, etc.
- Module/Dependency loaders (Webpack, Browserify, etc.)
- Linters and code quality tools (JSLint, JSHint, etc.)
- Cross-Browser Bugs and Inconsistencies (primarily older versions of IE, Safari, etc.)
- CSS Preprocessors (Sass, Less, Stylus, etc.)
- CSS Post-processors (PostCSS, etc.)
- Preprocessor GUI software (CodeKit, Prepros, Koala, etc.)
- Version Control (Git / GitHub / GitLab / CVS / Subversion)
- HTML5 APIs (Canvas, Geolocation, Video, etc.)
- Microdata / Microformats
- Feature detection
- Command Line / Terminal / CLI Tools
- Object-oriented Programming (OOP)
- Back-end languages/technologies (Node.js, PHP, Ruby, .NET, etc.)
- Automation and Task Runners (Yeoman, Grunt, Gulp, Make, etc.)
- Package Managers (npm, Bower, etc.)
- MVC Frameworks (Angular, Backbone, etc.)
- Web Components, Shadow DOM, Polymer
- Databases/DB languages (SQL, MySQL, NoSQL, MongoDB, etc.)
- HTML5/CSS3 Polyfills
- CMSs (WordPress, Ghost, Drupal, etc.)
- Software stacks (LAMP, MEAN, etc.)
- Data Formats (JSON, JSONP, XML)
- Internationalization / Localization
- Regular Expressions
- Graphics and Image Editing Tools (Photoshop, Sketch, etc.)
- Web Fonts
Other Skills for Front-end Developers?
The list is being continuously updated and it’s extremely opinionated. I’m happy to update it and refine it based on any feedback. Please offer your suggestions on how it could be improved and/or expanded and I’ll make any necessary updates.
Scripting: SSI/XSSI, Sinatra/Padrino.
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.
SSI/XSSI, Sinatra/Padrino? I don’t think so ;)
I feel this is way too much. If you know all of this, you might as well apply for any web development related position.
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.
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.
facebook IS made with PHP.
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.
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.
Exactly right .. +1
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.
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]” %]
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?
You are wrong to some extent. Coz, front end and back end are decoupled technologies. It is best practice to decouple these two technologies ad much as possible. However, in a real life work environment if you know some back end workings its a great plus.
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
totally agree, although I have played around with most of the said frameworks, I only use several of them on a daily basis
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.
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.
Do you not think employers expect this because their are list’s like this online?
/\ /\ /\ /\ /\ /\ /\ @Ben
Awesome. Awesome. Awesome. This is the smartest, most exquisite, delicious thing I’ve read this week.
+ common sense ;-)
I added SVG and Canvas to the list. I don’t think XML needs to be listed.
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”).
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.
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.
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.
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.
hello good post, I would like to know which are the skills for back end developer
What about ASP.NET?
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.
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)
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.
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.
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.
You won’t if you say you won’t. [/friendly-nudge]
Very short list of skills :)
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.
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!
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
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.
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.
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).
+ Django ?
I wish every frontend developer at least knew the Django templating language.
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. :-)
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.
Was a bit confused about that list, but – you’re right – pushed by emotions, Sorry for that.
No problem, we’ve all done that at times. Thanks for your feedback.
A little bit of programming (in general),
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.
Typography / Font-Services (Typekit, Google, etc).
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.
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.
No flash or as3 / as2? Come on I think that’s far more important for a front end dev than ruby on rails.
Please tell me this was a joke.
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.
I think semantics are more appropriate than SEO.
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)
I would add cms. At least some knowledge about how they work.
we’ve got another dispute – XSLT?
I think you would be better with developers that don’t have experience in XSLT.
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.
Can’t understand why Functional Programming is in this list ?
I am not expert on JS, but as already commented you can use functional programming concepts like anonymous functions, function as value or pass function as parameter … for more details you can check :
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.
These can be added
CMS Theme Development (WordPress, Joomla, Drupal Etc.)
On Page SEO
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
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.
Ruby on Rails
Definitely regular expressions.
I added regular expressions, thanks.
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.
I wish I had more time to learn new things but I’m working on that. Good article, Louis. Thanks!
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.
When it comes to bigger clients I’m hunted by several Java techniques. Therefore I would add JSP, JSTL and JSF to the list.
Oh man!… your frustrated me with this list. May be, I will get inspired tomorrow but not today at least.
Don’t worry! I frustrated myself with it too! :)
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
“Нужен мне работник: повар, конюх и плотник” — A. S. Pushkin, 1831.
“I need an employee: a cook, a carpenter and groom.”
To me PHP has not much to do with front-end, this is back-end technology
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
If you’re not using PHP includes to avoid repeating your HTML, you should check them out. Great time saver.
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/
I agree. I’m going to add “Basic SEO” as a skill. I hope that’s a good compromise.
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.
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?
+1. In the end, communication is the ultimate purpose of the web and as technology has advanced, communication has taken a hit. The need, and thus focus, is on the tools and less on the content. I would expect a good front-end developer to be knowledgeable in grammar, typography, design concepts. Whether a FE Dev is responsible for these or not, his/her clients and customers are and the developer needs to fill these needs.
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 :)
I think you should also include “ability to see what’s inside that photoshop group named group 238 copy 8”
And good list. Agree with the compromise amendments, too.
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.
ie6? Only if you are in China.
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”:
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. :)
Louis, Thank you for posting this list. I find it, and this discussion, very informative. I’ve been a proofreader, typesetter, webmaster and I’m now trying to find out what a front-end developer is.
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.
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.
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 appreciate the post… it’s a bold topic to write about, but keep the posts coming :-)
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.
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.
You can add TWIG (http://twig.sensiolabs.org/) if you want to be complete
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”.
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!
i really love this list..just now, it sets a definite path for me.
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.
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.
I think firebug needs to be way higher up on that list ;)
True. I moved it up a bit. :)
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 =)
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.
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.
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.
Thanks for the post… It gives a new way…
I get the joke, unlike most of the commenters. Many job descriptions include an even longer list of technologies and buzzwords.
How about unit testing. As web apps complexity grows unit testing (with e.g. jasmine.js) is a very useful skill to have
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.
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…
If I had to make a standard list, I’d say the basic requirements would be these:
Some understanding of design-photoshop etc.
CSS(3)..let’s face it, the web is moving this way..
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.
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.
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.
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.
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.
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. :)
It’s v v interesting …..discussion :-)
I like it…
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!
Looks good, Daniel. I’m going to take a closer look when I get a chance. Thanks.
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.
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.
How about Google’s AngularJS framework, a bi-directional data flow framework which is extremely useful!
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.
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.
updating your list anytime soon? as in recording priority of skills to suit mobile web dev?
Yeah, I should update this, but it wouldn’t change a whole lot. Skills specific to mobile could be a list just as long on its own nowadays.
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.
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 ???
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!
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?
I’ve posted many things for beginners. For example:
This post was more of a fun laundry list which has infuriated a few people. :)
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?
very useful tool for front end developer http://codebeautify.org/
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?
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.
I agree..I am confused when I see at the job requirements as to what exactly the employer / recruitment are looking for? Front End or Back End Developer? Or both? Its frustrating.
Unit testing is a good one. I’ve added it to the list. Thanks!
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”
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.
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. :)
Nice one !, what about Jquery mobile , other UI library
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
Someone commented that its necessary to learn the full adobe creative suite – would you consider this a necessity also? I really hope not because based upon my previous experiences of trying to learn photoshop I might as well consider a new career!
Just get good at a few things, this list is totally, imo out to lunch, if you know all this stuff, it would take you at least 10 years to get a firm grasp on everything in the list. Just do what you are doing, once you are good at it move on to something new. Just my 2 cents
Hi, here are some additional suggestions: “sitemap.xml” , “robot.txt”, “TypeScript”, “JSONP”, “Dart”.
I’m not sure about MySql…, why does it need to be MySQL, why not just an SQL language if you were referring to database communications, but nevertheless I believe this is out of the Front-End developer’s scope.
If you disagree then you could list other SQL and NoSQL databases which are commonly used.
Also just a thought, what about PHP engines like TWIG, DWOO, SMARTY to me they are more front-end related skills anyway).
And of course in now days it would be great to familiarise yourself with web components even though they currently lack a support on some browsers, I truly believe they will evolve into must know technology.
Also I see from the comments that those back-end skills made a lot of fuss and I apologize for writing the following but I would like to add my 2 cents ;)
Naturally no one would list the back-end skills as a front-end requirements, for example if you look at some front-end programming tests like these ones:
you will notice that back-end is not mentioned.
But the problem is that nowadays they are frequently listed in front-end job positions as well.
PS. just to add to Jason Featheringham comment regarding the .NET being driven by corporate revenue.
First here is .NET source code (referencesource.microsoft.com) so as you can see it is an open source.
Second here are Web Essentials (vswebessentials.com) in short features which are contained here are contributed by community and if a feature is popular it ends up in framework.
The point is that .NET is certainly not what it used to be so that statement does not hold water any more.
FYI, I made a few updates to the post. Thanks!
Thanks, Dubravko. This is an old post now, but I know it gets some SEO traffic, so the list could definitely use some updating.
I’m still going to leave some backend stuff in there, because I think it’s always valuable for front-end guys to know their way around a DB or PHP or something.
And regarding .NET: I know they recently went open source, but it’s too little too late. Very few people are going to drop Rails or PHP to pick up .NET. It’s just not a realistic solution in today’s market (IMHO).
You’re welcome, I must admit this is the most comprehensive list I found and I really like it (everything nicely listed in one place :)), it is a nice bookmark to have.
Regarding the .NET, “too little too late”, very nicely said I couldn’t agree more with you, also of course you need to be crazy to move from RoR or PHP (or in my case from Python), that would be a very silly move. But I just wanted to say that it’s not “an evil technology” as we once thought of it.
Just to add to the PHP matter which comes up in almost every other reply :
Would someone like to take a stab at breaking down which parts of PHP are most desirable for Front-Enders?
This was before W3schools had their really nice intro PHP5 learning module on their web site.
Similarly, when it comes to Photoshop don’t we really mean Photoshop for Web Design only. You can cut out quite a bit of Photoshop features and still be proficient for web work.
I suppose it depends on what you mean by front end development.
I’ve just spent the last 2 weeks attempting to properly configure a Client site on a shared server only to discover the true front end relates to proper router configuration from the hosting service.
Example: htaccess configuration for my client site doesn’t prevent root attacks against my site from other clients on our shared server.
For the sake of common sense, please name a Hosting service which allows you to configure|restrict your market from the onset of site design.
Let’s assume we want a clean IP location to use for development and only wish to gradually allow access over time to specific segments of the global marketplace. This service doesn’t exist unless we’re IBM, Apple, Google, Cisco, etc.
What good is the front end development without proper router and server configuration?
htaccess examples / why should a client account Need to configure the following on a hosted server?
# Fix missing trailing slashes
# Prevent all post attempts which are not referred from this server site.
# Charset and Language headers.
# Server error messages.
# Prevent folder browsing.
# RewriteCond(s) to block known evil user agents (Bots, etc.).
# IPs which represent known blog spam bots.
# ISPs in Spain (ES), France (FR) and Italy (IT), used by many expatriot Nigerian lottery and 419 scammers (Cableuropa, Ibercom, Ono.com, Telefonica).
# German (DE) ISPs used by hackers and spammers including 1&1internet DE, Deutsche Telekom AG, NetDirekt and Schlund & Partners hacks.
# Yahoo-Korea (provides free email services used by spammers).
# Turkey (TR): web hosts and Turk Telekom customers – scammers, spammers, phishing websites and server script exploiters.
# Deny request based on Request Method.
# Prevent other sites from linking to ‘mysite’.
# Securing directories: Remove the ability to execute scripts.
# Forbid and end process by evil referer.
# Prevent post attempts from other sites.
# Block the use of illegal or unsafe characters in the HTTP Request.
# Block out use of illegal or unsafe characters in the Referer Variable of the HTTP Request.
# Block out use of illegal or unsafe characters in any cookie associated with the HTTP Request.
# Block out use of illegal characters in URI or use of malformed URI.
# Block out use of empty User Agent Strings.
# Block out use of illegal or unsafe characters in the User Agent variable.
# Measures to block out SQL injection attacks.
# Block out reference to localhost/loopback/127.0.0.1 in the Query String.
# Block out use of illegal or unsafe characters in the Query String variable.
# Block PHP-CGI Vulnerability.
# File injection protection.
# Block MySQL injections, RFI, base64, etc.
# Block suspicious user agents and requests.
# prevent XSS/Cross Site Scripting – Don’t allow any pages to be framed – Defends against CSRF.
# Turn on IE8-IE9 XSS prevention tools.
# Prevent mime based attacks.
WTF, and this is the short list!!!
Whoa… this is definitely one huge list you have here my friend.
Not even sure a lifetime would give you enough time to learn and dominate everything listed here.
Nice article and want to share a tool for JSON lovers http://jsonformatter.org
it seem to be a requirements for full stack developer :))
+1 I am doing research for my skillset and this is definitely the best list I have came across!
I’m just about to add WCAG 2.0 to my list.
I would say this is more like a full stack developer. Maybe some skills are missing like rails framework, nginx etc… Anyway its a good list. Maybe a link to tutorial per skill would be great for the newbies. Also here is a good website with online tools that can come in handy for newbies https://www.codebeautify.net/
Hopefully nobody will publish all these technologies as requirements in single job listing :)
Do you offer Video course on Web Development?
Awesome list! Thank you for keeping it updated.
I would add something related to good understanding of typography concerns (I’m mainly thinking about readability). I think it’s a must to design websites always bearing readability in mind. Unfortunately, I still see too much sites with a lot of tiny and/or light grey text, which becomes a real pain for your eyes.
Very cool! I’d also add about LAMP and MEAN stack. Look – https://www.cleveroad.com/blog/how-to-hire-front-end-developers. Think it`s nice addition
Hello! A very interesting conversation you have managed to build here, so I want to add my opinion. I guess nowadays it is more important to have strong soft-skills when you start to work – building hard-skills while working. Also, it is very helpful to understand the process of hiring, you can read about that here: https://mobilunity.com/blog/hire-dot-net-developer/ – article covers all the main “why”. But as I can say from my experience – without HR skills you won’t be able to become a senior and sometimes even a middle developer.
most of the front-end web developers work with PHP and this is not possible that everyone can be an expert in each skill but for the basic level these skills are very important. thanks for sharing this basic learning good job and keep it up
Excellent article, Thank you for sharing! I would like to add that there is one thing that all front-end developers must have, regardless of the job description or official title, it’s excellent problem-solving skills. Development is all about creative problem-solving, from figuring out how to best implement a design to fixing bugs that crop up, to figuring out how to make your front-end code work with the backend code being implemented.
Someone commented that its necessary to learn the full adobe creative suite – would you consider this a necessity also? I really hope not because based upon my previous experiences of trying to learn photoshop I might as well consider a new career!
A developer, in my opinion, should be knowledgeable about all web development frameworks.