Development path (Roadmap) of Frontend developer

Today I want to tell you how I see the modern and relevant development map of a frontend developer. This article will be divided into two parts, in the first I will tell you about the basic technologies that are necessary to start, and in the second I will tell you about the choice of more complex technologies with which you will not be ashamed go to your first interview.

Disclaimer

The whole path I’m talking about here should take more than 3 months, if you quickly went through all the tips exactly as they were said, wrote just one simple website and solved a couple of problems from the video, then you need to understand one thing, we are here We’re not doing speedruns, we’re trying to get a profession, so in addition to my advice, watch other videos, write as much code as possible, and most importantly, have fun with it.

HTML & CSS

The very first thing for a frontend developer is HTML and CSS, these technologies will allow you to create the simplest web pages, using HTML you create the main markup of your page, blocks of text, pictures, headings and so on, having created several pages in pure HTML you can move on to CSS that responds CSS is responsible for the visual content of the page, fonts, colors, sizes. There are many free videos available for a basic introduction to these technologies; I learned the basics in HTML AcademyI can’t say much about the quality of their courses now, but it’s definitely worth taking the free simulators, if you like their approach, then you can try to take paid simulators, not courses, courses at this stage are money down the drain, but if you are an adherent of “Everything yourself,” then you can take a few simple pages and turn them over, this will be useful in any case, not only for those who do not want to use online simulators.

Next, we will have to break a little into two directions, the main one will be JavaScript, the additional one will be semantic layout, which optimizes the page for search engines, to put it simply, if you want to see your site in search results, then it must comply with the rules of semantic layout, let's in order.

JavaScript

JavaScript is the programming language that runs the entire frontend, and it has no competitors in this field. This language has many features that will be useful for you to learn from articles and videos. First, learn the basic concepts of the language….. now let's talk in Russian, start with the simplest, variables, operators, loops and branching, for a general understanding you can go through the basics in the online student learn javascriptbut this is still more of a reference book than a textbook, so don’t worry, read, get a basic understanding and move on, now we’re learning how to work with the DOM, and what the DOM is in general, (Document object model), you should be able to insert elements onto a page with using JS, manipulate data on the page and so on, for example, by clicking on a button, part of the text changes or some section appears, and then we have a lot of videos and articles, but the most important thing is practice and problem solving, for example on codewars or leetcode, since your skills are now quite enough to write full-fledged simple applications, like an example of a website about yourself, or something that will be interesting and useful to you in everyday life, it is important that you enjoy doing your project, DO NOT MAKE A SOCIAL NETWORK, DO NOT MAKE A COPY ONLINE STORE ETC. This will interest you for a few hours, and then self-flagellation and procrastination. At the same time, we read about semantic layout and use it in our project, use fewer divs and spans and switch to p and section.

Adaptive layout

Then it’s boring, but necessary, adaptive layout, since you’ve already written your sites before, now we make them adaptive, the most classic thing is to make a separate layout for mobile, tablets and PCs, it takes a long time and sometimes this method is expensive for commercial applications, but for training that's it. How and what to do? We go to YouTube or read articles on how to make adaptive layout, the topic is quite small, and if you understand the basic concepts, then in the first couple of times this will be enough for you, so poke around, learn the basics and move on, in the future you will return there anyway.

Git Basics

Git is a version control system that allows you to save code not in archives, but in convenient repositories and, if necessary, switch to code previously sent to the repository – a commit. As a beginner, you need to learn how to create repositories, create branches and switch between them, make commits and merge requests – the official documentation is enough for this, but I prefer to watch a video on the basics of Git and pay special attention to what is said above, the rest is up to you will not be needed at this stage. However, knowing a little more than the minimum will be at least useful, and at most you will be able not to return to studying Git in the future.

JavaScript again

With this set of skills, you are quite a layout designer, but, unfortunately, such vacancies are now dying out, so it’s time for us to turn into a developer – let’s return to JavaScript. We need to learn how to work with asynchrony and requests to the server. You can read about asynchrony in the same learn javascript or watch a video about async/await and promise. There is no need to worry too much about studying theory, but move on to practice as quickly as possible and write simple requests to the server. For this you can use jsonplaceholder, look at the examples on the website, repeat and implement them into your application. For example, we draw comments to some part of our application and do it asynchronously; there are many videos on this topic to help you.

A little theory (Web Fundamentals)

Before the main step, let's read a little theory about the structure of the Internet, what HTTP is and how it differs from HTTPS, what a browser is, what client-server interaction is and what a REST API is.

First difficult choice

And now about this most difficult step – choosing the main technology, an important note, this is a difficult and important step, but it is not one-way, you don’t have to choose a technology for life. A little about how it all works. Nowadays no one writes in pure programming languages, the code always uses many libraries and frameworks, until now I tried to avoid the issue of using libraries, but now you are ready and it’s time for you to make a choice. Now there are three main technologies React, Vue, Angular. In fact, choosing your first technology is not something scary, you can take what you like best and in any case gain experience and skills, which will allow you to change the technology on which you write to something else without much pain no one will forbid changing React to Vue or Angular to React.

I’ll tell you more about these technologies later, but now it’s better for you to write a couple of projects that will be useful for you, anything from types of business card sites for yourself or friends, to some applications that can help you solve your problems, even a calculator for studying , the main thing is that it is interesting for you and not entirely easy, the difficulties along the way of learning are what allow you to grow as a specialist, try to use as few libraries as possible and create your own bicycles, but without fanaticism.

At the moment, the roadmap looks quite simple and even boring, but I believe that there is no need to complicate things where they can be made simple.