Що потрібно знати junior Front-End розробнику в 2020 році

Позиція Front-End розробника виглядає привабливо не тільки через розмір заробітної плати, а й через великий попит на цю посаду серед роботодавців. Верстальники та фронтенд девелопери вже довгий час входять в топи найбільш затребуваних спеціальностей в IT сфері. Якщо ви читаєте цю статтю, напевно вам теж спадало на думку поповнити ряди front-end розробників.

Якщо ви вже встигли вивчити інформацію в інтернеті, подивитися відеоролики про те, що повинен вміти фронтенд розробник, і з чого необхідно почати вивчення, або промоніторили список вимог у вакансіях, у вас могло встати дибки волосся від списку всіх цих необхідних навичок, навіть на позицію джуна. З першого погляду може здатися, що стек необхідних знань і умінь веб-розробника настільки великий, що бажання стати на шлях вивчення може пропасти відразу ж.

Проблема в тому, що розуміння того, що ж повинен знати junior frontend насправді дуже розпливчасте як у так званих експертів з ютуба, так і у самих роботодавців.

Саме тому фахівці з dan-it.com.ua склали детальний гайд скіллів, які в дійсності відповідають позиції junior front-end developer.

Чому вимоги до починаючого веб-розробника завищені?

Сьогодні front-end розробка – друга після QA можливість увійти в айті. Відповідно, кількість верстальників-самоучок і тих, хто саме закінчив курси фронтенд-розробки зростає з кожним днем. Незважаючи на те, що ця позиція досить затребувана на ринку праці, така велика кількість бажаючих розпочати свій шлях в IT змушує роботодавців посилювати відбір потенційних кандидатів, тим самим навмисно підвищуючи вимоги на позицію ледь не до рівня middle-розробника.

Крім того, в компанії може просто не бути фактичного поділу рівнів junior, middle і senior. Багатьом власникам бізнесу та стартапів простіше і дешевше викотити список необхідних скіллів під кожний конкретний проект і знайти людину, готову самостійно вивчити технології, щоб отримати заповітну посаду джуна. При тому, що по факту ці вимоги можуть відноситися до рівня middle.

Також слід зазначити, що дуже часто інформацію про необхідні вимоги для початківців веб-розробників розміщують некомпетентні блогери, фрілансери та інші автори, які не мають відношення не тільки до розробки, а й до айті в цілому.

В результаті, через таких неадекватні вимоги багато початківців розробників просто боїться йти на співбесіду ччерез думку, що їм бракує знань. Не варто чекати потрібного моменту або «достатнього рівня». Вивчіть базові скілли зі списку нижче і починайте пробувати свої сили у різних компаніях. Через кілька співбесід ви отримаєте новий досвід і переконаєтеся, що питання часто задають схожі. Про них ви також дізнаєтеся в цій статті.

 З чого почати вивчення фронтенду

Перш ніж почати вивчення веб-розробки, потрібно розуміти, що верстальник і фронт-енд розробник – це не одне і саме, але ці поняття часто плутають самі роботодавці. Верстальник конвертує графічний макет дизайну в HTML + CSS розмітку, може додати прості плагіни і анімацію. Front-End розробник ж перетворює це в більш складний і динамічний інтерфейс.

Процес веб-розробки включає в себе верстку сторінок, але не обмежується цим.

Фронтендер здатний створювати функціональні програми та наповнювати зверстані сторінки повноцінними даними. Сучасні сайти стають все складнішими і вимагають нових рішень, через що дуже часто просто зверстати сторінку недостатньо. Хоча все ще можна знайти компанії або приватних замовників, які обмежуються лише версткою. У будь-якому випадку якісна верстка – це база, якою потрібно володіти впевнено і вільно як верстальнику, так і фронтенд фахівцю.

Всі необхідні знання та навички можна розділити на hard skills, тобто технічні, і soft skills – особисті якості:

Хард скілли:

Технічна база обов’язкових основ, яку вам слід освоїти виглядає наступним чином:

  • HTML(HTML5). Розуміння мови розмітки – це найперший маст хев у вашій скарбничці навичок. Ви повинні розуміти анатомію HTML-розмітки веб-сторінки і освоїти базові теги, їх атрибути і вкладені елементи. Також потрібно знати, як вони повинні правильно виглядати.

Що потрібно знати junior Front-End розробнику в 2020 році - фото №1

  • CSS (CSS3). Слід навчитися стилізувати елементи, при чому робити це правильно, не залишаючи невикористовуваних стилів. Для початку вам потрібно освоїти:
  • блокову модель і позиціонування вмісту (float),
  • компоновку і вирівнювання елементів на сторінці (flexbox),
  • очищення потоку і його методи,
  • вирівнювання і центрування елементів,
  • видимість елементів (display, visibility, overflow),
  • панель інструментів xbox,
  • специфічність селекторів та її роботу,
  • базові знання CSS grid layout
  • responsive design (верстку під мобільні пристрої),
  • підходи mobile-first / desktop-first на рівні розуміння,
  • кроссбраузерність верстки.

Щоб закріпити обидві навички, потренуйтеся у верстці – зверстайте хоча б 5 шаблонів різної складності (їх можна легко знайти у вільному доступі).

