Навчання верстці сайтів: з нуля до професіонала

36

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

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

Верстка сайту — це опис програмним кодом його візуальної складової. При цьому сайт повинен виглядати і працювати коректно на будь-якому браузері (бути кросбраузерним). Навчання верстці сайтів з нуля повинно починатися з самостійного створення PSD-макету, незважаючи на те, що його, по ідеї, повинен створювати веб-дизайнер.

Основне завдання верстальника — це обробка матеріалу, який надходить до нього у вигляді текстів, зображень, каталогів і т. д., і перетворення його в веб-сторінки на підставі затвердженого веб-дизайну.

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

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

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

Інструменти для створення макету сайту

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

Є люди, які працюють тільки з векторною графікою і використовують для створення макетів Adobe Illustrator.
І ще один редактор, який я не пробував, але який, за чутками, становить цілком гідну альтернативу перерахованим вище, — це Sketch, але він працює тільки під Mac OS.

Знайомимося — HTML

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

Самий елементарний веб-ресурс — це не більш ніж набір HTML-сторінок. Якщо сайт статичний, то після верстки фактично ви отримаєте його остаточну версію, а не просто шаблон. Зараз такі сайти, природно, є великою рідкістю. Всі сучасні веб-сторінки генеруються динамічно, за допомогою якоїсь внутрішньої логіки, яку ви або напишете самі, або будете використовувати готову з допомогою CMS (системи управління контентом).

Без цієї внутрішньої логіки були б неможливі більшість онлайн-сервісів, які ми використовуємо щодня і до яких так звикли. Що стосується HTML, то це зовсім нескладна мова.

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

Вдосконалюємося — CSS

Як тільки ви освоїте основи HTML, можете відразу приступати до вивчення CSS (каскадних таблиць стилів), які дозволяють задавати шрифти, кольори, розташування окремих блоків сайту.

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

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

Обов’язково вчити всі теги, атрибути і властивості HTML/CSS?

В HTML багато різних тегів і атрибутів, а в CSS — властивостей, які можуть мати різні значення. Тому багатьох новачків хвилює питання: з чого почати верстку сайту і потрібно заучувати напам’ять всі ці значення, теги і властивості?

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

Спочатку, коли ви тільки будете знайомитися з CSS, то все одно будете дивитися, що робить кожне властивість і кожне значення цієї властивості. З часом до вас прийде розуміння, що можна творити за допомогою каскадних таблиць стилів, і що з цих властивостей/значень і так відкладеться у вас в голові. Ну якщо ви, звичайно, не страждаєте амнезією :)

Те ж саме стосується будь-яких мов, включаючи JavaScript, PHP і т. д. Все, що ви часто використовуєте, запам’ятається саме по собі. Все, що ви рідко використовуєте, ви зможете подивитися в довіднику, яких в мережі безліч. В цьому немає нічого ганебного і, скажу вам по секрету, всі веб-майстри це роблять.

Спрощуємо процес верстки

Для тих випадків, коли вам потрібно швидко створити якийсь інтерфейс або прототип якого-небудь сайту, існують CSS-фреймворки, такі як Bootstrap. Він дозволяє стати веб-майстер, веб-програмістом і верстальником в одній особі без знання таблиць стилів, мов програмування і розмітки.

Коли ви добре засвоїте CSS і почнете верстати щось своє, унікальне, вам може не вистачати гнучкості цієї мови, і ви захочете використовувати який-небудь CSS-препроцесор. Препроцессоры прибирають з коду CSS все сміття, роблять його більш чистим і логічним, збільшують ступінь абстракції за допомогою змінних і інших «фішок». Найбільш популярними препроцессорами вважаються LESS, Sass і Stylus.

Вищий пілотаж — JavaScript

Вивчаючи більш серйозні уроки верстки сайтів, ви зустрінете включені в HTML елементи JavaScript, які роблять веб-сторінки інтерактивними. Якщо ви плануєте займатися не тільки Back-end, але і Front-end розробкою, то JavaScript потрібно знати на дуже хорошому рівні.

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

Підіб’ємо підсумки

Отже, як ви вже, сподіваюся, зрозуміли, верстальник — це дуже важлива і стародавня Інтернет-професія, від якої залежить:

швидкість завантаження сайту;

адекватність його відображення в різних браузерах;

адаптивність під різні екрани;

відповідність HTML-стандартам і вимогам пошукових систем.

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

Поки що все. Не забудьте підписатися на новини нашого блогу, щоб не пропустити все найцікавіше з навчання верстці сайтів з нуля.

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