В інтернеті багато статей на тему front-end розробки. В одних пишуть про навички верстки макетів, в інших додають JavaScript, а в третіх говорять про володіння серверними мовами. Так хто ж такий фронтенд-розробник і що він робить у компаніях? Про це розкажемо в статті.
Front-end — це те, що ми бачимо в Інтернеті
Уявіть будь-який сайт чи мобільний застосунок. Наприклад — кулінарний блог. В ньому можна прочитати статті, подивитись відео з рецептами. Або натискати на кнопки та посилання, щоб перейти до інших сторінок.
При цьому, блог виглядає гарно: вгорі меню, адаптоване для користувача — сайт розділений на категорії з власними статтями. А при переході на статтю можемо бачити текст, ілюстрації, блоки з порадами та посилання на інші статті.
Все це — Front-End. Це те, що ми бачимо у Web. Сюди входить інтерфейс та контент. Під інтерфейсом вважається все, з чим можна контактувати та отримати результат: анімацію, перехід на іншу сторінку, відображення певного меню. Це кнопки, форми, навігація, посилання та інші інтерактивні елементи.
Контент — все, що можна побачити і прочитати. Для кулінарного блогу це будуть не лише статті та відео. Написи на кнопках і категоріях меню — теж контент.
Front-end розробник відповідає за те, щоб інтерфейс та контент поєднались в веб сайті чи мобільному застосунку. Він перетворює заздалегідь заготований дизайн в код. Цей код зчитує двигун — браузер або платформа для мобільних додатків. І весь код перетворюється на картинки, відео та тексти.
Чим займається Фронтенд-розробник
Базові задачі можна розділити на три важливих інструменти:
- HTML — базова розмітка сторінки у Web. Перед тим, як оформити дизайн, потрібно правильно розмістити елементи.
- CSS — наповнення документу стилями. Розробник задає кольори, фон, кордони елементів. Правильно розташовує їх за розміткою дизайну. Також перетворює дизайн у адаптивний: щоб він правильно відображався як на ПК, так і на найменших телефонах.
- JavaScript — мова програмування для інтерфейсу та інтерактивних елементів. Використовується постійно: для анімацій, переходів, відкриття форм та для інших завдань, де потрібно взаємодіяти з інтерфейсом.
Ви могли чути ще про таку професію, як верстальних. Це людина, яка знає HTML\CSS — може перенести дизайн і розмітку web-проекту. Але спеціаліст не працює із JavaScript, або користується ним мінімально.
Верстальники користуються попитом там, де не потрібен важкий код для інтерфейсу та анімації. Наприклад, щоб перенести простий односторінковий сайт на сервер.
Front-end не створює дизайн та вигляд інтерфейсу
Головний стереотип в тому, що фронтендери роблять дизайни сайтів або мобільних застосунків. Вони можуть самостійно продумати розміщення елементів чи контенту. Це лише частково правда.
Щоб створити веб сайт чи застосунок, потрібна реалізована ідея: макет з інтерфейсом та дизайн. Першим займається UX-дизайнер, а другим — web-дизайнер. Розробник виключно переносить дизайн в код і робить так, щоб він коректно відобразився на будь-якому пристрої.
Єдине виключення — Front-end може самостійно продумати розміщення елементів для мобільних пристроїв.
Наприклад, дизайнер зробив макет виключно для комп’ютерів. Адаптивні версії не створив. Тоді розробник на основі дизайну ПК самостійно розробляє адаптивні версії сайту. Але для цього потрібен готовий інтерфейс та блоки хоча б для одного з існуючих видів екрану: ПК, ноутбук чи мобільний телефон.
На курсах Front-end розробки в IT STEP вчать фронтендерів, які можуть самостійно створювати web-проекти, відповідати за адаптивні дизайни та допомагати клієнтам в продуктах, де зекономили і виготовили лише один варіант макету. Доєднуйтесь!