It is such an exciting time for web developers: new languages, technologies, tools and frameworks appear every day and it’s so easy to get lost in the noise! Based on my experience as a web developer I have compiled a list of technologies and tools you need to learn and use to become a successful front end engineer in 2017.

Basic Front End Development

1. HTML/CSS

Start with learning HTML and CSS first. These are the building blocks of the web. It’s a core of any web site. Even when you build the most advanced web applications using the most modern technologies they will appear in the browser as blocks of HTML and CSS. HTML (HyperText Markup Language) – is a markup language that represents data in the browser. CSS (Cascading Style Sheets) – is a style sheet language used to set the visual style of web page. To start your career as a web developer you have to know both of these. It’s going to be a core of any web page or web application you’ll ever create.

2. Javascript Fundamentals

Once you learn HTML and CSS you should learn Basic Java Script. It helps make your web page dynamic and you will be able to change HTML and CSS on the page in real time. Javascript is a programming language oriented for web. Alongside HTML and CSS, JavaScript is one of the three core web technologies. And you have to know JavaScript, because there is no other choice for Front End. If you are a Back End developer you can choose from many languages such as PHP, C#, Java e.t.c., but for Front End JavaScript is the only choice.

Javascript has been standardized in the ECMAScript language specification. There are 7 editions of ECMAScript (ES). The most popular are ES5 and ES6 (also known as ES2015). At this point of time I would suggest to learn ES5 first, as it’s still commonly used in majority of browsers and a lot of books and learning materials are oriented to ES5. Once you learn ES5 it will be easy to understand and appreciate ES6.

3. jQuery (optional)

jQuery is a library for DOM manipulation. Couple years ago I would say you have to learn it. Now it’s optional. jQuery is still around. Many companies still use it. But it is becoming less and less popular. It is a good skill to have and knowing it definitely not going to hurt you. But you do not really have to know jQuery in 2017. I would say nowadays it’s more a skill for web designers, not web developers.

4. Client – Server Communication

As you already know in web there are two parts talking with each other: Back End (or Server Side) and Front End (or Client Side). Front is responsible for providing a user-friendly interface. Back usually handles business logic and data storage. You should know how these two communicate with each other, how to get data from the server to be able to display it on your page, how to put a new data into the database, how to update or delete existing data e.t.c. Basically you should be familiar with technologies like AJAX, JSON, RESTful API.

Basic Tools

1. Source Code Editor

A source code editor is a text editor program designed specifically for editing source code of computer programs by programmers. It may be a standalone application or it may be built into an integrated development environment (IDE) or a web browser. Source code editors are the most fundamental programming tool, as the fundamental job of programmers is to write and edit source code.

The most popular Source code editors for Web Developers are Sublime Text, Atom, Visual Code, Brackets. All of them are different: it’s a personal preference which to choose. Personally, I would recommend Visual Code. I have been using it for one year now and it works perfectly for me. Before I used Sublime Text and it works fine too. Atom is the newest one: you should definitely take a look at it.

2. Basic Terminal Usage

Terminal can be frustrating at first, because you need to type commands in a terminal as a real hacker, instead of clicking buttons or menus. But as a web developer you are going to use it a lot.

3. Remote Administration Tools – FTP / SSH

SSH (Secure Shell) is a protocol that allows users to remotely administrate web server using command line. FTP (File Transfer Protocol) is a protocol used to transfer computer files between a client and server. It is the easiest way to copy HTML/CSS/JS files to the server where your website is hosted.

4. Git & Github

Git is a version control system (VCS) for tracking changes in computer files and coordinating work on those files among multiple people. Professional developers use it to keep their code in a repository that allows basically backup the code and save history of changes in the code. It allows you to go back to any point in history to review changes in your code, fix merge conflicts from other developers. You can create branches so that you don’t affect the main repository and then you can merge it with the master branch without any interruption for other people working on the same code.

