Pillars of frontend development
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:
Mark Pilgrim’s book “Immersion in HTML5”
The order of execution of scripts in HTML
Video course “HTML5 for beginners”
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:
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.
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.
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.
As the application grows, it is usually divided into many files, which are modules. A module usually contains a class or library with functions.
Read more about the modular system here.
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:
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.