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.
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”
- CSS, RWD, Flexbox, Grid
- 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.
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.
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
- HTML5 APIs
- A framework: Angular, Vue.js and/or React
- Fundamental Tools: VS Code, Git, npm / yarn and Webpack
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:
- 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.
- Jekyll and static site generators: the most current trend in website creation.
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.