Може здатися, що професія HTML-верстальника не надто популярна в IT. Справді, частіше можна натрапити на вакансії UI/UX дизайнера. Та навіть обравши вузький напрям верстки сайтів, можна знайти цікаву роботу в довгострокових проєктах.


Які навички потрібні для старту, які найпоширеніші задачі доведеться вирішувати та чи важливо верстальнику сайтів розбиратися у програмуванні? 




Христина Лозова, Front-end Developer, менторка за напрямком HTML-верстки в команді NIX


Чим займається верстальник


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


До основних задач HTML-верстальника відносять:


    

  • Забезпечити адаптивність верстки
    • 



Тобто коли макет сайту адаптується під різні екрани. Сторінки мають гарно і зрозуміло виглядати на всіх пристроях: на смартфоні, планшеті, моніторі комп’ютера чи ноутбука з різним розширенням екрана.


    

  • Забезпечити кросбраузерність верстки
    • 



Сайт повинен однаково виглядати в усіх браузерах. Для цього верстальник налаштовує інтерфейс під візуальні особливості популярних браузерів: Safari, Chrome, Opera, Firefox, Edge.


    

  • Оптимізувати завантаження сторінок
    • 



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


Грамотний підхід у цих питаннях безпосередньо впливає на показники сайту: SEO та Accessibility. За цими параметрами визначають, чи добре сайт оптимізований, чи ні.


    

  • Верстати PDF-документи та листи для email-розсилок
    • 



Це завжди плюс для наочної презентації продукту, проєкту, певної ідеї чи новин компанії.


    

  • Робити динамічні сторінки через JavaScript
    • 



Зазвичай верстальник створює доволі прості JS-сценарії. Наприклад, для анімації інтерфейсу, підключення та роботи з JS бібліотеками (для слайдерів, графіків, карт тощо), для створення таких компонентів, як: модальні вікна, тултіпи, списки, що розкриваються (так звані «‎акордеони»‎).


    

  • Усувати баги на верстці
    • 



Для цього багато чого треба знати і з дизайну, і з розробки. Наприклад, розуміючи підходи accessibility, верстальник може ґрунтовно обговорити з UX/UI дизайнером, що в його макеті краще переробити, аби сайтом могли вільно користуватися люди з різними фізичними можливостями та потребами. Щоб сайт був однаково зручним, скажімо, і для тих, хто працює зі смартфоном однією рукою, і для тих, хто погано бачить чи має дальтонізм.


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


Технічний бекграунд HTML-верстальника


Я б розділила всі знання на дві групи. Перша — це розуміння базових тем та інструментів, які знадобляться вже на початку роботи.


    

  • HTML5 — мова розмітки сторінок сайту. За допомогою тегів h1, h2, h3 ми виокремлюємо заголовки і підзаголовки, а для фотографій використовуємо тег img.
    • 

  • CSS3 — актуальна версія мови написання стилів. Якщо вивести в браузері HTML-код, ви побачите «голий» текст із картинками без красивого оформлення. Тут усе довершать стилі. Вони підпорядковують розташування блоків, додають колір та все інше відповідно до макета.
    • 

  • JavaScript — мова для створення динамічних об’єктів. Завдяки JS-скрипту кнопка меню змінює свій вигляд після кліку або при наведенні на неї курсором. Принцип роботи слайдерів, коли декілька фото згортаються в один блок, теж реалізується через JS.
    • 

  • GIT — система контролю версій, мастхев для командної роботи. Над створенням сайту працює не лише верстальник. Інші спеціалісти також можуть одночасно вносити правки в проєкті. GIT дозволяє контролювати всі зміни та поєднувати їх в одну сутність.
    • 

  • Development Console — консоль у браузерах, в якій можна досліджувати роботу верстальника. Уявімо, що створена кнопка виглядає не так, як задумано. Для виявлення причини відкриваєте консоль розробника, обираєте елемент та отримуєте інформацію про кнопку: її HTML-код, стилі, підключення JS тощо.
    • 

  • Графічні редактори. Верстальник повинен мати хоча б базовий досвід роботи з програмами для створення макетів. Найпоширеніші з них — Photoshop, Sketch, InVision, Figma. Та не обмежуйтесь ними. Порадьтесь із дизайнерами, порівняйте різні програми й оберіть те, що ближче вам.
    • 



