10 найкращих інструментів для HTML-верстки

Джерело фото: http://surl.li/flxkt

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

★ Редактори коду та плагіни до них ★

Без редактора коду не зверстати сайт. Це основний інструмент верстальника. Він дозволяє писати код десяткою мов програмування, підсвічувати синтаксис, вирівнювати код, тестувати його (іноді у редакторі), пушить в репозиторій гітхаба. Який із редакторів обрати — справа смаку. Найпопулярніші: VSCode, Sublime Text, Brackets, Atom. Всі сучасні редактори коду мають приблизно однаковий функціонал, дозволяють працювати з Git і встановлювати доповнення. А ось плагіни до редакторів можуть сильно полегшити життя верстальнику.

1. Emmet

Працює практично з будь-яким редактором коду. У VSCode, наприклад, його навіть не треба спеціально встановлювати: він уже вбудований у його функціонал.

Цей плагін здатний значно скоротити розробнику кількість написаного тексту. Emmet перетворює короткі абревіатури на шматки коду HTML. З ним можна швидко побудувати структуру сторінки, написати список із безлічі елементів, таблицю, кілька вкладених один одного блоків разом із класами. І ніяких більше забутих дужок в кінці! Усі теги, що закриваються, з’являться автоматично.

Також Emmet може написати префікси для кросбраузерної верстки і навіть згенерувати "Lorem ipsum" потрібної довжини.

2. Prettier

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

3. Live Server

Плагін дозволяє не перезавантажувати сторінку браузера щоразу, коли ви внесли зміни до коду html. Він буде стежити за всіма змінами у ваших файлах і миттєво показувати результат у браузері. Дуже зручно, коли треба внести незначні зміни у стилях або, навпаки, перебудувати структуру блоків і вирішити, чи варто залишати зміни.

★ Браузерні доповнення ★

Браузер — ще одна річ, без якої робота верстальника немислима. Звичайно, у вас має бути кілька браузерів для перевірки кросбраузерності верстки. Найзручніше користуватися Google Chrome або Mozilla Firefox: по-перше, це найпопулярніші браузери, і по-друге, до них існує безліч цікавих доповнень, у тому числі для розробників.

4. CSS3 Generator

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

5. ColorZilla

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

Ще одна корисна фіча — доступ на сторінку генератора градієнтів від ColorZilla в один клік. Цей сайт дозволяє швидко та легко створити кросбраузерний код для градієнта будь-якої складності.

★ Онлайн-інструменти ★

Розробники вигадали безліч інструментів, доступних онлайн. Деякі з них є незамінними для роботи, інші полегшують роботу, деякі служать просто для розваги або натхнення.

6. Google fonts

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

7. Font Awesome

Незамінний інструмент, якщо до вашого сайту потрібно додати іконки. Font awesome — колекція векторних іконок, які можна вставити на сайт як шрифт. Векторні іконки — це такі, які можна масштабувати до будь-якого розміру. І значить, що вони будуть чудово виглядати і на retina-дисплеях, що вимагають високої роздільної здатності графіки. Їх легко підключити та легко налаштувати: розмір, колір, тінь — всі властивості можна прописати в CSS, як для звичайного шрифту.

8. Пісочниця коду

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

У пісочниці можна писати або редагувати код і бачити зміни в режимі реального часу. Можна поділитися посиланням на роботу, а інший розробник побачить одночасно і код, і результат. Також у пісочниці можна працювати над чужим кодом, форкнувши його до себе. Codepen, окрім роботи над власним кодом, дозволяє набратися ідей та натхнення і навіть взяти участь у колективних челенджах. Проекти Codepen публічні, і в інтерфейсі можна бачити роботи інших користувачів та шукати цікаві піни за ключовими словами.

★ Перевірка якості коду ★

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

9. Perfect Pixel

Популярний інструмент для перевірки якості верстки та відповідності її макету. Існує як додаток для будь-якого браузера. Perfect Pixel дозволяє додати на сторінку jpg із макетом окремим напівпрозорим шаром. Таким чином, можна порівняти точність вашої верстки та її відповідність задуму дизайнера.

10. Валідатор

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

Джерело: http://surl.li/flxkg
Переклад українською мовою: Аліна Берестень
Адміністратор: Дмитро Берестень