Професія Верстальник сайтів

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

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

Хто такий верстальник сайтів і чим він займається?

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

Простими словами, дизайнер малює майбутній сайт у вигляді умовної «картинки». Проте браузери (Google Chrome, Яндекс.Браузер та інші) картинки не розуміють. Їм потрібен спеціальний код, який показує програму, де вивести меню на сторінці, фотографії, текст та інші елементи, і якими вони мають бути. Все це кодується за допомогою мови розмітки HTML та каскадних таблиць стилів CSS.

Давайте детальніше розглянемо, що саме повинен зробити верстальник сайту, так би мовити, основні задачі верстальника. Отримавши макет дизайнера в форматі .PSD або .sketch, .figma (є багато інструментів для створення макета сайту), а потім починає свою “магію”.

З даного макету верстальник “витягує” всі фони, логотип, зображення, що використовуються в дизайні, та зберігає окремими файлами на комп’ютері.

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

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

Однак, верстка сайтів далеко не все, що може входити в обов’язки верстальника. Вони можуть займатися:

• Версткою промо сторінок та односторінкових сайтів (LandingPage);
• Версткою електронних листів;
• Усуненням помилок та баґів у верстці сайтів;
• Виконанням різноманітних доопрацювань: оптимізації HTML і CSS коду для прискорення завантаження сайту, впровадження адаптивності сайту.
• Версткою на основі PSD-макетів від дизайнерів;

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

Плюси та мінуси професії верстальника

Плюси

• Необхідні навички можна опанувати за 1 місяць;
• Можливість опанувати професію самостійно за книгами та відео з YouTube;
• Професія підходить новачкам, які ніколи не працювали в IT;
• Можливість працювати в як офісі, так і віддалено, вдома;
• Якщо порівнювати з середнім прибутком України, то верстальник може добре заробляти;
• Не потрібно глибоко занурюватися в програмування.

Мінуси професії

• Через те, що технології не стоять на місці, верстальнику потрібно завжди вчитися;
• Під час роботи з’являється рутина.

Скільки заробляють верстальники?

Досвідчений фахівець, в середньому, може вийти на дохід в 15-20 тисяч гривень на місяць, в деяких випадках навіть до 25 000 грн. Заробітна плата вище 30 000 грн. може рахуватися достатньо високою в цій спеціальності, хоча, до прикладу frontend i backend-спеціалісти можуть заробляти значно більше.

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

Насамперед заробітна плата може залежати від досвіду фахівця. Якщо він невеликий, то у регіональній студії верстальнику можуть запропонувати 5-7 тисяч грн. в місяць. Однак з досвідом від 1 року спеціаліст не піде на роботу навіть з заробітною платою в 15 000 грн. В цьому і є плюс ІТ-професій, чим більший досвід — тим більший прибуток.

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

Щоб почати заробляти на верстці сайтів, необхідно мати наступні навички:

• Знати мову розмітки HTML та CSS, а також бути ознайомленим з фреймворками. Найпопулярніший з них Bootstrap. Рекомендую його вивчити, до речі цей сайт зроблений на ньому;
• вміти верстати блоками, є ще сайти на таблицях, але це вже застарілий метод;
• знати, що таке адаптивна або кросбраузерна верстка;
• знати, як виконувати основні операції в Photoshop, Figma, Sketch тощо;
• знання PHP буде великим плюсом.

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

Верстальник займається лише версткою макетів. Іноді він підключає і налаштовує готові скрипти на JS або пише прості скрипти з чистої сторінки.

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

Як стати верстальником і де навчатись цієї професії?

Перші кроки можна зробити самостійно. В інтернеті є безліч сайтів, де можна вивчити мову HTML та CSS з нуля та безкоштовно. Також в інтернеті є багато проєктів, де можна вивчити програмування на PHP та JavaScript.

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

Де знайти роботу верстальнику сайтів?

