Web development covers multiple disciplines, but the main distinction we can make is what divides it between Front-End and Back-End.
Quickly we can define the “front” as everything that runs in the browser, while the “back” is what works on the server.
The front, in turn, could be divided between Web / UI / UX designers, who are primarily responsible for the design and behavior of user interfaces, and Web developers whose job is basically to provide interactivity to the interface and make communications with servers.
The latter, which seems very simple, is becoming increasingly complicated because current Web applications have long since behaved like any other traditional desktop or mobile application: with their immediacy and capabilities. Therefore, currently being a Front-End Web developer means mastering a lot of concepts, APIs, libraries and tools.
Next, I will comment on what I think are the technologies, languages, and tools that you must master if you want to be a good professional Front-End Web developer. In these times, it has not been enough for years to know HTML and CSS.
Fundamental and indispensable subjects
The first thing you should learn is HTML and CSS.
HTML is a markup language (that is, no “real” programming at the moment) that deals exclusively with the contents of Web pages and applications, as well as its distribution. Although many people believe otherwise, HTML does not determine at all what the user interface (or web page) we are going to look like. That is what CSS handles through its selectors and properties. This clear separation between content/distribution and appearance is a winning team as it allows us to manage them separately and, to some extent, be independent.
The problem with HTML and CSS is that, although the basics are very simple to learn, they have some complex concepts (and especially many details) that many developers overlook. And that is when problems and interfaces come that you are not able to master. Besides, some techniques can be complex as Responsive Web Design or the layout with Flexbox and Grid, the latest technologies incorporated into browsers for this purpose.
Of course, knowing some CSS framework like (and above all) Bootstrap is almost inescapable, because you’re going to end up using it for sure.
Although you are not going to be a Web designer (and almost no Web programmer is: we are fatal the aesthetic part) it is essential to master HTML and CSS. Without excuses. Even if you are a back-end developer: you will have to deal with them in many cases anyway.
The other indispensable among the core subjects are, of course, the JavaScript programming language ( not to be confused with Java! ). I have already counted the 5 main reasons why every programmer should learn JavaScript, but if you are a Web programmer then it is indispensable. JavaScript is what will allow you to provide applications with “intelligence” and create from the simple validation of a form to a real-time communications system over the Internet. It is that powerful. Today it is even compiled so it has nothing to quickly envy most of the languages, and you can use it everywhere (yes, also on the server).
Again, JavaScript is a tool of deceptive simplicity: the basics are learned right away, but it has a multitude of important details and concepts that, if you do not study clearly, will be stoned with which you will always stumble along the way. So, learning it by ear is a bad idea.
Finally, the fourth leg of this chair on which we will rely is the famous jQuery library, used by more than 70% of the world’s websites. This below is no more JavaScript, but this “library” isolates us from many of the difficulties of using the “bareback” language to do certain things in the user interface. Instead of constantly reinventing the wheel and sticking with the small differences between browsers, we use jQuery and we are happier and more productive.
A fifth fundamental issue is that we must thoroughly master the tools for the developer of the main browsers, fundamentally those of Google Chrome and those of Mozilla Firefox. They are essential to be able to debug our code, optimize the interface, measure performance … They are complex tools if you want to deepen them, and master them is something very important.
Summary of “indispensable”
- HTML
- CSS, RWD, Flexbox, Grid
- JavaScript
- jQuery
- Browser Developer Tools
Matters more than recommended
Ok, with the above we have covered the minimum. With this, it was almost enough until not many years ago and in reality, we will be able to tackle work on small projects and for many SMEs. But if we want to be good professionals in the sector, we cannot stay there. Today does not arrive.
JavaScript has its “big brother” in ECMAScript, which is what the standard that regulates its capabilities is called. Actually what most people call “JavaScript” is what is formally called ECMAScript 5. But a new version of this language is released every year since 2015, so in reality, at the time of writing this, We are going for version 10 of ECMAScript. The browsers implement everything very fast so today it is necessary to be up to date as well.
Along with HTML5, many very powerful APIs were launched in browsers, which increasingly narrowed the gap between native applications and Web applications. Thanks to the HTML5 APIs you can do almost everything: manage files, work offline, send notifications, make real-time communications, do low-level graphics processing to manipulate images and video, position users, create animations and transitions of states, create expensive tasks in the background … The possibilities are enormous and it is convenient to know them and master many of them.
Another important issue today is to know well some of the most relevant JavaScript frameworks, namely: Angular, Vue.js or React. The last one, maintained by Facebook, is the most limited because it deals only with the user interface, but it is still widely used. Angular, from Google, is surely the most demanding in companies because it leaves you with few decisions to make in terms of architecture and allows you to create quality applications being consistent throughout the entire team of programmers. Vue.js is growing unstoppably and developers love it. At least one of them is recommended to learn it.
Finally, in this section, there are many specialized tools that we should also know. The complexity of the current developments in Front-End makes it necessary to manage dependencies and automate tasks, for which we must use some tools. The indispensable ones are:
- Visual Studio Code: the editor that is slowly becoming almost “the” editor. What virtually everyone uses to write code quickly and efficiently.
- Git: for source code control. Current development is not conceived without this.
- npm / yarn: for dependency management and task automation.
- Webpack: to manage and use dependencies (otherwise), automate certain tasks (otherwise too), and to be able to create optimized applications.
Summary of recommended
- ECMAScript
- HTML5 APIs
- A framework: Angular, Vue.js and/or React
- Fundamental Tools: VS Code, Git, npm / yarn and Webpack
For note
If we also want to excel and be a professional that attracts attention, there are many things we can learn to achieve it. Below I list, without going into much detail, those that I think maybe of most interest:
- TypeScript: is a language above JavaScript that allows you to develop faster and with fewer errors. Increasingly popular and adopted by companies.
- PWAs: to create mobile web applications that behave as if they were native. The future trend in this area.
- Accessibility: for people with disabilities. It is something that should be done in all projects, but it is mandatory in all those that have to do with the administration, for example.
- GraphQL: a new standard for APIs that allows greater flexibility from the client side when it comes to obtaining data, without having to use several REST services for the same.
- Algorithms and data structures: not to reinvent the wheel at every step and better understand the frameworks.
- Functional programming: JavaScript is a multiparadigm language. One of them is the functional paradigm that is increasingly used. Learning it with language is always an advantage.
- Jekyll and static site generators: the most current trend in website creation.
In summary
At present, the knowledge necessary to devote to Web development is more demanding than it used to be a few years ago, and let’s not say a decade ago. The minimums are higher, the technologies more complicated and there are more “moving parts” to which you should be aware. In return, what we have are better professionals, more prepared and with more quality in employment. It requires more time and more study, but nothing that a person with desire and vocation cannot learn in a few months of well-focused study.
The technologies and tools that I mention are those that I consider you should know at least, is a highly recommended way and if you want to stand out. As you can see, beyond the fashion framework or the last “bright thing” that everyone goes after, the most important thing is to master the fundamentals well, going beyond learning “recipes.” If you master that, the changes, the news, and the fashions will not affect you, because you will always be able to catch up on them when you need them.