Once you learn all of these technologies you can call yourself a Junior Front End developer. Now you can build simple but professional websites and UI for web applications. You should be able to find a job as a Front End developer or a freelancer. After having some experience you can learn advanced front end technologies to level up your skills.

Advanced Front End Development

1. ES6/ES7

ES stands for ECMAScript language specification. As I said before, ES5 – is a JavaScript standard that is still commonly used and it’s a good starting point for learning JavaScript. Once you learned ES5, it will be easier to learn ES6 (also known as ES2015) and ES7 (also known as ES2016). There are not so many distinctions: it is the same JavaScript but with syntax sugar in it. But these syntax differences make a huge impact on the way you code. The code becomes cleaner, more object oriented and modular. It brings JavaScript to the next level, closer to other classic object oriented programming languages like C# or Java. I highly recommend using ES6/ES7 for new projects. Also you should be able to use Babble as you still want to compile your ES6/ES7 code to ES5.

2. CSS Precompilers

To master your CSS skills you need to learn CSS Precompilers such as SASS, LESS, Stylus. These are dynamic stylesheet languages that can be compiled into classic CSS and run on a web page. They allow writing clean CSS in a programming construct instead of static rules. All of them have the following mechanisms: variables, nesting, mixins and selector inheritance. Some of them have “if” statements, loops, functions and operators.

3. Front End Build Tools

Task Runners such as Gulp and Grunt. These are tools used to automatically perform frequently used tasks such as minification, compilation, unit testing, etc. Task runners use a command-line interface to run custom tasks defined in a config file.

Package Managers. Among them are Bower, npm, Yarn. Bower is becoming less and less popular but it’s still around. Npm is a default package manager for Node.js environment. Currently, it’s the most popular package manager for Web. Yarn has been released in October 2016 and is made by Facebook. It’s still new for the community but its popularity is growing.

Module Bundlers. The most popular module bundler nowadays is the open-source JavaScript module Webpack. There are two more popular module bundlers: require.js and Browserify. Compared to the last two, Webpack has more features and flexibility. This makes it a great tool for developers.

4. MV* Javascript Frameworks

Nowadays I can’t imaging building a professional web application  without using MV* Frameworks on the Front. MV* stands for different kind of software design patterns such as MVC (Model-View-Controller), MVP (Model-View-Presenter), MVVM (Model-View-ViewModel), MVCVM (Model-View-Controller-ViewModel).

There are tons of JavaScript frameworks that implement these patterns. Among them are React.js, Polymer, Ember.js, Knockout.js, Angular.js, Vue.js e.t.c. The number of these kind of solutions continues to grow.

There is a great website, called ToDoMVC, that provides the same To Do List application implemented using MV* concept in most popular JavaScript MV* framework of today. There you can take a look at source code, compare different approaches of solving the same task. Understanding these different approaches will make it easier to pick one for your project.

Personally, I would recommend React.js. It’s the most popular MV* Framework nowadays which offers a great implementation of modular architecture, using web components. At the same time it’s very simple, flexible and efficient. React.js is supported by a huge community that grows rapidly.

5. Data Stores

In bigger applications that work with dynamic data, alongside MV* framework you will need data storage to keep, access and update your data on the Client Side. Also you need a mechanism to keep all your data in sync across all the modules and components. There are many patterns of Data Stores or Client Side data manipulation that can help to solve this issue:

Mobx uses observable pattern and is employed for small applications.

Flux is used for big and complex applications. You can create different stores to keep different kind of data in them.

Redux is great for an application that has grown and has complex data interaction. It creates one giant store, making it easy to access data across all the applications.

Relay is used for really huge applications with a long life cycle.

Many of them created specifically for React.js, but you can try using these patterns with other frameworks. For example, I have had experience using Flux pattern with knockout.js and it was working perfectly fine. But again, it was designed specifically for React. That is one more reason to steak with React.js

6. Unit Testing

Unit testing is used to test individual units of source code and determine whether they are fit for use. For testing Front End code there are many libraries to choose from: Mocha, Jasmine, Karma and enzyme. The last one is made specifically for testing React applications.