Get best of the week

How to learn front-end development, find your first job and not get bumps

image

Frontend, the best, best and most welcoming direction to get into IT. But not everything is so simple with him - in the front-end it is easy to start and it is difficult to become a master. It will not be the torment of choosing a programming language, but there will be a struggle with its shortcomings. In this area there are a lot of tools, the study of each of which draws on the development of a particular profession.

We asked Oleg Shikov, the dean of the web development department at GeekBrains, and Daria Dyachkova, a beginner web developer , about how to learn properly, how not to get big shots and move through a career .


In 2015, Daria Dyachkova entered the Higher School of Economics at the Faculty of World Economy and International Affairs because she loved languages ​​most of all at school — she studied English and German, she constantly won the Olympics. She liked this sphere, but not to the splendor in her eyes, so Daria continued to look for a future profession. In 2018, she came on a career day to one of the HR agencies, after which she changed direction in an unexpected direction.

“I passed a long psychological test, where they considered the type of personality, mindset, and more. No offense to psychologists, but I am skeptical about such tests. After the test, they told me, “eh, the programmer disappears” and offered to listen to a talk about the transition to the IT world. I shrugged, went and lit up. ”

At home, she began to google, watch reviews of professions. Previously, Daria made web pages on Tilda and Wix, kept her blog review of international news, so I thought about the frontend in the first place. Nevertheless, she looked through all the introductory webinars of professions and programming languages, tried to write a small piece of code in several programming languages, and chose JS as the closest in spirit.


What do front-endors do


“If you open any page in the browser, all that you see in front of you on the page is the front-end. But in fact, their work is much more complicated than one appearance, ”says Oleg Shikov, dean of the web development department at GeekBrains.

Oleg wrote the code from childhood. The first experiments were in C, and in 2011 he switched to Javascript. Much of what is in technology now was only in its infancy. HTML and CSS did not have much potential, and Flash prevailed in the industry. The profession as a whole was much simpler - just an HTML layout and simple layout. It was enough to write tags and style them beautifully in CSS. Users clicked a button and the page was completely refreshed. The request to the server left, the server gave a new layout. But this approach did not allow for a responsive interface.

“The task of the front-end vendor these days is to build the logic of sites on the browser side,” says Oleg, “This logic is developed in the JavaScript programming language. Modern sites can fully work on the client side, making requests to the server only occasionally, for example, to save user data or download the necessary information. That is, now we are requesting a not completely updated page, but only the necessary information, and correctly render it in the browser. Thanks to this behavior, sites become more responsive and save some of the user's traffic. ”


Learning frontend - is learning JavaScript?


Having decided on the direction, Daria entered the faculty of web development at GeekBrains. In the view of many, the training of the frontend merged with the study of the Javascript language, but, according to Oleg Shikov, this is not entirely true.

“The first thing to start with is of course HTML. It is extremely simple, it is very easy to deal with, it is very easy to write your first website. Of course, it will not be responsive, but it will work, and it can already be posted on the Internet. Next, you need to add a beautiful appearance to this site so that it is not just a canvas of text, but a convenient and beautiful page with visual elements. CSS cascading style sheets will help. A couple of weeks is enough to master both HTML and CSS. And right after that you need to start JavaScript, because it is the basis of the foundation for making a responsive interface. ”

But when popularity comes to technology, it’s followed by a sea of ​​criticism. Many experienced developers, one after another, reveal problems and language in their reports, speeches and articles and offer alternatives. Beginner these discussions can only lead astray. According to Oleg, it would be a mistake to start learning frontends from other languages ​​just because they are more praised by professionals.

“A few years ago, everyone blamed PHP together, now everyone blamed JavaScript, it’s such a mainstream. Of course, JavaScript is not without problems, no one argues with this. But for example, TypeScript (another popular language from Microsoft, which is an extension of the capabilities of JS) is not executed in the browser itself - it is translated (compiled) into JavaScript. If we write something on TypeScript, we will still get JavaScript, which will already run in the browser. To properly debug code, you need to know JavaScript and be able to work with the browser. ”

But Daria takes the time to learn things that are not included in the program.
“I’m used to learn and understand a lot to the end, I am one of those people who reads all additional materials to articles and does additional tasks, because they are just interested. I’m taking the time to learn, for example, Nuxt.js, Typescript, Vue.js, Webpack and Stylus. ”


