| Tags: community front-end

What should I learn to be a front-end developer? is a question I get asked quite a lot of times, so I thought it would be a good idea to share my thoughts with everybody.

This is, of course, a compilation of recommendations based on my own experience. Other people will probably recommend different things (specially about the part of Don't make JavaScript your first programming language), but I truly think that this is a clear, solid path to become a good front-end developer. It surely isn't the only one, of course, so ask for advice to other developers if you don't feel that this approach will work for you.

A front-end developer deals with the client side of a web application / site, so all your code will be run inside a browser. The languages you will use in your day-to-day are:

HTML and CSS

Learning HTML and CSS is quite easy and you can get the basics in a few weeks. However, if you want to differentiate yourself from all the people writing poor front-end1, you need to aim for very good HTML and CSS code. You need to produce code that is semantic, clean, optimised and easy-to-maintain.

I didn't learn HTML and CSS from books, and thus I cannot really recommend one (except my own manual in Spanish). However, I have never gone wrong with books from O'Reilly and Pragmatic Programmers, so I'd say that any beginner book from them should get you up and running. As I said, HTML and CSS are easy languages to pick-up and learning them shouldn't take too long. Once you have the basics in place, then use the W3C standard specs for reference, and blogs like HTML5 Doctor and A List Apart for enlightment.

After learning CSS, take a look at CSS compilers like Sass. Then you won't want to write raw CSS again, and switching to Sass shouldn't take you more than a few days.

JavaScript

This is your real challenge. A lot of people can do HTML and CSS, but a front-end developer is the specialist in coding JavaScript, so you need to get solid skills in this language.

If you already know how to code, then pick up a beginner book from O'Reilly or Pragmatic Programmers, and then read JavaScript: The Good Parts.

If you are not a programmer yet, I don't advise jumping to JavaScript right away.

Here's why: JavaScript is a very particular language, with lots of dark pits of horror. And it is different to any other (popular) language.

If this is your case, what I'd recommend is to learn a sane language, and after that learn JavaScript. Choose a language that is Object-Oriented and has some functional programming. If you opt for Ruby or Python, then you can even code some back-end in your own projects, or help the back-end developers at your job. I recommend Learn Code the Hard Way for this (they have versions for both Ruby and Python).

Once you switch to learn JavaScript, keep in mind that JavaScript is not an Object-Oriented language, but follows a different paradigm: Prototype-Oriented programming. This is not good nor bad, just different.

Last, make sure you know how the HTTP protocol works. You will need to interact with a back-end, and that means sending and receiving requests on the network. Once you know HTTP, it will make debugging your application easier, and you will have a solid ground to understand security issues like CORS and CSRF. This is also a good time to investigate what a REST API is.

Testing and libraries

If you're peeking at front-end developer job postings, you will probably see that they ask for jQuery knowledge. jQuery is a library that makes developing cross-browser JavaScript much more easier. However, this comes with a price: performance. If you are doing desktop webs this is not usually a big problem, but it can be a huge deal when developing for mobile.

Please, do learn how things are done without jQuery, and then use this library only when you must, and when it makes sense.

Other popular libraries are MVC frameworks, like Backbone and Angular. I would pick one of them and do a personal project with a single-page application. The principles behind them are similar (they follow the Model-View-Controller pattern), although the approach is different (Backbone is more minimalistic).

About testing, the most popular frameworks for unit tests are Mocha and Jasmine (learn at least one of them). And then you have Selenium, that is used to simulate the interaction of a user with your web application. Although creating Selenium tests is more the job of a QA tester, you need to learn at least how to setup Selenium in your project and get a basic knowledge of how it works (there will be times when you don't have this QA tester).

Editors and IDE's

About editing code, you can opt for using an IDE or for just a text editor. I don't like IDE's, and you certainly don't need them for web development. But, whatever you choose, make sure that you learn it properly: that is, know how to use key shortcuts, snippets and macros (and how to create your own).

Regarding text editors, which one to choose? I have used TextMate since uni, but it has become obsolete, so I switch to a different one. And this is the thing: if you invest time in being efficient with a tool (and as a programmer, your text editor is your best friend), you don't want your editor to become obsolete. That's why I started to learn Vim, which is decades old and still state-of-the-art software. Nowadays I use Vim and Sublime (with Vim key-bindings).

The problem with Vim is that the learning curve is more of a learning pit. So you can probably make learning Vim as a side project while you are learning other stuff. If this is the case, opt for a modern text editor, like Sublime, and learn a basic console-based editor (for when you need to log into a server to change some config files…), like nano

And this leads to our next tool…

The console

This is a transversal skill, but you need to learn how to use a console. First, because a lot of (web) development tools are console-based: Sass, Bower, Grunt, Django, Rails, Git, etc.

Second, because you can create shell scripts to automate tasks. And back-end developers and devOP's will probably create scripts (or Makefiles, Rakefiles, etc.) to create tasks you will need to use.

Third, because eventually you will need to log into a server and you won't have a graphic environment there.

The de facto standard in web development is a UNIX Operating System. For you this means you will have to install either Linux or Mac OS in your computer. The most popular shell (console) in UNIX is Bash, so learn the basics of it.

Prepare yourself mentally that when doing front-end development, you will only leave the console to load a browser.

Version Control

Version Control Software is something that should be taugh in engineering schools before writing a single line of code. They are tools to develop software collaboratively, and to be able to track (and revert) code changes.

It is a must to use one, even when you are doing projects on your own2. Nowadays, Git is the most popular one thanks to Github. Sign-up in Github and learn how to use Git. You can have unlimited free, public repositories, which is an excellent way to promote yourself and your projects.

Back-end and deployment

Although it is not a must, it's always good to have a basic knowledge of back-end development and how to deploy an application. If you learn this, you will be able to create projects on your own, without the need of a fellow developer. This means you can create your own stuff, even if you don't convince someone else to jump along. This is very useful for personal, or small one-weekend projects.

The easiest thing here is to learn a simple web framework for a language you already know. I'm fond of Sinatra for Ruby and Flask for Python. Get familiar with what a template is and how to use at least one template engine (for instance, ERB for Ruby applications or Jinja for Python).

About deployment, it is really easy to deploy applications in Heroku, and they have a basic free tier, perfect for development or for showcasing demos.

How to learn all of this

You can read tons of books and follow loads of tutorials, but the only way to truly learn something is to create stuff.

Don't wait until you have learnt everthing to create your own projects, because developing them will boost your own learning. Don't wait until you have learnt everything to get involved in real projects. You will learn faster if you work in real-life projects. If you don't fancy an internship, then getting involved in a open-source project is a good choice.

Why? First of all, because you don't need to know everything about JavaScript or HTML to start to write code. If you learn stuff along a project, you will make sure that you learn the most useful things first.

Once you have something, try to get a code review from a fellow developer. You can do this by asking friends, or by going to meet-up's and bringing your code with you.

If I had to learn all of this from scratch, I would follow this order:

  1. Get a machine with Linux or Mac OS.
  2. Get familiar with the console (Bash).
  3. Learn Git.
  4. Learn HTML and CSS. Make a point to learn how to properly use the editor of your choice in this step. Start to create static websites with your new skills.
  5. Learn the basics of a programming language if you don't know one yet. Good choices are Ruby or Python.
  6. Learn some JavaScript. Incorporate JavaScript to your HTML and CSS projects.
  7. Learn how to use a REST API. Play with some popular API's, like Twitter's or Facebook's.
  8. Learn a JavaScript MVC framework. Create a web application with it. You might need to create a simple (or even fake) REST API to do this. Here's your chance to learn a bit of Sinatra or Flask.
  9. Find out how to integrate HTML, CSS and JavaScript code into popular web frameworks like Rails or Django.

And don't forget to put your source online in Github, and deploy your applications in Heroku.

Bonus: watch this presentation on adquiring expertise.

In summary

Take it easy, don't try to learn everything at once and don't feel overwhelmed. Sleep properly.

Learn what you need while you are working in your own stuff, not the omnipresent To-Do list application or blog. This is how you keep your motivation up.

Get involved in the development community. Read other people's code. Make other people read your code.

Don't bury your projects in the depths of your hard drive. Publish them online and open-source your code.

Keep on rocking.

  1. This happens often, when there is not a front-end developer in the project. They make the back-ender or the designer write HTML and CSS and they might not care, or like it, or know how to do it properly. I don't mean that designers and back-enders create poor HTML, I mean that if they don't have experience as front-end developers, they might produce substandard HTML and CSS. I know plenty of people who are excellent designers and front-end developers, and some people who love tinkering with the whole stack of a web application (like me).
  2. In programming terms, your future You (that is, You one week in the future) counts as a different person, so make sure you write proper comments, commit messages and clean code.