Спочатку вам може здатися, що вивчити всі ці нюанси неможливо, але трохи практики – і ви зловите основний принцип, з’явиться загальне розуміння логіки побудови всіх цих елементів.

  • JavaScript.На даному етапі багато початківців веб-розробників припускаються великої помилки, нехтуючи основами JavaScript і перестрибуючи відразу на фреймворки. Знати основи важливо, і вивчити вам необхідно наступне:
  • базове розуміння мови і її особливості,
  • структури даних,
  • рядки, числа, об’єкти і масиви (потрібно знати методи, щоб додати значення в масив, перевернути слово задом наперед),
  • замикання і області видимості (як працює і що значить),
  • методи об’єкта (Bind, Call и Apply),
  • контекст виконання і стек викликів функцій (слід добре розуміти різницю і вміти застосовувати на прикладах)
  • Розуміти як працює система контролю версій GIT. Працюючи в команді, ви повинні вміти контролювати свій код, для цього знання 3-5 команд буде достатньо.

Що потрібно знати junior Front-End розробнику в 2020 році - фото №2

Фактично, це все, що повинен знати junior frontend розробник на початковому етапі. Важливо також не просто ознайомитися з інформацією, а відразу ж застосовувати всі знання на практиці. Чим більше практики, тим швидше отримаєте результат.

Софт скілли

Ці скілли розкривають ваші індивідуальні характеристики. Їх освоєння необхідно як для роботи в команді, так і для власного особистісного зростання, тому важливо не нехтувати ними, а віднестися з ним так само відповідально, як і до технічних знань.

  • Self-management — найголовніший скілл, адже вам необхідно буде стати самому собі начальником. Позиція джуніор фронтенд розробника має на увазі постійне самонавчання, до чого ви повинні будете навчитися самостійно знаходити відповіді на всі питання. У розумно побудованій компанії у вас буде наставник, який допоможе розібратися в складних питаннях, але в середовищі програмування питати одне і те ж кілька разів вважається ледь чи не моветоном.

Навчіться відразу запам’ятовувати інформацію, або хоча б записувати.

Якість вашого коду має поліпшуватися, а кількість коментарів зменшуватися. Якщо команда буде бачити, що по закінченню півроку ви стоїте на одному місці, це може стати дзвінком для звільнення. Тому дуже важливо не тільки показати бажання до самонавчання, а й довести це на практиці.

  • Робота у команді. Сюди ж можна віднести комунікацію і спілкування. Уміння слухати людей і прислухатися до чужої думки допоможе вам просунутися на шляху розробника. Більш досвідчені колеги дадуть необхідну інформацію швидше і компактніше, ніж якби ви вчили її самостійно. При цьому також важливо вміти формувати свою думку і відстоювати її.
  • Англійська мова. Для веб-розробника дуже важливо вміння говорити (навіть якщо немає ідеальних знань правил граматики) і читати документацію англійською мовою.

Що потрібно знати junior Front-End розробнику в 2020 році - фото №3

Додаткові, але необов’язкові навички

Цю інформацію зубрити не обов’язково, і навряд чи на співбесіді від вас вимагатимуть сувору практику, але наявність цих знань на базовому рівні буде однозначно плюсом:

  • Основи JS DOM (Document Object Model):
    • знати про документ і об’єкти сторінок (навчитеся пересуватися DOM-деревом елементів, знаходити їх різними способами)
    • розуміти основи роботи з подіями (вішати елементарні обробники, знати про модель поширення подій, вміти їх перехопити, обробити і скасувати).
  • Базові поняття синтаксису ES6 (fetch, async/await, promise).
  • CSS препроцесор (SASS/LESS) — вкладеності і створення змінних.
  • CSS фреймворк (Bootstrap/Foundation) – досить розуміти архітектуру, і як вона використовується.
  • JS фреймворк (React/Angular/Vue) и JQuery — основи.

Питання на співбесіді junior фронтенд розробника

Технічна співбесіда на позицію джуніор фронтенд розробника в 99% випадків починається з питань про HTML. А найпоширеніше питання з тих, що потрібно знати front end розробнику: що таке Doctype, і навіщо він потрібен.

Далі вас запитають про семантику HTML. Тут не потрібно зубрити інформацію по кожному тегу і його атрибутах, але ви повинні розуміти загальну структуру їх побудови, і вміти пояснити різницю між тегами для заголовків, секцій, навігації. Також, потрібно розуміти як правильно їх оформляти.

Вас можуть запитати про типах полів інпут і їх особливостях. Також, вас можуть попросити розповісти, які теги ви використовуєте, наприклад, для форми, і яким чином ви будете її створювати.

Дуже важливо не просто сказати результат, а розповісти послідовний ланцюжок своїх дій, продемонструвати свій алгоритм розумового процесу для вирішення завдання.

Навіть якщо з якимось тегом ви помилилися, хід ваших думок дасть роботодавцю зрозуміти, що ви маєте розуміння того, що від вас вимагається.

Покажіть на співбесіді, що ви горите фронтендом, що ви постійно вчитеся і хочете рости. Технології в айті розвиваються швидко, і ви повинні бути готові не тільки постійно вчити нове, але і стежити за оновленням вже існуючих знань. Тут дуже важливо навчитися фільтрувати інформацію і не розпорошуватися на безліч статей «про все і ні про що». Самостійне навчання може зайняти більше року, в той час як оптимізовані курси допоможуть освоїти напрямок фронтенд за 5-7 місяців. Записатися на повний курс Frontend з нуля можна тут.

Ознайомитися з програмою вступу на курс по фронтенду також можна на сайті https://dan-it.com.ua/program/kiev/front-end/.

Всі статті
Контакти