What are React, Vue and Angular and how to choose them


In addition to Javascript and other languages, front-end developers require knowledge of various tools for working. In pure JavaScript, it is quite difficult to develop interactive responsive web page interfaces without using third-party libraries.

A library is also JavaScript code already written by other developers. It provides a convenient set of solutions to carry out the prepared actions that are regularly required in the work. There are a wide variety of libraries on the web that make it easy to write responsive web site interfaces. Among them, the most famous are React, Vue, and Angular.

“The choice between them is a difficult question. You can learn all three. This is not an extremely difficult task, because when you understand how to work with one, each subsequent one will be easier to learn. But according to my observations, they are used a little in different areas. Angular is one of the oldest. It is often used in the corporate segment, on large projects, with legacy code support that was written several years ago. React is ubiquitous. He is the first on the list when they write new interfaces and web services. About Vue, you can say that he is simple, young, cool and mainstream.

I would advise trying to write simple logic on all three frameworks - relatively speaking a todo sheet - based on my feelings, understand which one I like more and learn it. Or look at vacancies in your city, and choose, for example, React, because most vacancies for front-end developers require knowledge of React. But then retraining will not be difficult. ”

Daria writes adventure novels and develops a guide to the universe of her book on Nuxt.js. She also does projects and landings for her friends, so she learned adaptive layout, media queries and more. “I started React.js, came up with a project for the future that I want to implement on React Native. While I plan the architecture, draw with flowcharts, and read about technologies that can be used. ”


How is the study


“When the training began, the teachers explained everything perfectly - it’s important for me to build the acquired knowledge into a system. Homework helped to consolidate the skill, a bonus gave a tip where and what else to teach. I read and mastered a lot myself, watched manuals and mini lessons on YouTube. At GeekBrains, you can always write to a teacher or tutor or your group to chat. All will help, they will explain. If you find an interesting article, there is also someone to share and discuss with.

I think that when you see your first Hello world, no one will forget. And in general, the feeling when I made a beautiful UI from the layout, and it also works, is a drive. ”

Studying lasts one and a half years. Oleg Shikov believes that just learning the syntax is boring, so learning is built around projects right away. “We give basic things, syntax, and immediately try to put them into practice, write simple web pages. After that, we give PHP, thereby teaching students the backend (server) development. For some novice developers, it seems enough to learn HTML with JavaScript, and this is enough to become popular in the market. In fact, not quite so. You need to know the architecture, algorithms, patterns and frameworks - and not just to know. Another practice is needed, we must write our own product, participate in collective development. ”

At the beginning of training, students write the code separately, checking it with the teacher, and by the middle of training they begin to develop the product with their classmates, thanks to which they gain experience in team development.

In addition to studying, Daria likes to study on the Kodiri.com platform, where international competitions in JS are held. “There you can train alone, solve tasks for the time, accuracy and beauty of the code. I met the founder of the platform Ricardo - he is a cool guy. Now I am writing puzzles for them. For each task, I apply a reference solution and tests (so, by the way, I started writing unit tests). It's fun for me to compete with other players when the probability that at least one of the five tasks will be your authorship is ≈0.94. Yes, I thought, I was curious why I meet them so often. I honestly decide my own and don’t look at the answers. It captures the element of gamification, I have already received the highest epaulettes (Imperial Majesty), now it remains to move Yurash as the best player of the month. In general, I lacked this element of the game and the spirit of competition in training.I think it’s worth adding such opportunities to educational platforms. A few days of Kodiri’s puzzles on speed, and in a dream I’ll write arr.map (e => ".


Finding your first job


At what stage to start a job search is a very controversial issue in the industry. Some are convinced that only years of teaching and developing theory in practice in safe conditions give a person the right to ask for money for development. Others, on the contrary, that you need to learn while working in the present work. According to the teacher, many students go the second way.

“I know students who received first orders or got a job in firms in the third quarter. They continued their studies, combining it with work. It all depends on the person and his ability to learn. It is easier for a novice developer to get into a small company than a large one. In companies like Mail.ru or Yandex, strict selection. Not every experienced developer will be able to get there. But everyone can try their luck, of course. ”