Вебстудії часто запрошують верстальників на виконання різних задач. Тому пошукавши таку роботу на Jobs або WorkUA можна знайти необхідні вакансії.

Але в випадку пошуку завдань для виконання віддалено, фріланс, необхідно йти на біржі фрілансу, типу FreeLanceHunt.

Якщо шукаєте одноразові завдання, то можете знайти їх на сайті Fiverr.

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

Сайт фрілансера для фрілансерів. Тут ми обговоримо професії, плюси та мінуси кожної та ви станете максимально ефективним фрілансером.

Хто такий Frontend-девелопер і як «оживити» вебсайт і зробити його приємним для користувача

dev.ua продовжує знайомити початківців і світчерів із професіями в IT. Цього разу про те, як створювати сторінку, з якої ви читаєте цей текст, відмінність між фронтендом і бекендом і про свій шлях розповість Євген Жданов, Frontend Developer 3SS (3 Screen Solutions), який прийшов у сферу з досвідом роботи в різних галузях, але, здається, знайшов своє.

dev.ua продовжує знайомити початківців і світчерів із професіями в IT. Цього разу про те, як створювати сторінку, з якої ви читаєте цей текст, відмінність між фронтендом і бекендом і про свій шлях розповість Євген Жданов, Frontend Developer 3SS (3 Screen Solutions), який прийшов у сферу з досвідом роботи в різних галузях, але, здається, знайшов своє.

Зміст

Що таке Фронтенд

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

Web-додаток водночас є клієнт-серверним застосунком, тобто він зв’язує клієнта, яким виступає браузер, із сервером, на якому перебувають дані.

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

Які є компоненти Frontend

Є три ключові компоненти фронтенд.

HTML (HyperText Markup Language) — це «клітинна будова тіла»: мова розмітки елементів на сторінці та їхня структурна взаємодія.

CSS (Cascading Style Sheets) — це «генотип і фенотип», мова, якою прописуються характеристики та стилізація зовнішнього вигляду сторінки: за її допомогою можна розташувати блоки, створити шрифти, кольори, адаптувати одну й ту саму сторінку в різних стилях, додати озвучку.

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

У чому завдання Frontend-розробника

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

Основне завдання фронтендера — узяти графічний макет від дизайнера та зв’язати його з бекендом сайту так, щоб усе «літало».

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

Часто люди плутають ці три професії. Якщо дуже просто, то фронтендер має бути верстальником, але не кожен верстальник — це фронтендер. Тобто верстка — це вузькопрофільна робота, яка полягає в тому, щоб отримати макет від дизайнера та зверстати його за допомогою HTML+CSS. Перетворити картинку на просту сторінку.

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

Досвідчений фронтендер не просто «заверстує макет», він розуміється на JavaScript, яка цей макет оживлює та робить приємним для користувача; розуміє, що є на сервері, та нерідко знайомий із додатковими мовами — такими, як PHP.

З досвідом приходять й інші знання: препроцесори та збирачі (GULP, LESS, SASS, GRUNT), робота з SVG-об’єктами, розуміння UI/UX, кросплатформовість, кросбраузерність — бо ваш сайт дивитимуться люди з усього світу та використовуватимуть для цього різні гаджети та браузери, а він має виглядати й, головне, працювати однаково.

То що треба знати досвідченому фронтендеру?

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

• опанувати HTML, CSS, JavaScript (база);
• розуміти, як працює клієнт-серверна архітектура;
• знати популярні бібліотеки/фреймворки (React.js, jQuery, Angular.JS, Redux, js)
• розбиратися в CMS (WordPress, Drupal, Joomla);
• розуміти принципи backend (Node.js, PHP, Ruby, .NET тощо);
• знати інструменти дебагінгу (Chrome Dev Tools, Firebug);
• знати англійську на рівні вільного читання документації як мінімум, а як максимум — для спілкування із замовниками;
• використовувати графічні редактори та знати дизайн.

