Привіт! Вітаємо на першому уроці з фронтенд-розробки.

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

Що таке фронтент

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

Фронтенд — це та частина розробки продукту, яка забезпечує взаємодію користувача з інтерфейсом. Це той шар, який бачить користувач, коли взаємодіє з вебсайтом, мобільним додатком або будь-яким іншим продуктом. Фронтенд-розробники займаються розробкою саме цієї частини продукту і відповідають за ефективну реалізацію візуальних компонентів сайту чи додатка. 

‍

Чим займаються фронтенд розробники

Загалом до обов’язків фронтенд-розробників належить відтворення дизайну вебсайту, зовнішнього вигляду, навігації, кнопок. Коли дизайнери створили макет сайту в дизайн-інструменті (найчастіше це Figma), він переходить до фронтенд-розробників, які перетворюють його в код і роблять можливою взаємодію з користувачами.

Основна мета розробки будь-якого вебсайту полягає в тому, щоб користувачі могли бачити певну інформацію в зручному для читання форматі. Проте цю просту й зрозумілу ціль інколи складно реалізувати, адже користувачі вебсайтів використовують різні типи пристроїв (мобільні телефони, ноутбуки, персональні комп’ютери та планшети) з різними розмірами екранів.

Фронтенд-розробники мають розробляти сайти і додатки так, щоб вони коректно відкривались у різних браузерах (Google Chrome, Safari тощо) і різних операційних системах (Windows, MacOS, Linux, iOS, Android). Тобто те, що створюють фронтенд-розробники повинно бути кросплатформним. В цьому і полягає складність і водночас цікавість роботи з фронтендом — ти матимеш тестувати дизайн на різних комбінаціях ОС, браузерів і пристроїв, щоб сайти і додатки працювали однаково в різних умовах. 

Основна зброя фронтенд розробників: HTML, CSS, JavaScript та фреймворки

Погляньмо тепер, яке місце займає фронтенд у програмах. Коли ти завантажуєш вебсторінку у браузер, код надсилається з вебсервера на пристрій-клієнт, який запитує цю сторінку. Надісланий код створює користувацький інтерфейс, який відображається у браузері. Цей код є сумішшю вебтехнологій HTML, CSS та JavaScript, необхідних, щоб вебсайт виглядав привабливо і працював правильно.

Круто, а що це за вебтехнології? Це власне основний інструментарій фронтенд-розробників:

• HTML (HyperText Markup Language) — це стандартна мова розмітки, що використовується для створення структури та макетів вебсторінок. Ось як типово виглядає сайт написаний лише за допомогою  HTML:

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

• Виглядає набагато краще, чи не так? Та це ще не все! Щоб трохи “оживити” наш сайт і додати йому інтерактивності використаємо JavaScript (коротко JS). JavaScript — це мова програмування, яка дозволяє розробникам додавати інтерактивність, анімацію та інші динамічні елементи до вебсайтів і вебдодатків.

• Окрім HTML, CSS та JS, фронтенд-розробники також можуть використовувати бібліотеки та фреймворки, як-от React, Angular або Vue.js, щоб оптимізувати свою роботу і створювати складніші інтерактивні інтерфейси.

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

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

Як працюють фронтенд-розробники?

Нумо детальніше розберемо, що саме роблять фронтенд-розробники протягом робочого дня.

• Well, перш за все, пишуть код — використовуючи HTML, CSS, JS та різні фреймворки;
• Перетворюють дизайн (макет, створений у Figma) у справний сайт;
• Виправляють свої помилки, коли функціонал протестований тестувальниками;
• Керують контентом на справному сайті/в додатку, змінюють дизайн-рішення за потреби, аналізують як працює сайт тощо;
• Шукають шляхи, щоб сайт працював швидше й ефективніше (процес покращення коду зветься рефакторинг).

Яких результатів очікують від фахівця?

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

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

Як виглядає типовий день фронтенд-розробників?