When Daria had six months of training and a portfolio summary in the form of a site, she went through several interviews, but she did not have enough skills to get a front-end developer.

“At the first interview, it was scary. I applied for a job as a front-end developer for Vue. I prepared carefully, repeated all the material of JS and Vue, and everything that GeekUniversity learned in six months, sorted out tricky questions and all sorts of little things where JS behaves unpredictably. The interview took place on Skype. A small company, immediately a technical interview, bypassing HR. I cheerfully answered questions, we talked for an hour ... and then it turned out that they were still looking for a developer’s full stack. It happens".

image
At Habr Career, you can see the latest vacancies for front-end tenders and subscribe to the newsletter for new ones.

“Junior developers are asked simple questions to make sure they know the basics,” Oleg said. “I would ask about adaptive and semantic layout, about how to work with pure JavaScript. Now the trend is on frameworks and libraries, the same React, Vue and Angular, and “vanilla” JavaScript without additional libraries - not everyone knows it. I would like to make sure that the developer knows how to work with him, and did not immediately rush to the conditional React camp.

In any case, you will have to spend some time to respond to different vacancies, to pass different interviews. Passing them is also a certain experience and skill. Failures are a normal situation, you don’t need to be afraid at all. ”

“After two more interviews, I was advised to continue my studies and try again later. We also needed general knowledge - protocols, architectural solutions and more. I myself understood, it was too early to get settled. Therefore, I found a cool related work with IT - got a technical support engineer in Bookmate. It is the responsibility of the reader to answer questions about the operation of the application and the site, advise something small on how to fix it, and to troubleshoot bigger problems to issue bugs in JIRA and Confluence. Plus, now I can imagine how ordinary users use the UI / UX of our application. Hint, "this is not a bug, this is a feature." Or when the developers wanted the best, but the users did not understand how it was and why.

A good chance to look at both sides is how users use the application, and how developers develop and repair it. ”


How to develop in the profession


- I would advise you to develop into a full-stack developer, to know both the backend and the frontend. If we talk only about the frontend, then - although it is necessary to know JavaScript well - without frameworks anywhere. They need to be taught.

TypeScript is worth a look, although it is not required in all jobs. It is actually interesting, and it is very easy for a JavaScript developer to learn it. In fact, this is the same language with additional features that allow you to write more reliable systems. TypeScript adds an explicit type system to the language, which allows us to say that this variable will be numerical, and this variable will be string.

In pure JavaScript, this is not there, the variable can be of any type, and this sometimes leads to errors. You expect a number in a variable, but you get, for example, a string or an object, and because of this, the logic of the program’s work breaks. TypeScript helps to avoid such an error.

Now many are looking towards PWA. The fact is that, as I said, the smartphone market is huge. Most users who visit your site are more likely to do this from the phone.

PWA (Progressive Web Applications) - these are sites that have additional features that allow you to conveniently work with them, including from a smartphone. For example, on an Android PWA site, you can add it to your home screen and launch it by simply clicking on the icon. There are opportunities that can improve the site so that it will work even when there is no Internet on the smartphone. That is, it is almost a native application. Recently, Google released an update to Google Play, thanks to which you can add your PWA site to the store, and users can download and update it as a normal native application, which is almost indistinguishable from a regular one written, for example, in Java. But actually it is written in JavaScript and made up using HTML.


Salaries


The median salary of the front-end trainee is at the level of 35 thousand rubles. The junior level specialist can count on 50 thousand, the middle - already on 97 thousand. Signor and lead receive an average of 170-190 thousand rubles. According to the Habr Career salary calculator, the average salary of a front-end developer is a little less than 110 000 rubles (the diagram is clickable).





What to read and see for self-study



Online:



Books directly about JS and HTML / CSS:

  • You Don't Know JS (there is a translation into Russian “You don't know JS“)
  • »HTML5. ".
  • « CSS3».
  • «JavaScript. ».
  • «JavaScript. ».
  • «JavaScript. ». .


:

  • «- ».
  • « ».
  • « SQL. MySQL 5». ,
  • « ».
  • « - . ». , , ,
  • « ».
  • « ». ,
  • « ». ,
  • «. ». . , . , . , .

Source: https://habr.com/ru/post/undefined/

More articles:


All Articles