Що потрібно знати про якісну верстку?

Між розробкою дизайн-макета та запуском сайту стоїть ще один важливий етап – верстка. Тобто створення структури сторінки на основі HTML-розмітки та CSS-стилів. По суті, ви прямо зараз бачите результати роботи верстальника — сторінку, блоки, зображення, шрифти та інше.

Вважається, що верстка - одна з основ frontend-розробки в принципі. І що освоїти її дуже нескладно. Це правда, навчання верстці — один із порівняно простих, але дуже важливих та популярних напрямків. Ми можемо підтвердити це на власному прикладі, адже курс «Frontend розробка 2022. Junior верстальник» — один із найбільш затребуваних у Wezom Академії.

Однак, незважаючи на «простоту», верстка має свою специфіку. Якісна верстка від неякісної відрізняється дуже сильно. І саме про це сьогодні йтиметься.

Критерії якості верстки у 2022 році

Давайте уявимо, що маємо справу з верстальником-початківцем, який освоїв тільки HTML і CSS, а також на мінімальному рівні JavaScript. За якими критеріями ми можемо оцінювати верстку у разі? А які з цих критеріїв ви можете використовувати особисто, щоб оцінювати власні результати роботи? Їх насправді досить багато. Перелічимо основні!

• Критерій №1. Кросбраузерність

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

• Критерій №2. Використовувані технології

У «класичному» варіанті верстальник використовує лише інструменти HTML і CSS, а також незначно JavaScript. Спочатку корисно навчитися верстати без допоміжних інструментів, щоб краще розуміти логіку процесу, а не просто використовувати готові рішення.

• Критерій №3. Відповідність розмірів сторінки

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

• Критерій №4. Переповнення

Жодні елементи сторінки не повинні виходити за її межі та «випадати» з поля зору користувача. Текст, зображення, кнопки - всі вони можуть переноситися на наступний рядок, але в жодному разі не виходити за рамки батьківського елемента.

• Критерій №5. Робота зі шрифтами

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

• Критерій №6. Використання Pixel Perfect

Pixel Perfect – це техніка верстки, при якій зверстана сторінка максимально збігається з макетом. Буквально піксель у піксель. Допускаються лише незначні похибки: відмінності у відображенні шрифтів через особливості згладжування на різних платформах, а також невідповідність до 5px по висоті на відстані понад 30px і 2px — по ширині.

• Критерій №7. Відповідність стайлгайду

Стайлгайд - це документ, який містить зведення правил, стандартів та практик для реалізації проекту. У нашому випадку – верстки. Стайлгайд є однією з найпріоритетніших частин проекту, яку необхідно слідувати на 100%.

• Критерій №8. Взаємодія з елементами сторінки

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

Що повинен знати верстальник?

Існує досить великий набір інструментів, якими повинен достатньо володіти верстальник:

• Мови розмітки HTML та CSS. Це основні інструменти, з якими верстальник має працювати постійно. За допомогою HTML він складає структуру сторінки, а за допомогою CSS реалізує оформлення.
• Фреймворки HTML/CSS. Вони допомагають спростити і прискорити процес верстки, автоматизуючи ряд процесів і позбавляючи верстальника зайвих дій.
• Графічні редактори: Photoshop та Figma. У графічних редакторах верстальник аналізує макет і з нього може «витягувати» зображення, іконки та інше.
• Бібліотека шрифтів. Незамінна річ у верстці. Серед найпопулярніших бібліотек шрифтів можемо назвати Google Fonts та Font Squirrel.
• Система контролю версії Git. Корисний інструмент для роботи з різними версіями верстки та «розгалуження» робочих завдань. Зручно, якщо ви працюєте над проектом у команді, де кожен відповідає за свою частину завдання.
• Основи JavaScript. Від верстальника не потрібне глибоке знання мови програмування JavaScript, проте на базовому рівні знати JS таки потрібно. Він суттєво розширить можливості верстки, дозволить підключати сторонні бібліотеки та додавати функціональні елементи сайту.

Як бачите, навички верстальника зовсім не обмежуються лише HTML та CSS. Тому якщо ви вибрали цей напрямок навчання, будьте готові працювати старанно і активно поглинати нові знання.

Чим відрізняється верстальник від фронтенд-розробника?

У цих поняттях нерідко виникає плутанина. Багато хто за незнанням вважає, що верстальник і фронтенд-розробник — це те саме. Насправді ні!

Завдання верстальника переважить макет сайту в програмний код, використовуючи HTML, CSS і в незначній мірі JavaScript.

Frontend-розробник — це спеціаліст, який окрім базової верстки працює над програмуванням клієнтської частини проекту, добре володіє мовою JavaScript/TypeScript, працює з фреймворками React, Vue.JS та AngularJS, розуміє базові принципи UX/UI-проектування, працює з Git і так далі.

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

Поради для грамотної верстки сайту від викладача курсу верстки у Wezom Academy Олега Дутченка

«На мій погляд, сучасна якісна верстка — це три головні складові:

• Якісний семантичний код. Верстальник повинен вміти грамотно використовувати логіку та семантику коду, теги та атрибути тощо. Дві візуально однакові сторінки можуть мати різний код. В одному випадку — «чистий» і структурований, в іншому — хаотичний і з цілою купою помилок.
• Дуже важливо, щоб код був зрозумілим не тільки тому, хто його писав, але й іншим розробникам, які, можливо, працюватимуть з ним у майбутньому. Ну і, звичайно, код має бути оформлений відповідно до правил SEO. Тому що пошукові системи «читають» не сторінки. Вони читають саме код!
• Простий інтерфейс. Ваш код має бути максимально зрозумілим, інтуїтивним та структурованим. Дуже корисно навчитися правильно використовувати шаблони проектування, а не верстати "по наїті". Повірте, шаблонність і дотримання базових правил у цьому випадку — це добре.
• Кросбраузерність. Тут важливо розуміти наступне: всі популярні браузери, Chrome, Microsoft Edge, Firefox, Safari, Opera та інші зчитують сайти по-різному. Навіть ті, що базуються на одному движку, можуть відображати сторінки трохи інакше. Тому верстальник повинен вміти верстати так, щоб незалежно від браузера сторінки відображалися коректно.

Звичайно, неможливо відразу навчитися верстати правильно на 100%. Ви в будь-якому випадку спочатку допускатимете помилки, плутатися в структурі власного коду, а іноді і зовсім «ламати» цей код. Але тільки практика допоможе навчитися верстати правильно, швидко та ефективно. А тому моя головна порада: менше зациклюйтесь на теорії та більше практикуйтеся!»

Як стати верстальником?

Як ми й сказали раніше, основа верстки – це HTML та CSS. Освоївши їх на належному рівні, ви цілком зможете верстати сайти або програми.

Верстка вважається тим самим "вхідним квитком" в IT, з якого починає свою кар'єру більшість сучасних айтішників. Але важливо розуміти, що верстальник у класичному сенсі сьогодні вже не є таким затребуваним фахівцем, як раніше. Зараз великий попит якраз на frontend-розробників.

Власне, саме з урахуванням нинішніх реалій ми створили свій курс «Frontend розробка 2022. Junior верстальник», в якому верстка — це лише одна із складових програми навчання. А ще JavaScript, фреймворки, Git, графічні редактори та багато іншого. І якщо ваш вибір – комплексний фронтенд, а не просто верстка макетів, курс Wezom Академії – те, що потрібно!