Розпорядок дня, як правило, гнучкий, а робота може виконуватись віддалено. Більшість завдань вирішується у хмарних сервісах та програмах, спілкування з командою може відбуватися в Zoom, Microsoft Teams чи Google Meet. Це застосовно до ІТ-галузі загалом, не лише до фронтенду.

А ось які активності можуть відбуватися протягом дня:

• Перевірка інформації: Фронтенд-розробники можуть почати свій робочий день з перегляду новин, оновлень технологій та документації проєктів, над якими працюють.
• Зустрічі: Фронтенд-спеціалісти можуть брати участь у зустрічах з командою, де обговорюється стан проєкту, визначаються пріоритети, обговорюються нові функціональні вимоги або проблеми.
• Розробка: Фронтенд-спеціалісти працюють зі своєю командою над розробкою інтерактивної частини вебдодатків або вебсайтів. Вони створюють HTML і CSS розмітку та JavaScript-код, розробляють та налаштовують бібліотеки і фреймворки, щоб забезпечити коректну роботу вебдодатка на різних пристроях.
• Тестування: Після розробки фронтенд-спеціалісти перевіряють вебдодаток або вебсайт на різних пристроях та браузерах, щоб виявити та виправити можливі проблеми.
• Код-рев’ю: Фронтенд-спеціалісти також можуть брати участь у код-рев’ю (перегляді й аналізі коду) з іншими членами команди, щоб забезпечити відповідність коду до кращих практик і стандартів кодування.
• Оновлення та збірка: Фронтенд-розробники проводять оновлення вебдодатків та вебсайтів і збірку коду, щоб забезпечити їх безперебійну роботу.
• Комунікація: Фронтенд-спеціалісти можуть брати участь у комунікації з командою, а інколи навіть з замовником проєкту.

Чому фронтенд?

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

І ще один крутий бонус — фронтенд-розробники можуть працювати з різними типами проєктів (як-от вебсайти, мобільні додатки, ігри тощо)​ та в різних бізнес-доменах. А бізнес-домен — це галузь, в якій функціонує бізнес. 

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

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

Кому підійде така спеціалізація?

З технічної точки зору, спеціалізація фронтенд-розробника вимагає глибоких знань HTML, CSS та JavaScript, а також навичок роботи з бібліотеками та фреймворками, як-от React, Angular та Vue. Та самого лише опанування їх замало для успішної роботи у фронтенді. Вправним фронтенд-розробником може стати людина зі схильністю до аналітичного мислення, адже тут необхідно вміти аналізувати й розв’язувати складні завдання.

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

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

Твоє середовище для програмування

Для написання коду фронтенд-розробники використовують спеціальні програми — редактори коду (також їх називають “середовищем розробки”). Такі програми мають багато корисного функціоналу і дозволяють писати код швидко та зручно. Насправді ти можеш кодити будь-де, навіть у стандартному “Блокноті” — та це не надто зручно, бо код виглядатиме як простий текст. Натомість середовища розробки підсвічують частини коду, дозаповнюють певні елементи тощо.

Для швидкого старту є ще один варіант — скористатися online-редактором. В нього є низка переваг: 

• не потребує встановлення будь-якого додаткового програмного забезпечення на комп’ютер;
• одразу бачитимеш результат своєї роботи;
• є підсвітка коду;
• можна відправити посилання на свою роботу друзям.

З таким сервісом ми сьогодні і працюватимемо. Він зветься codepen.io — і щоб почати їм користуватись, треба зареєструватися за допомогою облікового запису Google.Після реєстрації ти можеш створити свій перший документ (“Pen”) та спробувати написати перші рядки коду. Та перш ніж пірнути в кодування, погляньмо спершу, що таке теги і як побудовані HTML-документи.

Готуємо робочий простір

Якщо ще не зареєструва_лась на codepen, переходь за посиланням: https://codepen.io/ і натисни “Sign Up” або “Sign Up for Free”.

Або ж можна одразу перейти на сторінку реєстрації за посиланням: https://codepen.io/accounts/signup/user/free/

