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.
Before getting into JavaScript, you have to make some static pages and work out the usecases of the code. This is important, because when you start with JavaScript (or any other language), many developers get lost in a state of total immersion in logical tasks and lack of imagination. Potential frontenders simply do not realize how to apply what they have learned in practice.
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.).
First we need to learn JavaScript as an approach away from HTML and CSS to understand how programming works in general and JavaScript in particular. It is necessary to get acquainted with data types, understand what the console, code editors, variables, operators, and so on.
Learning can go in parallel in two directions:
In many schools for learning JavaScript and programming in general, this stage becomes the first. But in online courses, it's a necessity (you need to check assignments and store code somewhere). I, on the other hand, decided to move this step here because git is hard to work with. It's confusing, and until you get the hang of it, everything is wildly annoying. If you start with git, you might have no desire to work with code at all.
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.
I've put together in one chapter some very useful but optional things you'll need to work with JavaScript, CSS, and HTML. These tools will make your code many times better and more reliable.
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.
Preprocessor is a JavaScript plugin that extends CSS and adds loops, logic calculations, dynamically changing variables, code nesting, and a bunch of other useful features.
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.
The same scheme works here as with CSS preprocessors. You need to choose some technology that is closest to your heart and start exploring it in depth. All frameworks complement JavaScript by adding new features to it.
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.
For a frontend developer successful in the web, the next stage of development may be a deep familiarity with the technologies of creating mobile and desktop applications in JavaScript frameworks.
For example, Instagram, Twitter, Pinterest, Spotify and dozens of other popular apps were created using JavaScript code.
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.