С чего начать учить фронтэнд
Как стать фронтенд-разработчиком: детальный роадмап для начинающих
Рассказываю о том, с чего начать изучение программирования, чтобы стать фронтенд-разработчиком, пишущим сайты и приложения на JavaScript.
Предисловие
Обычно подобные инструкции и роадмапы начинаются с такого обширного понятия, как интернет, а от него отходят в разные стороны ветви с вопросами: «Что такое HTTP?», «Как работает интернет?», «Что такое доменное имя?», «Что такое браузер и как он работает?».
Но давайте начистоту: если вы задумываетесь о том, чтобы стать фронтенд-разработчиком, то вы 100% имеете представление о браузерах и их назначении, а вникать в технические особенности DNS-серверов на ранних этапах необязательно. Поэтому в этом роадмапе будет меньше теории и больше практики.
И еще момент. В этой статье предполагается, что вы умеете создавать файлы в текстовом редакторе и знаете английский на уровне B2. Придется много читать на иностранных ресурсах и работать с программами в духе Sublime Text или VS Code.
Этап 1: Верстка HTML
Начинать будем с верстки, то есть создания структуры страницы. Некоего скелета для будущего приложения или веб-ресурса.
Перед тем как лезть в изучение JavaScript, нужно сделать пару статичных страничек и придумать юзкейсы для будущего программного кода. Это важно, потому что, начав с JavaScript (или любого другого языка), многие разработчики теряются из-за тотального погружения в логические задачки и нехватки фантазии. Потенциальные фронтендеры попросту не осознают, как применить полученные знания на практике.
Наличие сверстанной страницы частично решает эту проблему, позволяя работать с «реальными» объектами разработки, а не просто решать логические задачки и общаться с голой математикой (оставьте это бэкендерам).
Заодно вы освоите навыки по созданию классов и правильному оформлению HTML в соответствии с правилами валидаторов. Это будет полезно и при стилизации сайта, и при добавлении логики в приложение.
Так что учим семантику HTML, запоминаем базовые теги и принципы оформления блоков с текстом, изображениями и другим контентом. Учимся подключать внешние документы (с программным кодом и стилями) и т.п.
Используемые технологии:
Ссылки:
Этап 2: Стилизация при помощи CSS
Следующим этапом станет освоение CSS – каскадной таблицы стилей, отвечающей за расположение объектов на странице и их внешнее оформление.
Суть в том, что в пределах HTML все файлы и блоки текста следуют друг за другом сверху вниз, а шрифты и цвета соответствуют тем, что по умолчанию выставлены в браузере. Если применить CSS, то расположение и внешний вид элементов на странице можно изменить.
Нужно выучить основы оформления стилей и применить их к элементам в HTML-файле, научиться корректно располагать их по отношению друг к другу и сделать так, чтобы сайт был адаптивным для всех разрешений экрана.
Используемые технологии:
HTML с классами и ID
Полезные ссылки:
Подробный гайд по Flexbox и лучший гайд по Grid
Этап 3: Базовые аспекты JavaScript
Теперь перейдем к настоящему языку программирования (до этого были языки разметки). У нас на руках уже есть статичные стилизованные страницы, теперь мы можем придумать, что с этими страницами сделать (добавить интерактива, кнопок и т.п.).
Сначала придется учить JavaScript в отрыве от HTML и CSS, чтобы понять, как работает программирование в целом и JavaScript в частности. Надо ознакомиться с типами данных, понять, что такое консоль, редакторы кода, переменные, операторы и т.д.
Обучение может проходить параллельно в двух направлениях:
Чтение учебников, изучение алгоритмов и проверка своих навыков в сервисах наподобие Codewars. Тут вам поможет ресурс Javascript.info и куча полезных книжек в духе «Грокаем алгоритмы».
Работа над собственным сайтом. Надо придумать какой-нибудь алгоритм. Пусть это будет даже простенький калькулятор, главное, чтобы это было нечто свое, что можно «пилить» по ходу самообразования. Тут вам поможет Google и Stack Overflow.
Используемые технологии:
Полезные ссылки:
Этап 4: GitHub и пакетные менеджеры
Во многих школах по изучению JavaScript и программирования в целом этот этап становится первым. Но на онлайн-курсах в этом есть необходимость (нужно проверять задания и где-то хранить код). Я же решил перенести этот этап сюда, потому что работать с git трудно. Он запутанный, и пока в нем не освоишься, все дико раздражает. Если начать с git, то может и вовсе пропасть желание работать с кодом.
Но совсем без git нельзя. Важно где-то хранить код и контролировать версии приложения, чтобы каждый этап разработки был «задокументирован».
А еще нужно научиться работать с менеджерами пакетов, потому что мы начнем скачивать уже готовые модули для ускорения разработки или для добавления новых функций, которые слишком сложны для самостоятельной реализации.
Так что наберитесь терпения и вперед читать git-how-to.
Используемые технологии:
Менеджер пакетов npm (или yarn)
Полезные ссылки:
Этап 5: Вспомогательные инструменты
Я в одну главу объединил несколько очень полезных, но необязательных вещей, которые понадобятся для работы с JavaScript, CSS и HTML. Эти инструменты сделают код в разы качественнее и надежнее.
Бандлер – это программа, собирающая несколько частей программы в единый проект, попутно обрабатывая код, добавляя в него какие-то свойства и минимизируя его.
Prettier – утилита, которая автоматически корректирует форматирование страницы, чтобы код выглядел симпатично и аккуратно.
ESLint – плагин, заставляющий программиста писать код в соответствии с определенными правилами (например, используя только современный синтаксис).
TypeScript – позволяет обозначать тип используемых в коде данных, чтобы избегать ошибок типизации и сделать код гораздо более надежным.
DevTools – браузерные инструменты, которые упростят верстку и позволят проверять гипотезы в отношении CSS, не покидая браузер.
От нуля до героя фронтенда (Часть 1)
Я помню начало моего изучения фронтенд-разработки. Я находил так много статей и был ошеломлен количеством материалов, которые мне следовало проштудировать и я даже не представлял с чего начать.
Этот гайд поможет вам сориентироваться в изучении фронтенд-разработки. В нем собраны учебные ресурсы, уже доказавшие свою эффективность, и подробные объяснения.
Руководство разбито на две части для более простого усвоения материала. Часть 1 посвящена разработке интерфейсов на HTML и CSS. Часть 2 будет о Javascript, фреймворках и паттернах дизайна.
Основы HTML и CSS
В разработке фронтенда все начинается с HTML (рус. — здесь и далее примечание переводчика с указанием языка статьи по ссылке) и CSS (рус.). HTML и CSS контролируют то, что вы видите на странице. HTML диктует содержимое в то время как CSS регулирует стили и раскладку.
Для начала прочитайте пособия по HTML (рус.) и CSS (рус.) от Mozilla Developer Network (MDN). MDN предоставляет пошаговые объяснения важных концепций HTML и CSS. К тому же каждая глава длинной всего в один экран и проиллюстрирована интерактивными демо на CodePen и JSFiddle.
После прочтения этих материалов загляните на курс Создай сайт (англ.) от CodeAcademy. Потребуется всего несколько часов для прохождения этого курса. Он даст хорошую основу для построения сайтов на HTML и CSS. Если вы хотите больше, то Построение веб-форм (англ.) — еще одно руководство от CodeAcademy, которое научит вас создавать и стилизовать веб-формы.
Чтобы попрактиковаться в CSS попробуйте CSS Diner (англ.). Это забавная игра с задачками по CSS. Другой важный аспект HTML и CSS — раскладка. LearnLayout (рус.) интерактивный учебник, показывающий как создавать раскладки на HTML и CSS.
Так же изучите как пользоваться Google Fonts (англ.) при помощи статьи Основы Google Font API (англ.) от CSSTricks или Руководство по Google Font API (рус.). Типографика — это фундаментальная основа интерфейса. Когда у вас появится время, я крайне рекомендую вам прочитать эту бесплатную онлайн-книгу Professional Web (англ.) от Donny Truong. Она научит вас всему, что вы должны знать о типографике во фронтенд-разработке.
Изучая все эти ресурсы, не беспокойтесь особо о том, чтобы все запомнить. В первую очередь сосредоточьтесь на понимании того, как HTML и CSS взаимосвязаны.
Практика основ HTML и CSS
Теперь, когда вы имеете представление об основах HTML и CSS, давайте повеселимся. В этом разделе есть два эксперимента для вашей практики создания сайтов и интерфейсов. Я использую термин “эксперимент” поскольку в ходе эксперимента вы осознаете на сколько сильно ваш успех зависит от ваших неудач.
Эксперимент 1
В нашем первом эксперименте мы будем использовать CodePen. CodePen это площадка для фронтенда (“песочница”), где вы можете писать HTML и CSS код без создания файлов на вашем компьютере. Там так же есть функция живого предпросмотра, которая обновляется сразу после сохранения кода.
Используя CodePen, вы убиваете двух зайцев сразу. С одной стороны вы практикуете HTML и CSS. C другой стороны вы создаете основу для портфолио с иллюстрациями вашего прогресса. Мы так же будем использовать Dribbble, который полон вдохновляющего дизайна.
Идите на Dribbble и найдите дизайн, код для которого вы сможете написать за пару часов. Я выбрал несколько примеров, с которых вы можете начать: 1, 2, 3, 4 и 5. Я выбирал дизайны, ориентированные в первую очередь на мобильную разработку, потому что они менее сложны, чем их аналоги для обычных экранов. Тем не менее вы вольны выбрать вариант для десктопов.
Когда вы определились с дизайном, идите и попробуйте сверстать его на CodePen. Если вы застряли, помните что StackOverflow (англ.) ваш друг. Другой полезной практикой будет пойти на такие сайты, как Medium, AirBnB и Dropbox и при помощи инструментов разработчика (англ.) посмотреть как реализована разметка и стили. Так же взгляните на некоторые примеры на CodePen. Я прикрепляю несколько хороших ссылок:
Не стоит расстраиваться если ваша копия будет отличатся от оригинала. Продолжайте практиковаться с разными дизайнами и со временем вы заметите существенные улучшения.
Если у вас нет за плечами опыта в дизайне, вероятнее всего, ваш дизайнерский глазомер не настроен. Фронтенд-разработчик с хорошим дизайнерским чутьем будет в состоянии отличить хороший дизайн и сверстать его идеально. Я написал статью несколько недель назад о том, как развить свое дизайнерское чутье (рус.).
Эксперимент 2
Надеюсь, первый эксперимент дал вам определенную уверенность в написании HTML и CSS. Для эксперимента 2 мы заглянем на ряд сайтов, затем напишем код нескольких компонентов.
Некоторые веб-сайты используют CSS фреймворки или обфускацию кода (рус.), затрудняя чтение. Поэтому я подобрал сайты с хорошим дизайном и легким для чтения кодом.
Еще раз повторю, что целью второго эксперимента является не воссоздание главной страницы. Даже не смотря на то, что это бы точно не помешало! Выберите пару ключевых компонентов, например навигационную панель или секцию с баннерами и сверстайте их. Я написал свои предложения рядом со ссылками на сайты, но вы можете выбрать другие части на свое усмотрение.
Вы можете использовать CodePen для своих экспериментов или выполните их на своем компьютере. Если вы планируете работать локально, то так же можете скачать этот пример проекта в качестве шаблона или создать файлы с нуля. Я советую вам использовать редакторы Atom или Sublime.
К тому же помните, что вы всегда можете посмотреть HTML или CSS любого сайта. Просто кликните правой кнопкой мыши на странице или на определенном элементе, выберите “Просмотреть код” и появится панель с HTML кодом в левой части и CSS кодом в правой. После окончания верстки или в момент, когда вы в тупике проинспектируйте свой код и посмотрите, как взаимодействуют ваши HTML и CSS.
Лучшие практики HTML и CSS
То, что вы узнали выше — основы HTML и CSS. Следующим шагом будет изучение лучших практик. Лучшие практики представляют из себя набор правил, которые улучшат качество вашего кода.
Семантичная разметка
Одним из лучших правил для HTML и CSS это написание семантичной разметки. Хорошая веб-семантика означает использование подходящих HTML тегов и “говорящих” названий классов в CSS, которые будут передавать структурный смысл.
Например, тег h1 говорит нам, что вложенный текст является важным заголовком. Другим примером является тег footer, который говорит нам что элемент должен располагаться внизу страницы. Для дальнейшего изучения прочтите Основы семантической верстки на HTML5 (рус.) и Для чего нужна семантика в именах классов (англ.) от CSSTricks.
Соглашение об именах в CSS
Следующая важная хорошая практика в CSS собственно соглашение об именах. Хорошее именование, как семантичная разметка, передает смысл и помогает сделать наш код предсказуемым, удобным для чтения и поддержки. Вы можете почитать о разных соглашениях в статье OOCSS, ACSS, BEM, SMACSS: что это? Что мне использовать? (англ.) или Правильный CSS: OOCSS, SMACSS, BEM и SASS (рус.).
В общем я предлагаю вам начать с простых соглашений об именах, которые будут вам интуитивно понятны. Со временем придет понимание, с каким лично вам удобнее всего работать. Чтобы посмотреть, как большие компании типа Medium используют в своей работе BEM можете почитать CSS у Medium чертовски хорош (англ.). В этой статье вы так же узнаете, что составление эффективного набора CSS правил это процесс итеративный.
Сброс CSS
Браузеры имеют небольшие различия при отрисовке стилей, начиная от отступов и до высоты строк. По этой причине всегда сбрасывайте CSS. MeyerWeb — самый популярный способ. Если вы хотите копнуть глубже, то можете почитать Создайте свой собственный файл Reset.css (англ.).
Кроссбраузерная поддержка
Кроссбраузерная поддержка означает что ваш код поддерживает большую часть современных брузеров. Некоторые свойства CSS^ например transition, требуют префиксов (англ.) для их верной работы в разных браузерах. Можете почитать о префиксах в статьях CSS Vendor Prefixes (англ.) или Вендорные префиксы (рус.). Главное что вы должны запомнить — тестируйте свои сайты во всех браузерах, включая Chrome, Firefox и Safari.
Препроцессоры и постпроцессоры CSS
C момента своего появления в 1990-х, CSS проделал огромный путь. Поскольку пользовательские интерфейсы становятся все сложнее, разработчики придумывают инструменты, позволяющие облегчить работу над их созданием. Для этого и предназначены пре- и постпроцессоры.
Препроцессоры представляют из себя расширения для языка CSS, которые добавляют наворотов типа переменных, миксинов и наследования. Два самых главных препроцессора Sass и Less. На 2016 год Sass более распространен. Bootstrap, популярный CSS фреймворк, переключился с Less на Sass. К тому же когда большинство людей заводят речь о Sass, то они на самом деле говорят о SCSS (рус.).
Постпроцессоры CSS вносят изменения в код после того, как он был написан или после компиляции препроцессора. Например, некоторые постпроцессоры, тот же PostCSS, имеют плагины для автоматического добавления префиксов.
Когда вы впервые открываете для себя препроцессоры и постпроцессоры, появляется соблазн использовать их везде. Тем не менее начните с простого и добавляйте переменные, миксины только там, где это действительно необходимо. Статья, о которой я упоминал ранее, CSS у Medium чертовски хорош (англ.), так же рассказывает о том, какие возможны излишки при работе с препроцессорами.
Система сеток и отзывчивость
Сетки в CSS это структура, позволяющая вам “укладывать” элементы горизонтально и вертикально.
Такие фреймворки, как Bootstrap, Skeleton и Foundation предусматривают стили, управляющие строками и колонками в раскладке. В то время как фреймворки, безусловно, полезны, стоит понимать саму суть работы сеток. Прекрасные обзоры на эту тему: Понимание CSS сеток (англ.) и Don’t Overthink Grids (англ.).
Одна из главных возможностей, которую дают сетки, это обеспечение отзывчивости вашего сайта. Отзывчивость ( responsiveness) означает, что сайт изменяет свои размеры в зависимости от ширины окна браузера. Долгое время отзывчивость достигалась при помощи медиавыражений в CSS (рус.): правил, срабатывающих только при определенных размерах экрана.
Вы можете почитать больше на тему медиавыражений в статье Введение в медиавыражения (англ.). Так же, поскольку мы вступили в эру mobile-first (рус.), загляните в Введение в медиавыражения Mobile-First (англ.).
Отработка лучших практик HTML и CSS
Теперь вы вооружены самыми лучшими практиками. Давайте проверим их в бою! Целью следующих двух экспериментов является практика написания чистого кода и наблюдение за долгосрочным эффектом повышения читабельности и поддерживаемости.
Эксперимент 3
В рамках эксперимента 3 выберите один из прошлых экспериментов и проведите рефакторинг своего кода с использованием советов, которые вы узнали выше. Рефакторинг означает редактирование вашего кода так, чтобы он стал проще, в том числе в плане читаемости.
Умение проводить эффективный рефакторинг кода — очень важный навык для фронтенд-разработчика. Создание эффективного кода- постоянный процесс. Возьмите статью CSS архитектура: рефакторинг CSS (англ.) в качестве отправной точки для вашей работы над рефакторингом.
Ниже несколько вопросов, на которые вы должны себе ответить в процессе рефакторинга.
Эксперимент 4
Последний эксперимент для отработки выученных правил. Иногда последствия передовых практик не всегда очевидны до тех пор, пока они не применяются для большого проекта.
В качестве последнего эксперимента создайте собственный сайт-портфолио. Для фронтенд-разработчика портфолио—самый важный актив. Сайт-портфолио предназначен для демонстрации ваших работ. Что еще более важно, это постоянно обновляющийся отчет вашего прогресса в разработке. Поэтому создавайте портфолио даже если у вас 1–2 работы.
Если первый вариант вашего портфолио не идеален — это нормально! Портфолио пройдет через множество итераций (рус.). В первую очередь важно использовать при разработке все ваши навыки.
Будьте в курсе
До тех пор, пока HTML и CSS не выйдут из употребления, важно оставаться в курсе всех событий в области фронтенда.
Ниже приведен список сайтов, блогов и форумов, которые являются передовыми источниками информации.
Учитесь на примерах
Лучшим способом обучения является работа с примерами, практика. Вот несколько руководств по стилям (стайлгайдов (рус.)) и соглашений, которые помогут вам стать более эффективным разработчиком.
Стайлгайды
Стайлгайды в вебе это наборы CSS компонентов и паттернов, которые могут быть использованы на разных сайтах. Ключевой вещью для обучения является понимание того, как повторно использовать компоненты на основе HTML и CSS и не нарушать принцип “Не повторяйся” (рус.).
Соглашения о коде
Соглашения о коде призваны сделать ваш код читабельным и легким в поддержке. Некоторые из этих ссылок, например CSS Guidelines (англ.), являются набором советов по улучшению написания HTML и CSS в то время, как другие ссылки, например Github internal CSS toolkit and guidelines (англ.) являются примерами эффективного кода.
Сворачиваемся
Надеюсь, к концу этой статьи вы познакомились с HTML и CSS и обзавелись парой проектов. Лучшими способами изучения фронтенда являются постоянные эксперименты и работа над проектами. Помните — каждый разработчик с чего-то начинал. И лучше начать сегодня, чем завтра.
Эта статья первая из двух запланированных. Во второй части мы поговорим об интерактиве с помощью JavaScript и библиотеках/фреймворках. Кроме того если вы хотите чтобы я подробно на чем-то остановился или у вас появились вопросы, то не стесняйтесь писать мне в Twitter.
P.S. Поделитесь этой статьей с друзьями, если она вам понравилась. Это много значит для меня.
Нашли ошибку? Воспользуйтесь функцией Private notes: выделяете текст с ошибкой, нажимаете на символ замка в появившемся дудле и оставляете свой комментарий. Спасибо!
Итак, вы решили стать фронтендером: практическое руководство для роста начинающего разработчика
Во фронтенд разработке за последние несколько лет наблюдается огромный скачок развития. JavaScript продолжает увеличивать отрыв от остальных языков как наиболее популярный на Github, а вакансия фронтенд разработчика с каждым годом набирает популярность. И это не удивительно, что c ростом популярности языка мы наблюдаем значительное увеличение числа многообещающих программ изучения фронтенд технологий, учебников, ускоренных курсов и прочего. Такой цикл естественен для любой бурно развивающейся отрасли, и это происходит следующим образом:
Конечным результатом является огромный «бассейн» слабо обученных кадров. Большинство студентов таких курсов уходят с небольшим портфолио сайта и несколькими демо на javascript. Им не хватает углубленных знаний в отрасли, которые позволили бы им решать реальные задачи, с которыми профессиональные разработчики сталкиваются каждый день.
Целью статьи не является свести преимущества этих учебных курсов к минимуму. Сам я разработчик-самоучка и учился до появления этих курсов, и я уверен, что моя жизнь была бы намного проще, если бы эти ресурсы были доступны для меня, когда я начинал. Они представляют собой отличный способ встать на путь своей карьеры и начать учебный процесс. Тем не менее, они являются только началом карьеры.
Хорошо, а что теперь?
Для тех из вас, кто недавно завершил одну из таких программ, и теперь являются частью постоянно растущего «бассейна» начинающих разработчиков, вы можете спросить себя — что теперь? При таком количестве вариантов для обучения основным навыкам, я хотел бы взглянуть на некоторые последующие шаги по переходу от джуниор разработчика, к трудоспособному среднему уровню.
Ниже приведены несколько вещей, которые помогли мне преодолеть разрыв между первыми днями моего обучения и становлением компетентным и продуктивным разработчиком:
Читайте книги
Чтобы получить глубокое понимание фронтенд языков (JavaScript, CSS и HTML), не достаточно читать обучающие материалы — вы должны читать книги. Еще в самом начале моей обучения, я помню, как читал Javascript Шаблоны без малейшего понятия — зачем они требуются. Но, в процессе обучения, термины в книге начали обретать смысл. Я использовал описанные приемы в качестве эталона, который гарантировал, что я писал код грамотно. Через некоторое время, я был в состоянии полностью понять книгу, и даже мог сформулировать своё мнение по некоторым позициям автора книги.
Для закрепления навыков я бы советовал прочитать еще Красноречивый Javascript, SMACSS и HTML и CSS: Создание и проектирование веб-приложений; но не останавливаться на этом.
Посещайте митапы
Митапы служат отличным напоминанием, что вы не одиноки. Делитесь опытом с коллегами, посещая митапы, чтобы узнать больше о веб-разработке. В первое время вы можете чувствовать себя не комфортно, но секрет в том, что разработчики всегда готовы поделиться своим опытом, и почти каждый был в вашем положении когда-то. Поэтому ищите митапы по своему профилю, посещайте, слушайте и не стесняйтесь задавать вопросы. В конечном итоге, спустя некоторое время, вещи, которые вам были непонятны, начнут обретать смысл.
Открытый исходный код
Это может быть сложной задачей для всех уровней разработчиков, но если вы разрабатываете для веба, я могу почти гарантировать, что вы используете программное обеспечение с открытым исходным кодом. Открытое программное обеспечение — это ПО, которым можно свободно пользоваться, делиться и вносить изменения кем угодно. Так, с чего начать? Подумайте об инструменте, который вы используете — скажем… JQuery или Bootstrap, и начните с поиска задач на Github. Есть что-то, что вы думаете, может быть улучшено? Создайте задачу, или, еще лучше, отправьте свои изменения. Худшее, что может случиться, только то, что ваши изменения могут быть отклонены. Но куда важнее является то, что вы получаете реальные отзывы.
Работа для начинающих разработчиков, стажировка, гибридная роль
Это может показаться очевидным, но важная вещь, которую нужно запомнить: держать все варианты открытыми. Найти работу младшим разработчиком, или пройти практику, которая будет стоить того — трудно. Помните, что получить работу важно, но если вы работаете в роли джуниор разработчика или стажера, убедитесь, что существует четкий карьерный рост. Есть множество хороших компаний, которые стремятся учить и растить свой младший персонал, но множество других были бы счастливы держать их в качестве рабочих лошадок, которые делают ту работу, которую другие делать не хотят — для них важнее дешевая рабочая сила, чем рост следующего поколения разработчиков.
Другой вариант, когда вы в поисках работы на гибридную роль. Так, одна из моих первых работ в качестве разработчика была веб-продюсер. Которая означала, что иногда мне приходилось добавлять что-то в WordPress, а иногда я писал и простой новый функционал для существующего сайта. Это было не слишком интересно, но это был наиболее простой способ начать работать в роли полноценного разработчика.
Начните свой проект
Хочу подчеркнуть, что, решение реальных задач собственного проекта — это абсолютно лучший способ стать отличным разработчиком. Вместо борьбы с неизвестным, вы можете работать в направлении решения конкретных проблем.
Первые строки кода, который я написал были результатом участия в конкурсе Startup Weekend с другом, у которого была идея создать приложение employee suggestion box app. Этот процесс был ужасен, но оба мы имели четкое представление о том, что должно делать наше приложение. Поэтому я хардкодил и спешил, до тех пор, пока он не заработал как мы хотели. Это был грязный процесс и, чтобы быть откровенным, исходный код был ужасен, но я узнал очень много нового за короткий отрезок времени. Работа с реальными клиентами была тоже тяжелой, мы должны были управлять их ожиданиями, а с другой стороны, сторонний проект без клиентов, где время безотказной работы не имеет значения. После запуска этого бизнеса через 8 месяцев, я был готов оставить мою первую работу с полным рабочим днем.
Никогда не прекращайте учиться
Я надеюсь, что эти пункты помогут ускорить ваше обучение, но они ни в коем случае не являются целостными или всеохватывающими. Невероятно, но в развитии фронтенд технологий происходят постоянные изменения, поэтому вы никогда не должны прекращать свое обучение. Независимо от того, сколько книг вы прочитали, митапов посетили, или создали проектов, процесс обучения должен продолжаться, если вы хотите, оставаться компетентным разработчиком, обладающим актуальными знаниями.
Есть огромное количество возможностей развиваться и огромное количество людей, борющихся за ту же работу, что ищете вы. Но если вы будете придерживаться всех пунктов, перечисленных здесь, вы обязательно зарекомендуете себя как высококвалифицированный разработчик и добьетесь успеха в своей карьере.