Що повинен знати фронтенд розробник
Я займаюся комерційної фронтенд розробкою на Upwork вже близько року, база знань сформована, спокійно беруся за більшість проектів, тому що вже є певний досвід, а там де його немає, швидко вливаюся, тому що заздалегідь підготувався і заклав міцний фундамент знань.
Мене часто запитують, що потрібно вивчити, щоб почати працювати як верстальник або фронтендер, і за статистикою, в моєму FAQ однойменний питання один з найпопулярніших.
Це стало мотивацією написати пост-інструкцію про те, як стати затребуваним фронтенд розробником, що використовує сучасні інструменти для роботи над проектом як одному, так і в команді.
Інструкція в деякій мірі повторює мій шлях, що гарантує як мінімум 25 $ рейт для людини, який грунтовно і дисципліновано пройде по ній (це мій фактичний за годинниковою рейт на біржі на момент написання статті).
Примітка: Я неспроста вибрав саме такий порядок вивчення, і тому бажано дотримуватися саме такої послідовності, які не перестрибуючи через пункти, якщо ви не володієте ними на необхідному рівні. Це не стосується пунктів 0 і 3.
Якщо у будь-якого пункту варто невисокий показник важливості, це не означає, що його потрібно пропускати, просто незнання цього пункту ускладнює процес розробки в тій чи іншій мірі.
Ви також не зобов'язані вивчати ці пункти по запропонованими джерелами, якщо вони вам не підходять чи не подобаються - завжди можна знайти безліч альтернатив, так як всі ці технології широко распросранени.
0. Англійська мова
Англійська мова - самий фундаментальний навик для айтішника.
Можна вивчати мови програмування, технології і різні інструменти за допомогою перекладів, але це дуже сильне утиснення себе в рамки як за кількістю, так і за актуальності інформації.
Більшість публікаторів з будь-якої країни світу публікують інформацію англійською мовою. в українському ж сегменті залишається покладатися на російськомовний контент або на можливі переклади.
Англійська мова також стане в нагоді при спілкуванні з клієнтами з різних країн.
Основи граматики, початковий словниковий запас, тестування своїх навичок
• Технічні статті
• Переклади
1. HTML / CSS
HTML і CSS це мова розмітки і таблиці стилів. Ключова зв'язка не тільки для фронтендера, але і для веб-розробника / веб-дизайнера.
Так як це не мови програмування, зрозуміти принцип і зробити першу HTML сторінку дуже просто, ви зможете зробити це буквально через пару годин після знайомства з ними.
Основну складність представляє запам'ятовування багатьох нюансів, пов'язаних з елементами цих мов і ці нюанси ви будете вивчати протягом усієї своєї діяльності.
Але зневірятися не варто, головне - закласти міцний фундамент розуміння як це працює, а далі просто практикуватися, тримаючи під рукою довідник з переліком тегів, селектор і властивостей.
Кращий російськомовний ресурс з вивчення розробці, і в той же час кращий спосіб швидко зрозуміти принципи верстки, а також почати звикати до тегами, властивостям і значенням.
Інтерактивне навчання з цікавими завданнями не дадуть вам занудьгувати. А після проходження безкоштовних курсів ви швидше за все захочете купити підписку на сайті (300₽), яка дає доступ до вивчення додаткових тем.
• Codeschool, FreeCodeCamp, Codecademy
CS
FCC
Codecademy
На цих ресурсах теж є курси по верстці, вони дещо поступаються HTMLAcademy, але все ж теж дають якусь базу. Ресурси перераховані в порядку убування якості інформації.
• Довідники, специфікації
• Практика
2. Twitter Bootstrap
Для повноцінного воркфлоу ви повинні вміти користуватися командним рядком і ВКВ хоча б на середньому рівні.
Використання git-репозиторіїв позбавить вас від побоювань щось випадково видалити з проекту, в рази збільшить зручність при роботі в команді розробників, також я користуюся GitHub Pages, щоб показувати процес роботи клієнту, розміщуючи проект в приватному репозиторії, але хостів сторінки для доступу по засланні.
Володіння командним рядком стане в нагоді при налаштуванні проекту, адже набагато простіше прописати пару консольних команд і отримати всі необхідні бібліотеки, ніж викачувати їх окремо і переміщати через провідник. Крім установки пакетів, при використанні збирачів і препроцесорів вам знадобиться використовувати термінал.
• Codeschool
Git Path
На кодскуле є гілка присвячена git і github, дуже детально розбираються всі моменти, перший курс з чотирьох доступний без платної підписки.
Перекладена на українську мову версія популярного підручника.
• Курс з основ командного рядка
Якщо ви купили підписку на CodeSchool, то напевно бачили розділ присвячений цим стандартом, якщо немає, можна подивитися це:
10. JS-фреймворки
Робота фронтендера пов'язана не тільки з ефектами і динамічністю сторінок, це також і робота з відображенням великого або не дуже обсягу даних, а також взаємодія клієнтської частини програми з серверної.
Для ефективної роботи вищезазначених дій необхідно використовувати фреймворки. Фреймворки бувають різні, але найпопулярніші зараз це React, Angular 1-2, Vue, Ember. Всі вони відносно схожі, але мають свої особливості. Вам варто вибрати вподобані і розвиватися в них.
P.S. React це не зовсім фреймворк, фактично це бібліотека для рендеринга даних, але він часто використовується в такому контексті, а зв'язка з використанням Redux / Flux та інших архітектур дозволяє реалізовувати будь-які забаганки клієнта.
Містить багато курсів по фреймворку, скоро з'явиться курс по Angular 2. Я думаю, Backbone можна не розглядати, ну а курси по Angular і React пройти треба.
До речі, перший курс по Angular повністю безкоштовний.
Величезне спасибі за статтю, постараюся освоїти все це за літо, і потім відпишуся.
Кілька запитань.
Вивчати все (крім англ.мова) коштує в послідовності описаної в статье.То є лише закінчивши 1 пункт приступати до следующему.Не забудуться при цьому попередні матеріали або ж вони постійно повторюються в процесі навчання.
І цей пункт з faq-Зверстати 2-3 макета з PSD.Он описаний в будь-якому пункті?
Спасибі, що оцінили старання :)
Знання не забудуться, так як наступні пункти накладаються на попередні, тобто, вивчаючи бутстрап ви також продовжуєте працювати з HTML / CSS, потім освоївши препроцесори ви пишете той же HTML / CSS, але в більш зручному вигляді і так далі.
Не обов'язково приступати до наступного пункту тільки після завершення попереднього, освоїти що-небудь на 100% все одно буде складно, тому переходити між пунктами можна після власного відчуття, що цей пункт достатньо опрацьований.
Про верстку декількох макетів я написав в останньому підпункті HTML / CSS (Практика).
Успіхів у шляху фронендера і діліться прогресом :)
Антон добрий день.
Слухав подкаст з сайту jff з вами в ролі гостя.Ви там сказали, що вам пропонують деякі проекти працювати за якими ви не можете в силу різних обставин.
Питання таке, чи можете ви передавати ці проекти допустимо мені, якщо я доведу вам свою профпрігодность.Задаю питання в зв'язку з тим, що з англ.пока погано і хотілося б набратися досвіду поки підтягую его.Да і з більш досвідченим керівником попрацювати на початку я вважаю також корисно.
Поки цікавить сама можливість, ну а в майбутньому можна вже зв'язатися і пропрацювати умови.
Добрий день, Максим,
Звичайно, якщо ваш рівень робіт мене влаштує і мені буде що делігіровать, я з радістю повернуся :)
Антон. Доброго дня.
Скажіть будь ласка як часто вам доводиться використовувати методології в своїй роботі?
Дякую за відповіді)
добрий,
Ви про БЕМе і SMACSSe?
Завжди використовую коли не забороняється стайлгайдом проекту.
Так про них.
Тобто це ваш особистий вибір, ніж вимога замовника в разі відсутності стайлгайд?
Саме.
Клієнт найчастіше і не знає про те, що це і навіщо потрібно, ну а для роботи в команді корисно дотримуватися одного стилю.