Також добре, якщо ви знаєте інструменти контролю версій (Git, GitHub, CVS тощо), бази даних і мови запитів (SQL, MySql, NoSQL, MongoDB).

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

У чому різниця між Frontend і Backend

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

Frontend, якщо продовжувати ту ж аналогію, це інтер’єр закладу й обслуговування.

Тобто ви заходите на маркетплейс, милуєтесь його красою й тим, як дизайнерські елементи зручно розташовані на сторінці — так само як відвідуєте улюблений заклад, сідаєте на дизайнерський стілець з IKEA та берете гарно зверстане меню. Після чого замовляєте обід, тобто, обравши потрібний товар, тиснете на кнопку «сплатити». Офіціант приймає замовлення — на цьому фронтенд закінчується, бо офіціант іде на кухню — до сервера, тобто ваш платіж пішов. Далі — справа за бекендом, кухарі отримують ваше замовлення, скажімо, борщ, і починають варити м’ясний бульйон, рубати капусту, відкривати свіжу сметану. Гроші пройшли, замовлення оформлене — і офіціант (знову робота фронтенда) несе вам тарілку запашного юнесківського надбання.

Бекенд-розробники працюють із серверами, тобто — із серверними мовами (Java, Python, PHP, Ruby), знають бази даних, архітектуру та навіть апаратну частину — характеристики сервера, що він може, а що не може. Ця робота теж може бути творчою — наприклад, якщо вам раптом потрібно витиснути із сервера те, на що він не здатний, але може бути. Та загалом фронтендери, яким потрібно вважати на користувацький досвід і зручність, та ще й по-доброму дивувати якимись особливостями сайту, мають значно більший потенціал для розкриття своїх творчих навичок, ніж бекендери, які зайняті аналізом та обчисленням.

Чи потрібно з дитинства вчитися Frontend

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

Працював у банках — від менеджера з роботи з клієнтами до керівника департаменту обслуговування фізосіб.

Потім відкрив фотостудію, одружився, поїхали в подорож, потрапили в Непалі під той самий знаменитий землетрус.

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

Запасів вистачило на рік — потім за класикою намагався таксувати, узяв в оренду авто, воно перестало їздити на третій день, довелося розбиратися, вертати заклад.

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

Чи легко перебудуватися, якщо ти вже працював в інших сферах

Я люблю компи з дитинства, навіть намагався піти на програмування в технікум радіоелектроніки, але втрапив на кафедру радіоелектроніки та з третього курсу мене вигнали.

Загалом до курсів із GOIT, які я пройшов, уже двічі намагався проходити щось подібне, але обидва рази курси видалися слабкими, і я не витримував. А тут на презентації дали велетенську програму на 9 місяців щоденних занять — як в універі, тільки жорсткіше. Це вже був виклик. Дев’ять місяців мій мозок вибухав, кілька разів доводилося без сну сидіти добу чи дві. Я думав, що нічого не розумію та ніколи нічого не пишу.

Але просто під час навчання ми з однокурсником почали писати застосунок для складського обліку — на чистому, JS без використання фреймворку. Більше, щоб потренуватися в чистій мові програмування.

Та програма вийшла гарна, мала великий функціонал: прихід і витрата товару, переміщення за віддаленими складами, кабінети складів зі своїми даними, клієнти, звіти, графіки. Було складно, та за чотири місяці без ТЗ і практики я написав понад 40 тисяч рядків корисного коду.

Після чого на мене вийшов рекрутер компанії 3SS — створення стримінгових сервісів. Хоча я не розсилав резюме. Я прийшов на співбесіду та показав цей проєкт.

Скільки заробляє фронтендер

Це непросте запитання, оскільки все залежить від роботодавця та проєкту. Умовно можна сказати, що трейні заробляють до $600, джуніор — до $1200–1600, мідл — до $2500–3000, сіньйор — уже важко сказати, оскільки на тимчасовому проєкті й мідл може отримувати $5000.

Чому вибрав саме Frontend

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

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

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