Окремо хочу виділити знання англійської мови. Рівень від Pre-Intermediate допоможе при читанні фахової літератури, технічної документації по проєкту та й при використанні програм. Без розуміння інглішу background color буде просто набором слів, а з ним — чіткою вказівкою на те, що ви змінюєте у верстці.


Щодо класичної технічної освіти, то вона не обов’язкова, але як і будь-де в IT, буде великим плюсом. Особисто в мене диплом економістки.


Друга група знань дозволяє покращувати набуті навички та професійно зростати:


    

  • Препроцесори — це розширення в мові CSS3, які додають програмну логіку. Найбільш популярні SASS/SCSS. Припустимо, у вас є кілька елементів зі схожим стилем. З препроцесорами не треба писати багато коду. Достатньо в меншому елементі викликати фрагмент коду і дописати властивості, яких не вистачає.
    • 

  • Інструменти збірки проєктів — для автоматизації процесу роботи. Можете спробувати Gulp і webpack. Якщо вам потрібно об’єднати файли стилів в один, це можна зробити вручну. Але простіше викликати спеціальну команду в модулі, яка все виконає самостійно. Подібні інструменти стануть у пригоді й для мінімізації файлів. Стиль може містити 120 рядків коду, а для швидкості браузера краще мати, наприклад, 5. Інструмент скомпонує код по одній команді.
    • 

  • Методології верстки. Це правила неймінгу класів, серед яких найвідомішими є БЕМ та Atomic CSS. Назвати один клас «прикольна кнопка», а інший — «не дуже прикольна кнопка» — так собі ідея. Продуманий неймінг структурує код і допомагає різним верстальникам та іншим учасникам команди зрозуміти ваш хід роботи.
    • 

  • HTML-шаблонізатори проєктів. Це бібліотеки з маркапом такі, як PUG.
    • 

  • CSS-фреймворки — Skeleton, Bulma, Bootstrap. У них є певні класи і набори стилів, які можна відразу застосувати в проєкті, а не писати код з нуля.
    • 

  • JS-бібліотеки. З ними легше і швидше писати JS-логіку. Основна бібліотека — jQuery. У неї зрозумілий синтаксис і багато плагінів. Наприклад, для створення слайдера є slick/swiper, для інтеграції мапи підійде Leaflet/Google Maps, а для графіків — Chart.js. І все вже готово до використання.
    • 

  • Основи accessibility. Я вже згадувала про це, але варто наголосити. Раджу регулярно знайомитись із різними підходами та інструментами, які покращують цей важливий параметр функціональності сайту.
    • 



З чого почати кар’єру верстальника?


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


Спершу проаналізуйте, як розбити макет на компоненти: кнопки, слайдери тощо. Для кожного треба знайти стиль, а блоки оформити тегами. Йдіть зверху сторінки донизу та робіть маркап, що виступатиме каркасом майбутньої сторінки. Потім по черзі виводьте елементи, стилізуйте їх, додавайте скріпти для інтерактиву. Це все підключається в HTML-файлі. Його можна відкрити у браузері, щоб одразу бачити, чи йдете ви за планом. Проблеми досліджуйте в консолі розробника. Вона підкаже, що, наприклад, відсутність забарвлення кнопки викликана проблемою в стилях.


Проте не кваптесь занурюватись у тему. Розберіться для себе: чи взагалі це «‎ваше»‎? Подивіться туторіали про створення розмітки. Робота доволі тривала, монотонна. Ви використовуєте одні й ж самі інструменти за шаблоном дизайнера. Декому це видається нудним. Та насправді в професії верстальника широкий простір для розвитку. З отриманням нових навичок у вас з’являтимуться цікавіші, подекуди складні, але не менш захопливі та творчі завдання.


Верстальник — це відносно проста для опанування професія. За бажання для вивчення основ вистачить і пів року. Свого часу я теж починала розбирати HTML-верстку самотужки, але швидко збагнула: в голові лишається сама каша. Тому пішла на курси. Під час навчання в мене вийшло розкласти все по поличках і зі структурованими знаннями успішно пройти співбесіду на першу роботу. Хоча, може, вам вдасться набагато швидше. Тут у кожного свій шлях. Головне — чітко ставити ціль і впевнено рухатись до неї. Успіхів вам!


Читайте ще: Фандрейзер: чому цей спеціаліст усім потрібен та як ним стати?