У більшості професій, особливо в IT-сфері, визначальним фактором карʼєрного зростання вже давно не є диплом про вищу освіту. Набагато важливішими є блиск в очах і щире бажання розвиватися у своїй справі.
Верстальники найчастіше починають з проходження курсів, а далі вже справа за досвідом та швидкістю роботи. І щоб стати затребуваним фахівцем у цій галузі, не завадить мати під рукою список інструментів, які стануть вашими помічниками та просуватимуть вас уперед.
Робоче місце
Перше, що може допомогти або навпаки — завадити вам у системній роботі — це ваше робоче місце. Облаштуйте його так, щоб працювати було в задоволення. Щоб кожен проєкт приносив натхнення.
У кожного тут свої вподобання. Комусь потрібен рудий кіт, що тихенько сопе біля клавіатури. Комусь — heavy metal у навушниках і напівтемрява в кімнаті.
Якщо говорити про технічний бік, то з перших днів роботи варто мати два монітори. Це розширює робочий простір і робить процес зручнішим — не потрібно постійно перемикатись між вікнами.
Шпаргалка з HTML-тегів
Шлях кожного верстальника починається з вивчення мови розмітки HTML. Основна її складова — це тег.
Ви, мабуть, уже знаєте, що існує понад 100 тегів. Але не варто панікувати — вивчати всі напам’ять не потрібно. Близько 50–60 % з них не використовують навіть досвідчені верстальники.
Усе, що потрібно — раз переглянути повний список, щоб розуміти, що існує. А потім користуватись шпаргалкою, яку можна знайти тут. Через кілька місяців активної роботи ви запам’ятаєте найпотрібніші теги, а решта — можливо, й не знадобляться.
Семантика коду
HTML5 визначає тип контенту в тегах і його роль на сторінці. Згідно зі специфікацією, кожен елемент належить до певної категорії (текстовий, заголовковий, потоковий, інтерактивний тощо).
Семантичний код допомагає пошуковим системам зрозуміти важливість контенту і вивести сайт у топ видачі. Тож, використовуючи семантичні теги HTML5, ви допомагаєте пошуковикам краще читати вашу сторінку.
Семантичні теги самі по собі не зроблять прориву в SEO, але вони — важливий елемент оптимізації.
Pixel Perfect
Pixel Perfect — це метод верстки, коли HTML-шаблон точно відповідає PSD-макету. Якщо накласти зображення на верстку — вони повинні повністю співпадати.
Є однойменне розширення для Google Chrome, яке допомагає звіряти верстку з дизайном. Встановіть його і перевіряйте відповідність у будь-який момент.
CSS та HTML препроцесори
Препроцесор — це програма, що спрощує написання коду, роблячи його валідним, структурованим і логічним.
Щоб використовувати препроцесори, потрібно встановити програму. Вона стежитиме за спеціальними файлами і компілюватиме їх у чистий код.
Найпопулярніші CSS-препроцесори:
Один із найвідоміших HTML-препроцесорів — Pug.
Опановується все це лише одним способом — методом проб і помилок.
Автопрефіксери
Перед тим як говорити про автопрефіксери, варто пояснити, що таке префікси.
Префікси додаються до CSS-властивостей, щоб вони підтримувалися у певних браузерах (наприклад, -webkit- для Chrome, Safari, Opera).
Автопрефіксер — це інструмент, який автоматично додає необхідні префікси до властивостей, які не підтримуються в окремих браузерах.
Його використання значно спрощує життя розробнику.
Оптимізація зображень
Цю тему не варто відкладати. Зображення є в кожному проєкті.
Оптимізація зменшує розмір файлів і прискорює завантаження сайту.
Для цього використовують спеціальні онлайн-сервіси. Ви завантажуєте картинку — отримуєте зменшену без втрати якості.
Онлайн-сервіси для оптимізації зображень:
Task-менеджери
На будь-якому етапі свого розвитку верстальник повинен думати про оптимізацію своєї роботи.
Один із найефективніших інструментів — task-менеджер. Це збирач проєктів, який може:
– компілювати файли SASS, LESS;
– додавати автопрефікси;
– стискати JS-файли та зображення тощо.
Оберіть зручний для себе — Gulp, Grunt, Brunch. Ознайомтесь з кожним і оберіть те, що пасує вам.
Використання готових рішень
На багатьох сайтах є подібні елементи — меню, форми, навігація. Щоб не створювати їх щоразу з нуля, використовуйте готові шаблони. Вони легко налаштовуються та змінюються.
Наприклад, на nisnom.com є безліч таких рішень: кнопки, бургер-меню, підказки тощо.
Перевірка кросбраузерності
Кросбраузерність — це правильне відображення сайту у різних браузерах. Відповідальність за це лежить на верстальнику. Не сподівайтесь на удачу — перевіряйте до здачі проєкту.
Онлайн-сервіси для перевірки кросбраузерності:
Технологія CSS Grid
Ця технологія скоро стане стандартом. Grid — це сітка, що дозволяє розміщувати елементи у рядках та колонках.
CSS Grid застосовують для позиціонування елементів та створення адаптивних макетів.
Додавання динамічних карт
Динамічні карти трапляються на сайтах так само часто, як і зображення. Тож обовʼязково навчіться додавати їх.
Це не складно: заходите на сервіси від Google або Яндекса, створюєте карту, отримуєте код (iframe або script) — і вставляєте його в HTML.
Майстер-класи з верстки
На це можна дивитись вічно — як верстають інші. А якщо відео зняте досвідченим фахівцем з якісними поясненнями — це величезна користь.
Андрій Гаврилов, засновник WAYUP, на своєму YouTube-каналі проводить онлайн майстер-класи з верстки з нуля. Приєднуйтесь — навіть якщо тільки замислюєтеся над цією професією.
Ігри для верстальників
Щоб набути практичних навичок верстки, необовʼязково монотонно писати код. Це можна робити у форматі захопливих ігор. В інтернеті є браузерні ігри навіть для дітей або новачків.
Огляд таких ігор ви знайдете у нашій статті.
Зворотний звʼязок
Не важливо, працюєте ви в офісі чи віддалено — ви частина команди. І навіть якщо ви новачок, не бійтеся ділитися думками з веб-дизайнерами та менеджерами.
Кожну задачу у верстці можна вирішити кількома способами. І цілком можливо, саме ваш варіант стане найкращим.
Якщо ви будете взаємодіяти з колегами та слухати одне одного — це допоможе злагоджено працювати і приноситиме користь і команді, і клієнтам.
Карʼєрний і професійний шлях зможе пройти лише той верстальник, який любить свою справу, відповідально ставиться до кожного проєкту і трохи страждає на перфекціонізм.