Для чого вивчати HTML — та як починати цей шлях

Привіт! Мене звати Діана Смелікова, я операційний директор Wezom Академії. Уже понад 10 років ми допомагаємо студентам освоювати нові диджитал-професії і будувати карʼєру в IT. І можу сказати без вагань: курс HTML5 + CSS3 + JS залишається одним з найбільш популярних серед майбутніх айтішників. Та водночас нерідко зустрічаю сумніви. «Чи варто зараз вивчати HTML?», «Чи будуть отримані знання актуальними через рік, три, пʼять років?», «Що робити з отриманими знаннями та навичками і куди рухатись далі?».

Сьогодні я хочу відповісти на ці та інші питання. І разом з тим дати кілька важливих порад тим, хто тільки планує вивчати HTML. Отже, почнемо!

Кому і для чого варто вивчати основи верстки: HTML, CSS і JavaScript

Для початку пропоную коротко «пробігтися» по термінології.

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

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

❓ Отже, кому слід вивчати HTML і CSS (і бажано JS хоча б на базовому рівні)?

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

  • Категорія #1. Майбутні веброзробники, верстальники та (певною мірою) вебдизайнери

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

  • Категорія #2. Власники малого та середнього бізнесу, блогери

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

Етапи вивчення верстки: roadmap для початківця

Однією з головних проблем айтішників-початківців залишається відсутність чіткого розуміння, що вивчати і куди рухатися далі. Наприклад, студент освоїв на достатньому рівні HTML і CSS. Що далі? JavaScript. А далі? І так можна продовжувати нескінченно.

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

Отже, roadmap майбутнього frontend-розробника. Три... Два... Один!

Так, а тепер видихнули, зберегли собі цей план дій на майбутнє і рухаємось далі!

Отже, якщо зараз ви на самому початку шляху frontend-розробки, особисто я раджу діяти наступним чином:

1. Почитайте теорію: як працює інтернет та веббраузери, що таке HTML та CSS, що таке домен та хостинг і таке інше.
2. Виберіть та встановіть HTML-редактор. Рекомендую VS Code — безкоштовний, популярний, з підтримкою корисних плагінів. Але ви можете вибрати інший, це не принципово.
3. Почніть вивчати HTML-теги та CSS-стилі. Є доволі непоганий ресурс MDN Web Docs від компанії Mozilla, розробника браузера Firefox. Тут зібрана і зручно структурована основна інформація по HTML, CSS і іншим темам. Також рекомендую український вебдовідник CSS.in.ua — дуже зручний і добре організований сайт зі списком HTML-тегів, атрибутів, CSS-властивостей та селекторів. Цей ресурс взагалі краще додати в закладки браузера, щоб він завжди був у вас під рукою.

4. Вивчаючи HTML та CSS, постійно практикуйтеся. Запускайте HTML-редактор і пишіть код, експериментуйте з тегами та стилями, звертайте увагу, як вони працюють та взаємодіють, як себе поводить «каскадність» стилів CSS і таке інше.
5. Знаходьте прості макети вебсторінок і пробуйте верстати їх. Не бійтесь робити помилки і тим більше не бійтеся шукати підказки в інтернеті. Помилятися — це нормально. Забувати теги та CSS-атрибути — це нормально. Шукати інформацію, якщо ви чогось не знаєте, — це нормально!

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

Візьміть нескладний макет і верстайте його в процесі навчання. Так, десь буде складно і повільно, деякі блоки доведеться пропустити, щоб повернутися до них пізніше. Але ви впораєтесь. Практика, практика і ще раз практика! Тільки так можна вивчити HTML і CSS. Повірте, в IT одна година практичних завдань варта більше, аніж 3-5 годин теорії. Власне, саме тому ми на курсах верстки робимо основний акцент саме на практичних заняттях, а теорію здебільшого залишаємо на самоопрацювання.

Що потрібно, щоб почати вивчати HTML та CSS

