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
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.
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
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…
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 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.
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:
- Get a machine with Linux or Mac OS.
- Get familiar with the console (Bash).
- Learn Git.
- 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.
- Learn the basics of a programming language if you don't know one yet. Good choices are Ruby or Python.
- Learn how to use a REST API. Play with some popular API's, like Twitter's or Facebook's.
And don't forget to put your source online in Github, and deploy your applications in Heroku.
Bonus: watch this presentation on adquiring expertise.
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.
- 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).
- 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.