Usually such instructions and roadmaps start with such a broad concept as the Internet, and from it branches off in different directions with questions: "What is HTTP?", "How does the Internet work?", "What is a domain name?", "What is a browser and how does it work?"...
But let's be honest: if you're thinking about becoming a front-end developer, you're 100% aware of browsers and their purpose, and getting into the technicalities of DNS servers in the early stages is not necessary. So this Roadmap will be less theory and more practice.
We will start with page layout, that is, creating the structure of the page. A kind of skeleton for the future application or web resource.
Having a made-up page partially solves this problem, allowing you to work with "real" development objects, not just solve logic problems and communicate with naked math (leave it to backenders).
At the same time, you'll learn how to create classes and properly format HTML according to validator rules. This will also be useful when styling your site and adding logic to your application.
So learn HTML semantics, basic tags, and how to design blocks of text, images, and other content. Learn how to connect external documents (with program code and styles), etc.
The next step will be mastering CSS - cascading style sheet which is responsible for the location of objects on the page and their appearance.
The bottom line is that within HTML, all the files and blocks of text follow each other from top to bottom, and the fonts and colors correspond to those that are set by default in the browser. If you apply CSS, you can change the layout and appearance of elements on the page.
You need to learn the basics of styling and apply them to the elements in the HTML file, learn how to position them correctly in relation to each other and make the site adaptive for all screen resolutions.
Now comes the actual programming language (previously markup languages). We already have our static stylized pages, so now we can figure out what to do with those pages (add interactivity, buttons, etc.).
Learning can go in parallel in two directions:
But you can't do without git at all. It is important to store the code somewhere and control the application versions, so that each stage of development is "documented".
And you also need to learn how to work with package managers, because we will start downloading ready modules to speed up development or to add new features, which are too complicated for independent implementation.
So be patient and go ahead and read git-how-to.
Knowing basic CSS syntax, understanding CSS variables, being able to style code and the application itself nicely is cool. But you'll probably have to learn some preprocessor.
There are also full-fledged CSS frameworks that change the approach to styling documents and allow you to make changes to the site design without using CSS-files at all. To understand how they work, you should read about PostCSS, LESS, SASS and TailwindCSS.
It is advisable to choose from the four most promising - Angular, React, Vue or Svelte.
An important part of working with code is testing. In a good way, a company should have a dedicated person to handle these tasks. But there are two "buts."
You need to learn different methods of code testing and become more familiar with the relevant software libraries.
Generally speaking, it is not the frontrunner who has to take care of security. Some very basic things like HTTPS are guaranteed to you by the hosting. Admission of very obvious vulnerabilities is also not possible, because the browsers and languages are well protected.
Basically, it is worth to understand how CORS works and how to circumvent its limitations. This will help avoid problems with the implementation of functions in the spirit of uploading files to the server.
Specialized frameworks can transform code used on the web and turn it into native components to run on computer and mobile operating systems.
What's next? Next is learning. There are many more frameworks and technologies than are described in this article.
What we're talking about is one popular roadmap. Just a step-by-step plan for general orientation in the space. You will have to acquire much more knowledge and learn much more technology, in particular those that the manager/customer wants to use. But now you know where to start on your way to the web frontend.