Pillars of frontend development
As before, frontend development is based on three pillars — HTML, CSS and JavaScript, so we’ll start the analysis with them.
HTML
Without understanding the markup, you can’t get any further, because this is the framework of the site. You should learn the basic tags and attributes, understand the anatomy of HTML markup, and be aware of accessibility and SEO basics. Do not forget about HTML5 — the fifth version, which is found in the requirements of every first vacancy. The development of HTML cannot be called fast, so you will have a great advantage if you already know the markup language.
Materials for learning HTML:
HTML Basics
Mark Pilgrim’s book “Immersion in HTML5”
The order of execution of scripts in HTML
Video course “HTML5 for beginners”
CSS
It is also important to learn how to style elements using CSS and do it correctly, for example, reusing styles for identical elements. First, master the block model and content positioning — layout, alignment and centering of elements, as well as their visibility. Read about adaptive and responsive design. Next, go to media queries to take into account the technical parameters of various devices. A good bonus will be the skill of working with CSS Grid and Flexbox. After that, deepen your knowledge by studying architecture and preprocessors.
As for frameworks, Bootstrap used to be very popular, but now many are moving away from it and using TailwindCss. It turns out that you don’t write CSS, but just write classes. It is very convenient to work in React. Also Bulma and MUI.
In general, in addition to this CSS, you still need to learn everything that came out in 2022 — there are some small changes there. And you need to dive into CSS frameworks, because in reality very few people write in CSS anymore, even in SASS they don’t write in CSS anymore.
Because in the frontend it will not be, for example, regular CSS, it will already be SPA, and React goes automatically in the top, then Vue goes.js, AngularJS. And for all of them there is Tailwindcss, MUI and Bootstrap.
The situation with CSS is such that, unfortunately, it is unlikely that you will have to write on it, but you will need to work with these frameworks (Tailwindcss/TailwindUI, Bulma, MUI). They are quite easy to master.
Materials for learning CSS:
CSS Basics
Functional CSS: making it easier to work with styles
About CSS Grid and Flexbox in simple words
Grid Garden and CSS Diner Practice Game
18 CSS tips that will make a developer’s life easier
To get the first practical skills in working with HTML and CSS, you should make up several pages: this can be done both according to the templates from the above articles, and write a completely independent project.
JavaScript
So how do you become a frontend developer without knowing JavaScript in 2022? The functionality of the site falls on the “shoulders” of this language: actions by pressing buttons, filling out forms, listening to events, triggering triggers and much more. Do not neglect the basics and immediately proceed to the study of the “fashionable” framework — learn the language gradually.
So, you will need to master the syntax and basic constructions. Note that JavaScript is a language with weak typing, that is, it performs implicit type conversion automatically. This means that you can write something like 10+”1″ and not get any error. On the contrary, the result will be a string — 101. You can read more about this in a large study called WTF JavaScript.
Well, we will return to the roadmap for frontend development. It is important to master DOM, the interface for working with HTTP requests and Fetch API responses, AJAX and XMLHttpRequest technology, ECMAScript 6+, modular approach and web components. Also run through the listed concepts like strict mode and shadow DOM.
Tools for JavaScript development from scratch
Asynchronous programming
With asynchronous programming, the result of the functions is not available immediately, but after a while. So, when an asynchronous function is called, the application continues to work, since the function immediately performs a return.
In general, asynchronous programming in JavaScript from scratch is not easy, and one section of the article cannot do here. To understand, study the basic concepts of asynchronous programming and proceed to an introduction to asynchronous JavaScript.
Modular system
As the application grows, it is usually divided into many files, which are modules. A module usually contains a class or library with functions.
For a long time, JavaScript lacked the syntax of modules at the language level. This wasn’t a problem because the first scripts were small and simple. But over time, this has changed, scripts have become much more complex, and several ways of organizing code into modules have been invented.
This is how special libraries for dynamic loading of modules appeared. The system of modules at the language level appeared in the JavaScript standard in 2015 and gradually evolved. At the moment it is supported by most browsers and Node.js .
Read more about the modular system here.
Web API
For programming in JavaScript, understanding the Web API is not just desirable, but mandatory. You will encounter the Application Programming Interfaces in JS everywhere.
Browser APIs are constructs that are built into the browser and designed to facilitate the development of functionality.
Third—party API constructs embedded in third-party platforms such as Twitter, Zendesk, Trello, etc. With their help, the functionality of these platforms can be used in their web applications. If the API is provided in the platform, instructions must be attached to it.
The topic of the web API is extensive and complex. To understand the issue, we recommend reading the introduction to web APIs, and we also advise you to watch the available lecture:
Popular linters and formatters for JavaScript:
ESLint
Rome
Prettier
Also pay attention to the bundlers listed in the map: choose a tool based on its convenience specifically for your needs.
As for libraries and frameworks, we advise you to familiarize yourself with our React roadmaps and Vue.js .
And here lies a detailed introductory course on TypeScript.
Conclusions
This material does not carry a significant training load, but only demonstrates the path of development of a JS developer, explaining some basics in parallel. Use this roadmap to learn JavaScript programming from scratch in a short time and successfully move on to the practical application of the acquired knowledge.