Головна 
ПрофесіїДовідник 
БлогКар'єра та освіта 
ПрацевлаштуванняПошук вакансій та співробітників 
ТестиОнлайн 
Як стати фронтенд-розробником. Повне керівництво
- Деталі
- Останнє оновлення: Четвер, 01 червня 2023, 18:51
Веб-розробка - одна з найперспективніших сфер в ІТ. Вона пропонує високі зарплати, комфортні умови роботи та великі можливості для кар'єрного зростання.
Фронтенд-разработка имеет низкий порог входа и высокие зарплаты, поэтому она особенно популярна у новичков. Разберёмся, что такое фронтенд-разработка, какие технологии нужно выучить и как устроиться на работу.
ПРО ПРОФЕСІЮ
- Особливості спеціальності
- Обов'язки
- Зарплата
- Формат роботи
- Актуальність: розробник vs конструктор сайтів
ТЕОРІЯ, ПРАКТИКА І ПЕРША РОБОТА
Крок 1: вивчення теоретичних знань
- HTML та CSS
- Адаптивний дизайн
- Bootstrap
- JavaScript
- Препроцесори
- HTTP, JSON, MVC
- Система контролю версій (VCS)
- Редактор коду
- Просунутий фреймворк: React, Angular або Vuej
- Тестування
Крок 2: закріплення знань на практиці
- Проект 1: найпростіший односторінковий сайт
- Проект 2: простий сайт з адаптивністю
- Проект 3: динамічний сайт зі скриптами та запитами
- Проект 4: багатосторінковий сайт
- Проект 5: сайт на UI-фреймворку
- Проект 6: повноцінний веб-сайт із серверною та клієнтською частиною
Крок 3: отримання першої роботи
Про професію
Особливості спеціальності
Веб-розробка поділяється на дві частини: клієнтську (фронтенд) та серверну (бекенд). Клієнтська частина це все, з чим працює користувач, тобто сторінка в браузері. Серверна частина – це логіка сайту, яка розташована на сервері та обробляє дії користувача.
Фронтенд-розробка відповідає за створення клієнтської частини сайту. Однак, клієнтська та серверна частина нерозривно пов'язані, оскільки постійно обмінюються повідомленнями за наступним алгоритмом:
- Клієнт надсилає запит на сервер.
- Контролер на сервері обробляє запит (отримує/змінює дані у базі даних, здійснює обчислення).
- Контролер посилає відповідь клієнту.
- Клієнт обробляє відповідь та змінює HTML-сторінку.
Таким чином, фронтенд-розробник також повинен знати все про взаємодію між клієнтом та сервером, розуміти основи серверної розробки.
Обов'язки
Фронтенд-розробник відповідає за такі процеси:
- верстка сайту у відповідність до дизайнерського макету;
- налаштування кнопок, слайдерів та форм;
- написання скриптів для сайту;
- взаємодія із фахівцями серверної розробки;
- тестування клієнтської частини сайту.
Іноді від розробника вимагають створити дизайн сайту, особливо це відбувається на фрілансі.
Крім написання скриптів, які відповідають за візуальні зміни клієнтської частини (приховування/розкриття блоків, анімація), розробник також пише скрипти для взаємодії з сервером. Такі скрипти складаються із запиту на сервер, функції отримання відповіді та її обробки (зміна сторінки у відповідність до отриманих даних).
Опис професії читайте також тут: Фронтенд-розробник
Зарплата
На початковому етапі кар'єри фронтенд-розробники одержують у середньому (700 доларів). Така зарплата для фахівців-початківців обумовлена великим попитом. Крім того, вона перевищує початкову зарплату багатьох інших спеціальностей, незважаючи на низький поріг входу.
Після отримання досвіду роботи (в середньому 2-3 роки), розробник починає отримувати від (1400 доларів). Реальна зарплата може відрізнятися на 20-30% як у більшу, так і меншу сторону, і залежить від кваліфікації самого розробника та політики компанії, в якій він працює.
Повністю відбулися фахівці (більше 5 років) отримують від (2800 доларів). Це менше, ніж зарплата будь-якого Java-розробника, але повністю компенсується низькими складністю та порогом входу до професії. Більше того, фронтенд-розробник може освоїти бекенд та стати Full-stack спеціалістом, що є чудовою можливістю кар'єрного зростання та дозволяє отримувати велику зарплату.
Формат роботи
Одна з головних рис цієї спеціальності полягає у форматі роботи. Фронтенд-розробник може працювати як у компанії, так і на фрілансі. Причому навіть у компанії він може працювати віддалено. Це пов'язано з тим, що фронтендеру не потрібно програмувати будь-яку серйозну логіку. Він легко може працювати самостійно, практично не перетинаючи інших фахівців. Якщо мова йде про фріланс, то зазвичай там замовляють відносно невеликі сайти, які реально написати за один тиждень. Таким чином, розробник може працювати один, без команди та працевлаштування до компанії.
Актуальність: розробник vs конструктор сайтів
Про те, що фронтенд втратить свою актуальність, говорять уже понад 10 років. Проте, фронтенд-розробники досі затребувані на ринку праці, одержують великі зарплати і не думають змінювати професію. Головна причина таких пророцтв криється в конструкторах сайтів, де будь-яка людина без освіти може створити сайт, просто перетягуючи потрібні елементи мишею. Дійсно, за допомогою конструктора можна створити сайт, однак він не буде дотягувати до потрібного рівня ні по дизайну, ні по функціоналу.
Конструктори використовують для чогось простого, але не більше. Будь-яка компанія віддасть перевагу послугам професіонала.
Теорія, практика та перша робота
Крок 1: вивчення теоретичних знань
Розробка клієнтської частини сайтів зазнала величезних змін за останні 20 років. У порівнянні з іншими сферами програмування вона змінюється досить швидко, але це не означає, що ваші знання можуть стати неактуальними.
Для фронтенд-розробки існує безліч різних технологій, в яких новачкові легко заплутатися, але більшість цих технологій потрібні тільки фахівцем, що відбувся. Для того щоб влаштуватись на роботу, достатньо знати базовий стек технологій, який представлений нижче.
HTML и CSS
HTML – це мова розмітки, за допомогою якої розробник визначає структуру сайту, елементи, що знаходяться на сторінці. CSS - це мова таблиць стилів, за його допомогою визначається зовнішній вигляд елементів та їх положення. Використовуючи лише ці дві мови, можна створити простий сайт. Щоб освоїти їх на прийнятному рівні, знадобиться 2-4 тижні.
Вивчіть всі теги HTML, його основну структуру, атрибути тегів, такі як "class", "href", "src" та інші. Також вчиніть з CSS, розберіть основні властивості елементів, дізнайтеся, як використовувати селектори. Потім вивчіть основні способи верстки:
- Float. Вирівнює елементи збоку.
- Grid. Макет представлений у вигляді сітки. Найкраще підходить для визначення каркасу сайту.
- FlexBox. Розширений інструмент для вирівнювання контенту. Дозволяє легко позиціонувати елементи, підтримує адаптивність із коробки.
Адаптивний дизайн
На веб-сайти заходять не лише з комп'ютерів, а й з мобільних пристроїв та планшетів. Важливо, щоб на кожному пристрої сайт відображався правильно, був зручним для користувача. Дизайн називається адаптивним, якщо він змінюється залежно від розміру екрана пристрою. Існують різні інструменти для створення такого дизайну: вбудовані інструменти (FlexBox), медіа-запити, фреймворки.
Потрібно розуміти основні принципи адаптивного дизайну та вміти робити адаптивну верстку.
Bootstrap
Це найпопулярніший фреймворк для верстки. Він значно спрощує процес створення сайтів, надаючи багато готових шаблонів та інструментів. За допомогою Bootstrap дуже легко досягти адаптивності. При вивченні фреймворку важливо звернути увагу на класи, які є одним з найпотужніших інструментів («container», «col», «row» та інші). Ці класи мають безліч налаштувань із коробки, що позбавляє програміста необхідності робити все з нуля.
JavaScript
JavaScript - це повноцінна мова програмування, яка не має аналогів у фронтенд-розробці. За допомогою JS програміст може динамічно змінювати сторінку. Це особливо важливо під час роботи з сервером. Наприклад, потрібно вивести список товарів, але браузер не знає скільки їх. Він відправляє запит на сервер і отримує список, у JS-скрипті відбувається обробка списку та зміна HTML коду так, щоб усі товари відобразились на сторінці. Реалізувати динамічну зміну без JavaScript неможливо.
На вивчення мови піде від кількох місяців до півроку. Необхідно вивчити таке:
- Синтаксис язика. Найважливіше вивчити саму мову: основні конструкції, об'єкти, колекції і т. д. Для цього підійде будь-яка книга або курс. Навіщо це потрібно? Наприклад, з сервера надходить відповідь у вигляді безлічі виду «ключ: товар», потрібно додати картки товару на сайт, щоб зробити це, доведеться перебрати все безліч, обробити кожну картку і передати інформацію в HTML. Лише для такої невеликої дії потрібно знати, що таке змінні, Map, цикл, об'єкт, поля та методи об'єкта та інше.
- Об'єктна модель DOM. Це об'єктна модель HTML-сторінки. Знаючи її легко отримати доступ до будь-якого елемента, щоб змінити його. На вивчення основ об'єктної моделі піде не більше тижня. Це дуже важливі знання, адже після обробки інформації із сервера її потрібно якось помістити до HTML-сторінки.
- AJAX. Це технологія взаємодії клієнта та сервера. Її основна перевага – можливість оновлення контенту без перезавантаження сторінки. Кожен фронтендер повинен вміти надсилати AJAX-запити та обробляти відповідь із сервера.
Препроцесори
Препроцесори необхідні спрощення CSS коду у великих проектах. Препроцесор – це надбудова над звичайними стилями, що додає нові можливості, такі як змінні, домішки, модульність та інші. Один із найпопулярніших препроцесорів - Sass. Коли CSS коду занадто багато, його набагато складніше підтримувати. Наприклад, на сайті більше 30 різних кнопок, всі вони мають різні стилі, але кожна кнопка має border-radius: 15px. Вирішили змінити округлення по кутах на 10px. Використовуючи звичайний CSS, розробнику доведеться вручну змінювати значення кожної кнопки.
Якщо використовується препроцесор, достатньо оголосити змінну з потрібним значенням і за необхідності змінити його:
$defaultBorderRadius: 10px;
.селектор {
border-radius: $defaultBorderRadius
}
HTTP, JSON, MVC
Фронтендер повинен писати запити на сервер правильно, а для цього потрібно розуміти, як сервер взаємодіє з клієнтом, і яка у нього структура.
HTTP – це протокол передачі даних, що лежить в основі клієнт-серверної технології. Програміст повинен знати:
- як він працює;
- що таке запити;
- структуру запитів;
- їх методи (GET, POST та інші).
JSON — це формат обміну даними, він є одним із найзручніших і найлегше читаних форматів і має вигляд [{ключ:значення}, {ключ:значення}], де [] - масив об'єктів, а {} - об'єкт. JSON використовується для передачі даних між клієнтом та сервером, потрібно знати, як працювати з цим форматом.
MVC — це патерн, за яким будуються веб-програми. Model – це дані, тобто все, що пов'язане з базою даних, View – це вид, тобто клієнтська частина сайту, а Controller – це логіка, тобто серверна частина сайту. Зрозумівши MVC, легко уявити загальну структуру веб-проекту і працювати з ним.
Система контролю версій (VCS)
Система контролю версій необхідна розробки будь-якого проекту, особливо у команді. Вона дозволяє зберігати проміжні стани проекту, щоб у разі помилок можна було відкотити зміни. Також система контролю версій потрібна, щоб кілька розробників могли займатися проектом одночасно.
Git - найпопулярніша VCS на сьогоднішній день, тому слід вивчати її. Також потрібно познайомитися з GitHub та/або GitLab, хостингами для системи контролю версій. Важливо не лише знати основні команди, а й розуміти, як у VCS відбувається робота над реальним проектом та взаємодія між розробниками.
Спрощений алгоритм такий:
- Запросити проект із сервера.
- Перейти в гілку develop, зробити merge.
- Внести свої зміни до проекту.
- Повернутись на основну гілку.
- Знову запросити зміни з сервера (віддаленого репозиторію, що зберігається на GitHub), оскільки інший розробник міг за цей час внести свої зміни.
- Зробити merge з develop в основну гілку.
- Вирішити всі конфлікти.
- Запустити на сервер.
Редактор коду
Жоден програміст не за своєю волею писатиме код у блокноті. Для цього придумано безліч зручних текстових редакторів та IDE.
Текстовий редактор в основному надає інструменти для зручного написання коду, а IDE — це інтегроване середовище розробки, яке включає також інструменти для рефакторингу, налагодження та інтеграцію з іншими технологіями. Найбільш популярні рішення для фронтенд-розробника: редактор коду VS Code з плагінами та середовище розробки WebStorm. Програмістові досить вибрати програму, що більше сподобалася. У будь-якому випадку це спростить написання коду та розробку загалом.
Просунутий фреймворк: React, Angular або Vue
Зовнішній вигляд і функціональність сучасних сайтів набагато кращі, ніж у їх попередників. Через це складність розробки також вища, тому писати сайти лише на HTML, CSS, JavaScript недоцільно.
React, Angular та Vue.js – це UI-фреймворки, що дозволяють швидко створювати сучасні веб-сайти з великою функціональністю та адаптивністю. Кожен із фреймворків має свої плюси та мінуси, не так важливо, який саме буде обраний для вивчення. Всі вони актуальні зараз. Найкращим варіантом буде знайомство з кожним фреймворком та вибір того, який сподобався найбільше.
React
Дуже популярний у стартапах і для одиночної розробки, що також використовується великими компаніями. React орієнтований на функціональне створення компонентів, що надає розробнику велику кількість плагінів, що дозволяють побудувати будь-який веб-сайт. Він відносно легкий у вивченні, хоча велика кількість розширень може заплутати новачка.
Angular
Цей фреймворк є найстарішим і найбільше зазнав змін. Angular мабуть найуніверсальніших із трьох розглянутих технологій, в основному він використовується у великих проектах, дуже популярний в ентерпрайзі. Одна з його головних переваг – велика кількість інструментів із коробки. На жаль, фреймворк складний вивчення, що відштовхує більшість новачків.
Vue.js
Це наймолодший UI-фреймворк. Зараз він все ще продовжує набирати популярності. З одного боку, він найпростіший для вивчення, з іншого, не поступається у функціональності іншим рішенням (функцій з коробки менше, ніж у Angular, але більше, ніж у React). Фреймворк вирізняється гарною продуктивністю та масштабованістю. Хоча він має чудову документацію, туторіалів ще досить мало, тому для вирішення специфічних завдань доведеться витратити більше часу.
Тестування
Будь-який проект слід ретельно протестувати перед тим, як показувати його кінцевим користувачам. Для фронтендера тестування полягає у перевірці HTML коду, скриптів, запитів на сервер. Існує багато різних інструментів для тестування, які доведеться вивчити у майбутньому. На початковому етапі буде достатньо вбудованих інструментів браузера, що дозволяють переглянути властивості будь-якого елемента, зробити налагодження скриптів, протестувати запити на сервер та відповіді на них.
Крок 2: закріплення знань на практиці
Будь-які теоретичні знання повинні підкріплюватися практикою, інакше більша їх частина забудеться.
Найкраща практика для фронтенд-розробника – створення сайту. Скільки потрібно створити? Чим більше тим краще. Причому теорію та практику потрібно чергувати, тобто створювати чи доопрацьовувати сайт після вивчення кожної нової теми.
Проект 1: найпростіший односторінковий сайт
Перший сайт варто створити після вивчення HTML та CSS. Сайт має бути односторінковим та повністю статичним. На цьому етапі важливо закріпити основу.
Дотримуйтесь наступного алгоритму:
- Розробте 1 секцію сайту за допомогою розмітки float.
- Видаліть секцію, створіть загальний каркас сайту за допомогою Grid.
- Зверстайте кожну секцію за допомогою FlexBox.
- Виправте недоліки, спробуйте встановити різні стилі для елементів.
Також дотримуйтесь наступних рекомендацій:
- використовуйте спеціальні теги для секцій, меню, футера;
- звертайтеся до елементів через різні селектори, тобто не лише використовуючи ім'я класу;
- намагайтеся підбирати стилі так, щоб сайт виглядав гарно.
Проект 2: простий сайт із адаптивністю
Після вивчення адаптивності слід спробувати реалізувати її самостійно. Можна взяти за основу попередній розроблений сайт або зробити новий для додаткового тренування. Для тестування адаптивності потрібно використовувати спеціальний режим у браузері, що дозволяє змінювати розмір екрану, імітуючи різні пристрої.
Послідовно перевизначте стилі кожного екрана за допомогою медіа-запитів. Алгоритм має бути наступним:
- Перейдіть до спеціального режиму браузера для тестування адаптивності.
- Зменшуйте екран доти, доки елементи не «поїдуть», припустимо, до 960px.
- Перевизначте стилі в медіа-запиті: 960px та менше.
- Знову зменшуйте екран до проблем, наприклад, до 780px.
- Перевизначте стилі в медіа-запиті: 780px та менше.
- Повторюйте ці дії до ширини екрана 350px.
Проект 3: динамічний сайт зі скриптами та запитами
Розробте новий проект або візьміть за існуючий основу. Додайте скрипти на JavaScript двох видів: візуальні та із запитами. Візуальні скрипти можуть керувати слайдером, приховувати чи розкривати блоки, додавати різні ефекти. Скрипти із запитами повинні змінювати сторінку відповідно до результату запиту. На цьому етапі можна безпосередньо обробляти дані, вказані у самому скрипті у вигляді, наприклад, списку. Можна використовувати спеціальний сервіс, щоб імітувати запит на сервер.
Важливо навчитися працювати з даними за допомогою JavaScript та змінювати HTML-сторінку, використовуючи знання DOM.
Проект 4: багатосторінковий сайт
Багатосторінковий сайт слід писати після вивчення Bootstrap та препроцесорів CSS. Закріпіть усі знання, отримані раніше. Сайт має бути досить великий, щоб можна було відпрацювати не лише самі технології, а й уміння проектувати. Бажано зробити проект на 10-15 сторінок, кожна з яких буде мати унікальний дизайн, важливо наявність форм, кнопок, прихованих блоків, елементів AJAX, що динамічно оновлюються. Усі сторінки мають бути адаптивними. На розробку такого сайту піде щонайменше кілька тижнів.
Проект 5: сайт на UI-фреймворку
Після вивчення Angular, React або Vue.js необхідно закріпити отримані знання. Для цього розробіть багатосторінковий сайт, який буде відповідати сучасним стандартам. Придумайте креативний дизайн, цікаві функції, зробіть сайт адаптивним, постарайтеся досягти максимальної якості, щоби проект можна було використовувати в портфоліо.
Проект 6: повноцінний веб-сайт із серверною та клієнтською частиною
Візьміть за базу попередній розроблений веб-сайт. Знайдіть того, хто напише вам просту серверну частину або зробіть це самостійно. Тобто реалізуйте повноцінний функціонал клієнтської частини веб-сайту без будь-яких заглушок із взаємодією з сервером. Для створення найпростішої серверної частини знадобиться не більше години вашого часу та кілька гарних гайдів. Вам не потрібно працювати з базою даних або писати логіку, достатньо передати дані, визначені вручну, назад у клієнт.
Крок 3: отримання першої роботи
Робота в компанії та фріланс відрізняються один від одного не тільки форматом, а й необхідними діями для початку заробітку.
Робота в компанії: як влаштуватися
Якщо програміст влаштуватися на компанію, він матиме стабільний гарантований заробіток. Все, що від нього вимагається, виконувати свої робочі обов'язки. Початківців досить багато, тому на одну вакансію може претендувати кілька людей. Перший крок при влаштуванні на роботу – написати резюме. У ньому необхідно коротко розповісти про себе, свою освіту, досвід роботи (якщо він є і відноситься до спеціальності), знання технологій. Також слід дати посилання на свій GitHub, розповісти про свої проекти (розроблені сайти).
Важливо написати гарний супровідний лист, резюме та лист мають виділити вас серед інших кандидатів. В інтернеті безліч статей, в яких докладно описано, як краще їх скласти.
Слід знайти якомога більше вакансій та надіслати відгуки. У середньому відповідають на 1 з 5 відгуків, а ще потрібно пройти співбесіду, тому краще розіслати відгуки як мінімум в 10 місць, якщо є така можливість.
Отриманих вами знань за час вивчення теорії та розробки навчальних сайтів має бути достатньо, щоб пройти співбесіду на молодшого фронтенд-розробника. Якщо один раз не вийшло, спробуйте знову. Після невдалих співбесід ви точно знатимете, чого вам не вистачає. Отримайте знання і спробуєте ще раз через кілька місяців.
Фріланс: як почати заробляти
На фрілансі заробіток нестабільний і залежить лише від вас. З одного боку, ви самі визначаєте час та місце роботи, з іншого, потрібно знаходити замовлення, а на початковому етапі це дуже непросто. Використовуйте свої навчальні проекти як портфоліо, щоб замовники бачили ваш рівень. Спочатку занижуйте ціни або зовсім зробіть кілька замовлень безкоштовно. Шукайте замовників не лише через біржі фрілансу, а й у тематичних групах, чатах. Часто фахівці скидають замовлення на інших, оскільки самі не можуть їх виконати.
Чим вища ваша репутація, тим більшу ціну ви можете встановлювати. Крім того, фахівець легко знаходить замовлення, оскільки замовники самі пропонують їх йому.
ВИСНОВОК
Фронтенд-розробка – це одна з найперспективніших сфер веб-програмування. Щоб стати розробником, потрібно освоїти багато різних технологій, написати свої власні проекти та влаштуватися на роботу. У середньому новачкам вимагає від одного року, щоби пройти всі ці етапи.
