1. інтро Давайте відразу позначимо моменти, на підставі яких будемо міркувати в подальшому. Перше....
2. Перші кроки
3. відчай
7. Що далі?

інтро

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

Перше. Ця стаття написана як спроба оновити або доповнити статтю Максима Усачова , Написану в 2012 році. Час тече, часи змінюються, тому хотілося б додати деякі міркування.

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

У 2017 році складно уявити собі верстальника, який не вміє використовувати JavaScript, і фронтенд-розробника, який не вміє верстати. Будь-яке з цих проявів - відхилення від норми.

Третє. У 2017 році складно уявити собі верстальника, який вміє тільки верстати сторінки, використовуючи HTML, CSS і нічого більше. Індустрія і тенденції змушують верстальників вивчати JavaScript, що призводить до логічного розвитку верстальника у фронтенд-розробника. Це логічний і нормальний шлях. У 2017 році складно уявити собі верстальника, який не вміє використовувати JavaScript, і фронтенд-розробника, який не вміє верстати. Будь-яке з цих проявів - відхилення від норми. З огляду на це, правильніше було назвати цю статтю «шлях фронтенд-розробника», але щоб нікого не лякати, і через те, що верстка - перший ступінь розвитку фронтенд-розробника, залишимо назву статті таким, яке є.

Четверте. Я буду часто посилатися на свій досвід, прошу пробачити.

початок

Будь-яка дія починається з прийняття рішення. У нашому випадку це буде бажання стати фронтенд-розробником або перекваліфікуватися у фронтенд-розробника з суміжної професії. Якщо ви прийняли для себе таке рішення - це означає чотири речі:

1. Вам дуже подобається ця сфера і сильно хочеться розвиватися через те, що ви відчуваєте до цього інтерес, а не можливість заробити. Якщо вам розповіли, що в бізнес-процеси прибуткова сфера і ви кинулися сюди, щоб заробляти гроші без любові до цієї справи, то, швидше за все, нічого не вийде.
2. Ви готові розвиватися кожен день. Від початку вивчення мови і всю подальшу професійну діяльність. Кожен день, приходячи на роботу, неважливо скільки років досвіду за плечима, ви готові саморозвиватися і дізнаватися нове. Веб не стоїть на місці. Постійно з'являються нові технології, які змінюють застарілі методи розробки, і ви просто будете змушені вивчати нове. Якщо це не входить в плани, то в якийсь момент часу сфера сама викине вас через невідповідність стандартам.
3. Ви обізнані про те, що фронтенд-розробка починаючи з самих основ верстки - це складно. Існує величезна кількість нюансів, тільки однієї розмітки сторінки, на повне вивчення і розуміння яких може знадобитися багато часу. Якщо вам розповіли, що це просто і за місяць ви станете відмінним розробником, то це неправда. Я вивчаю верстку вже більше семи років і розумію, що цей процес не закінчиться ніколи.
4. Будь-яка людина стане нормальним фронтенд-розробником при необхідній частці бажання і зусиль. Однак стати по-справжньому хорошими або крутим розробниками доводиться далеко не кожному. Ця сфера має на увазі наявність бекграунду розробки, який може не знадобитися для знань верстки, але стане в нагоді для вивчення JavaScript. Веб не закриває двері ні для кого і дає шанс навчитися кожному. Але це шанс, а не гарантія.

Якщо ви не готові прийняти вищеописані істини, то у вас може не вийти скористатися шансом стати фронтенд-розробником.

Перші кроки

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

У 2017 році ситуація на ринку інша.

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

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

Книги? Деякі книги являють собою твір мистецтва, яке хочеться купити і поставити на полицю просто для колекції. Необхідність відкривати книги в повсякденній роботі, щоб знайти там щось, що виявилося незрозумілим, практично зникла. Досить вбити запит в Google і отримати відповідь на питання з різних джерел. Проблема книг в тому, що вони не несуть нічого нового і повторюють той контент, який можна знайти в інтернеті. І це якщо говорити про оригінальні книги, написані англійською мовою. До моменту переведення і публікації російською мовою книги втрачають актуальність. Чи не можете вчитися без книжки? Краще купіть в електронному вигляді, врятуйте дерево. Реальною ж необхідності купувати книгу, в більшості випадків, немає.

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

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

