Як стати front-end розробника

Як показує частота миготіння нових тем з питанням: «Порадьте, що вчити, щоб стати фронтенд девелопером?» на DOU (і не тільки), більшість юних (і не дуже) дарувань, які вирішили присвятити себе веб-розробки і дарувати світу гарні та корисні сайти, рішуче і категорично не вміють в пошук google. Ця стаття якраз покликана зупинити (або хоча б затримати) орди прагнуть заповнити інформаційний простір своїми одноманітними питаннями.

IT — це світ дедлайнів, «потрібно зробити на вчора» і паленых нервів. Перші N років ти будеш регулярно стикатися з речами, яких ти не розумієш, які алогічні. З поточного моменту тобі доведеться засвоїти дуже багато нових речей і понять. І якщо ти до цього не готовий, то, мабуть, ти можеш далі не читати цю статтю. Я розіб'ю моє подальше оповідання на кілька частин, після кожної з яких ти зможеш оцінити, чи варта гра свічок і варто продовжувати. Отже, перейдемо до перерахування речей, які доведеться вивчити для початку.

HTML + CSS

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

Не намагайся запам'ятати все і відразу. На цьому етапі ваше завдання — зрозуміти, що це працює, і отримати уявлення про можливості (тобто, що з допомогою HTML ти можеш створювати елементи, а за допомогою CSS — прикрашати їх). І тобі зовсім не важливо пам'ятати напам'ять порядок значень для box-shadow або розбиратися в хитросплетіннях flexbox. Зрештою, це завжди можна пошукати в гуглі чи знайти потрібний відповідь на stackoverflow.

Bootstrap

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

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

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

Гайди по верстці

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

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

Самостійна верстка по макету

PSD-макети — за цим запитом гугл видає 368 000 сторінок. Верстаешь знайдені макети, поки не почне виходити схоже на оригінал. Взагалі має бути один в один строго до пікселя (гаразд, до двох, тільки нікому не кажи) — це називається pixel perfect.

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

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

JavaScript

У більшості тих, хто має справу з JavaScript, існує думка, що починати вчити його слід тут — learn.javascript.ru . І вони, загалом, мають рацію.

Знову ж таки, твоя задача — не завчити всі функції і мовні конструкції, а зрозуміти, що ти можеш зробити. Після успішного прочитання можна перейти до чогось великого і прочитати «JavaScript: Докладне керівництво» Девіда Фленаган.

jQuery

Паралельно або після прочитання вищевказаних ресурсів JavaScript можна починати вчити jQuery. Всю документацію по ньому перечитувати не варто, але от прочитати брошурку, наприклад, Шевчука цілком бажано — «jQuery для початківців» .

Вітаю, по закінченню цього пункту ти можеш носити горде звання «формошлеп» та вільно брати замовлення з розділу «верстка» якого-небудь fl.ru або upwork.com . Загалом-то, на цьому можеш зупинитися.

Фреймворки

Розбираєш популярний JS-фреймворк. Вчити якусь маловідому езотерику явно не варто, краще вибрати щось, що регулярно з'являється в розділі вакансій: react.js, angular або angular2, наприклад, цілком зійдуть. А краще, звичайно ж, усі три. Гайдів, відеоуроків та документації по всьому цьому щастя досить велика кількість (чи менше, ніж питань «як стати front-end розробника»), так що ти повинен впоратися.

Англійська мова

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

Ось ти і закінчив перший етап свого навчання. Не тіште себе ілюзією. У процесі роботи ти зрозумієш, що це було досить просто, адже другий етап триватиме весь час, поки ти будеш працювати за цією спеціальністю. Тобі належить дізнатися ще дуже багато нового і цікавого. І не завжди ти будеш радий цим знанням. Після цього етапу ти можеш починати шукати вакансії junior front-end developer або, якщо ще недостатньо хороший, безкоштовні курси стажування при IT-компаніях, які заявляють про можливе працевлаштування після цих курсів.

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

Часті питання

В:Де знайти ментора?
Про:Ментор не потрібен. Але якщо тобі так хочеться, то на DOU є кілька тематичних гілок. Хоча в цілому зазвичай достатньо просто добре погуглити відповіді на свої питання — цим ти збережеш потенційного ментору пару-трійку мільйонів нервових клітин.

В:чи Варто йти на платні курси?
Про:Звичайно варто. А ще обов'язково вийшли 100 доларів Бакаре Тунде, братові першого нігерійського астронавта.

В:Я не все зрозумів з цього гайда, може мені варто створити ще одну тему на DOU?
Про:Спробуй краще запитати в коментарях, авось хтось і відповість. А питання на технічні теми можна поставити на Stackoverflow .

І пам'ятай, вміння «добре пошукати» є критичним для розробника, і якщо ти не розвинеш його, то робити тобі тут нічого.

Спасибі за підтримку і редактуру @Stefan Skliarov .

Опубліковано: 30/11/16 @ 08:00
Розділ Різне

SEO Блог