«Надможливості не потрібні, щоб почати навчання. Тільки ваше бажання!»
— Олег Дутченко, Frontend-розробник, зам. керівника відділу верстки Wezom

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

  • «Для навчання і роботи в IT обовʼязково знати вищу математику.»
  • «Якщо я „гуманітарій“, то в IT мені робити нічого.»
  • «Для навчання і роботи мені 100% потрібен потужний комп’ютер.»
  • «На ринку праці тисячі крутих айтішників, новачки нікому не потрібні.»

Повторю: це все міфи! У верстці та веброзробці нерідко логічне мислення виявляється важливішим за математичні знання, а «гуманітарії» стають крутими айтішниками. Для роботи з HTML та CSS-кодом підійде навіть слабкий компʼютер, а попит на «джунів», особливо на фрілансі, набагато більший, ніж більшість вважає.

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

Давайте я покажу на прикладі, щоб переконати вас у цьому!

Як ви вважаєте, скільки часу потрібно, щоб написати такий код?

Пʼять хвилин? Три? Одна? Менше секунди! Достатньо набрати на клавіатурі всього один знак — «!» і натиснути Tab. Далі редактор, а точніше плагін Emmet, все зробить сам. І таких прикладів безліч. Верстка — це не так складно і повільно, як більшість думає.

Щоб почати вивчати HTML та CSS, від вас потрібне лише бажання, час та компʼютер чи ноутбук. Більше того, існують навіть додатки-тренажери для смартфонів. Повноцінно писати код на смартфоні буде складно, але тренуватися у вільний час — можна. Чому б ні?

Вивчення Frontend: питання та відповіді

З чого почати вивчення Frontend?

Починайте з HTML та CSS. І вивчайте їх паралельно, адже вони по суті взаємозалежні та взаємодоповнюючі. А от занурюватися на перших порах в JavaScript, фреймворки Vue.js чи Angular, систему контроля версій Git все ж не варто. Сконцентруйтесь на основах, попрактикуйтесь, а вже потім переходьте до більш складних тем.

Наскільки складно вивчати HTML, CSS та взагалі весь напрямок Frontend?

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

Який HTML-редактор обрати новачку?

Насправді не так важливо, який саме редактор ви оберете. Та раджу придивитися до найбільш популярних програм: Visual Studio Code, Notepad++, Sublime Text чи Vim. Для них досить багато мануалів та іншої інформації в інтернеті, тому ви без проблем знайдете потрібну інформацію чи пораду більш досвідчених колег. Єдине, що зауважу: обирайте редактори з підтримкою Emmet — спеціального синтаксису скорочень, з допомогою якого код можна писати значно швидше.

Скільки часу потрібно, щоб вивчитися на frontend-розробника?

Якщо ми говоримо саме про впевненого «джуна», то навчання займає в середньому 6 місяців. Але мова йде не тільки про HTML та CSS, а ще й про JavaScript, популярні фреймворки, Git і т. д. Якщо ж говорити виключно про HTML, то навчитися створювати структуру сторінки, додавати блоки з текстом, заголовками, зображеннями, відео та формами при бажанні можна буквально за 1-2 вечори.

Чи можна вивчити основи верстки самостійно?

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

Отже, висновки!

Завершити я хочу однією важливою думкою. Щороку в Google залишають один і той же запит: «Чи варто вивчати HTML, CSS і JavaScript в 2020/2021/2022 році?». Гарантую, такі ж запити будуть і через рік, і через пʼять років. Але відповідь не зміниться — «Так, варто!».

HTML + CSS + JS — це кістяк веброзробки, з якого починають свій професійний шлях майже всі сучасні айтішники. І, як би банально це не звучало, саме HTML та CSS — той самий вхідний квиток в IT, котрий всі так активно шукають. Якщо ви вирішили спробувати свої сили в IT, готові вивчати щось нове і освоювати нову професію, почніть саме з HTML та CSS.

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

Бажаю вам успіхів у навчанні та роботі. І ласкаво просимо в IT!

Сподобалась стаття? Натискай «Подобається» внизу. Це допоможе автору виграти подарунок у програмі #ПишуНаDOU

👍ПодобаєтьсяСподобалось9
До обраногоВ обраному6
LinkedIn
Дозволені теги: blockquote, a, pre, code, ul, ol, li, b, i, del.
Ctrl + Enter
Дозволені теги: blockquote, a, pre, code, ul, ol, li, b, i, del.
Ctrl + Enter

А як же no-code сервіси типу webflow чи framer? Зручна та відносно дешева заміна верстальника, яка набирає обертів. Як вони вплинуть на попит на верстальників, чи то інший світ?

Як вони вплинуть на попит на верстальників, чи то інший світ?

ніяк не вплинуть

В них своя доволі обмежена ниша.

Попит на верстальників вже зараз мінімальний. Попит на фронт-енд розробників, яким треба знати верстку, зазвичай найбільший серед усіх девелоперів. І ноу-код сервіси не зможуть з ними конкурувати саме через обмеженість ниші.

Якщо ми говоримо саме про впевненого «джуна», то навчання займає в середньому 6 місяців

Оптимістично..
ІМХО, 6 місяців це для студента ІТ факультету.

Півроку на html?
То щось забагато

Так мова про джуна а не вивчити html теги)

саме з таким досвідом та після стажування ми брали на роботу джунів)

Чому у розділі «Який HTML-редактор обрати новачку?» не вказано emacs? Vim вказаено, а emacs ні. Це дискримінація. Emacs також має emmet-mode.

Це особиста думка викладача нашої Академії, який допомагав писати статтю. Але ми можемо у нього це запитати)

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

Нащо для цього всього вчити верстку?

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

Сторнка в Інстаграм... Це здається тому, що люди лінуються по сайту побродити та пошукати :-)
Хоча... мабудь я так і не зрозумів інста-тренду :-)

Скоріше тому, що там наче є ціла платформа для менеджменту товарів та реклами. Пиляти таке з нуля дуже довго та дорого.

А, ну так.
Насправді я мав на увазі «закидон» з боку клієнта.
На кшалт:
— У вас інстарам є?
— Ні, в нас є сайт
— А... а чому не інстаграм, там же клаще?

Пиляти таке з нуля дуже довго та дорого.

Особисто я купував пару разів e-commerce рішення на Codecanyon.
Це PHP — Laravel / Codeigniter
Звичайно, що потрібно було трохи «напильником» його,
найбільше на тему «Українізації адмін панелі»

Так, можливо то не круто (PHP хейтять тут :-) ), або не модно, проте за ту ціну (там від $50 до $70 за магазин, є навіть дешевші) «з ноля» таке писати — та ну його в дупу :-)
А «допилити», ну там тиждень часу «лівою ногою»

Єдине, що важко — то «вивести у топ, бо ж кожен хоче там бути».
Але то не робота кодера як на мене.... Хай рекламу купують, чи ще щось....

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

Насправді я нудіння про инстаграм vs. сайт чув в звичайному магазині, де асортимент був не маленький :-)

Де ви бачили Розетку у Інстаграм? Або як клієнт WEZOM — John Deere може мати лише інстаграм чи сайт на готовій платформі.. Малий бізнес так і буде залишатись малим бізнесом у інстаграм ((

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

це точно. тож поки 20% від покупки (чи скільки там), які бере Розетка за користвання маркетплейсом, не перевищують вартість розробки, підтримки та розкрутки, нема сенсу й заганятися з власним сервісом.

Редагувати HTML у магазині, щоб підправити ціну — то точно не про великий і навіть не середній бізнес :) бо там без ЦМС точно робити не варто. Ну а з ЦМС необхідності ковирятися в коді непідготовленим людям не буде.

Напевно тому, що Інстаграм — то сервіс для фоток, а «продавати» там наші придумали бо «а чого б ні»?

«Frontend — найпростіший спосіб увійти в IT».

Однозначно відповідь — ні. Розводити спори — ліньки, хто шукає — сам знайде відповідь =)

Ну, можна було написати: «На мою думку найпростіший спосіб такий-то..»
І далі вже не сперечатись з хейтерами :-)

ліньки так як роботи овер багато )

в ІТ — ні.

а якщо саме в програмування — то де ще така кількість вакансій з відносно невеликим порогом входу?

Ну я мав на увазі що фронт не найлегший шлях входу в ІТ як загальне поняття всіх видів роботи в ІТ, наприклад рекрутерство легше в 100500 разів..... а якщо цікавить саме «розділ» програмування — то це вже геть інша розмова )

6 місяців на впевненого джуна — дуже оптимістично. плануйте рік щонайменше.

1-2 вечора на базовий HTML — теж замало, якщо є мета верстати щось складніше за параграфи та заголовки. тож HTML&CSS з нуля — це щонайменше 2 місяці (1 місяць теорії + 1 місяць практики)

чим більше — тим краще, але на нашому досвіді були й більш спритніші спеціалісти)

якщо брати саме світчерів, що паралельно працюють на якійсь роботі — слабо віриться. якщо тих, кому не треба працювати і весь час вони можуть присвятити навчанню — мажліва :)

так, з роботою поєднувати складно, але студенти-заочники можуть присвячувати цьому більше часу. Хоча і ті і ті дуже стараються)

Оригінал роадмапу містить більше інфи: roadmap.sh/frontend

Можно учиться безконечно, если некому вас «приютить» и подтянуть...

vanila js нікому не потрібні, всі зараз хтять libs | frameforks

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

Учите сразу Реакт и ЖС — версточка мало кому нужна на задротском уровне)
По ходу изучения реакта вся эта чепуха как-то да подтянется

Сложно найти работу для новичков.

ага. отак понабігають люди на Реакт без версточки та рівняють потім абсолютно спозиціоновані сітки джаваскріптом.

Главное чтобы работало)))

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

Дякую за таку корисну мапу.
Знайшов для себе декiлька наступних крокiв.

Добрый день, достаточно ли знать на базовом уровне HTML CSS и JavaScript чтобы найти работу?

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

Чудово написано. Скільки місяців навчання і вартість?
Я перевірила вакансії сьогодні. Не дуже багато. На Junior треба 1-2 роки досвіду. Це одна з небагатьох галузей була, де можна себе реалізувати в Украіні без допомоги батьків та родичів. Виключно знання. Зараз вже інше. Досід.
Щоб бути директором треба досвід директора 3-5 років. Замкнуте коло. Це як касти в Індії. Досвід.

Junior — це розробник з невеликим досвідом.
Відповідно старт — це або курси/стажування при компаніях, або якісь невеличкі проекти для друзів/знайомих (з відповідним списком проектів у портфоліо).

Щоб бути директором треба досвід директора

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

Якщо ми говоримо про стажування, то детально описали тут dou.ua/forums/topic/38394 Зараз не можу сказати точно, бо стажування наразі перевели у онлайн і тестуємо цей формат. Саме стажування триває 3 місяці. А якщо вас цікавить курс, то в нас є такий і він розрахований на 43 години роботи, яку ви можете розтягувати як вам зручно. Можливо є якісь питання до куратора стажування/курсу? Можете написати нам на пошту [email protected]

Посмотрите вакансии и скилы которые желает видеть работодатель... Вы ни когда не угадаете с roadmap

так, це правда, ми розповідаємо про свій досвід.

може бути достатньо для стажування, але краще хоча б почати вчити Реакт. саме оплачувану роботу без знання якогось фрейворка знайти буде дуже складно.

Звісно, але без основ — також нікуди)

вчити фреймворк без основ — то взагалі марна справа :)

дякую за інформацію.я б хотів ще поговорити з вами з приводу, звичайно ж якщо можливо?!

так, звичайно, ви можете написати нам пошту [email protected] і домовимось з вами про формат розмови, який буде зручним.

Підписатись на коментарі