Creating a Website Required multiple disciplines, but the main distinction we can make is the one that divides it between Front-End and Back-End .
We can quickly 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 actually becoming more and more complicated because current Web applications have long had to behave like any other traditional desktop or mobile application: with their immediacy and capabilities. Therefore, being a Front-End Web developer today implies mastering a lot of concepts, APIs, libraries and tools .
Next I am going to 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, for many years it is not enough to know HTML and CSS.
Fundamental and essential subjects
Obviously, the first thing to learn is HTML and CSS .
HTML is a markup language (that is, no “real” programming at the moment) that is exclusively responsible for the content of web pages and applications, as well as their distribution. Although many people believe otherwise, HTML does not determine at all what the user interface (or the web page) that we develop will look like. CSS takes care of that through its selectors and properties. This clear separation between content / layout and appearance is a winning team as it allows us to handle them separately and to some extent be independent.
The problem with HTML and CSS is that, although the basics are very easy to learn, they have some complex concepts (and especially many details) that many developers overlook. And it is when problems and interfaces come that you are not able to master. In addition, there are techniques that can become complex such as Responsive Web Design or layout with Flexbox and Grid, the most recent technologies incorporated into browsers for this purpose.
Of course, knowing a CSS framework such as (and above all) Bootstrap is almost unavoidable, because you are going to end up using them for sure.
Even if you are not going to be a Web designer (and almost no Web programmer is: we are fatal about the aesthetic part), it is essential to master HTML and CSS . Without excuses. Even if you are a back-end developer : after all, you will have to deal with them in many cases as well.
Summary of “essentials”
- CSS, RWD, Flexbox, Grid
- Browser developer tools
More than recommended subjects
Ok, with the above we have the minimum covered. This was almost enough until not many years ago and we will actually be able to tackle work in small projects and for many SMEs. But if we want to be good professionals in the sector, we cannot stop there. Today it does not come.
Along with HTML5, many very powerful APIs were released in browsers, increasingly narrowing the gap between native applications and Web applications. Thanks to the HTML5 APIs you can do almost everything: manage files, work offline, send notifications, carry out real-time communications, do low-level graphic treatment to manipulate images and video, geoposition users, create animations and transitions of states, creating expensive tasks in the background … The possibilities are enormous and many of them should be known and mastered.
Finally, in this section there are a series of specialized tools that we must also know. The complexity of current developments in Front-End make it necessary to manage dependencies and automate tasks, for which we must use some tools. The essential ones are:
- Visual Studio Code : the editor that is gradually becoming almost “the” editor. What practically everyone uses to write code quickly and efficiently.
- Git , for source code control. The current development cannot be conceived without this.
- npm / yarn : for dependency management and task automation.
- Webpack : to manage and use dependencies (in another way), automate certain tasks (in another way too), and to be able to create optimized applications.
Summary of recommendable
- HTML5 APIs
- A framework : Angular, Vue.js and / or React
- Fundamental tools : VS Code, Git, npm / yarn, and Webpack
If we also want to stand out and be a professional that attracts attention, there are many things we can learn to achieve this. Below I list, without going into much detail, those that I think may be of most interest:
- PWAs : to create web applications for the mobile 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 administration, for example.
- GraphQL : a new standard for APIs that allows greater flexibility from the client side when 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 to better understand frameworks .
- Jekyll and static site generators – the hottest trend in website building.
Today, the skills required to engage in web development are more demanding than it used to be a few years ago, let alone a decade ago. The lows are higher, the technologies more complicated, and there are more “moving parts” to watch out for. In exchange for this, what we have are better professionals, more prepared and with a higher quality of employment. It requires more time and more study, but nothing that a person with desire and vocation cannot learn in a few months of focused study.
The technologies and tools that I mention are the ones that I consider that you should know at least, in a highly recommended way and if you want to stand out. As you can see, beyond the fashionable framework