Інша справи, що офлайн-курсів в принципі не так багато, а ті з них, що дають сучасний і гарний матеріал можна перерахувати по пальцях. Якщо ви вважаєте що онлайн-формат не для вас, то на вашому місці я б спробував в Москві Moscow Coding School , А в Санкт-Петербурзі Epic Skills . Інших хороших курсів і курсів в інших містах, просто не знаю. Ніхто не розповідав. Якщо знаєте хороші курси в вашому місті, напишіть про це в коментарях.

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

При виборі онлайн-курсів варто орієнтуватися на компанії. Хоча б тому що компанія не пропаде з грошима (сподіваюся). Серед компаній теж великий вибір, але я б зупинився на одному. HTML Academy . І це не тому, що був безпосередньо пов'язаний з цим проектом і знаю як все влаштовано. Це не єдиний проект в якому я брав участь. Просто на мій погляд - це проект, у якого вибудувана хороша система навчання, що зв'язує якісну подачу матеріалу, велика кількість інтерактивних туторіали, інтерактивні курси (які доступні безкоштовно) і роботу з наставником. Інтерактивні курси HTML Academy раджу пройти всім, хто починає, незалежно від того, де збираються проходити навчання. І так, HTML Academy це не єдині онлайн-курси, і це не означає, що немає інших курсів. Просто в якості цього продукту я не сумніваюся.

Серед онлайн-курсів, я б ще відзначив курси Hexlet , Але вони не дають курси по верстці, а відразу по JavaScript. Так що до них варто повернутися трохи пізніше.

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

відчай

Можливо, що цей пункт з'явиться на шляху не в цей момент, а раніше. Чи пізніше. Або в момент першого вивчення. Багато проходять шлях без цього пункту, але зустрічаються люди, яких на певному етапі охоплює відчай. Момент, коли здається, що нічого хорошого не виходить і виходити не може. Питання чисто психологічний і одна з причин, по якій це відбувається - надлишок знань в голові або втрата їх структуризації.

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

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

Хибна ейфорія

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

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

Практика

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

Підвищення кваліфікації

І ось після того, як фахівець закріплює навички, можна переходити до вивчення того, що необхідно сучасному верстальщику. вивчити адаптивну верстку , розібратися з компонентним підходом і версткою з методологій , Адаптований графікою, ретінізаціей, векторною графікою , анімаціями . Дізнатися сучасні специфікації CSS, такі як Custom Properties , Grid Layout , Box Alignment .

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

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

Крім цього, є просунуті курси , Які проставляє та ж HTML Academy. Офлайн-курсів я, на жаль, знайти не зміг. Хоча хлопці з Epic Skills розповіли, що планують перезапуск такого курсу взимку.

Що далі?

А далі, хлопці, JavaScript. Після попереднього етапу виходить хороший верстальник, який готовий створювати конкуренцію. Але ми поки не говорили про клієнтської розробці.

І тут треба розуміти що ми говоримо про те, що фронтенд-розробник повинен знати JavaScript. Причому мова йде не про бібліотеки і фреймворки, а про базові принципи мови. Як вивчати? Це вже програмування, а значить потрібно бекграунд. Якщо його немає, треба підготувати.

Якщо говорити про навчання, то вважаю що краще http://learn.javascript.ru/ , Напевно, нічого немає. Величезний підручник, покроковий, структурований, з завданнями, з відповідями. Спробуйте пройти цей підручник. Вирішити всі завдання. Для отримання бази цього достатньо. Одночасно раджу звертатися до MDN як до додаткового довідником.

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

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

Читайте зарубіжні джерела. Читайте статті на CSS-Tricks , Codrops . Підписуйтесь на наші популярні джерела інформації, наприклад, Веб-стандарти , For Web . Читайте в них про нові технології, вибирайте цікаві джерела та підписуйтесь на них окремо, слухайте подкасти. Будьте в темі і в тренді сучасних технологій.

Відвідуйте тематичні мітапи і конференції. Не бійтеся платити за конференції, тому що ви отримуєте набагато більше ніж просто витрачений час. Конференції - це матеріал, спілкування, участь в співтоваристві. Чи вважаєте що вже досить сильно прокачати, щоб про щось розповісти? Починайте виступати. Розвиток не повинно зупинятися ніколи. Якщо ви вибрали цей шлях, вже не втекти від постійного розвитку, якщо хочете стати професіоналом своєї справи.

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

PS

Окрема подяка Іллі Стрельцину і Максиму Усачов за вичитку. Моїй Насті спасибі за натхнення.

PS Це теж може бути цікаво: