9 Steps To Become A Frontend Developer

24 Feb 2022

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.

Step 1: HTML layout

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.

Stage 2: Styling with CSS

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.

Step 3: The basics of JavaScript

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:

Reading textbooks, learning algorithms, and testing your skills in services like Codewars. The Javascript.info resource and a lot of useful books in the spirit of "Grok the algorithms" will help you here.
Work on your own site. You will have to come up with some algorithm. Let it be even a simple calculator, as long as it is something of your own, something that you can "tweak" in the process of self-education.

Step 4: GitHub and package managers

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.

Step 5: Auxiliary Tools

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.

A bundler is a program that assembles several parts of a program into a single project, processing the code in the process, adding some properties to it and minimizing it.
Prettier is a utility that automatically corrects the page formatting to make the code look nice and neat.
ESLint - plugin that forces the programmer to write code according to certain rules (for example, using only modern syntax).
TypeScript - allows you to mark the type of data used in code to avoid typing errors and make the code much more reliable.
DevTools - browser-based tools that simplify layout and allow you to test hypotheses about CSS without leaving the browser.

Step 6: CSS preprocessors and frameworks

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.

Step 7: JavaScript frameworks

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.

React - the most in-demand, it is easiest to find work.
Vue - quite specific, used less often.
Angular is used in corporate development.
Svelte - too young, but ambitious.

Step 8: Testing the code

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."

Sometimes companies save up and weigh this task on the developers. This "sometimes" happens quite often, so it is better to be able to write tests and test your code yourself.
To be able to test your own code is to make sure that it works properly, and not to make the work of other departments in the company easier.

You need to learn different methods of code testing and become more familiar with the relevant software libraries.

Step 9: Security

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.

Addendum: mobile and desktop development

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.

Conclusion

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.