Якщо в тебе є обліковий запис Google або сторінка на Facebook, радимо використати можливість реєстрації за допомогою цих сервісів. Для цього натисни “Sign Up with Google” або “Sign Up with Facebook”.

В іншому разі можна зареєструватись за допомогою електронної скриньки. Натисни “Sign Up with Email” — і тоді з’явиться форма, де треба вказати своє ім’я, ім’я користувача (username), адресу поштової скриньки та вигадати пароль.

Зверни увагу, що всі поля обов’язкові для заповнення, username повинен бути унікальним та містити виключно латинські літери та цифри (всі інші символи автоматично замінюються на знак “-”).

З паролем умов трохи більше. Він повинен:

• містити будь-яку літеру в ВЕРХНЬОМУ та будь-яку літеру в нижньому регістрі;
• містити будь-яку цифру;
• містити один або декілька спеціальних символів: @$!%*#?&><)(^-_
• довжина пароля від 8 до 100 символів.

Після вдалої реєстрації автоматично відкриється новий “pen” та запуститься короткий тур ознайомлення з сервісом. Радимо витратити 2 хвилини та пройти його. Або ж можна закрити віконце хрестиком у правому верхньому кутку.

Якщо ти проходитимеш знайомство, далі, будь ласка, видали все зі вкладок HTML, CSS та JS. У тебе повинен бути чистий “pen” на початок виконання практики.

‍

Ми в Академії віримо, що кожен може знайти ідеальну кар’єру для себе, а також в те, що борщ — це найсмачніша у світі страва (не дарма ми “бурякова” Академія). Тож використаємо аналогію борщу (ідеальної персональної кар’єри) для пояснення практичних завдань (так, ми не шукаємо легких шляхів).

Отже, щоб знайти свій ідеальний борщ (персональну кар’єру) треба:

По-перше, спробувати різні борщі та дізнатись, які з них тобі до смаку: зелений (QA Manual), пісний (UI/UX дизайн), з грибочками (Front-End розробка) чи якийсь інший? Ти вже це робиш, проходячи цей курс.

Для цього проведи рефлексію над прочитаним матеріалом: 

1. Чи збігається твоє уявлення про роботу фронтенд-розробників із тим, що описано у цьому уроці?

2. Чи сформувалось уявлення про роботу фронтенд-розробників після проходження уроку?

3. Чи з’явилось бажання попрактикуватись у цій галузі? Якщо так, чекаємо на тебе у наступному уроці. Якщо ні, спробуй поцікавитись іншими напрямами. В цьому курсі ми розповідаємо про:

• проєктний менеджмент в ІТ;
• UI/UX дизайн;
• python-розробку;
• тестування програмного забезпечення.

4. Які аспекти професії фронтенд-розробника тебе найбільше зацікавили? 

5. Чи допоміг цей урок зрозуміти, які навички необхідні для фаху фронтенд-розробника?

По-друге, потрібно зрозуміти, які інгредієнти є вже в тебе на полиці (власне персональні якості в тобі) і як їх заміксувати для борщу (кар’єри), що тобі подобається. 

• Спочатку перевірити полиці і зрозуміти, що на них є (пройти тест на персоналії і ще раз прорефлексувати над тим, хто ти і які в тобі є визначні риси; орієнтовно звірити, наскільки вони поєднувані з кар’єрою мрії);
• Можливо треба ще щось докупити (прокачати не наявні навички, а, скажімо, посидючість)? 
• Або можливо щось розморозити з холодильника (наприклад, для кар’єри мрії треба вміння впевнено комунікувати з незнайомими людьми — а це вже тобі притаманне. Тож виглядає, що майбутня професія вже тобі до снаги).

А для цього зроби ось такі кроки:

1. Пройди ось цей тест, що визначить яка з 16 персоналій твоя*. 
2. Після цього прорефлексуй, наскільки отриманий результат здається тобі точним. Чи справді ця персоналія про тебе? Чи було там зазначене те, що ти і так знаєш про себе? Можливо щось було нове?

*Загальні відповіді за типом персоналії будуть українською, але детальні описи, на жаль, лише англійською.