Как стать frontend разработчиком с нуля: Как стать фронтенд-разработчиком? Пошаговый гид в мир фронтенда

Как стать фронтенд-разработчиком? Пошаговый гид в мир фронтенда

Приветствую всех! Меня зовут Пучнина Анастасия, я ведущий разработчик в компании ДомКлик, занимаюсь фронтендом Витрины объявлений. Сегодня я хотела бы поделиться с вами своим мнением на тему того, что важно знать фронтенд-разработчику. Эта статья будет полезна тем, кто только начинает свой путь в разработке, или имеет опыт программирования в другой области и решил перейти на сторону фронтенда.

Содержание:

1. Кто такой фронтендер и чем он занимается?
2. С чего начать и что читать? Чек-лист обучения
3. Какие трудности могут быть? Ошибки в начале пути
4. Подготовка к собеседованию на Junior-разработчика

Кто такой фронтендер и чем он занимается?

Допустим, вы хотите арендовать квартиру: у вас есть компьютер с выходом в Интернет, вы знаете адрес другого, более мощного компьютера, который хранит огромное множество объявлений. Если представить, что привычных сайтов не существует и вы не можете, например, посмотреть объявления на карте, отфильтровать ненужные, заполнив удобную форму, вам придётся самим составлять сетевой запрос и разбираться в том, как и куда отправлять данные.

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

Фронтенд-разработчиками называют программистов, которые отвечают за создание такой внешней стороны (англ. front end) веб-сайтов. Это клиентская часть сайта, с которой пользователь непосредственно взаимодействует на своем компьютере или телефоне (клиенте).

Многим известно, что сайты включают в себя разметку и стили, которые необходимы, чтобы обеспечить понятную структуру страницы и дизайн, однако фронтенд-разработка этим не ограничивается. Большинство сайтов, которыми мы постоянно пользуемся, это полноценные веб-приложения: почта, онлайн-банк, онлайн-кинотеатры, редакторы фото, заметки. Чтобы такие приложения работали, фронтенд-разработчики добавляют программный код, который выполняется в браузере, реализует нужную функциональность и, при необходимости, взаимодействует с сервером, динамически получая нужную информацию.

Фронтенд-разработчик:

• создает пользовательский интерфейс, добавляет разметку и стили страниц сайта;
• программирует логику, которая выполняется на клиентском устройстве, разрабатывает архитектуру клиентского приложения;
• оптимизирует производительность фронтенда, чтобы проект быстро загружался, поисковики поднимали сайт в рейтинге выдачи, а пользователи не чувствовали задержки при навигации и взаимодействии с интерфейсом;
• тестирует разработанную функциональность и пишет автоматические тесты, чтобы обеспечить высокое качество и не допустить ошибок при изменении кода;
• настраивает сборку проекта, что позволяет автоматизировать дополнительную обработку кода и файлов перед запуском приложения;
• выполняет развёртывание приложения: выкладывает на сервер, чтобы приложение было доступно в сети и пользователи могли им воспользоваться;
• следит за возникающими ошибками с помощью средств для мониторинга и вовремя их устраняет 🙂

В разных командах фронтенд-разработчики могут решать совершенно разные задачи, например:

• Разрабатывают клиентскую часть веб-приложения для бизнеса (то, что видят конечные пользователи, когда пользуются различными онлайн-услугами).
• Разрабатывают библиотеку компонентов интерфейса: отдельные блоки, которые другие разработчики используют в своих проектах (например, кнопки, всплывающие окна, поля форм или элементы для графиков). Это могут быть библиотеки с открытым исходным кодом, которые подключают разработчики по всему миру, или внутренняя библиотека компонентов компании с определенным дизайном.
• Создают технические инструменты для улучшения архитектуры приложений. Инструменты, которыми сейчас пользуются всё сообщество фронтендеров, когда-то создали другие фронтенд-разработчики, чтобы улучшить пользовательский опыт при использовании сайтов и сам процесс разработки. Вы можете стать одним из таких разработчиков!

С чего начать и что читать? Чек-лист обучения

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

В начале пути некоторых пугает список технологий, названий и аббревиатур во фронтенде. Их огромное множество. Но даже опытный разработчик не знает, да и не должен знать абсолютно все технологии и библиотеки, которые только существуют (ходят слухи, что каждую секунду в мире фронтенда выпускается новая библиотека:)

Три кита разработки под браузеры — это HTML, CSS и JavaScript, с которых и стоит начать.

Если у вас нет опыта в разработке и вам сложно обучаться самостоятельно, хорошим решением будет пойти на курсы фронтенд-разработчика с наставником в одной из известных школ программирования. Также хорошие курсы по вёрстке и фронтенд-разработке можно найти на Udemy и Coursera. Однако это совсем не обязательно, в интернете много бесплатных материалов и источников по необходимым темам.

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

Сохраняйте в закладки и пользуйтесь.

1. Как работает Веб

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

2. Среда разработки

Писать код и разметку можно даже в блокноте, но удобнее использовать специальные редакторы. Наиболее популярные среди фронтендеров:

• VSCode — бесплатный быстрый редактор с большим количеством дополнений для разработки;
• JetBrains WebStorm — полноценная IDE, есть пробный период и возможность получить доступ по студенческой лицензии;
• Если у вас возникает потребность отправить другому человеку фрагмент кода, быстро проверить или сохранить код в сети, можно воспользоваться онлайн-редактором, например, Codepen.

3. Основы HTML

Изучите структуру HTML-документа, что такое теги и какие они есть, мета-теги, атрибуты, как добавлять изображения, создавать формы. Важными моментами в верстке является семантика и доступность.

4. CSS

Добавление стилей для элементов страницы. Изучаем блочную модель, позиционирование, каскадирование стилей, специфичность селекторов, псевдоэлементы, адаптивную верстку (для компьютеров, планшетов и телефонов). Учимся верстать современные макеты с помощью Flexbox и Grid.

5. Система контроля версий Git

Git поможет вам выйти на новый уровень в процессе написания кода. Это незаменимый инструмент для разработчиков, который позволяет поэтапно сохранять информацию обо всех изменениях в коде, возвращаться к разному состоянию, и многое другое. Желательно научиться работать с Git в терминале, а также попрактиковаться: создать репозиторий на Github или Gitlab и опробовать основные возможности Git на своём тестовом репозитории.

Практика. Практика. Практика!

На этом этапе я предлагаю побольше попрактиковаться и сделать свой небольшой проект, чтобы запомнить пройденный материал. Необязательно самостоятельно придумывать дизайн сайта, вы можете взять готовый макет. Создайте landing page или, например, сверстайте сайт-портфолио, сохраняйте код на Github в процессе разработки и попробуйте разместить сайт на бесплатном хостинге для статических сайтов — Github Pages. Если вам недостаточно практики, попробуйте посмотреть, как верстают другие, и повторить. На YouTube достаточно видеоуроков на эту тему (например, по запросу «верстка сайта по макету figma»).

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

6. Язык программирования JavaScript

Не путайте JavaScript с Java. Изучите основы языка: переменные, объекты, типы данных, функции, контекст и замыкания, классы. Сравните отличия спецификаций EcmaScript старых и новых версий. После понимания основ переходите к более сложным вещам: тонкостям асинхронного программирования (коллбеки, промисы, async-await) и выполнению запросов на сервер (XmlHttpRequest, Ajax, Fetch, Cookie).

7. DOM (Document Object Model)

DOM — это объектная модель документа, дерево, которое строит браузер, чтобы отрисовать вашу страницу на экране. Научившись работать с DOM, вы сможете с помощью JavaScript создавать или изменять элементы на странице, реагировать на клики пользователей и многое другое. Работе с DOM и событиям в браузере посвящена отдельная часть LearnJavascript.

Подробно тема DOM также описана в книге «Выразительный JavaScript», автор Марейн Хавербек.

8. Node.js, NPM

Благодаря программной платформе Node.js язык JavaScript можно использовать не только в браузере. С помощью этого инструмента можно написать консольную программу или серверную часть приложения.

Попробуйте написать свой собственный небольшой сервер.

В своих JavaScript-программах вы можете использовать модули, написанные другими разработчиками. Ознакомьтесь с онлайн-хранилищем пакетов NPM.

9. Babel

Babel Js — компилятор JavaScript-кода, который позволяет использовать последние возможности языка, например, стрелочные функции, классы, optional chaining, не дожидаясь их полной поддержки браузерами. Вам необходимо лишь правильно сконфигурировать Babel под нужную версию EcmaScript или список поддерживаемых вами браузеров, исходный код будет преобразован автоматически.

Попробуйте воспользоваться онлайн-компилятором кода на официальном сайте, чтобы посмотреть, во что превращаются современные конструкции JavaScript. Настройте компиляцию кода для небольшого JavaScript-приложения, подключив Babel как NPM-пакет.

10. Сборщики модулей, Webpack

При создании приложений разработчики делят код на части (модули), подключают дополнительные обработчики кода, настраивают приложения для различных окружений (development и production). Чтобы это было возможным, а нам не пришлось вручную подключать модули в HTML-файле в нужном порядке и следить за изменениями, в приложениях используются сборщики модулей (бандлеры).

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

Webpack — один из самых популярных сборщиков модулей. Это помощник разработчиков, несмотря на то, что по началу он может показаться достаточно сложным. Его гибкость позволяет настроить сборку с использованием огромного множества плагинов и загрузчиков (пре- и пост- процессоров CSS и HTML, Babel и др.), оптимизировать ресурсы, быстро подгружать изменения в процессе разработки с помощью hot module replacement, и многое другое.

11. Препроцессоры CSS

CSS-препроцессор — это надстройка над CSS, которая предоставляет удобные новые синтаксические конструкции для разработчика, добавляя новые возможности, которые позволяют упростить и ускорить разработку и поддержку стилей.

Наиболее популярные препроцессоры:

Основными преимуществами использования препроцессоров CSS-кода являются:

• Модульность. Вы сможете создавать CSS-код в разных файлах и импортировать стили при необходимости.
• Вложенность. Вкладывайте селекторы друг в друга для компактности и логичной структуры кода. Это улучшит читабельность и уменьшит дублирование (будет особенно удобно, если вы станете использовать BEM-методологию для написания CSS).
• Использование CSS-переменных и функций (миксинов).
• Вы можете выбрать препроцессор с удобным для вас синтаксисом (например, CSS-код без фигурных скобок и точек с запятой).

Советую также на этом этапе ознакомиться с инструментом трансформации стилей PostCSS и, в частности, с плагином Autoprefixer. Этот плагин позволяет автоматически добавлять вендорные префиксы для CSS-свойств вашего кода.

12. Препроцессоры HTML (Шаблонизаторы)

Препроцессоры HTML имеют те же преимущества, что и CSS-препроцессоры. Они позволяют более эффективно писать HTML-разметку, разбивать код на модули, а также использовать условия, циклы, миксины, наследование.

Популярные шаблонизаторы:

Настройте свой проект, добавив в webpack-конфигурацию загрузчики для обработки CSS- и HTML-кода препроцессорами.

13. Стиль кода и линтеры

Стиль кода (code style) — набор правил, который позволяет сделать код единообразным, максимально удобным для восприятия и читаемым для вас и других разработчиков. Такие правила описывают, где и какие отступы и скобки должны быть, максимальную длину строк, названия переменных, позволяют определить слишком запутанный или лишний код и множество других аспектов.

Некоторые компании придумывают свой стиль кода. Одним из известных наборов правил во фронтенде является стандарт компании Airbnb, советую ознакомиться с ним для повышения качества своего кода.

Существуют специальные инструменты, которые могут проверять ваш код автоматически и позволяют легко поддерживать код в определенном стиле, настроив конфигурацию проекта один раз:

Ознакомьтесь с документацией инструментов, попробуйте подключить их к своему проекту и IDE, следуйте определенному стилю кода в своём проекте, чтобы сделать приложение лучше!

14.

Изучение фреймворка/UI-библиотеки

React, Angular или Vue? На 2020 год основная борьба идет между этими библиотеками. Вы можете выбрать любую из них. Если вам симпатизирует какая-то конкретная компания, в которой вы хотели бы работать, можете выбрать используемый ими фреймворк.

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

Начните изучать React с официальной документации, она достаточно подробная. Если её вам покажется недостаточно, можно найти на Udemy полноценный курс (например, Modern React and Redux — на английском языке, с очень понятным и подробным объяснением для начинающих, практическими заданиями и всем необходимым материалом по React и библиотекам).

Уделите внимание описанию типов входных параметров для React-компонентов (проверка типов с помощью PropTypes), а также написанию комментариев по стандарту JSDoc (цикл статей по использованию JSDoc).

По мере вашего продвижения необходимо будет научиться управлять состоянием приложения. Библиотеки, которые помогают в этом: Redux и Mobx. Начать рекомендую с Redux — это наиболее популярная библиотека в связке с React. Ознакомьтесь с официальной документацией или переводом. Также советую курс от одного из авторов библиотеки (Getting Started with Redux от Дэна Абрамова).

Затем приступайте к изучению библиотеки для удобного выполнения асинхронных действий (например, запросов к серверу). Самая простая библиотека, с которой стоит начать — Redux Thunk (документация).

15. Автоматическое тестирование

Тестирование — это процесс оценки того, что все модули приложения ведут себя так, как ожидалось. Благодаря тестированию можно избежать большого количества ошибок, которые вы могли бы не заметить. Изучите, что такое тестирование и какие виды бывают (Тестирование для «чайников»). Научитесь писать модульные тесты к вашему коду, используя одну из библиотек для тестирования, например, Jest.

16. Углубленное

Какие трудности могут быть? Ошибки в начале пути

Изучение фреймворков вместо базовых знаний

Иногда будет казаться, что лучше сразу изучать какой-нибудь популярный фреймворк или библиотеку. Это достаточно частая ошибка, особенно во фронтенде: люди начинают изучать React или верстают с помощью Bootstrap и Material UI, не разобравшись в основах и не получив достаточных знаний по HTML, CSS и JavaScript. Можно использовать такой подход, если вы «бежите на короткую дистанцию» и вам нужно быстро сделать какой-нибудь проект. Но если вы планируете стать разработчиком, это не принесет нужного результата.
Нет необходимости знать наизусть абсолютно все CSS-свойства или методы в JS, вы сможете поискать их, если забудете. Важно понимание основных концепций и тонкостей: это то, что будет вашим крепким фундаментом во фронтенд-разработке.

Обучение — это труд, самодисциплина и много практики

Ошибочно ожидать, что вы разберетесь со всем материалом за неделю или выучите JS за один день. Количество времени, которое вам будет необходимо, это очень индивидуальный вопрос, и, скорее всего, процесс займёт не один месяц.

Не пугайтесь, изучайте пошагово и постепенно, больше практикуйтесь — так вы сможете быстрее продвинуться в обучении. Всем нужно какое-то время, чтобы научиться новому.

Определитесь, зачем и почему вы хотите стать фронтенд-разработчиком. Фронтенд — это область, в которой можно реализовать интересные решения и работать над проектами, которыми будет пользоваться огромное количество людей по всему миру! В добавок к этому, чем больше вы наберете знаний и опыта, тем выше будет оплачиваться ваш труд.

Вспоминайте о мотивирующих именно вас моментах, когда ваш код не будет работать, а очередной блок не будет выравниваться так, как вы этого хотите 🙂 Если вам нравится видеть результат своей работы, изучайте материал через практические задачи или создание своего проекта, так вы будете быстрее получать отдачу.

Копирование чужого кода

Если вы столкнетесь с проблемами и ошибками, которые не сможете решить, то не стесняйтесь искать помощи в Google. Учитесь пользоваться поиском и находить причину возникшей проблемы, но не копируйте чужой код вслепую.

Обязательно разберитесь, что происходит в найденном решении, и почему именно так. Это будет дольше и затратнее, но, если не разобраться, вы с большей вероятностью столкнетесь с похожей проблемой и опять не сможете решить её самостоятельно, а ваш код превратится в лапшу с разными стилями из-за копирования чужого кода.

Не доверяйте на 100% коду, который вы находите

Другие люди тоже могут ошибаться или иметь недостаточно опыта. Если вы находите видеоурок от магистра JavaScript или вёрстки, это не всегда значит, что преподносимое — идеальное решение и лучший возможный код.

Смотрите разные источники и критически относитесь ко всему, что находите. По мере того, как вы будете набираться опыта, вы поймете, какой код и подходы лучше, а что только усложняет ваше приложение и добавляет костылей, об которые вы потом споткнетесь.

Подготовка к собеседованию на Junior-разработчика

Собеседования в разные компании могут проходить совершенно по-разному, я бы хотела рассказать о необходимых знаниях, основываясь на своём опыте.

Направления, по которым чаще всего собеседуют на должность фронтенд-разработчика — это вёрстка, JavaScript, в частности, асинхронность и знание одного из фронтенд-фреймворка или библиотеки. На позицию Junior больше внимания уделяется именно вёрстке и JavaScript.

Вопросы могут быть как теоретические, так и практические, на решение небольших задач.

Сообщество разработчиков составило примерный список вопросов для интервью. Пройдитесь по всем вопросам и попробуйте дать ответ. Если вы не смогли на что-то ответить, это сигнал к повторению темы.

В подготовке к решению задач на JavaScript могут помочь сайты с задачами по программированию, на которых вы можете попрактиковаться онлайн и проверить свои навыки (начинайте с раздела с простыми задачами). Особенно популярными задачами являются задачи на применение методов работы с массивами. Пример таких задач: проверка на палиндром или анаграмму.

Сайты с задачами по программированию:

В проверке знаний также могут помочь Telegram-каналы с задачками и тестами по JavaScript (например, @js_test).

Задачи на применение действительно сложных алгоритмов и знание таких структур данных, как деревья и графы, практически нигде не даются при собеседовании на должность Junior фронтенд-разработчика. Так что не бойтесь: даже если прохождение собеседования кажется вам очень страшным, на самом деле, если вы смогли ответить на все вопросы выше, то с большой вероятностью сможете пройти собеседование.

Маленький совет: если вы не уверены в своих силах, всё равно пройдите собеседование в какой-нибудь компании. И даже если вам не сделают предложение, вы поймете свои слабые места. К следующему собеседованию сможете подготовиться еще лучше!

Спасибо, что дочитали до конца. Надеюсь, статья была вам полезна. Если знаете, что она может быть полезна кому-то другому, то поделитесь.

Желаю удачи в покорении новых вершин!

базовые знания и план обучения

Итак, друзья, вы решили встать на путь программирования? Жму руку, это решение изменит вашу жизнь. Это всегда интересная и востребованная работа на стыке интеллекта и творчества, работа о том, как принести пользу людям, сделать мир чуточку лучше. Возможности реализации в ней бесконечны.

В программировании много разных областей: веб-разработка, мобильная, десктопные приложения, разработка ОС, драйверов для железа. Веб-разработка — одна из самых интересных и востребованных областей. К её плюсам можно отнести то, что ваш продукт лежит в Интернете, и чтобы его увидеть, достаточно набрать адрес в браузере любого устройства, не нужно ничего качать и устанавливать. К тому же, с помощью современных инструментов, зная веб, можно разрабатывать сразу и мобильные, и десктопные приложения. Веб состоит из frontend (то, что видит клиент в браузере) и backend (серверная часть, занимается хранением, обработкой и выдачей данных). Я предлагаю начать знакомство с вебом именно с фронтенда.

Да, кстати, меня зовут Роман Латкин, я почти 10 лет варюсь в веб-разработке. Когда я начинал, всё было одновременно просто и сложно. Просто, потому что для построения приложения много знать было не нужно: вот HTML, немного CSS, чуть-чуть JavaScript — и готово. Сложно, потому что разработка велась через боль. Сейчас множество этой боли вылечено с помощью громадной экосистемы инструментов, но она очень пугает новичков, они не знают, как подступиться к фронтенду, с какой стороны подойти. Мне повезло, я наблюдал развитие фронтенда почти с начала, и у меня в голове всё неплохо уложилось. И я хочу в помощь начинающим разработчикам передать это понимание. Надеюсь, после прочтения этой статьи, вы будете чётко знать, каким путём идти, куда копать и по какому плану развиваться.

1. Три составляющих фронтенда
2. Первые сайты
3. jQuery
4. MVC
5. Процессоры и сборщики
6. Компонентная архитектура
7. CSS-фреймворки, адаптивность
8. В путь!

Три составляющих фронтенда

Весь фронтенд состоит из трёх составляющих: HTML (содержание и разметка), JavaScript (логика) и CSS (внешний вид, позиционирование). HTML описывает содержание страницы и выглядит примерно так: <table></table>. CSS описывает стили и выглядит вот так: table { background: #ccc; }. JavaScript — язык программирования, описывает логику приложения, а также обращается к элементам HTML, изменяя структуру и содержание страницы (пример кода: var count = 5; count = count + 5; console.log(count) // 10).

Если вам придётся как-нибудь вручную использовать эти средства, чтобы сделать более-менее сложный проект, то вам предстоит испытать много боли. К счастью, мир развивается, сложные вещи упрощаются, люди придумывают всё новые и новые инструменты и технологии, которые делают этот созидательный процесс более приятным и быстрым.

Любой процесс познания можно представить в виде буквы «Т», где горизонтальная линия — широкое понимание, вертикальная — глубокое. У идеального специалиста буква Т большая и красивая, равномерная. Если она вытянута в одну сторону, она некрасива, уродлива; такой специалист мало полезен в боевых делах. Он может либо глубоко разбираться в чём-то одном, но чуть шаг в сторону, и он непригоден; либо поверхностно разбираться во всём, но при этом ничего не уметь. В первую очередь необходимо максимально развить широкую составляющую, чем мы сейчас и займёмся — постараемся максимально широко охватить все аспекты фронтенда, не углубляясь. А потом вы займётесь углублением, которое останется вам на самостоятельную работу.

Чтобы хорошо представлять причины текущего положения вещей, нужно хотя бы чуть-чуть знать историю пути развития фронтенда, да и вообще веб-приложений в целом. Инструментов сейчас столько, что не только новичок, сам чёрт ногу сломит. Поэтому, чтобы в этом всём хорошо ориентироваться, начнём именно с истории, с короткой экскурсии, как всё начиналось, а затем плавно перейдём к современным подходам.

Первые сайты

Вначале люди писали на чистом HTML, рисовали внешний вид на чистом CSS, делали логику на чистом JavaScript. Типичное старомодное приложение — это когда серверная логика генерирует HTML (отвечая на запрос посетителя, сервер берёт данные из базы данных и вставляет их в HTML) и отдаёт его вместе со статическими файлами стилей и клиентской логики на JavaScript, которой в то время (около 10 лет назад) было немного. При совершении перехода на другую страницу весь этот процесс повторялся. То есть раньше как такового разделения на фронтенд и бэкенд не было, было одно цельное приложение, которое одновременно и работало с базой данных, и генерировало HTML.

jQuery

Писать на чистом JavaScript надоедало и появился хороший инструмент — jQuery, который с помощью удобного синтаксиса позволял обращаться к элементам страницы и выполнять с ними какие-то действия. Появлялись различные плагины, готовые решения, стало проще и интереснее.

Чтение по теме: Краткая шпаргалка по jQuery

Но приложения развивались, объём клиентской логики рос, и постепенно всё это превращалось в большую лапшу. Чтобы её распутать, нужна была какая-то форма, архитектура.

MVC

Умные Парни попробовали перенести на фронтенд архитектурный шаблон с серверной части — MVC (модель-представление-контроллер). Этот шаблон диктует правило, что есть модель, которая описывает данные. Например, модель пользователя, модель фильма, модель отзыва. Есть контроллер, который обрабатывает запросы, например «показать по такому-то адресу страницу со списком фильмов». И есть представление, которое отвечает за отображение данных в HTML, в которое контроллер передаёт готовые данные, полученные из базы данных/API.

Здесь началась история single page application, SPA — приложений, которые загружаются один раз, а затем при переходе по страницам обращаются к серверу за данными по API. Этот подход называется AJAX. Вместо того, чтобы генерировать HTML на стороне сервера, сервер отдаёт клиентскую логику приложения один раз. Переходя на другую страницу, например с главной страницы на страницу поиска отелей, приложение запрашивает с сервера данные в чистом виде (к примеру, информацию об отелях), без тегов HTML (как правило в формате JSON), и самостоятельно генерирует представление.

Шаблон MVC на фронтенде был хорош, прекрасно работал, но было излишне сложно. Angular, Backbone — представители этой вехи истории. Они, к слову, живут и сейчас, но я в них глубоко не разбирался.

Процессоры и сборщики

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

В вебе важна скорость, поэтому нельзя просто так отдавать посетителю большие файлы, они будут идти по сети слишком долго. Поэтому все ресурсы сжимаются с помощью разных минификаторов. JavaScript чаще всего с помощью uglify (он удаляет пробелы, делает названия переменных короче и ещё много чего интересного). В CSS удаляются пробелы и могут ещё объединяться некоторые свойства. И всё это собирается в один или несколько файлов вместо 10-20, один файл скачать гораздо быстрее, и на сервер нагрузка меньше.

CSS

Что касается CSS, появлялись так называемые препроцессоры. Они расширяют синтаксис CSS, добавляют туда кучу разных возможностей — вложенные блоки, переменные, циклы. Даже просто отсутствие точек с запятой очень помогает и ускоряет написание кода?.

Препроцессор — это такая программа, которая запускается и компилирует этот сахарный синтаксис в чистый CSS. Использование препроцессоров позволяет избежать повторного использования кода, выстраивает архитектуру, и по сути превращает язык описания стилей в язык программирования. Изучите какой-либо инструмент, и вы поймете. Я для себя сейчас выбрал Stylus; есть ещё несколько, например — LESS, SASS.

Чуть позже придумали постпроцессоры. Они, в отличие от препроцессоров, обрабатывают уже готовый CSS, модифицируя его: например, добавляя дополнительные свойства к уже существующим, или изменяя названия классов, делая их уникальными, чтобы ничего не сломалось. Их чаще всего используют для поддержки кроссбраузерности, о которой мы ещё поговорим ниже. PostCSS — вот этот самый постпроцессор, он ещё обладает большой библиотекой плагинов, упрощающих жизнь.

JavaScript

Насчёт JavaScript: исторически так сложилось, что этот язык изначально был слишком простой и сейчас постоянно развивается, обрастая новыми инструментами. Основная его версия, которая работает во всех современных браузерах, называется ES5. В 2015-м году появился усовершенствованный стандарт JavaScript ES2015, или ES6, который даёт много новых инструментов упрощённого описания логики. Только он не работает в старых браузерах, поэтому используют препроцессор Babel для компиляции его в ES5. То есть код пишется с помощью современного синтаксиса ES6, а для работы в браузере сразу компилируется в ES5.

Есть ещё разные способы писать нормальный код, которые сводятся к тому же: код пишется на своём «особом» языке (как в случае с ES6), а потом транслируется в JavaScript. Вот некоторые из этих «особых» языков программирования:

• TypeScript — он добавляет к JavaScript множество инструментов из серьёзного программирования — классы, интерфейсы, модули и др., а также упорядочивает типы переменных. Он больше для того, чтобы писать массивную логику, пользуясь приёмами строгой типизации, и подходит скорее для отдельных крупных логических модулей;
• CoffeeScript — делает код намного более удобным, понятным, человечным;
• и ещё много разных — Dart, Elm, я их глубоко не изучал.

HTML

Для упрощения написания HTML, чтобы не ломать пальцы о теги, стали использовать препроцессоры HTML. Они позволяют, например, вместо громоздкой конструкции <a href="#">Ссылка</a> с кучей угловых скобочек писать просто a(href="#") Ссылка, а потом компилировать это всё в HTML. Очень рекомендую сразу же освоить Pug, сокращающий объем написанного практически вдвое.

Чтобы удобно вставлять динамические данные в HTML, отделяя данные от разметки, придумали шаблонизаторы. Например, в разметке пишется <h2>{{ title }}</h2>, запускается шаблонизатор со значением переменной title, и это значение подставляется вместо фигурных скобочек. Теги отдельно, контент отдельно. Можно удобно вставлять динамический контент с помощью циклов и условий — например, передавать массивы объектов и выводить их в таблице.

Менеджеры пакетов

Чтобы не изобретать велосипеды, разработчики давно научились делиться между собой готовыми участками кода, модулями. Во фронтенде для этого активно используется менеджер зависимостей npm. На npmjs.com можно найти огромное количество модулей, плагинов, библиотек на все случаи жизни. Прежде чем писать что-то своё, поищите там.

Позже появился усовершенствованный менеджер зависимостей Yarn, он делает всё быстрее и стабильнее, не буду сейчас углубляться, почему.

Менеджеры задач

Для того, чтобы централизованно управлять всем этим зоопарком, появлялись менеджеры задач. Они позволяют в одном месте описать все процессы и этапы сборки приложения. Это Grunt, Gulp, Webpack. Последний — наиболее подходящий для сборки веб-приложения. Он может взять на себя много забот, легко и просто компилировать все ресурсы, будь то скрипты, стили, разметка, картинки — в любом формате (Stylus, Less, Sass, ES6, TypeScript, jpg, png) из любых исходников — в единые бандлы, сборки файлов js, CSS, HTML, которые будут работать в браузере.

Чтение по теме: Webpack — основы настройки проекта на JavaScript и Sass

Компонентная архитектура

Итак, можно продолжить: сложное начали упрощать, и в ходе упрощения, большого упрощения, Умные Парни решили — всё есть компонент. Кнопка — это компонент, шапка — компонент, выбор города — компонент. Страница — тоже компонент. Компонент может содержать в себе другие компоненты. Получилось крайне просто: такая концепция, как оказалось, пришлась как родная к построению клиентских приложений.

Что такое компонент? Это самостоятельный и независимый участок разметки со своей логикой и стилями. У компонента есть свое текущее состояние. Открыто ли меню, активна ли вкладка, и т.п. Состояние всего приложения можно представить как дерево состояний различных компонентов.

Разметка HTML зависит от текущего состояния, изменилось состояние — изменилась разметка. Это реализуется с помощью технологии Virtual Dom — когда DOM (дерево HTML-элементов страницы) рассчитывается сначала виртуально и в конце расчёта отображается в реальном DOM, в разметке. За счёт этой идеи достигли более высокой производительности приложений, ведь одна из самых тяжёлых частей работы браузера — операции с DOM (работа с деревом объектов HTML).

Здесь важно ввести ещё одно понятие — реактивные приложения. Это, упрощённо говоря, когда вместо прямого изменения DOM/Virtual Dom при изменении данных, вводится объект состояния, модель данных, и на её изменения подписывается обработчик, который уже меняет DOM. То есть чтобы что-то поменять в представлении, HTML (например, таблица со списком пользователей), нам достаточно изменить свойство модели (добавить в массив нового пользователя), всё остальное произойдет само (пользователь появится в html-таблице). Вы, наверное, замечали, что некоторые сайты медленно работают, а другие молниеносны. Скорее всего, первый на jQuery и работает с реальным DOM, второй — на одном из реактивных инструментов, с которыми мы познакомимся далее.

React

Итак, эти концепции (Virtual Dom, компоненты, реактивность) улеглись в новом инструменте создания клиентских приложений от Facebook — React. На текущий момент он является одним из лидеров индустрии, наиболее часто используемым во фронтенде. Он обладает развитой экосистемой — можно найти огромное количество готовых компонентов и дополнений.

Управление состоянием

Но между компонентами нужно было наладить связь, им нужно общаться между собой. Нажали на кнопку — изменился цвет. Можно строить эту взаимосвязь напрямую, но это быстро может превратиться в кашу. Тут придумали шаблон централизованного управления состоянием, когда есть одно место, где хранится состояние всего приложения в текущий момент времени. Это, сильно упрощая, такой JavaScript-объект со свойствами. Это состояние изменяется с помощью вызова действий и мутаций, но не будем сейчас так углубляться. Паттерн называется Flux. Самая популярная имплементация управления состоянием для React — Redux.

React, хоть он и обрёл большую популярность и развитую экосистему, на практике оказался слишком голый, сложный, многословный. Для того, чтобы сделать простую форму, нужно много-много лишнего кода написать и кучу дополнений поставить. Для того, чтобы создать простое приложение, нужно ещё много чего установить, и вариантов для простых вещей очень много, легко можно потеряться — экосистема хоть и огромная, но в ней сложно ориентироваться; внешне одинаковые приложения могут быть совсем по-разному устроены внутри. А концепция JSX — переплетение кода и разметки, выглядит не столь удачно, сложно потом понимать, что же такое хотел сказать автор кода, сложно менять разметку.

Vue.js

Тут появился Vue.js — гибкий, эффективный и простой в освоении веб-фреймворк, который несёт в себе всё те же концепции, но они в нём выглядят гораздо удачнее. Он объединил в себе всё лучшее из Angular и React, более чётко ответил на вопрос «что есть что». Из коробки Vue содержит уже большое количество инструментов и возможностей, которые в несколько строк позволяют писать объёмную логику. Разработка значительно упростилась.

Vue принёс ещё несколько интересных концепций, как, например, однофайловые компоненты — файлы, которые содержат в себе сразу логику, разметку и стили, и они там не переплетаются, как в случае с React и JSX. Vue из коробки позволяет использовать любые препроцессоры, которые очень органично вписываются в однофайловые компоненты. И имеет множество готовых встроенных решений, даже свою имплементацию Flux. Vue обладает отличной документацией на русском языке, которая научит вас лучшей практике во фронтенде, от сборки приложения до автотестов.

Изоморфные приложения, SSR

В разговоре об одностраничных приложениях мы упустили одну важную деталь: когда поисковый робот обращается к одностраничному приложению, он ничего не видит — только пустую страницу с тегами body без контента. В старомодных приложениях сервер обратился бы к базе данных, сгенерировал представление и отдал бы готовый HTML с текстом страницы. В случае с одностраничным приложением сервер отдаёт пустую страницу, которая лишь после инициализации подтягивает данные и показывает представление, чего конечно же поисковый робот не сделает. Таким образом, использовать одностраничные приложения для сайтов, ориентированных на контент, SEO, недопустимо.

Это недопущение обходилось множеством хаков и костылей, пока не появилась концепция SSR — Server-Side Rendering. Умные Парни научили весь JavaScript, который работал в браузере, выполняться на сервере с помощью NodeJS (технология создания серверных приложений с помощью браузерного языка JavaScript). Это, конечно, ввело свои ограничения, но жить стало легче. Теперь можно было написать логику один раз на одном языке, и она сразу же работала и на сервере (при первом обращении посетителя/робота генерировался HTML с контентом страницы) и в браузере (последующие переходы посетителя). Это и называется изоморфное, универсальное приложение.

Схема простая: при первом заходе посетитель отправляет запрос на сервер NodeJS, который обращается к API-серверу, берёт данные в виде JSON и отрисовывает их в HTML, возвращая посетителю. Дальше уже приложение живёт в браузере, при последующих переходах по страницам оно напрямую обращается к API-серверу за данными и уже непосредственно в браузере отрисовывает представление.

В React имплементация этой схемы делается разными и сложными путями. В качестве готовых решений есть для этого, например, фреймворк Next.js. В документации Vue есть целый раздел, посвященный SSR. Там указан фреймворк Nuxt — Vue + SSR. С его помощью можно довольно легко писать такие универсальные приложения.

CSS-фреймворки, адаптивность

Теперь мы сменим тему на попроще и поговорим о вёрстке.

Исторически, чтобы создать сетку страницы, её каркас, в первые времена верстальщики использовали таблицы. Потом начали использовать блоки, или контейнеры, появилась контейнерная вёрстка. Положение блоков устанавливалось с помощью свойства позиционирования float: right/left.

В настоящее время всё упрощается, уже почти все браузеры поддерживают Flexbox и CSS Grid — современные удобные способы верстать сетку страницы. Их умелое сочетание позволяет в несколько свойств добиваться таких положений контейнеров, над которыми пришлось бы старыми методами изрядно попотеть, позволяя с лёгкостью выполнить практически любые дизайнерские изыски.

Чтение по теме: Flexbox и Grid — знакомство с CSS-вёрсткой

Адаптивность — это способность страницы выглядеть одинаково хорошо на всех устройствах, будь то ноутбук, планшет или мобильный телефон. Адаптивность достигается с помощью медиа-запросов — блоков условий в CSS, при каких разрешениях экрана какие CSS-свойства должны работать. Её можно также добиться с помощью умелого применения flexbox-контейнеров.

Все веб-приложения в основном типичны, состоят из строк, колонок, таблиц, кнопок и других UI-элементов. Чтобы не писать их каждый раз, в помощь сайтостроителям создавались CSS-фреймворки, где вся разметка уже продумана — достаточно применить нужный класс. Они содержат в себе множество готовых UI-элементов. Самый популярный — конечно же Bootstrap, сейчас уже 4-я версия. Есть ещё Bulma, тоже довольно хороший. И ещё множество менее популярных. Обычно в CSS-фреймворках адаптивность идёт из коробки, важно лишь правильно пользоваться предлагаемыми инструментами. CSS-фреймворки станут отличной основой практически в любом вашем веб-приложении и хорошим началом освоения навыков правильной вёрстки. Их стоит использовать, когда нужны типичные элементы пользовательского интерфейса, адаптивность, а это 99% кейсов в вебе.

Кроссбраузерность

Это слово означает способность сайта отображаться одинаково в разных браузерах. Как правило, CSS-фреймворки берут эту заботу на себя, но я вкратце расскажу, как это достигается. Для начала нужно обнулить все свойства стандартных элементов (разные браузеры отображают стандартные элементы — списки, таблицы и др. по-разному). В CSS-фреймворках для этого часто можно увидеть специальный файлик — reset.css. Следующее — исторически так сложилось, что браузеры развивались по-разному, и теперь некоторые CSS-свойства нужно прописывать специально для каждого браузера, используя префиксы — -webkit, -moz. Эту работу можно делать автоматически с помощью вышеупомянутого PostCSS и его autoprefixer.

Методологии

Чтобы вёрстка не превратилась в суп, ничего внезапно не ехало, всё было чётко и красиво — существуют специальные подходы, сборники правил о том, как называть тот или иной класс. Они очень вписываются в компонентную архитектуру, надо сказать, с них она и началась. Правило то же — всё есть компонент, или по-другому «блок». У блока есть свои элементы, мини-блоки, из которых и состоит блок. Изменяют отображение блока модификаторы, применяя к нему то или иное свойство. Изучите БЭМ от Яндекса или SUIT CSS, прежде чем начинать заниматься верстанием.

В путь!

Надеюсь, к концу статьи у вас уже сложилось более-менее полное и широкое понимание всех аспектов фронтенда. Теперь вам остаётся лишь его углублять, следуя шаг за шагом. Предложу вам план этих шагов, как стать профессиональным фронтендером:

1. Изучите основы вёрстки — HTML, CSS. Хватит только основ — остальное наработается в процессе решения задач. Сразу для работы поставьте себе редактор VS Code. Отдельное внимание уделите навыкам работы с Flexbox и CSS grid.
2. Изучите Bootstrap или bulma.io. Попробуйте создать каркас простого сайта с их помощью; изучите их исходники, они дадут вам хорошее понимание правильной архитектуры проекта. Примерно уже здесь, а лучше как можно раньше, пробуйте собирать какие-нибудь проектики, решать какие-нибудь задачки, нарабатывайте практику.
3. Изучите JavaScript. Да, тут тоже хватит только основ. Пробегитесь по синтаксису ES6, чтобы примерно его понимать. Попробуйте разобрать, как реализованы те или иные UI-компоненты в вышеупомянутых CSS-фреймворках.
4. Изучите основы Git. Это система контроля версий, и она уже на данном этапе хорошо вам послужит, позволит фиксировать поэтапно изменения в коде и хранить их.
5. Изучите BEM/SuitCSS, что больше понравится.
6. Поймите синтаксис Stylus и Pug.
7. Начните изучать документацию к Vue.js. Она предельно понятна и на русском языке. В процессе изучения вы узнаете множество смежных вещей — компонентная архитектура, сборка с помощью webpack, работа с API, SSR, flux, автотестирование.
8. Пробегитесь по библиотеке lodash — она вам очень поможет при написании кода на JavaScript, для более лаконичного кода без велосипедов.
9. Изучите автотестирование фронтенда. Это важный пункт, если вы сразу его освоите, облегчите себе дальнейшую жизнь. Не откладывайте его на потом. Рекомендую такие инструменты, как Jest и TestCafe. В Vue.js есть хороший инструментарий для автотестов из коробки.
10. Создайте собственное приложение, используя полученные знания. Придумайте идею или возьмите ту, что у вас давно сидит в голове; не просто так вы ведь решили стать программистом! В дополнение изучите транслируемые в JavaScript языки — TypeScript, CoffeeScript.

Готово! Дальше только практика, вернее, она должна была начаться с первого пункта, а сейчас достигнуть своего апогея. Теперь вы мастер фронтенда! Хотя кто знает, может, к тому времени опять выйдет в свет какой-нибудь инструмент, который всё перевернёт во фронтенде, и придётся полностью менять свои понимания?

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

Как стать фронтенд-разработчиком — fuse8

Как я решил перейти в IT

По образованию я инженер-строитель. Пять лет работал проектировщиком в конструкторском бюро, рассчитывал надёжность зданий и сооружений. В какой-то момент я понял, что мне не хватает развития. Я сидел как леший в болотце и потихоньку обрастал «ментальным» жирком. Пришла мысль сменить профессию.

В моём окружении всегда было много айтишников. Они постоянно рассказывали об интересных рабочих задачах и новых технологиях. А для меня самой «горячей» новостью было изменение СНиПа 85-го года — убрали опечатку в слове. Хаха, вы серьёзно? Потому я и решил попробовать себя в IT.

Практики изучения, которые я описываю ниже — не единственный верный путь. Но это то, что сработало для меня.

Я пробовал разбить обучение на последовательные шаги, но это оказалось нереальным: нельзя сначала изучить HTML и CSS, а через месяц взяться за JS. Это всё работает вместе. Поэтому придётся на каких-то этапах совмещать несколько источников. Главная идея — итеративное обучение: почитал теорию — закрепил на практике. И так повторять до бесконечности.

Закладываем фундамент

Я начал с курсов от HtmlAcademy. Ребята дают основы и закладывают правильный фундамент, на который потом проще будет надстраивать свои навыки.

Очень круто, что на курсах нет «голой» теории — вы сразу учитесь на практике.

Сам я прошёл только начальный и средний уровень, но если у вас будет желание и энергия заглянуть в продвинутый — не пожалеете.

Что даст: понимание, что такое вёрстка, HTML, тэги и атрибуты — вы научитесь верстать сетки, оформлять текст и немного поиграете с анимацией.

Прививаем хороший стиль с самого начала

Фундамент заложен, можно углубиться в вёрстку. Я взялся за методологию БЭМ от Яндекса. Её используют почти все компании для создания структуры классов.  

Полностью всю методологию можно не изучать, но раздел «Быстрый старт» знать и использовать надо.

Ещё есть такой парень — Вадим Макеев. Он веб-евангелист (что бы это ни значило). Рассказывает и показывает, как делать валидную и удобную вёрстку. Погуглите его видосы и слушайте подкаст. По моему мнению, Вадим иногда перегибает палку, но рассказывает вещи, которые надо знать.

У него есть хороший доклад, который вдохновил меня с самого начала — «Людоедский интерфейс».

Что даст: умение различать хороший подход к вёрстке от плохого и создавать иерархию классов, на которую и через полгода можно смотреть без отвращения.

Практикуемся

Получили базу — нужно пробовать создавать тестовые странички. Гуглите «бесплатные PSD макеты сайтов», скачивайте и верстайте их. Не забывайте про адаптивность.

В браузере Chrome есть панель разработчика. Погуглите и используйте её — она упрощает жизнь.

Скачайте и установите редактор исходного кода — теперь это ваш главный инструмент в работе. Я использовал Atom и VS Code. Это бесплатные редакторы. Они легко оптимизируются под себя разными расширениями.

На этом этапе нужна критика. Ищите в своём окружении или на форумах фронтендеров и показывайте им свои макеты. Фидбек от эксперта поможет найти слабые места и пробелы в знаниях.

Положите любимые свёрстанные макеты в портфолио — будет плюсом при поиске работы.

Что даст: реальный опыт вёрстки, пусть и в «домашних» условиях.

Изучаем современные способы работы с сеткой

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

Лично для меня flexbox стал откровением. Я пытался сделать хитрую сетку с помощью флоутов, когда подошёл мой друг и сказал «Да тут на флексбоксах делов на 5 минут». И да, действительно на 5 минут… даже на 4! После этого мой мир изучения фронтенда изменился 🙂

Интересный тренажер для изучения flexbox — Flexboxfroggy. Сам до сих пор иногда залипаю в свободное время.

Что даст: опыт использования современных технологий и подходов к работе.

JavaScript

Не стоит забывать про JavaScript — без него сейчас никуда. Есть отличный учебник от Ильи Кантора — «Современный учебник JavaScript». Первая часть про основы JS, вторая про работу с DOM — как управлять элементами на странице с помощью JS. Учебник можно изучать бесконечно, но для начала хватит первых пяти глав. 

Здесь главное не переборщить с теорией: освоил тему — закрепи на практике. Придумывайте себе задачи, которые требуют использования JS: скрыть элемент на странице при нажатии на кнопку; показывать или скрывать элементы на странице по таймауту.

Что даст: начальное знание JavaScript.

Что ещё нужно знать

Ещё есть такая штука как Webpack — сборщик модулей. Его используют на проектах, в которых много подключаемых файлов и зависимостей между ними. У Ильи Кантора есть скринкаст про него. Он, правда, немного устарел — вышло уже несколько новых версий Webpack. Но принципиальных отличий нет, для фундамента самое то.

Неплохо бы изучить и препроцессоры Sass/SCSS и Less. Они оптимизируют работу с CSS: с переменными, правилами вложенности, функциями и логическими блоками. 

Добавлю, что не все браузеры будут одинаково отображать ваши свёрстанные макеты. Например, IE не дружит с флексбоксами, и далеко не все современные браузеры полностью поддерживают грид. Поэтому всегда проверяйте свои макеты в Chrome, Mozilla Firefox, Opera, Safari, IE и Edge.

CanIUse — полезный сайт для проверки поддержки технологий разными браузерами.

Если вы уверенно чувствуете себя в JS, можете начинать выбирать фреймворк для изучения. В России, как я вижу, самый популярный это React. Рядом с ним стоят Vue и Angular. Каждый из них чем-то лучше и чем-то хуже других — всё зависит от задачи, которую нужно решить.

Что в итоге

Я занимался самостоятельно по 2-3 часа в день в течение шести месяцев. И за это время я…

• узнал, что такое HTML, CSS, JS, понял, как это всё применяется и работает вместе;
• научился отличать хорошие подходы к разработке от плохих, начал замечать косяки на своих любимых сайтах;
• узнал, что такое табличная верстка, флексбоксы и гриды, научился их использовать;
• понял, как работает один из препроцессоров и научился применять его в работе;
• смог собрать проект с помощью Webpack;
• смог самостоятельно сверстать и прикрутить JS на сайт;
• научился работать с редактором кода и оптимизировал его под себя.

Ищем работу по новой специальности

Полученных навыков хватит, чтобы претендовать на позицию фронтенд-разработчика уровня джуниор.

Чтобы попасть во fuse8, я взял отпуск на текущей работе и напросился на бесплатную стажировку. За эти две недели я старался показать всё, на что способен. В итоге меня взяли джуниором. Тут-то и началось основное обучение.

Выражение моего лица, когда узнал, что меня взяли на работу во fuse8

Если вы хотите устроиться в конкретную компанию — мониторьте вакансии, смотрите на указанные там требования и подстраивайтесь под них.

И не забывайте, что на ваш успех в работе влияют не только хард-скилы. Прокачивайте себя, приобретайте гибкие навыки (софт-скиллы): коммуникативность, умение работать в команде, креативность, тайм-менеджмент и другие.

Авторы и источники фото: Julian Moreau, Ricardo Gomez Angel, Adrian Trinkaus, Kelly Sikkema, David Siglin, Frederico Izzo on Unsplash.

Как стать front end разработчиком? Что нужно знать и с чего начать? – Artjoker

Мир веб-разработки делится на два клана: front end и back end. Если вы хотите Создавать сайты и веб-приложения, то в определенный момент нужно будет сделать выбор и пойти по одному пути. Конечно, вы можете стать и full-stack девелопером, но лучше специализироваться и быть лучшим в своем деле.

Кто такой front end разработчик?

Разница в том, что код фронтенда взаимодействует с пользователем, а код бекенда — с данными на сервере. Front-end разработчик занимается не только версткой, но и более глобальными вещами, связанными с сайтом и веб-приложением. Это своего рода универсальный солдат, который разбирается, кроме всего прочего в библиотеках и фреймворках JavaScript, препроцессорах и фреймоврках CSS, а также технологиях бекенда, юнит-тестирования.

Чем занимается front-end разработчик

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

С чего начать?

Для того, чтобы стать фронт энд-разработчиком нужно выучить:

Именно эти языки отвечают за то, как сайт будет выглядеть в браузере. Выучить их можно самостоятельно с помощью интернет-ресурсов. Главное — сразу применять на практике, создавая подобия сайтов. Самое главное на этом этапе — не выучить все наизусть, а получить представление о языках, их работе, атрибутах и возможностях. Когда вы будете понимать, что вам конкретно нужно, вы сможете быстро загуглить нужный тег, важнее понимать структуру в целом.

Библиотека JavaScript, которая отвечает за взаимодействие JavaScript и HTML, а также облегчает работу с элементами DOM.

• Верстка макетов

Вы можете найти гайды по верстке в интернете и шаг за шагом учиться превращать PSD-макеты в веб-страницы.

На этом этапе вы уже можете пробоваться на должность HTML-верстальщик.

Что должен уметь Junior frontend разработчик

В некоторых компаниях эта должность так и называется — front end разработчик, в других вы можете увидеть ее деление на html-верстальщика и JS-разработчика.

Начинающий frontend разработчик должен знать:

• основы HTML, CSS
• знание и опыт работы с CSS-фреймворками (Twitter Bootstrap/Foundation)
• Верстка сайта
• опыт работы с jquery (установка плагинов, анимация, валидация, pop-ups)
• опыт программирования на JavaScript
• знание/понимание основных принципов ReactJS+Redux/AngularJS/Backbone или Node. js + MongoDB
• практические навыки работы с GIT
• основы Chai/Jasmine, Enzyme, Karma/Mocha

Если компания работает не только с украинским рынком, вам пригодится высокий уровень английского языка.

Как получить первую работу?

Чтобы стать front end разработчиком высокого класса, мы советуем идти работать в компанию веб-разработки. Им важно увидеть ваши теоретические знания на практике, поэтому подготовьте портфолио с вашими работами. Если вы работали в команде или на открытом проекте, добавьте и эту работу, указав вашу роль.

Узнайте с какими фреймворками и библиотеками работают в компании и изучите их — это будет отличным плюсом. Также полезно иметь опыт верстки под ключевые CMS, на которых компания делает сайты.

Хотите стать Front-End разработчиком?
Присоединяйтесь к команде Artjoker

Узнать больше

Советы от frontend разработчиков Artjoker

1

Копайте глубже

Каждый браузер по-разному отображает один и тот же код, но для эффективной работы нужно, чтобы ваш код был кроссбраузерным и адекватно отображался для всех пользователей. Для этого потратьте немного больше времени и разберитесь, в каком из браузеров код работает правильно и поправьте его, для адекватного отображения в остальных. Таким образом, вы сделаете правильные выводы и сэкономите время в будущем. Это касается и ситуаций, если вы слепо добавляете что-то в код до тех пор, пока не получите нужный результат. Разберитесь, чтобы не наступать на грабли каждый раз.

2

Читайте код

Читая код, написанный другими разработчиками, вы улучшаете свои навыки, видите, что у задач бывает не только один вид решения. Также вы можете принять участие в открытых проектах, код которых дополняют и правят разные разработчики. Это улучшает ваши навыки, добавляет способности критически смотреть на код.

3

Работайте в команде

Работа на фрилансе — это мечта всех разработчиков, однако работая в команде, вы имеете отличную возможность перенимать опыт старших девелоперов, учиться, советоваться и совершенствоваться.

Как видите, набор навыков фронтенд-разработчика достаточно широк и требует много времени для изучения, поэтому советуем вникнуть в основы и прорабатывать умения на практике. Вам придется очень много гуглить и это нормально — гораздо важнее знать, где найти информацию, чем терять время на ее заучивание на практике.

Успехов:)

Если вы хотите узнать больше о жизни и работе в Artjoker, читайте «50 фактов о работе в Artjoker» и смотрите видео:)

Личный опыт: как нетехнарю стать фронтенд-разработчиком

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

Это может быть страшно — сменить сферу деятельности и из нетехнаря превратиться в ИТ- специалиста. Однако вокруг нас всё больше примеров таких успешных трансформаций. В том числе — истории нескольких выпускников HTML Academy, которые не только получили новые знания, но и смогли найти работу для их применения на практике.

Журналист → фронтендер
Ирина Смирнова, фронтенд-разработчик в Bookmate

Завязка этой истории зауряднее некуда: окончив университет, я совсем не знала, что делать со своей жизнью. То ли оставаться журналистом средней руки и устроиться на заведомо нелюбимую работу, то ли удавиться сразу. В результате, конечно же, устроилась на работу (нелюбимую), но карьерный вопрос оставался открытым.

Очередной ленивый гуглинг привёл меня на сайт академии. Я всегда не ладила с техникой и к компьютерам была безразлична, но в тот момент терять было нечего, а курсы казались скорее развлечением, чем учёбой.

Неожиданно «всё завертелось»: после курсов последовали три интенсива, потом поиски работы, первые тестовые задания, несколько неудачных собеседований. В феврале 2016-го я, уже достаточно осмелевшая и набившая немало шишек на каверзных вопросах, пришла на встречу в «Букмейт». И осталась. 

Лучшего старта в этой сфере для себя я даже придумать не могла. Буквально неделю назад я официально стала фронтенд-разработчиком: получается, потребовалось меньше года, чтобы вырасти из HTML-верстальщика. Наверное, именно это меня и восхищает в IT: то, чего ты достигаешь, прямо пропорционально тому, насколько ты сам выкладываешься, и не зависит от посторонних факторов. А результат твоей работы всегда оценивается объективно, он осязаем и конкретен.

Академия мне дала нечто большее, чем просто возможность сменить профессию. Что-то, что сильно поменяло меня и распространилось на всю жизнь в целом: превратило меня из «диванной картошки» в проактивного человека, который всё время что-то учит, делает, кодит, заставляет других учить… Кстати, на «Букмейте» у меня есть полка, где я собираю лучшие книги по веб-разработке и дизайну интерфейсов, которые помогли мне в обучении. Помогут и вам, если решитесь на этот квест «Стань-из-кого-угодно-веб-разработчиком».
 

Сотрудник колл-центра → программист
Софья Лапшина, младший разработчик в Performance Lab

Я начала работать чуть раньше 18 лет. Долгое время моей целью было просто заработать денег, которых мне будет достаточно для проживания. В основном я работала в так называемых колл-центрах. Время шло, денег хватало. И в 23 года я задумалась: «А что дальше?». Перспектива сидеть до 55 лет и отвечать на звонки меня не прельщала, да и руководящие должности меня не интересуют. Мне хотелось работать там, где всегда есть к чему стремиться, где ты будешь постоянно развиваться и не погрязнешь в рутине и стопках бумаг. 

Однажды я случайно увидела, как мой друг пишет код. Попутно он рассказывал, какая строчка кода за что отвечает. Мне показалось, что это всё сложно, что надо изучить кучу литературы для того, чтобы хотя бы просто начать этим заниматься. Друг оказался хороший и предложил мне попробовать свои силы в бесплатных онлайн-курсах на HTML Academy. Вот тут и начинается всё самое интересное.

Курсы на сайте, подписка, два интенсива. Прошёл всего лишь год с того момента, как я перешла по ссылке, и вот я уже больше месяца работаю в IT-компании на позиции младшего разработчика. Но обо всём по порядку.
 

Обучение
Сколько людей, столько и мнений по поводу того, как учиться — самому или на курсах, какие ресурсы лучше и так далее.

Внимательно изучив путь становления фронтенд-разработчиком, я решила, что начинать надо с вёрстки, с изучения HTML и CSS. Как человек мало что смыслящий на тот момент в разработке, решила отдать себя в руки профессионалов и пошла на интенсивы от Академии — «Базовый HTML и CSS» и «Продвинутый HTML и CSS». Не стану рассказывать, что это за интенсивы: их описание вы можете почитать на сайте Академии, а также посмотреть отзывы. Могу сказать лишь то, что я не ошиблась, когда подумала, что надо изучить кучу литературы. Но раз уж начала, то решила не отступать.

Сначала я научилась создавать пустую страницу. Потом на странице появился какой-то текст. И я думаю: «Круто! А что ещё я могу?». Научилась «раскрашивать» страницу. «А ещё?». Строить страницу из блоков. «А ещё? А ещё? А ещё?». И в итоге я могу создавать красочные страницы сайта, которые отлично смотрятся как на ПК, так и на телефоне. 

Информации и правда много, но в этом и есть вся прелесть. Погружаясь в мир разработки, самому хочется изучать его всё больше и больше. Даже сейчас, уже работая младшим разработчиком, я продолжаю учиться, но это совершенно не в тягость, а даже в радость.
 

Поиск работы
Окончив курсы, начала искать работу. К слову, знала я только вёрстку и что-то слышала про JavaScript. Многие говорят, что новичкам сложно найти работу. А я скажу, что нет, не сложно. Тут, как и везде, главное — чтобы ваши возможности совпадали с потребностями работодателя. Да, к новичкам присматриваются с опасением, но тут уже от вас зависит, как вы проявите себя на собеседовании. 
 

Ожидание vs Реальность, или Мой первый опыт работы в IT-компании
Сразу отмечу, что тут всё зависит от компании, все они на вкус и цвет разные, поэтому рассказывать буду непосредственно о той, где работаю. Сейчас я работаю в Performance Lab. Сама компания занимается различными тестированиями сайтов, приложений и IT-систем.

Собственно, компании нужен был человек, знающий вёрстку и который в ближайшем будущем планирует развиваться в сфере разработки. И тут совпали не только мои возможности с потребностями компании, но и наши желания.

В ожидании первого рабочего дня я думала, что меня, как новичка, посадят рядом с опытным коллегой и я буду под его чутким руководством делать какие-то небольшие задачи. После того как немного адаптируюсь, мне начнут давать какой-то материал для моего развития как разработчика, а после — задачи посложнее и так далее.

И вот настал он, мой долгожданный первый рабочий день. Всё так, как я себе это представляла, только перешли мы сразу к задачам посложнее и ни к какому коллеге меня не подсаживали. Вместо этого у меня целый офис опытных и весёлых коллег, которые готовы поделиться своим опытом в любой момент.

Именно за это я люблю мир разработки. Всё не всегда бывает гладко, но в целом здесь люди делятся своим опытом и знаниями. Это интересная сфера, которая не даст погрязнуть в однообразии серых будней, которая постоянно развивается и которая даёт возможность проявить себя не только в рамках компании, но и на просторах Всемирной паутины. 

Для тех, кто ещё сомневается. Я девушка, которая вступила на этот путь, имея только среднее специальное образование, мой английский был далёк от идеального, и о разработке я не знала ничего. Всего за один год я прошла путь от «непонятно кого» до младшего разработчика. Главное — желание, а остальное у вас получится.
 

Экономист и бизнесмен → бэкенд-разработчик
Артемий Степанов, Backend Developer

По образованию я экономист, ввиду неких обстоятельств и сильного влияния и наставлений отца я выбрал именно этот путь. Он хотел, чтобы я шёл по его стопам, и я это делал. С помощью отца я открыл собственное ООО по юридическим услугам. Но так как меня всё-таки со школьных времён тянуло к программированию, я принял решение, что хочу быть ближе к IT — в итоге недолго думая сменил сферу деятельности компании и её название. Теперь это веб-студия.

Почему так? Всё просто. Я долго думал над тем, какой продукт нам стоит создавать, и пришёл к выводу, что веб-разработка — это универсальная вещь: продукты не ограничены в среде, в отличие от приложений, сайты и веб-аппы можно использовать откуда угодно, был бы интернет.

Однако позднее я понял, что и этого мне недостаточно. К тому времени влияние отца уже было не таким серьёзным, я был вполне независимым человеком. Так совпало, что один из наших верстальщиков приболел, а сроки поджимали. С помощью другого нашего верстальщика я решил вникнуть в проект — сейчас я понимаю, что только якорем тянул разработку вниз по времени, потому что объяснять детали человеку не в теме довольно тяжело.

Я понял, что до сих пор являюсь полным нулём, и стал искать курсы. Друзья-программисты посоветовали бесплатные курсы HTML Academy. И тут, как говорится, понеслось. Я записался на базовый курс по HTML/CSS — после его прохождения понял, что хочу этим заниматься и дальше. Работа с наставником (его зовут Максим Фарига) стала первым толчком к цели.

Окончив курс, я стал потихоньку верстать в свободное время и для проектов своей компании. В Академии идти на базовый курс по JS рекомендуют хотя бы после полугода работы верстальщиком, но я записался на него уже через два месяца. Здесь я познакомился с одним из лучших менторов в своей жизни, Борисом Ванюшиным. Он был строг, не давал никаких поблажек, временами я страдал (в хорошем смысле). Именно такое отношение помогло научиться мыслить как программист. Всё же HTML и CSS — языки разметки, а тут я впервые столкнулся с настоящим языком программирования.

Незадолго до окончания курса я закрыл свою компанию, решив найти работу разработчиком. Я целыми днями сидел дома и продолжал совершенствоваться. Никакого дохода в этот момент у меня не было — родственники и знакомые думали, что я спятил, раз закрыл прибыльный бизнес ради мечты о новой работе. Жена тоже была в шоке. 

Без работы я просидел около семи месяцев, всё это время я учился дальше и параллельно искал работу. В итоге подтянул JS до более-менее нормального уровня, освоил ES6, препроцессоры для CSS и прочие новомодные вещи. В августе этого года меня взяли за стажировку в фирму, которая разрабатывает исключительно сервисы. Около месяца я проработал в ней фронтенд-разработчиком (AngularJS, gulp, Sass), параллельно изучая Node.js. Спустя месяц меня перевели на бэкенд-разработку: я сам захотел, и у меня это получается действительно лучше. Этим до сих пор и занимаюсь. 

По итогу всей этой истории можно сказать, что теперь я наконец делаю то, что мне действительно нравится. У меня отличная команда, зарубежные заказчики (из Норвегии), в арсенале — HTML, CSS, Stylus, Sass, JavaScript (ES6), AngularJS, Node.js, Express, MongoDB + Mongoose, Ruby (хотя тут я ещё совсем зелёный). 

Весь этот путь занял 11 месяцев. На момент, когда я решил кардинально поменять свою жизнь, мне было 24, сейчас мне 25. Конечно, жалко впустую потраченного времени, жалею, что попал в программирование слишком поздно. С другой стороны, это только подстёгивает к развитию и совершенствованию навыков. 
 

Музыкант → верстальщик
Артём Иванец, младший фронтенд-разработчик в компании eWave

Вот моя история. Я 15 лет профессионально учился музыке, пройдя весь положенный путь: ДМШ, ССУЗ, ВУЗ. Однако позднее я столкнулся с проблемами со здоровьем: пострадали руки — пришлось приостановить музыкальную деятельность. Нужно было придумать, чем заниматься.

Мне было интересно разобраться с программированием. Однажды я случайно наткнулся на статью создателя HTML Academy Александра Першина, в которой он говорил о том, что верстальщик — это отличный старт в ИТ. Затем начал изучать литературу, но самостоятельно разобраться в ней было сложно. И уже потом наткнулся на сами курсы академии. Попробовал интерактивные курсы и решил записаться на интенсивный: очень уж хорош был контент занятий. В итоге я отучился на двух интенсивах.

После этого смог устроиться на работу в крупную компанию, которая разрабатывает проекты в сфере e-commerce для заказчиков из австралийского региона. Устроился я туда не сразу: сначала получил около 30 отказов — даже без приглашения на собеседование. На самом интервью я показал себя не лучшим образом, завалил часть по JS, но по вёрстке проблем не возникло. 

Как выяснилось, обучение в Академии даёт всё, что нужно для получения работы и старта в профессии, и даже больше того. В этом я убедился, когда столкнулся с джуниорами, которые учились сами. Я доволен: мне нравится работа, и никто мне не запрещает параллельно заниматься искусством.
 

Организатор гастролей → разработчик чат-ботов
Евгений Ладыженский, младший фронтенд-разработчик, создатель чат-ботов

Решение о смене работы далось мне очень тяжело. До весны 2015 года я семь лет вполне успешно занимался организацией гастролей. Однако меня всё время преследовало ощущение того, что я занимаюсь не своим делом и постепенно деградирую. Выйти же из зоны комфорта было страшно: казалось, что в 36 лет менять профессию уже поздно.

В детстве я мечтал быть программистом, но в своё время пошёл по пути наименьшего сопротивления и поступил в тот вуз, куда мне хватало баллов, — лишь бы не идти в армию. Отважившись на кардинальные перемены, я вспомнил о юношеской мечте и решил наконец связать себя с программированием.

Поначалу я пытался учиться по книгам, но этот процесс требовал больших усилий и значительного времени. Поэтому когда я наткнулся на рекомендацию HTML Academy, то решил пройти базовый курс по HTML и CSS. После этого сразу же сумел найти работу верстальщиком, а после прохождения базового курса по JS устроился на позицию младшего фронтенд-разработчика, спустя ещё некоторое время увлёкся разработкой чат-ботов и открыл собственный бизнес в этом направлении.

Если трезво оценивать свои возможности и не просить с ходу много денег, то работу найти несложно. Главное — помнить, что в любой профессии всегда был и будет дефицит адекватных людей. 

Что касается сложностей, то, конечно, они были: прежде всего большинство знакомых и родственников высказывали сомнения в разумности кардинальной смены профессии. Отсюда мораль: не стоит никому рассказывать о своём решении до тех пор, пока перемены не станут необратимыми. Иначе можно и самому засомневаться в успехе. 

На самом же деле здесь нет ничего невозможного, главное — очень сильно захотеть научиться новому.
 

ТВ-продюсер → фриланс-разработчик
Александр Половников, фронтенд-разработчик, фрилансер, наставник HTML Academy

Семь лет я проработал в продюсерской компании, которая занималась производством телевизионных программ, фильмов и сериалов. 

Впервые с HTML я столкнулся ещё в школе: на занятиях мы делали простые странички, которые мне легко давались. В своё время я даже сделал пару «коммерческих» сайтов друзьям. Но в дальнейшем я выбрал вуз, никак не связанный с технологиями, а вёрстка оставалась лишь хобби, которое я со временем забросил. 

Всё изменилось, когда я случайно наткнулся на курсы академии. Решил попробовать — и так увлёкся, что за несколько вечеров без перерыва прошёл их все и записался на интенсив. Он мне тоже понравился: знания усваивались очень быстро и легко. Нужно было двигаться дальше — а я ещё не очень хорошо понимал разницу между фронтенд- и бэкенд-разработкой. Мне посоветовали пройти стартующий курс по Ruby on Rails, что я и сделал. Оказалось, что знать хотя бы один серверный язык очень полезно для фронтендера.

Затем настало время изучения JavaScript. В академии его ещё не было, так что пришлось найти другие курсы, а уже затем вернуться на стартовавший интенсив по JS. Весь процесс обучения занял около 9 месяцев — немало, но за это время я смог получить хорошую базу. Однако мне нужно было больше практики, которую я решил искать на фриланс-площадках.

Но самое классное произошло, когда я приехал в гости в офис академии. Разговор зашёл о работе, кто-то упомянул новую фриланс-площадку Rubrain — она недавно открылась, все о ней слышали, но никто ещё не пробовал. Я отправил администрации своё резюме с описаниями навыков, рассказом о себе и просьбой добавить меня в базу. Через пару дней мне пришло письмо об одобрении моей заявки, а ещё чуть позже мне позвонил один из основателей площадки и предложил поработать на них: нужно было помочь с сайтом.

Это был мой первый серьёзный и ответственный проект в моей карьере фрилансера. Всё получилось хорошо, после чего коллеги из Rubrain стали рекомендовать меня знакомым — число заказов росло, мне предлагали более сложные и интересные заказы. Пришло время решать что-то с моей основной работой в продюсерской компании.

Уходить «с концами» было страшновато, поэтому я сделал попытку договориться о работе на полставки, но начальство идею не оценило. В итоге я всё же уволился. Решиться помогла поддержка друзей и близких, хотя были и скептики, которые отговаривали от ухода со стабильный работы. Но большинство всё же меня поддержало.

Дальше я работал на фрилансе, заводил новые знакомства, получал проекты, учился и развивался, уже понимая, что хочу заниматься именно фронтендом. Прошёл год, и в какой-то момент я осознал, что хотел бы поделиться наработанным опытом и знаниями — прошёл собеседование на должность наставника в HTML Academy на базовый интенсив, а спустя полгода — и на продвинутый. В итоге я занимаюсь тем, от чего меня действительно «прёт», меня не покидает желание постоянно учиться и развиваться. Работа — это моё хобби.

Пройдя этот путь, я сделал для себя несколько выводов. Во-первых, учиться лучше на практике: работа над реальными фриланс-проектами помогла не забыть теорию и быстрее получать новые навыки. Кроме того, хороший способ обучения — поработать над каким-либо открытым проектом. Так можно разобраться с инструментом и начать применять его на практике, притом что работа над open source не предполагает жёстких сроков и требований. Это хороший способ научиться чему-то новому, а если проект выстрелит — получить плюс в портфолио.

Кстати, о портфолио: чтобы начать получать заказы, оно должно быть. А где его взять начинающему фронтендеру? Лучший вариант — найти в интернете бесплатные или недорогие стоковые макеты и сверстать их. Пять таких качественных работ — и получится достойное портфолио.
 

Редактор-копирайтер → фронтенд-разработчик международного стартапа
Николай, фронтенд-разработчик

Меняю профессию я не в первый раз: к 2014 году успел поработать редактором в СМИ и на телевидении, копирайтером в больших рекламных агентствах, сотрудником техподдержки (это было не очень интересно) и менеджером интернет-проектов.  

Почти всегда моя работа так или иначе была связана с интернетом, так что однажды мне захотелось оказаться среди тех, кто делает все эти чудесные сервисы и сайты. Всё началось в 2014 году — тогда мне было 32 года. Обычное дело: понадобилось сделать что-то для сайта компании, денег на фрилансеров не было — я полез разбираться сайт, наткнулся на сайт академии, прошёл все доступные на тот момент курсы и… втянулся. 

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

Найти работу оказалось непросто, сначала ничего не получалось. Я откликался на вакансии, получал отказы, неудачно выполнил тестовое задание для CSSSR, найти заказы на фриланс тоже не удавалось. Но рук я не опускал, продолжал искать, самостоятельно изучая то, чего не рассказывали на базовом интенсиве (а других тогда ещё не было). 

И вот однажды меня пригласили на собеседование на должность стажёра-верстальщика. Я его прошёл и получил свою первую работу в команде веб-разработки. Можно сказать, мне повезло: в компании мне выделили наставника, который многому меня научил, сами проекты тоже были интересными. Мы создавали сайты для крупных компаний — операторов связи, у каждой из них были требования к качеству и стилю кода, используемым технологиям. Именно тогда я разобрался с БЭМ, научился использовать препроцессоры, вник в работу с PHP-шаблонизаторами, адаптивной вёрсткой, Гитом и многим другим.

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

Сейчас я работаю фронтенд-разработчиком в небольшом международном стартапе — и как будто вернулся на два года назад: столько всего нужно знать, столько шишек набить, столько велосипедов изобрести, а результатов твоей работы ждут здесь и сейчас. Это тяжело, страшно: вдруг не смогу развиваться в нужном темпе, подведу коллег, подведу себя… мне ведь уже даже не 32. Но всё это чертовски интересно, так что я с оптимизмом смотрю в своё «фронтенд-будущее».

Тем, кто стоит перед порогом фронтенд-разработки и боится перешагнуть, могу посоветовать смело идти вперёд, но только если вы готовы тяжело трудиться, много учиться и если вам действительно это интересно. 

Что ещё? Отмечу только одно (про остальное скажут другие) — сам тоже хочу подтянуть этот момент: ходите на конференции и митапы, больше общайтесь, выступайте, заводите новые знакомств. Это расширит ваш кругозор, мотивирует увеличить собственные знания, к тому же будет к кому обратиться с вопросом, а кто-то из знакомых, вполне возможно, однажды пригласит вас на работу.
 

Заключение
Опыт наших студентов в смене профессии говорит о том, что нет ничего невозможного. Однако и этот процесс можно оптимизировать. Вот что нужно знать нетехнарям, которые захотели переквалифицироваться в ИТ-специалиста:
 

• Смена профессии может занять до года. Смена профессии — небыстрый процесс, изучение новых технологий и последующее прохождение собеседований займут время.
• Курсы помогают ускорить прогресс. Учиться только самому — не самый эффективный способ получения новых знаний. Курсы и интенсивы могут дать новый импульс развитию — особенно если занятия предполагают решение задач, приближенных к реальной жизни, под руководством наставников.
• Сначала нужно научиться вёрстке. Именно изучение HTML и CSS должно стать первым шагом к освоению новой профессии. Это позволит поэтапно разобраться с тем, как работает веб, и понять, какую специализацию хочется выбрать.
• Реальные проекты помогают ускорить прогресс. Теория и учебные задания — это хорошо, но нет лучшего способа профессионального роста, чем работа над реальными проектами. Практика позволяет не забыть теорию и развить навыки.

Источник: Хабрахабр

Как стать фронтенд-разработчиком за 5 месяцев

Перевод статьи Vince MingPu Shao «How I transitioned from a graphic designer to front-end developer in 5 months».

2017 год был для меня непростым, но захватывающим. В марте я уволился с должности графического дизайнера и вошел в лабиринт программирования. Через пять месяцев я наконец получил работу фронтенд-разработчика в Tenten.co.

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

Сразу скажу, что мой пост — не четкая дорожная карта, прописанная опытным разработчиком или дизайнером. Также это не руководство для изучающих фронтенд-разработку. По этой теме есть множество прекрасных пособий, некоторые из них я упомяну ниже в этой статье.

Помните, что нет самого лучшего пути, подходящего для каждого.

Мой бэкграунд

В свои 24 года я был графическим дизайнером без всякого опыта в написании кода. В школе мои оценки на экзаменах по точным наукам были плачевными. Эти предметы, изобилующие формулами и числами, неимоверно пугали меня. В то время меня привлекало все красивое, будь то живопись, музыка или художественное слово. Поэтому для меня было вполне логично выбрать в качестве основного предмета в колледже английский язык. Среди моих увлечений числились литература, культура, фотография и дизайн.

За исключением последних 12 месяцев, мне случалось мечтать о карьере писателя, фотографа, кинокритика, певца и дизайнера, но я никогда даже не задумывался о карьере разработчика.

Почему я захотел писать код

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

Мир сталкивается со многими важными проблемами, и я думаю, что восприятие дизайна как чего-то, направленного на решение этих проблем, может помочь и должно помогать в их решении. Конечно, когда я только открыл для себя Photoshop, я думал только о том, как сделать все красиво. Но чем больше я узнавал о дизайне, тем больше хотел применить его для решения важных задач.

После многочисленных попыток добиться своих амбициозных целей я разочаровался в том влиянии, какое может иметь графический дизайн в Тайване (а может, и во всем мире).

Я не сомневаюсь в силе и важности прекрасного дизайна. Но чаще всего дизайнеры не имеют ничего общего с решением настоящих проблем, возникающих у клиентов. Они проводят большую часть времени, пытаясь предугадать желания клиента, и при этом основываются только на интуиции, опыте и здравом смысле, не привлекая никакие данные или анализ.

За два года моей карьеры графического дизайнера эта игра мне надоела.

Именно тогда я решил серьезно взглянуть на фронтенд-разработку: эта тема всегда в тренде на Medium.

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

Я уволился со своей должности графического дизайнера в конце зимы. Свой путь превращения во фронтенд-разработчика я начал не имея четкого плана и располагая весьма ограниченными средствами в банке.

Что делать

Труднее всего начать. Но если вы знаете, что побуждает вас к действию, все будет проще. Например, если вы хотите стать разработчиком чтобы как можно быстрее начать больше зарабатывать, вам стоит изучать самые популярные направления на рынке.

В моем случае, поскольку моей целью было выжать как можно больше из комбинации дизайна и навыков разработчика, я сконцентрировал внимание на том, где нужно и то, и другое.

Итак, я поставил перед собой цель и составил список того, чем нужно заняться, учитывая мое неглубокое знание фронтен-разработки.

1. Цель

Занять должность фронтенд-разработчика.

2. Как достичь цели

Создать свой сайт-портфолио для демонстрации моих способностей.

3. Что нужно сделать

• Изучить HTML, CSS, jQuery/JavaScript
• Создать сайт-портфолио
• Приготовить работы для портфолио.

Для начала я определил для себя только эти задачи. Но после прочтения большего количества статей, руководств и требований в вакансиях, я продолжил список:

• Sass
• Gulp
• CS50
• Основы Unix
• Основы WordPress
• Jekyll
• Основы AWS
• Основы знаний сетей

Примечание: Естественно, взрывная волна информации в интернете побудила меня еще больше расширить круг изучаемого. За пять месяцев я поместил туда Node.js, React.js, PHP и многое другое. Но указанные выше задачи это те, с которыми я в итоге справился.

Чтобы действовать по плану, я установил для себя 48-часовую учебную неделю. То есть, я должен был учиться полный рабочий день всю неделю, с одним выходным. Отслеживать мою производительность мне помогал Toggl.

Мой отчет Toggl с марта по июль 2017

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

Asana и составление расписания

Где учиться

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

Платформы для обучения

К слову, я терпеть не мог руководства, показывающие мне строки кода в то время как я и понятия не имел, что с ними делать. В некоторых предполагалось, что я все это уже хорошо знаю, в других говорилось, что пока на это можно не обращать внимания. Я вас умоляю! Я же не понимаю ни строчки кода на экране, потому что я совершенный новичок!

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

• Codecademy – Многие советуют этот ресурс, но мне не понравилось. Я всегда застревал на практических заданиях и не имел ни малейших идей, как решить задачу.
• Code School – Здесь я провел много времени, потому что учителя очень понятно  все объясняли. рекомендую.
• Treehouse – На этом ресурсе на YouTube больше всего рекламы! Treehouse проделал прекрасную работу в сфере маркетинга, и это приносит свои плоды. Они освещают много тем, некоторые из них были для меня в самом деле полезны. Например, тяжело найти достойное руководство по WordPress для изучающих фронтенд-разработку, а на Treehouse такое есть.
• FreeCodeCamp – Обожаю freeCodeCamp! В этом сообществе есть понятный путь, по которому может следовать новичок. Там знают, когда пора убрать страховочные колесики с «велосипеда» ученика. Я был озабочен тем, что учить дальше, после изучения основ HTML, CSS и JavaScript, но freeCodeCamp подсказал и это. Сообщество также делится отличными постами на Medium и по email. В высшей степени рекомендую!

Мои закладки

Youtube-каналы

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

• The Coding Train – ведет канал  профессор нью-йоркского университета Дэниел Шиффман. Это самый энергичный преподаватель из всех, кого я только знал. Видео на канале очень доступны.
• Thenewboston – освещает почти все темы, какие только приходили мне в голову. Ведущий, Баки, Bucky, умеет рассказать о пугающих вещах так, что они кажутся простыми.
• Academind – также содержит разнообразные руководства, которым легко следовать. Рекомендую.
• Fun Fun Function  – Ведущий Маттиас Петтер Йохансон – разработчик, прежде работавший в Spotify и Blackberry. Его канал – отличный ресурс для простого изучения JavaScript.
• Linux Academy – здесь я узнал кое-что об AWS. Мне нравится!
• Computerphile – видео на этом канале объединены компьютерной тематикой. Это увлекательно, но я, пожалуй, так никогда и не пойму, о чем они говорят.
• Eli the Computer Guy – здесь я узнал о сетях и серверах.
• Mycodeschool – мой лучший друг после прохождения  CS50. Понятное объяснение вещей, относящихся к информатике. Мне очень нравилось.

Статьи, которые стоит прочесть

Статьи для меня являются прекрасным посредником в теме описания чьих-то жизненных путей и поиска вдохновения. За эти пять месяцев было столько случаев, когда прекрасные статьи подбодряли меня в часы огорчений и разочарований. Вот некоторые из лучших моих жизненных путеводителей:

Другие полезные ресурсы

• JavaScript: Understanding the Weird Parts – отличный курс Udemy, прояснивший для меня много непонятных моментов в JavaScript. Настоятельно рекомендую.
• CS50 at Harvard –был в курсе, что знание информатики не обязательно для младших фронтенд-разработчиков, но я не  смог удержаться от соблазна пройти этот курс, ведь он казался таким интерсным! Оглядываясь назад, могу сказать, что он стоил потраченного на него времени.
• NYMY – Эпизод 1 –  Петер Левелс –  NYMY это подкаст-шоу, которое ведет талантливый дизайнер Тобиас ван Шнейдер. В этом эпизоде он брал интервью у создателя NomadList Петера Левелса. Я прослушал историю Петера несколько раз, когда бывал на мели. Это часовое шоу показало мне безграничность возможностей, которые есть у программиста/дизайнера.

Как найти работу

После почти 4 месяцев непрерывного программирования и проектирования, я наконец узнал немного о фронтенде. Я также почти на 80% завершил свой сайт-портфолио. К тому времени моих сбережений хватило бы на жизнь только еще на пару месяцев.

Пришла пора искать новую работу.

К сожалению, у меня почти не было шансов. Не многие компании хотели человека без опыта работы, связанного с разработкой, и еще меньшее их число придавали значение моим способностям графического дизайнера. Также было печально иметь меньше пяти вакансий, которые возможно подошли бы мне самому. Положительным моментом было то, что сложившаяся ситуация заставила меня сосредоточиться на этих драгоценных шансах.

Я присматривался к дизайнерскому агентству Tenten как минимум три года. Это единственное агентство в Тайване, способное одновременно задействовать дизайн, цифровую разработку и инновации. Довольно долго они были у меня в списке «пожалуйста, возьмите меня к себе», и я был уверен, что Tenten – единственная компания, которая могла бы клюнуть на мои навыки в разных дисциплинах.

За последние два месяца моего путешествия я узнал как можно больше о позиции младшего фронтенд-разработчика в Tenten. Одновременно я завершил свой сайт. Когда подошло время, я подал заявление на позицию джуниора. В качестве запасных вариантов я разослал свое резюме и портфолио и в упомянутую ранее пятерку компаний. И стал ждать.

И наконец…

Я получил работу!

Заключение

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

Если у вас такая мотивация есть, я вас поздравляю. Если нет, попробуйте все же еще раз, прежде чем сдаться. Если вы не попробуете, то так и не узнаете, на что способны.

Главное, чему я научился в процессе – начинать делать что-то как можно раньше. Я знаю, что делать первый шаг в собственно построении чего-нибудь страшно, но только так можно чему-то научиться. Помните, что вам в любом случае нечего терять.

Я ужасно счастлив, что уже полгода являюсь фронтенд-разработчиком в Tenten. Но учеба это непрерывный процесс, который никогда не заканчивается!

Вебинар «Как стать фронтенд-разработчиком c нуля»

{«id»:162765,»url»:»https:\/\/vc.ru\/s\/ozon-new-skills-52360\/162765-vebinar-kak-stat-frontend-razrabotchikom-c-nulya»,»title»:»\u0412\u0435\u0431\u0438\u043d\u0430\u0440 \u00ab\u041a\u0430\u043a \u0441\u0442\u0430\u0442\u044c \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u043c c \u043d\u0443\u043b\u044f\u00bb»,»services»:{«facebook»:{«url»:»https:\/\/www.facebook.com\/sharer\/sharer.php?u=https:\/\/vc.ru\/s\/ozon-new-skills-52360\/162765-vebinar-kak-stat-frontend-razrabotchikom-c-nulya»,»short_name»:»FB»,»title»:»Facebook»,»width»:600,»height»:450},»vkontakte»:{«url»:»https:\/\/vk.com\/share.php?url=https:\/\/vc. ru\/s\/ozon-new-skills-52360\/162765-vebinar-kak-stat-frontend-razrabotchikom-c-nulya&title=\u0412\u0435\u0431\u0438\u043d\u0430\u0440 \u00ab\u041a\u0430\u043a \u0441\u0442\u0430\u0442\u044c \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u043c c \u043d\u0443\u043b\u044f\u00bb»,»short_name»:»VK»,»title»:»\u0412\u041a\u043e\u043d\u0442\u0430\u043a\u0442\u0435″,»width»:600,»height»:450},»twitter»:{«url»:»https:\/\/twitter.com\/intent\/tweet?url=https:\/\/vc.ru\/s\/ozon-new-skills-52360\/162765-vebinar-kak-stat-frontend-razrabotchikom-c-nulya&text=\u0412\u0435\u0431\u0438\u043d\u0430\u0440 \u00ab\u041a\u0430\u043a \u0441\u0442\u0430\u0442\u044c \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u043c c \u043d\u0443\u043b\u044f\u00bb»,»short_name»:»TW»,»title»:»Twitter»,»width»:600,»height»:450},»telegram»:{«url»:»tg:\/\/msg_url?url=https:\/\/vc. ru\/s\/ozon-new-skills-52360\/162765-vebinar-kak-stat-frontend-razrabotchikom-c-nulya&text=\u0412\u0435\u0431\u0438\u043d\u0430\u0440 \u00ab\u041a\u0430\u043a \u0441\u0442\u0430\u0442\u044c \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u043c c \u043d\u0443\u043b\u044f\u00bb»,»short_name»:»TG»,»title»:»Telegram»,»width»:600,»height»:450},»odnoklassniki»:{«url»:»http:\/\/connect.ok.ru\/dk?st.cmd=WidgetSharePreview&service=odnoklassniki&st.shareUrl=https:\/\/vc.ru\/s\/ozon-new-skills-52360\/162765-vebinar-kak-stat-frontend-razrabotchikom-c-nulya»,»short_name»:»OK»,»title»:»\u041e\u0434\u043d\u043e\u043a\u043b\u0430\u0441\u0441\u043d\u0438\u043a\u0438″,»width»:600,»height»:450},»email»:{«url»:»mailto:?subject=\u0412\u0435\u0431\u0438\u043d\u0430\u0440 \u00ab\u041a\u0430\u043a \u0441\u0442\u0430\u0442\u044c \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u043c c \u043d\u0443\u043b\u044f\u00bb&body=https:\/\/vc. ru\/s\/ozon-new-skills-52360\/162765-vebinar-kak-stat-frontend-razrabotchikom-c-nulya»,»short_name»:»Email»,»title»:»\u041e\u0442\u043f\u0440\u0430\u0432\u0438\u0442\u044c \u043d\u0430 \u043f\u043e\u0447\u0442\u0443″,»width»:600,»height»:450}},»isFavorited»:false}

Мой путь к тому, чтобы стать веб-разработчиком с нуля без степени CS (и чему я научился из…

Сергей Гарсиа

Во-первых, позвольте мне представиться. Меня зовут Сергей Гарсия, я штатный фронтенд-разработчик с 2-летним опытом. В то время я работал фронтенд-разработчиком в консалтинговой фирме Forbes 500 и небольшой компании.

Может показаться, что это не большой опыт, но завершение второго года работы в качестве разработчика стало для меня огромной вехой.Это потому, что у меня не было реального опыта веб-разработки — и в целом не так много опыта программирования, кроме базового обучения C # и Java, которое я получил на нескольких онлайн-курсах. У меня также не было диплома по информатике, так как я получил диплом по управлению ИТ-проектами.

Я никогда не писал о своем опыте, несмотря на всю помощь, которую я получил от замечательных ресурсов, таких как Medium, Stack Overflow и программные субреддиты Reddit. Итак, сегодня я решил это изменить. Сегодня я собираюсь рассказать вам, что пошло хорошо, а что нет, так что если вы отправитесь в это путешествие, вам повезет больше, чем мне.

Я знаю, что есть много подобных статей, но не очень многие из них обсуждают процесс с учетом дополнительных двух лет ретроспективного анализа.

Я начну со своего пути, включая то, что по пути пошло не так. Если вас интересует мой самый короткий путь к тому, чтобы стать веб-разработчиком с нуля, не стесняйтесь переходить к последнему разделу: Самый короткий путь .

Итак, без лишних слов, приступим!

Знакомство с основами

После того, как я решил, что хочу заняться веб-разработкой, первым вопросом в моей голове был «Чему я научусь?» Проведя небольшое исследование, я выбрал путь обучения, основанный на том, что просили большинство должностей веб-разработчиков начального уровня, а именно:

• JavaScript
• HTML и CSS
• Препроцессоры CSS (Less & Sass)
• Адаптивный дизайн
• AngularJS
• Шаблоны проектирования
• Git
• NodeJS
• Исполнители задач

Вот как это произошло.

Javascript

Я начал свое путешествие по изучению JavaScript с помощью CodeSchool (платно) и Codecademy (бесплатно). Если вы не знаете об этом, это отличные веб-сайты, которые позволяют вам научиться программировать, кодируя внутри браузера.

Я считаю, что подобные учебные ресурсы были лучшими, когда вы только начинаете. Имейте в виду, что этот метод обучения быстро утомляет, как только вы перейдете к более сложным вещам, поскольку их алгоритмы для проверки того, правильно ли вы решили пример кода, имеют некоторые проблемы с точностью.Оба их вводных курса в JavaScript были выдающимися, и я их очень рекомендую.

Когда я усвоил основы, я приступил к созданию более прочной основы JavaScript, прочитав книгу Хавербеке «Красноречивый Javascript: современное введение в программирование» (бесплатно).

Эта книга была рекомендована мне многими людьми на форумах по JavaScript как обязательная к прочтению, и не зря. Эта книга была трудной, особенно если вы просто изучаете программирование, как я тогда. Но я рад, что не сдался и продолжил. Это было феноменально из-за огромного объема концепций программирования, которые оно охватывает, даже если временами было немного безжалостным. Что бы вы ни делали, не пропускайте проблемы с кодом. Когда вы прочтете эту книгу, вы, наконец, сможете с уверенностью сказать, что хорошо разбираетесь в JavaScript.

Вы также можете при желании изучить jQuery (хотя я пока не рекомендую изучать его — подробнее об этом позже). Вы можете изучить его, пройдя курс «Попробуйте jQuery» от CodeSchool.

HTML и CSS

Изучив JavaScript, я приступил к изучению основ HTML и CSS и веб-дизайна по программе CodeSchool по HTML и CSS.Эти курсы по-прежнему являются моими любимыми сегодня, так как темп отличный, а общий объем того, что они охватывают, позволил мне получить более прочную основу для этого.

Вы также можете легко переключить это на что-то вроде курса HTML и CSS от Codecademy и по-прежнему получать аналогичные результаты. Или, если вы готовы принять вызов, курс Udacity «Введение в HTML и CSS» будет гораздо более полным и немного более сложным.

Бонус : Если вы можете достать книгу Джона Дакетта HTML и CSS: Дизайн и создание веб-сайтов , это также отличная отправная точка для изучения HTML и CSS (с небольшим количеством веб-дизайна).У него высокий рейтинг (4,7 балла из 5 на Amazon), он предлагает хорошее введение в мир веб-разработки. Это красивая книга благодаря чистому дизайну с большими буквами и красочными страницами. Я часто возвращаюсь к нему, чтобы просто полюбоваться.

Less / Sass

Для тех, кто не знаком, Less и Sass — это транспиляторы CSS, которые позволяют писать CSS в более элегантной манере. Это позволяет вам делать вещи, которые обычно не поддерживаются, например, вложение правил CSS. После завершения эти транспиляторы CSS «компилируют» ваш код и преобразуют его в обычный CSS.

В настоящее время существует 2 основных транспилятора CSS: без и Sass . Sass более популярен, но я обнаружил, что сначала изучить Less проще, в основном потому, что для использования Sass на вашем компьютере также требуется установка Ruby, что мне не нравилось.

Вы можете получить быстрый, но полный обзор Less с помощью онлайн-компилятора Less от WinLess и примеров кода, чтобы увидеть, как ваш код Less превратится в CSS. Вы также можете попробовать Sass в Интернете с помощью SassMeister (хотя он не включает примеры кода).

Неважно, выучите сначала Less или Sass. Они очень похожи, поэтому, узнав одно, вы почти сразу узнаете и другое. Вы можете найти отличное быстрое сравнение между Less и Sass в статье Шелби Моулден «Сравнение LESS и SASS».

Адаптивный дизайн

Изначально я узнал об адаптивном дизайне и Bootstrap, используя путь HTML и CSS от Codeschool, но недавно я обнаружил, что курс Udacity от Google по основам адаптивного веб-дизайна фантастически охватывает основы и не только в гораздо более полной манере, чем Codeschool сделала.

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

Если вам не удается понять его основные принципы, прочтите сообщение в блоге Froont о 9 основных принципах адаптивного веб-дизайна. Он имеет красивую, чистую и простую анимацию, которая помогает наглядно проиллюстрировать принципы адаптивного веб-дизайна.

AngularJS

Тогда я действительно не знал, что такое AngularJS, но знал, что все говорят об этом, и что если я хочу стать веб-разработчиком, мне нужно его изучить. Я нашел проектные решения разработчика Google в AngularJS, чтобы предоставить лучший общий обзор того, что такое AngularJS и как он улучшил создание веб-приложений.

Сначала я подумал об изучении AngularJS через их официальную документацию, но это оказалось ужасной идеей. Документация была непростой для новичков, а беспорядочное форматирование затрудняло чтение и понимание.

Затем я приступил к изучению AngularJS через Codeschool. Учитывая мой положительный опыт в курсах JavaScript и CSS, я ожидал не меньше, чем отличный курс. Я был неправ. Курс был провальным с самого начала, поскольку алгоритм, используемый для проверки правильности кода примера, иногда не работал, и ваше явно правильное решение отмечалось как неправильное. Были даже случаи, когда все, что требовалось для исправления неисправной системы проверки, — это обновление страницы. Что касается содержания курса, то оно тоже было не лучшим.Он хорошо объяснил основные компоненты приложения AngularJS, но ужасно справился с интеграцией их в реальное приложение, оставив у меня гораздо больше вопросов, чем я начал.

После некоторых поисков на форумах я наткнулся на Egghead.io (бесплатный / платный), где мне повезло больше. Материал их курса был намного чище, лаконичнее и полнее, что способствовало гораздо лучшему восприятию. Не говоря уже о том, что помимо курсов у них есть небольшие уроки продолжительностью 2–5 минут, которые охватывают важные темы.(Например: что такое контроллер? Что такое фильтр? Что такое $ scope?) Это действительно упрощает понимание основ. У них также есть некоторые видео, которые требуют оплаты, но обычно это те, которые охватывают более сложные угловые темы, которые вам не понадобятся позже. Я прошел их курс по основам AngularJS и был полностью удовлетворен результатами (а также стал большим поклонником курсов Egghead.io в процессе).

Шаблоны проектирования

Шаблоны проектирования — это, по сути, многократно используемые программные решения, которые можно многократно использовать для решения общих проблем программного обеспечения.Основываясь на этом, вы станете гораздо более конкурентоспособным разработчиком программного обеспечения на любом языке программирования. Это также упростит вам понимание кода других людей, поскольку вы быстро определите, какой шаблон проектирования они использовали в своем коде, чтобы лучше его понять.

Я нашел 2 лучших источника, чтобы узнать об этом, — это шаблоны дизайна JavaScript от doFactory и шаблоны дизайна на JavaScript Эдди Османи. Мне показалось, что doFactory намного проще для понимания, в то время как книга Адди Османи была намного более полной.

Chrome DevTools

Chrome — один из самых мощных инструментов для веб-разработчика. Чем раньше вы овладеете им, тем больше времени сможете сэкономить позже. Бесплатный курс Codeschool «Изучите и освоите Chrome DevTools» отлично их знакомит.

Git (Контроль версий)

Ах, Git — инструмент, который я никогда не знал, что мне нужен, пока не обнаружил, на что он способен. Git в основном позволяет вам отслеживать изменения, которые вы вносите в свой код, так что, если что-то пойдет не так, вы можете вернуться к предыдущему моменту времени.Это также позволяет вам увидеть историю вашего кода.

Я обнаружил, что бесплатный курс «Попробовать Github» от CodeSchool — это удобный способ начать работу. Обучение Atlassian Git превосходно помогло охватить более сложные доступные команды. Git Learning Path от Codeschool также отлично подходит для изучения основ Git.

NodeJS

Не прошло много времени, как я узнал, что базовое понимание NodeJS очень поможет мне в моем стремлении стать веб-разработчиком (подробнее об этом скоро).

Я попробовал курсы Codeschool на Node, но обнаружил, что им действительно не хватает содержания.Я обнаружил, что NodeSchool.io гораздо лучший учитель в понимании основ, и это было весело! Мне понравился практический подход, который он предлагал, который был похож на Codeschool и Codecademy — с дополнительным улучшением, заключающимся в том, что я действительно использовал NodeJS.

Task Runners (Grunt & Gulp)

Grunt и Gulp стали для меня большим сюрпризом, поскольку я понятия не имел, что такие инструменты вообще существуют, но я очень рад, что они есть! По сути, эти средства запуска задач позволяют автоматизировать общие задачи. Например, помните Less / Sass? Обычно вам придется вручную запускать компилятор CSS каждый раз, когда вы вносите в него изменения для компиляции CSS, а затем обновляете браузер. Используя средство запуска задач, вы можете настроить его так, чтобы он следил за вашими файлами Less / Sass на предмет изменений, и, когда он обнаруживает изменение, компилирует ваш CSS и автоматически обновляет браузер. Это очень полезно для сокращения времени разработки.

Сейчас есть 2 основных исполнителя задач: Grunt и Gulp. Хотя они делают одно и то же, они работают по-разному: Grunt более подробный и ориентированный на конфигурацию, а Gulp короче для написания и предпочитает код конфигурации.

Знание NodeJS поможет вам лучше писать файлы Grunt и Gulp, поскольку оба работают на NodeJS . Вы можете выбрать то, что хотите, но я обнаружил, что Gulp намного проще выучить и написать. Я до сих пор предпочитаю его из-за его минималистичного, но мощного подхода, основанного на конвейере.

Я считаю, что курсы Scotch.io по Grunt и Gulp являются одними из лучших.

Проблемы, с которыми я столкнулся на своей первой работе

Когда я изучил основы веб-разработки, я был готов к своему первому собеседованию по веб-разработке на должность начального уровня.Я не буду вдаваться в подробности интервью, так как это не основная тема данной статьи. Но я скажу, что мне сказали, что мои относительно сильные знания JavaScript помогают мне закрепить позицию. (Спасибо, Eloquent JavaScript!)

Должен сказать, над своим первым проектом я очень нервничал. Это включало создание повторно используемых веб-компонентов с помощью HTML, CSS и JavaScript, а также Bootstrap, Sass, Grunt в качестве инструментов. T

Поначалу я обнаружил две самые большие ошибки:

1. Страх неудачи. Поскольку я был новичком, я постоянно боялся, что мой код будет неправильным или плохо написанным, поэтому я потратил много времени, перепроверив все и придерживаясь лучших практик программирования. Из-за этого я редко пробовал новые творческие решения из-за опасений, что в конце концов это может сработать неправильно. Это фактически лишило меня стремления узнавать новое.
2. Делает что-то, потому что так сказал «Х» человек, который знает лучше меня. Сначала я так много делал. Хотя это не совсем неправильно, но делать что-то определенным образом только потому, что так сказал эксперт «X» — не зная почему, — привело к тому, что я действительно не знал, когда и почему все было сделано именно так.Вскоре я узнал, что из всего есть исключения и что с вы всегда должны знать причину лучших практик.

К счастью, во время моего первого проекта у меня был понимающий руководитель группы, который помог мне преодолеть эти проблемы. Он постоянно мотивировал меня пробовать что-то новое, даже если иногда что-то пошло не так. Он также сказал мне подвергать сомнению все — даже его учение.

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

Использование AngularJS в реальном проекте также было для меня довольно сложной задачей. Это было главным образом потому, что многое из того, что я делал с ним, я делал, не полностью понимая, почему они произошли. Я думал об этом как о «магии углов».

Мне много раз хотелось знать, как на самом деле работает Angular, но смотреть документацию было страшно.

В конце концов я наткнулся на удивительную книгу под названием «Создай свой собственный AngularJS».Я не читал все это, но чтение раздела об осциллографах и наблюдателях и о том, как они работают, действительно показало, что магия, лежащая в основе angular, на самом деле не была волшебством. Это был просто умный способ поддерживать привязку данных с использованием грязной проверки и вложенных областей видимости. Я настоятельно рекомендую эту книгу всем, кто хочет полностью понять AngularJS.

Другой проблемой, с которой я столкнулся год спустя, было то, насколько быстро прогрессирует веб-разработка. Я только что освоил AngularJS и Grunt и чувствовал себя гордым и могущественным — и вскоре обнаружил, что Gulp и ReactJS уже не за горами.А через год после их изучения Webpack начал набирать популярность, и мне тоже пришлось изучить это. Как вы понимаете, большая часть меня была разочарована тем, как быстро некоторые из моих знаний устарели. Но вскоре мой коллега просветил меня, рассказав мне то, что навсегда изменило мой взгляд на библиотеки и фреймворки:

«Библиотеки и фреймворки могут устареть, но предлагаемые ими концепции и решения часто выдерживают испытание временем».

Он был прав.AngularJS, возможно, и устарел, но полное понимание магии, стоящей за ним, помогло мне лучше понять архитектуру веб-компонентов React, которая улучшила концепцию директив Angular. Это также помогло мне понять, как ReactJS приобрел такую ​​популярность, а также какое будущее его ждет.

Я не помню, чтобы в моих последующих проектах возникали какие-либо другие серьезные проблемы. Но что я скажу, так это то, что в течение 2 лет, которые я занимался веб-разработкой, первое, что помогло добиться успеха (по мнению моих коллег), — это мое волнение и мое сильное желание всегда быть начеку для изучения нового.Вскоре я обнаружил, что это выигрышная комбинация с веб-разработкой, поскольку все здесь меняется очень, очень быстро, с постоянно появляющимися новыми фреймворками и библиотеками.

С другой стороны, еще одна вещь, которая мне очень помогла — и кое-что, что я обнаружил совсем недавно, — это понимание того, что нужно изучать , а не . Это стало критически важным для моего процесса становления лучшего веб-разработчика.

Нередко можно увидеть людей, критикующих ненормально быстрые темпы развития веб-технологий или появление новой библиотеки или фреймворка JavaScript почти каждый день.Но со временем я увидел свет и наконец понял:

Вам не нужно изучать каждую новую библиотеку или фреймворк, которые появляются.

Часто бывает хорошей идеей создать простой пример приложения Hello World, чтобы вы могли увидеть, что предлагает фреймворк. Тогда можно двигаться дальше. Но обычно вам следует сосредоточиться на том, что лучше всего соответствует потребностям вашего проекта. Поначалу это может быть сложно, но, к счастью, существуют отличные места, такие как Stack Overflow, Medium и Reddit, где вы можете найти полезные обсуждения между фреймворками и выяснить, какие из них лучше всего подходят для ваших конкретных случаев использования.

Идем дальше

В последующие годы я продолжал постоянно улучшать следующие способы

JavaScript

После того, как вы закончите Eloquent JavaScript, довольно легко сказать и почувствовать, что вы освоили JavaScript, но затем приходит You Don Не знаю JS, и он вас полностью разрушает (или, по крайней мере, для меня). Эта серия книг (кстати, бесплатная) несколько раз упоминалась мне несколькими старшими веб-разработчиками в офисе как книга , которую нужно прочитать, и только пока я ее не прочту, я могу сказать, что полностью знаю JavaScript.Они были правы, поскольку страница за страницей мне постоянно приходило в голову, насколько действительно сложным был JavaScript на самом деле, а также множество распространенных ошибок, которые могли возникнуть у неопытных и опытных людей без надлежащего понимания JavaScript.

Чтение этой серии книг действительно открыло мне глаза, и я также настоятельно рекомендую ее всем, кто хочет называть себя опытным разработчиком JavaScript. Как только вы это сделаете, есть 2 дополнительных ресурса, которые я настоятельно рекомендую, чтобы получить еще более глубокие, более продвинутые знания JavaScript;

• JavaScript, The Better Parts: удивительный доклад Д.Крокфорд, который говорит о самых больших недостатках JavaScript, это «Foot Guns», и о том, как использовать их в качестве сильных сторон.
• Два столпа JavaScript: солидная статья признанного писателя среднего уровня JavaScript Эрика Эллиотта, в котором рассказывается о двух основных столпах JavaScript: прототипическое наследование и функциональное программирование. также известный как ES6), последний и текущий стандарт JavaScript.Статья журнала Smashing Magazine ECMAScript 6 (ES6): Что нового в следующей версии JavaScript — отличный краткий обзор того, что нового в ES6. Вы можете попробовать ES6 в браузере с помощью онлайн-транспилятора Babel.

  CSS

  CSS может очень и очень быстро стать беспорядочным и дезорганизованным. Было предложено довольно много различных методологий для написания более чистого CSS, но выделяются 2, которые я настоятельно рекомендую вам прочитать о как можно скорее, чтобы оставаться конкурентоспособными:

  • SMACSS: масштабируемая и модульная архитектура для CSS.Гибкое руководство по разработке малых и больших сайтов.
  • БЭМ: методология, которая поможет вам получить повторно используемые компоненты и совместное использование кода в интерфейсе.

  Лично я предпочитаю SMACSS из-за его более понятного вида, но некоторые компании и CSS-фреймворки по-прежнему используют БЭМ, поэтому стоит знать и то, и другое.

  Вам также следует сосредоточиться на производительности вашего CSS. Статья Smashing Magazine «Управление оптимизацией производительности мобильных устройств» и статья HTML5 Rocks «Высокопроизводительная анимация» отлично справились с этой задачей. Быстрое прочтение обеих статей должно дать вам прочную основу.

  JavaScript Bundlers

  К настоящему времени вы должны хорошо разбираться в Grunt или Gulp. Следующим шагом является добавление сборщика JavaScript к вашему исполнителю задач, который позволит организовать более модульную организацию вашего приложения JavaScript.

  На данный момент два крупнейших игрока:

  • Browserify: позволяет вам требовать модули в браузере, объединяя все ваши зависимости.
  • Webpack: в основном Browserify на стероидах.Сложнее настроить и настроить.

  Мини-курс Scotch.io «Начало работы с Browserify» может дать вам начало работы с browserify, а статья Дэвида Фокса Пауэлла «Почему никто не может написать простой учебник по Webpack?» — отличное и интересное введение в webpack.

  Лично я не тратил много времени на использование webpack, но за время, проведенное с ним, я должен сказать, что это было потрясающе, даже если его немного сложнее настроить. Если вы только начинаете, я бы выбрал Browserify, поскольку его намного проще настроить.Просто знайте, что за webpack будущее, и какие более крупные проекты начинают использовать.

  ReactJS

  ReactJS быстро набирает популярность и, похоже, не замедляется — до такой степени, что люди спрашивают: «Убивает ли React Angular?»

  Scotch.io Learning React.js: Getting Started and Concepts дает исчерпывающий обзор React. Как только вы разберетесь с этим, продолжите курс Egghead.io по основам React, в котором вы создадите полностью работающее приложение ReactJS, а затем перенесете его на синтаксис ES6.Вы можете продолжить работу с официальной документацией ReactJS, которая очень хорошо сделана и позволит вам полностью освоить ее.

  Поскольку React — это только представление, настоятельно рекомендуется изучить Redux. На мой взгляд, большинство курсов по Redux немного сложны, но CSS Tricks Повышение уровня с помощью React: Redux действительно обеспечивает отличный баланс между простотой и информативностью при начале работы с Redux.

  Возможно, вы уже слышали о Flux на этом этапе, но если вам интересно, почему вы должны использовать Redux вместо Flux, ознакомьтесь с вопросом о переполнении стека. Зачем использовать Redux вместо Facebook Flux? на что ответил создатель Redux!

  Оглядываясь назад на свои ошибки и то, что я узнал

  Я сделал много ошибок за 2 года изучения веб-разработки.В целом, я думаю, что моей самой большой ошибкой было то, что я не освоил основы, прежде чем перейти к библиотекам и фреймворкам. Я предполагаю, что это применимо почти ко всем языкам программирования, но, на мой взгляд, еще больше применимо к JavaScript. Это связано с тем, что во многих отношениях JavaScript является сломанным языком и содержит множество «Foot Guns» (вы должны были слышать об этом, если смотрели доклад Д. Крокфорда о «JavaScript, лучшие части», о котором я упоминал ранее). Они могут сделать жизнь невыносимо тяжелой, если вы не понимаете их полностью.

  Я вспоминаю, как однажды застрял в проблеме AngularJS с $ scope, на отладку которой у меня ушло 3 дня, и я обнаружил, что это даже не проблема AngularJS, а проблема JavaScript, которую я вызвал сам из-за того, что не понял, как этот работает.

  Clean Code

  Странно, что я не вижу, чтобы об этом так часто говорили. Я не всегда заботился о написании чистого кода, но, честно говоря, это одна из вещей, которым я больше всего горжусь, чему научился. Это потому, что все любят жаловаться на то, что на их последнем месте была одна из худших и уродливых кодовых баз в мире.Так почему же никто не может говорить о том, насколько хорош был их последний альбом? Как их код оказался таким чистым и хорошо сделанным, что они им гордились?

  Это тенденция, которую я хотел бы изменить, и я считаю, что разница может быть достигнута, если к ней будет стремиться достаточное количество людей. Стремитесь сделать имена переменных и функций понятными на английском языке, даже если вам придется написать немного больше. Если вы этого не сделаете, вам придется вручную задокументировать это когда-нибудь в будущем, чтобы сделать его более понятным. Это также приведет к тому, что ваша общая кодовая база станет труднее для понимания новыми разработчиками и вами. Да, ты сам. Почему ты сам? Потому что, если вы не применяете чистый код, почему вы думаете, что ваши коллеги должны применять его и писать чистый код, чтобы вы могли легко его понять? Давайте подавать пример.

  И если это недостаточно хороший стимул, люди очень часто признают и ценят чистых авторов кода. Вы обнаружите, что, написав чистый код, вашим коллегам и друзьям понравится работать с вами еще больше, а вы, в свою очередь, проживете более счастливую жизнь.

  jQuery

  Некоторые из вас могли заметить, что я также не уделял особого внимания jQuery.Это потому, что по моему опыту я обнаружил, что сначала jQuery принес мне больше вреда, чем пользы. Некоторые из вас могут не согласиться, но позвольте мне объяснить: когда я впервые узнал об этом, общая идея, которую я понял, заключалась в том, что jQuery есть повсюду и вы можете использовать его практически для всего. Из-за этого я привык использовать jQuery практически для всего, и для любой проблемы, с которой я столкнулся, я искал решение для нее, использующее jQuery.

  Не поймите меня неправильно, jQuery был великолепен в то время, когда я его использовал, настолько потрясающе, что я слепо игнорировал то, что 90% того, что я делал с jQuery, можно было сделать изначально в современных браузерах с таким же простым синтаксисом.

  Теперь вы можете подумать: «Так что в этом плохого? В любом случае jQuery не так уж важен, и, используя его, вы все равно пишете меньше кода, чем если бы вы делали что-то изначально ». Но использование jQuery поверх собственных API не было проблемой. Проблема заключалась в том, что весь мой образ мышления и все решения общих проблем, которые я знал до этого момента, требовали работы jQuery. И это стало огромной проблемой, когда я получил свой первый проект и мне сказали, что jQuery не является зависимостью.

  Использование jQuery сделало меня бесполезным без него и заставило меня полностью игнорировать собственные методы и решения, которые всегда существовали.Это также сделало все мои решения менее переносимыми, поскольку для их использования требовался jQuery.

  С тех пор я старался не использовать jQuery, если он не является абсолютно необходимым и действительно обеспечивает значительное повышение эффективности и читаемости нашей кодовой базы (например, тяжелые манипуляции с DOM).

  Еще раз не поймите меня неправильно, jQuery великолепен, но если бы я мог вернуться в прошлое и встретиться со своим прошлым «я», которое только изучало веб-разработку, я бы настоятельно советовал себе не изучать jQuery, пока я не научился обходиться без него.Если у вас возникли проблемы с переключением, как у меня, ознакомьтесь с JQuery, возможно, вам не понадобится.

  Курсы

  Что касается курсовых материалов; в то время как многие курсы CodeSchool были выдающимися (ветвь HTML и CSS была особенно фантастической), даже если некоторые из их курсов по фреймворкам были немного плоскими (AngularJS, BackboneJS и т. д.).

  Я также прошел довольно много курсов Pluralsight, о которых я не упомянул, потому что по прошествии всего этого времени я пришел к выводу, что выбор их пути обучения в целом плохая идея и ненадежный . Поскольку их курсы создаются учителями, которые не всегда (на мой взгляд) очень хороши в преподавании, я обнаружил, что качество их курсов сильно колеблется, поскольку их стандарты качества не существуют. У меня были курсы, где даже человек, читавший курс, звучал так, как будто он засыпает. И, честно говоря, мне не хватает концентрации внимания, чтобы продолжать уделять внимание 6–10-часовым курсам, и многие из них длятся так долго, если не дольше.

  Я потратил 80–100 часов на обучение Pluralsight и, честно говоря, хочу вернуть себе значительную часть этого.Не поймите меня неправильно, у меня было несколько замечательных курсов по Pluralsight, но их внимание к количеству, а не к качеству заставило меня зря тратить время. Я мог бы узнать гораздо больше, если бы проходил курсы из лучших источников, таких как Egghead.io и CodeSchool, где они ценят большее качество количества.

  Единственная причина, по которой я мог когда-либо думать о том, чтобы кто-то использовал Pluralsight, — это пройти курс, которого нет на других веб-сайтах, по какой-то более непонятной технологии (например, Installshield или Xamarin), или пройти несколько очень конкретных курсов, которые, как они знают, были очень хорошими получены и рассмотрены (например, Основы Angular Джона Папы).

  В целом, если вы хотите использовать Pluralsight, убедитесь, что вы посещаете курсы, выбранные кем-то, кто прошел их первым, и которые признаны высококачественными и полезными.

  Я также недавно попробовал пройти обучение в Team Treehouse, и должен сказать, я поражен качеством их курсов, даже не уступающим по качеству CodeSchool, а их учебный материал очень обширен.

  Изучив там пути обучения HTML, CSS и JavaScript, я вижу, что вы легко можете получить основу практически для всего.Не верите мне? Просто посмотрите на их обучающие треки и скажите мне, что это не так уж здорово. Конечно, это немного дороже — 30 долларов в месяц, но, на мой взгляд, оно того стоит. (Я плачу за это прямо сейчас, чтобы изучить WordPress, так как он мне нужен для внештатного проекта, а материал отличный).

  Несколько слов о платных курсах

  Я почувствовал необходимость поговорить об этом, так как заметил общее мнение, что вы можете изучать программирование, не платя ни копейки, и быть таким же конкурентоспособным, как тот, кто заплатил за курс. Хотя это правда, я не могу не подчеркнуть ценность оплаты правильного курса. Конечно, многие из наиболее ценных материалов курса, о которых я написал, бесплатны, но многие из них также являются платными. В основном потому, что иногда вы просто не можете победить, когда кто-то внимательно объясняет вам вещи в визуальной форме.

  Да, существуют ужасные платные учебные курсы, от которых я бы не советовал, поскольку их ценностное предложение сомнительно (см. Pluralsight), но другие, такие как Egghead.io, CodeSchool и Team Treehouse, предлагают отличную отдачу, несмотря на их относительно дорогая ежемесячная подписка (25-30 долларов в месяц).Кроме того, все они имеют бесплатные 7–15-дневные пробные версии, поэтому вы можете увидеть, какой из них лучше всего подходит для вас.

  Если вы правильно разыграете свои карты, оплата 1-2 месяцев любого из них может легко дать вам знания, которые вы могли бы получить только в противном случае, наткнувшись на бесчисленные статьи и сообщения в блогах за год. Честно говоря, они такие хорошие.

  Так что да, в них нет необходимости, но если вы можете позволить себе хотя бы один месяц, вы можете быть уверены, что это даст вам сильное преимущество.

  Секрет успеха

  Я встречал много разработчиков за последние 2 года. Я был веб-разработчиком.На своем пути я встретил несколько действительно выдающихся разработчиков — разработчиков, которые явно находились в собственной лиге и на которых я и все остальные уважали. Я обнаружил, что у этих людей есть несколько общих черт, которыми я хотел бы поделиться с вами прямо сейчас. На мой взгляд, это секрет того, как стать успешным веб-разработчиком:

  • Любите то, что вы делаете. Это просто самая важная характеристика из всех. Если вам не нравится то, что вы делаете (будь то стили CSS или JavaScript), это действительно проявится в том, что вы делаете.Те, кто увлечены своим делом, часто явно выделяются из толпы.
  • Будьте щедры и поделитесь своими знаниями . Очень легко сохранить в секрете этот новый прием CSS / JavaScript, который решает проблемы проекта, но, пожалуйста, не делайте этого. Люди, которые больше всего делятся своими знаниями, зачастую являются наиболее ценными, поскольку их можно поместить в любую команду и значительно улучшить ее качество.
  • Всегда в поиске обновок .У большинства успешных разработчиков, которых я встречал, есть эта общая черта. Будь то чтение блогов, проведение много времени в обсуждениях, связанных с программированием, или даже обсуждение того, что нового в веб-разработке, во время обеденных перерывов. Постоянный поиск чего-то нового позволяет лучшим разработчикам всегда быть впереди всех.

  Кратчайший маршрут

  Уф, на завершение этой статьи потребовалось время (6 часов, и это количество продолжает расти). Мы почти закончили! Вы можете спросить: «Хорошо, классная история, но каков самый быстрый путь?» Итак, вот оно.

  Я организовал это так, как если бы я мог вернуться и сделать все правильно. Я также добавил несколько бонусов, которые я хотел бы получить тогда. Наслаждаться!

  Javascript

  1. Программа обучения Javascript CodeSchool или Treehouse (платная) ИЛИ Курс Codecademy Javascript
  2. Eloquent JavaScript
  3. Вы не знаете JS
  4. JS: The Right Way
  5. Изучите ES6 от Egghead.io

  HTML & CSS

  1. Курс обучения HTML и CSS в CodeSchool или Treehouse (платный) ИЛИ HTML и CSS: дизайн и создание веб-сайтов от Джона Дакета ИЛИ Курс Codecademy по HTML и CSS.
  2. Особенности специфичности CSS с помощью приемов CSS
  3. Изучите макет CSS
  4. SMACSS
  5. 9 основных принципов адаптивного веб-дизайна от Front
  6. Основы адаптивного веб-дизайна от Google на Udacity (возьмите, если вы не использовали обучение в CodeSchool или Treehouse path)
  7. Управление оптимизацией производительности мобильных устройств с помощью Smashing Magazine ИЛИ Оптимизация рендеринга в браузере и оптимизация производительности веб-сайтов с помощью Google на Udacity
  8. Основы Интернета с помощью Google

  Инструменты разработчика

  1. Изучите и освоите инструменты разработки с помощью CodeSchool
  2. Изучите Git с помощью Codecademy и Попробуйте Github от Codeschool
  3. Введение в команды Linux от Smashing Magazine
  4. Легко автоматизируйте свои задачи с помощью Gulp. js от Scotch.io

  AngularJS

  1. Проектные решения в AngularJS от разработчиков Google (Введение в AngularJS)
  2. Основы AngularJS от Egghead.io
  3. Руководство по стилю Angular Джона Папы
  4. Создание одностраничного приложения Todo с Node и Angular (MEAN) от Scotch.io
  5. Структура приложения AngularJS от Egghead.io (платный) ИЛИ Курсы Angular от Scotch.io

  ReactJS

  1. Изучение React.js: начало работы и концепции от Scotch.io
  2. Введение в webpack от Egghead.io
  3. Основы React от Egghead.io
  4. Повышение уровня с помощью React: Redux с помощью CSS-приемов

  Back End

  1. Учебники по NodeJS от NodeSchool.io
  2. Как я объяснил REST to my Wife
  3. Создание одностраничного приложения Todo с использованием Node и Angular от Scotch.io (Node, ExpressJS, MongoDB, Angular, REST) ​​

  Бонус: ресурсы

  Совершенно необязательно, но некоторые из моих любимых статей и ресурсов, которые я Я нашел за эти годы, что вы, вероятно, полюбите, если вы заинтересованы в соответствующей теме.

  • Веб-дизайн за 4 минуты. Очень креативный и оригинальный интерактивный учебник, который научит вас основам веб-дизайна.
  • Награды. Ищете вдохновение для веб-дизайна? Не смотрите дальше.
  • Эрик Эллиотт «Почему найм — это так сложно?». Здесь Эрик отлично справляется с описанием того, как на удивление сложно найти хороших разработчиков и как им стать.
  • Мега-сравнение систем баз данных NoSQL, Кристоф Ковач. Это превосходное сравнение самых популярных систем баз данных NoSQL.MongoDB, Redis, CouchDB, Cassandra, ElasticSearch, они и многие другие — все здесь.
  • XSS Игра. Ошибки межсайтового скриптинга (XSS) — один из наиболее распространенных и опасных типов уязвимостей в веб-приложениях. Используя этот замечательный ресурс, вы можете узнать, как находить и использовать ошибки XSS, а также как предотвратить их появление в вашем веб-приложении.
  • Как написать неподдерживаемый код. Веселая статья о том, как , а не — писать обслуживаемый чистый код.

  Бонус: Мои инструменты

  Я подумал, что было бы неплохо поделиться некоторыми из обнаруженных мною инструментов (некоторые хорошо известны, некоторые не очень), которые облегчили мне жизнь как веб-разработчика, поэтому вот они.

  • Jetbrains Webstorm: полнофункциональная IDE для веб-разработки. (Мой выбор редактора) Платный, но предлагает бесплатную лицензию на 1 год для студентов.
  • Atom.io: сильно расширяемый текстовый редактор с функциями, подобными IDE, конкурирующими с Webstorm. Свободный.
  • Sublime Text: Молниеносный текстовый редактор с поддержкой плагинов и эстетичным внешним видом.(Обычно я устанавливаю Webstorm / Atom в качестве IDE для серьезной работы, а Sublime Text — для быстрого редактирования файлов.)
  • caniuse.com: поддержка браузером критически важна для веб-сайтов, и это ресурс №1 для выяснения того, какие функции поддерживаются какой версией браузера и какие есть.
  • Cloud 9: Облачная среда разработки и IDE с поддержкой Git, работающая в Linux. Отлично подходит для удаленного программирования и тестирования NodeJS или других серверных вещей без необходимости устанавливать что-либо на свой компьютер.
  • CodePen, Plunker и JSFiddle: отличные облачные интерфейсные площадки, которые позволяют создавать быстрые демонстрации HTML / CSS / JS, которыми можно поделиться или поработайте позже, если создадите бесплатную учетную запись.CodePen часто лучше всего подходит для вещей, связанных с CSS, из-за его минималистичного интерфейса и множества функций, связанных с CSS, Plunker для демонстраций JavaScript из-за его мощных функций JS и JSFiddle для демонстраций, с которыми вы хотите сотрудничать с другими в реальном времени благодаря живому редактору совместное использование функции совместной работы.
  • Vanilla List: репозиторий подключаемых модулей и библиотек JavaScript, использующих только обычный JavaScript (то есть им для работы не требуются библиотеки, такие как jQuery).
  • YouMightNotNeedjQuery: Вероятно, вы этого не сделаете. Посмотреть на себя.
  • PublicAPI: Вы когда-нибудь задумывались, какие существуют общедоступные API? Не смотрите дальше!
  • Gravit.io: облачное приложение для дизайна, конкурирующее с Adobe Illustrator. (Бесплатно!) Полезно для быстрых макетов и веб-дизайна.
  • Adobe Kuler: Веб-приложение, которое поможет вам создать гармоничные цветовые комбинации для любого веб-сайта. Также есть витрина «Исследовать» цветовых палитр, созданных другими дизайнерами, а также система ранжирования, которая поможет вас вдохновить.
  • Назовите этот цвет: прекратите тратить много времени на выяснение того, как назвать свои цветовые переменные в less / sass, и просто используйте их законное имя в этом веб-приложении

  Заключение

  Я просто хотел бы сказать, что мне очень понравилось писать это , и это делает меня действительно счастливым, что я наконец смог вернуть что-то невероятно благосклонному сообществу программистов во всем мире.

  Как некоторые из вас уже заметили, это мой первый пост в блоге, но вы можете быть уверены, что я планирую написать больше. Только не ждите одного каждую неделю. Помните: качество важнее количества!

  Если у кого-то из вас остались вопросы, не стесняйтесь оставлять комментарии, и я сделаю все возможное, чтобы ответить вам как можно скорее.

  Надеюсь, это было вам полезно, ребята, до следующего раза, Best!

  Обновление за март 2018 г. : Для тех, кому интересно, чем я занимался, вот быстрое обновление статуса!

  https: // medium.com/@sgarcia.dev/status-update-im-still-here-with-cool-stuff-incoming-f031bab49eca

  Как стать Front-End разработчиком

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

  В этом сообщении в блоге вы найдете 10 советов, как стать фронтенд-разработчиком!

  Front-end vs Back-end vs Full Stack

  Как новичок, вы можете задаться вопросом, какой областью веб-разработки заняться. Если вы не уверены на 100%, какой из них следовать, я рекомендую вам прочитать этот пост в блоге о том, как стать разработчиком полного стека.

  Если вы уже уверены в разработке внешнего интерфейса, продолжайте читать.

  Требуются навыки фронтенд-разработки

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

  Так что будьте готовы к открытому морю.

  Или, как сказал бы Иван:

  Front-end разработка похожа на океан. У вас есть корабль, но нет карты. Сначала изучите мелководье, а затем углубитесь.

  1. Изучите HTML и CSS. И стань хорошим в этом.

  Думаю, выхода нет. Изучите HTML и CSS. Почему? Потому что основы имеют значение.

  Существует множество различных онлайн-курсов о том, как начать работу с HTML и CSS. Перво-наперво. Зарегистрируйтесь на онлайн-курсах, таких как Coursera или Team Treehouse. После завершения некоторых начальных курсов создайте несколько статических веб-страниц и повторяйте их снова и снова.

  Я также рекомендую разработать несколько небольших элементов пользовательского интерфейса для отработки недавно изученных навыков HTML и CSS. Codepen.io — отличная площадка для этого. Просматривайте проекты других людей и участвуйте в их сообществе.

  2. Стройте вещи.

  Поиграться с (маленькими) элементами пользовательского интерфейса — это одно. Создание реальной целевой страницы или веб-сайта — это совсем другое.В какой-то момент вы в конечном итоге начнете использовать фрагменты кода JavaScript.

  Не забудьте испытать себя, создавая первые адаптивные элементы.

  Итак, есть только один способ стать лучше в том, что вы делаете: продолжать учиться, продолжать строить.

  Соединяем эти два, строим, чтобы учиться! Нет лучшего способа научиться, чем запачкать руки. Вы, наверное, слышали это уже сотню раз, но не зря этот совет дают чаще всего.

  3. Читайте, читайте, читайте

  Думаю, этого нет. Хочешь верь, хочешь нет. Ваши навыки чтения сильно влияют на ваш путь к тому, чтобы стать отличным фронтенд-разработчиком. Особенно в начале требуется много читать. Почему?

  Сначала вы, вероятно, прочитаете много статей, руководств и руководств о том, как делать разные вещи. Вы также начнете читать чужой код.

  Или, как сказал бы Адам (руководитель UX в CoachUp):

  Совместите это с хорошей книгой, такой как Eloquent JavaScript, и вы сможете очень быстро улучшить свою игру в программировании.

  4. Внешняя разработка — это не только создание веб-сайта

  Если вы следовали моим советам с 1 по 3, вы, вероятно, уже прошли курс или прочитали много руководств и теперь можете создать веб-сайт.

  Однако это не значит быть «фронтенд-разработчиком». Знание того, как создать веб-сайт, — очень небольшая часть интерфейсной головоломки.

  Прошу прощения, если это звучит демотивирующе. Но на самом деле это так.

  Существует множество тем, которые вам еще стоит изучить.Если мы рассматриваем производительность, тестирование, QA и многие другие области, то вам действительно нужно стать глубоким дайвером как фронтенд-разработчик.

  5. Знайте свои инструменты

  Начиная свой путь с фронтенд-разработки, вам нужно будет определиться со своим набором инструментов и услугами, которые вам нужны, чтобы облегчить вашу жизнь. Изучение различных вариантов инструментов — важная вещь. Отличные инструменты помогут вам улучшить и автоматизировать рабочий процесс клиентской разработки.

  Будет море возможностей, но довольно скоро вы обнаружите, что используете определенные инструменты и приложения.Одним из таких инструментов, безусловно, будут инструменты разработчика Chrome. Почему? Потому что вы можете играть с HTML, CSS и JavaScript в режиме реального времени, и это даст вам немедленную обратную связь, необходимую для быстрого обучения.
  Кроме того, для облегчения повседневной работы есть node, npm, bower и многие другие отличные инструменты. И не забывайте о версиях. 😉

  6. Контроль версий спасет вам жизнь.

  Хорошо, возможно, это звучит слишком преувеличенно. Но поверьте мне в этом. Контроль версий избавит вас от бессонных ночей.

  Вместо того, чтобы пытаться что-то и взорвать вам лицо, или триллион раз нажать command + z, вы можете просто выбросить ветку и вернуться к тому, что работало раньше.

  Так что обязательно станьте экспертом в Git.

  Это не только сэкономит вам бесчисленное количество часов, но и даст вам больше уверенности в том, чтобы пробовать что-то новое. (Спасибо, Роб, что указал на это!)

  7. Будьте посредником

  Как front-end разработчик, вы должны осознавать, что ставите себя на роль посредника.В качестве посредника вы общаетесь с QA-людьми, клиентами, UX-экспертами, а также с другими разработчиками. Вам нужно будет принять во внимание разные точки зрения.

  Вот почему, помимо изучения основ HTML, CSS и JavaScript, вам нужно быть уверенным в том, что вы можете четко общаться.

  Или, как сказал Кайл:

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

  8.Не спеши.

  По пути вы спросите себя, зачем вы это делаете, и можете просто остановиться. Может возникнуть соблазн просто сдаться. Но не надо. Если вы на этом этапе, у меня есть только один совет:

  Do. нет. дайте. вверх.

  Выделяйте один-два часа через день, чтобы учиться. Делайте много перерывов и убедитесь, что вы действительно знаете основы. И никогда не торопитесь.

  Основы составляют основу, которая поможет вам перейти на следующий уровень.

  Если вы чувствуете себя застрявшим, не бойтесь задавать вопросы. Каждый проходит через этот этап, и наличие терпения поможет вам в конечном итоге стать профессионалом во фронтенд-разработке.

  9. Погрузитесь в рамки

  Итак, вы добрались до этого места. Потрясающие!

  Пришло время заняться определенными фреймворками. Начните с поиска наиболее популярных и выясните, почему они действуют определенным образом.

  Выясните, хорошо ли каждое из них.Узнайте, как изменились структуры и отраслевые стандарты за последние пару лет. Глядя на старые фреймворки, вы, вероятно, обнаружите устаревшие подходы и код.

  Не забывайте: иногда использование фреймворка — не лучший вариант, но в большинстве случаев о них стоит знать.

  Спасибо за подсказку, Робби!

  10. Участвуйте в проектах с открытым исходным кодом

  Внесите свой вклад в FOSS на GitHub. Не избегайте больших рамок, которые кажутся хорошо зарекомендовавшими себя.Ошибаются даже авторы фреймворков.

  Возможно, вы тратите большую часть времени на чтение кода, но не воспринимаете это как пустую трату времени.

  Вы приобретете полезные привычки и практики, а также приобретете некоторый опыт работы с другими разработчиками. Когда вы почувствуете, что готовы написать код, просмотрите проблемы в репозитории и выберите одну проблему, с которой вы справитесь.

  Участие в различных проектах, особенно с открытым исходным кодом, не только сделает вас лучшим фронтенд-разработчиком, но также поможет вам создать собственный онлайн-бренд как активного, опытного разработчика.

  Завершение.

  Чтобы стать фронтенд-разработчиком, определенно потребуется время. Как показано в этом сообщении блога, становление интерфейсным разработчиком — это не только изучение различных интерфейсных фреймворков и языков программирования. Речь идет о взаимодействии, обязанностях и ролях внешнего разработчика.

  Поскольку Интернет — это быстро развивающаяся вселенная, великие разработчики интерфейсов никогда не должны прекращать учиться. Даже такие мелочи, как подписка на экспертов по интерфейсу в твиттере, повлияют на вашу кривую обучения.

  Чтобы добраться туда, нужно набраться терпения. Спешить не имеет смысла, потому что это не сделает вас счастливым. Никогда не забывайте получать удовольствие, обучаясь и экспериментируя.

  Эта статья была представлена ​​вам Usersnap — средством визуального отслеживания ошибок для каждого веб-проекта.

  Стань веб-разработчиком с нуля

  ВАЖНОЕ ПРИМЕЧАНИЕ: этот курс устарел и в настоящее время находится в стадии полного обновления на 2019 год.

  «Стань веб-разработчиком с нуля» , вероятно, один из самых полные и всесторонние онлайн-курсы, которые вы когда-либо увидите, охватывающие веб-разработку сверху вниз.Этот курс включает более 30 часов содержания и охватывает все, что вам нужно знать о том, как стать высококвалифицированным веб-разработчиком, даже если вы никогда не программировали до . В этом курсе мы будем охватывать следующие темы:

  FrontEnd Development: JavaScript, jQuery, HTML5, CSS3, Bootstrap

  BackEnd Development: PHP, MySQL (MySQLi)

  Этот курс даст вам все понимание того, как работает Интернет, и после того, как вы пройдете курс, вы получите широкий спектр знаний, чтобы иметь возможность создавать свои собственные веб-сайты и приложения с использованием новейших технологий.

  Примечание: Этот курс регулярно пополняется новыми лекциями, руководствами и проектами.

  Что предлагает этот курс, чего нет у других?

  1) Узнайте, как получить бесплатный хостинг навсегда:

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

  2) Красивый веб-сайт-портфолио, который вы можете использовать как свой собственный:

  Мы поможем вам создать свой первый веб-сайт-портфолио, который вы сможете использовать как свой собственный и представить его своим клиентам как профессиональный фрилансер.

  3) Полное руководство по профессиональной карьере для рынка технологий 2016 года:

  Целый раздел, посвященный тому, как начать свою профессиональную карьеру в качестве фрилансера или штатного сотрудника, с советами ведущих экспертов.

  4) Полная электронная книга для фрилансеров:

  Загрузите электронную книгу «Полное руководство для фрилансеров» бесплатно.

  5) Обновленное содержание за 2016 год:

  Все содержание этого курса было записано и обновлено для рынка технологий 2016 года.

  6) 30 красивых адаптивных шаблонов HTML5:

  Загрузите 30 потрясающих адаптивных шаблонов HTML5 для своих веб-проектов.

  7) 110+ пакет функциональных форм:

  Создавайте любые формы (классические, многоступенчатые, всплывающие меню, всплывающие снизу, модальные, без нижнего колонтитула и заголовка) с проверкой на стороне клиента и на стороне сервера.

  Примечание: Все предыдущие предложения будут немедленно предоставлены студенту после покупки курса.

  Как стать Front-end веб-разработчиком | Автор: Sushant Kumar

  С такими удивительными ресурсами, доступными в Интернете, довольно легко научиться программировать самостоятельно. Чтобы стать Front-end разработчиком, вам просто нужно идти по пути и работать над несколькими проектами, чтобы ваше портфолио выделялось. Прежде чем углубляться в требуемые навыки, давайте быстро разберемся, кто такие фронтенд-разработчики и чем они занимаются в повседневной жизни?

  Front-end веб-разработчики работают над визуальными и интерактивными элементами веб-сайта.Они устраняют разрыв между дизайнером и внутренним разработчиком, поэтому им нужно проявлять творческий подход и в то же время быть технически подкованными. Это практика разработки элементов пользовательского интерфейса веб-приложений с использованием таких языков, как HTML, CSS и JavaScript.

  HTML и CSS — фундаментальный блок Front-end разработки. Вы должны быть экспертом в этих двух языках. Хорошо то, что вам понадобится всего пара недель, чтобы понять основы и начать работу.Существует ряд веб-сайтов, которые помогут вам в изучении HTML и CSS. Вы можете попробовать LearnShayHowe.com или Codecademy.

  Работа над проектами —Как только вы закончите с основными концепциями, приступайте к работе над проектами. Убедитесь, что вы работали над несколькими веб-сайтами или элементами пользовательского интерфейса. Он может варьироваться от создания чего-то простого, например, страницы about.me, до сложных целевых страниц, таких как Pinterest.

  Узнайте больше об адаптивном веб-дизайне и медиа-запросах. В 2019 году вам понадобится веб-сайт, который обеспечит удобство работы пользователей на всех различных устройствах, будь то мобильный телефон, планшет или настольные компьютеры с большим экраном.

  Front-end разработка — это больше, чем просто создание веб-сайтов.

  JavaScript дает вам возможность сделать ваш сайт более интерактивным. Все слайдеры изображений, всплывающие окна, кнопки сворачивания созданы с использованием JavaScript.

  Согласно опросу StackOverflow, JavaScript является самым популярным языком программирования в 2018 году.

  StackOverflow — Самые популярные языки программирования в 2018 году

  Вы можете изучить JavaScript из Codecademy, документов Mozilla или Javascript.Информация. Если вы любите читать книги, EloquentJavaScript станет отличным выбором.

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

  jQuery — популярная библиотека JavaScript. Это дает вам возможность добавлять готовые элементы на ваш сайт, которые можно настроить в соответствии с требованиями.

  Вы можете изучить jQuery из бесплатного курса Udacity — Изучите JQuery БЕСПЛАТНО

  Bootstrap — это популярный интерфейсный фреймворк, который дает вам возможность добавлять общие шаблоны пользовательского интерфейса, такие как формы, слайдер изображений, типографику, значки на ваш сайт.Вы можете изучить Bootstrap по адресу — getbootstrap.com

  Используется в основном для совместной работы над исходным кодом.

  Этот плейлист Youtube объяснит вам git менее чем за 30 минут — СМОТРИТЕ СЕЙЧАС (он разработан CodeSchool, который был приобретен Pluralsight в 2018 году)

  Как стать Front-End разработчиком (версия 2020 года)?

  Как бы вы хотели работать в ведущих мировых компаниях, оказывая влияние с помощью красивой интерфейсной разработки?

  В современной сети существует большой спрос на выдающихся художников, и это руководство покажет вам, с чего начать.

  И поскольку люди, которые работают с программным обеспечением, являются одними из самых высокооплачиваемых людей, стоит подумать о том, чтобы овладеть этим новым навыком. Мало ли, со временем это может превратиться для вас в карьеру.

  Первый раздел этого руководства посвящен ответам на насущные вопросы о фронтенд-разработке. Если вы знаете об обязанностях, зарплате и других аспектах работы фронтенд-разработчиком, то можете пропустить вторую часть. Второй раздел этого руководства посвящен ресурсам, учебным пособиям и советам.

  Что такое фронтенд-разработка?

  Front-end веб-разработка — это практика использования HTML, CSS и JavaScript для создания уникальных веб-приложений. Такие приложения, как веб-сайты, мобильные веб-сайты, а также мобильные приложения и прогрессивные веб-приложения.

  Вы также можете думать об этом так: каждый веб-сайт, который вы просматриваете, включая этот, каким-то образом был создан интерфейсным разработчиком. По крайней мере, на стороне клиента.

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

  Хотя внешний интерфейс — один из наиболее доступных способов разработки веб-сайтов, он также может быть одним из самых сложных.

  Технология создания веб-сайтов постоянно меняется, а это означает, что разработчикам необходимо регулярно адаптировать свои навыки к новейшим практикам. Это может быть утомительно для новичка, но становится лучше через год или два серьезной практики.

  Можете ли вы бесплатно изучить интерфейсную разработку?

  Совершенно верно!

  Изучать веб-разработку становится намного проще, в основном благодаря огромному притоку новых ресурсов, руководств и проектов с открытым исходным кодом.

  Такие проекты, как freeCodeCamp, помогают миллионам людей писать код для своих первых программ. Блог freeCodeCamp полон интересных статей не только о интерфейсе, но и о других аспектах веб-разработки. Стоит добавить в закладки!

  Выглядит сложно? С практикой становится легче!

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

  Существует множество стартапов, обслуживающих целеустремленную аудиторию, и мы выделим несколько удивительных платформ курсов, которые даже дадут вам сертификат в конце всего этого.

  Какая средняя зарплата фронтенд-разработчика?

  Интерфейсный разработчик с предшествующим опытом может рассчитывать получать домой более 100 000 долларов в год , если он живет в Соединенных Штатах.

  Неплохой номер!

  Разработчики

  Juniors могут получить домой от $ 60 000 и выше .

  И зарплаты в Европе тоже кажутся вполне разумными; В Германии в среднем 50 000 долларов в год.

  Стоит отметить, что популярность удаленной работы резко возросла в последние годы, а это означает, что разработчики стремятся уравнять свою оплату по всем направлениям в соответствии с международными стандартами. Это больше повод подумать о том, чтобы стать фронтенд-разработчиком!

  Как найти работу front-end разработчиком?

  Технически, о работе следует говорить в последнюю очередь. Сначала вы должны накопить навыки, а затем подумать о потенциальных возможностях. Но, поскольку этот пост структурирован как руководство, вы всегда можете вернуться и проверить этот раздел для справки.

  Удаленные рабочие места растут беспрецедентными темпами. В конце концов, кому не нравится идея работать из дома или, что еще лучше, прямо с пляжа?

  Вот список самых популярных досок вакансий для фронтенд-разработчиков:

  Это несколько сокращенный список сайтов, на которых даются рекомендации по поиску вашей следующей внешней работы. Другая альтернатива, которая у вас есть, — это работа над личным проектом в надежде сделать его прибыльным или тратить свое время на выступления фрилансера.

  Ресурсы: с чего начать.

  Следующие ресурсы посвящены началу работы. В этом отношении мы придерживаемся достаточно линейного подхода. И по той простой причине, что существует огромное количество ресурсов.

  Чтобы вы могли быстро начать работу, мы уделяем особое внимание платформам и интерфейсным инструментам, которые вплетаются в современный рабочий процесс. В результате вы можете изучить синтаксис кодирования от базового до среднего, одновременно понимая инструменты, которые управляют рабочим процессом современного разработчика.

  Настоятельно рекомендуется не торопиться с этими ресурсами, поскольку они подготовят вас к курсам и учебным материалам, содержащимся во второй части этого руководства.

  Кодекадемия

  Если вы потратите хотя бы несколько минут на поиск ресурсов для обучения программированию, то Codecademy, несомненно, станет одним из ваших первых достижений. Эта платформа для обучения программированию хорошо известна и за семь лет обслужила более 100 миллионов человек.

  В то время Codecademy была революционной со своим динамическим и интерактивным интерфейсом кодирования. И хотя многие пошли по тому же пути, Codecademy сохранила стабильный послужной список.

  В наши дни вы можете получить сертификат по завершении, и многие использовали этот сертификат, чтобы получить работу в стартапе верхнего уровня ; как младший разработчик, не меньше.

  Все время утверждают, что Codecademy недостаточно.

  С точки зрения опытного разработчика — конечно, возможно, эта платформа слишком проста. Но если вы изучаете только интерфейсную разработку, то нет ничего более приятного, чем выполнение пошаговых инструкций с результатами в реальном времени.

  Codecademy предлагает классы по HTML5, CSS3, SASS, Python, JavaScript, Ruby, SQL и Java.

  Изучите макет CSS

  Как фронтенд-разработчик, вы собираетесь потратить разумное количество времени на работу с макетом.Макет — это холст, на котором вы строите веб-сайт. Этот текст блога расположен внутри строки , которая является частью более крупного контейнера .

  И это относится ко всем дизайнам веб-страниц. Используя Learn CSS Layout, вы можете получить фундаментальное представление о том, как работают контейнеры и строки, а также как вы можете позиционировать контент именно там, где хотите.

  Дополнительные инструменты, которые вы можете изучить, — это Flexbox Froggy для основ Flexbox и Grid Garden для основ Grid соответственно.

  Макет — довольно важная тема, поэтому потратьте несколько часов на изучение макета. Лучший способ учиться — практиковаться.

  Бутстрап

  Когда вы разберетесь в принципах работы макетов, пора провести конкретные эксперименты. Конечно, вы можете пойти дальше и попробовать разработать собственный пользовательский интерфейс в качестве своего первого проекта, но это может отпугнуть вас от большего, чем побудить продолжить.

  Итак, вам нужно узнать об одном или двух фреймворках.Фреймворк — это простой способ начать любую веб-разработку. Вам будут предоставлены инструменты и документация, чтобы с первого же дня приступить к созданию интерактивных веб-сайтов. И один из лучших, которые когда-либо делали, — это Bootstrap.

  Создавайте адаптивные, ориентированные на мобильные устройства проекты в Интернете с помощью самой популярной в мире библиотеки интерфейсных компонентов. Bootstrap — это набор инструментов с открытым исходным кодом для разработки с использованием HTML, CSS и JS.

  Bootstrap широко используется во всем Интернете и, без сомнения, является одним из самых популярных интерфейсных фреймворков в мире.

  Черт возьми, хороший процент сайтов, которые вы посещаете ежедневно, используют некоторые функции Bootstrap.

  Одна из фантастических особенностей Bootstrap — это то, насколько быстро вы можете начать работу. Страницы документации полны примеров и вариантов использования. И, что лучше всего, система макетов Bootstraps разработана с учетом адаптивного дизайна. Итак, ваши сайты на основе Bootstrap автоматически оптимизированы для мобильных устройств.

  И если вам нравится то, что предлагает Bootstrap, вот дополнительные ресурсы по популярным интерфейсным фреймворкам:

  Контрольный список для внешнего интерфейса

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

  Front-End Checklist — отличный инструмент, с помощью которого вы можете указать URL-адрес своего веб-сайта, а платформа проверяет ваш сайт на предмет передовых практик в разработке внешнего интерфейса. Это включает в себя проверку того, оптимизировали ли вы свои изображения или соблюдаете ли вы лучшие методы SEO.

  Вам следует пробовать и использовать это приложение столько, сколько нужно, чтобы понять, каковы современные требования к профессиональным веб-сайтам и приложениям.Кроме того, работать с ненавязчивым и плавным интерфейсом — одно удовольствие.

  Vue.js

  Vue.js — отличный пример, который показывает, как небольшая идея / концепция может превратиться в одну из самых узнаваемых вещей в мире. Действительно, Vue.js взял штурмом фронтенд-сообщество.

  Эта прогрессивная структура помогает разработчикам создавать удивительные пользовательские интерфейсы с использованием HTML и JavaScript.

  Фреймворк полностью поддерживается сообществом — как с финансовой точки зрения, так и с точки зрения разработки.

  Это прекрасный пример того, как открытые исходные коды могут объединяться и делать великие дела. И, как фронтенд-разработчик, вы должны больше изучать открытый исходный код и то, почему это важно.

  Вот несколько рекомендуемых статей о Vue.js:

  И последнее, но не менее важное: ознакомьтесь с различными проектами, созданными с помощью Vue.js, на веб-сайте Vue.js Showcase.

  Основы внешнего интерфейса

  Все, что мы рассмотрели до сих пор, было по большей части бесплатным и с открытым исходным кодом.Все, что вам нужно, это взять себе Sublime Text, и вы можете быть на пути к фронтенд-экспериментам, и вам это абсолютно необходимо! Чтение руководств и документации по фреймворку — это только половина дела.

  Настоящее обучение происходит в текстовом редакторе и браузере. Единственным недостатком этого подхода является то, что он не совсем систематический. Вы работаете в режиме всеобщей свободы, и результаты могут зависеть от вашей способности дисциплинировать себя.

  Если вы не решите инвестировать, а под инвестированием я подразумеваю потратить символическую сумму на покупку любой из дополнительных книг в A Book Apart.Эти ребята — одни из лучших в отрасли, и ветераны фронтенд-разработчиков неоднократно рекомендуют их книги.

  В разделе «Основы внешнего интерфейса» есть книга по SVG, CSS, HTML, JavaScript и Sass, которая является идеальной отправной точкой для современных рабочих процессов внешнего интерфейса.

  GitHub

  GitHub — это ваш цифровой офис для всего, что связано с кодированием и разработкой. Это крупнейшая в мире платформа с открытым исходным кодом, на которой размещено большинство самых популярных в мире фреймворков и инструментов.

  С помощью GitHub вы можете размещать свои проекты и приглашать других людей вносить свой вклад. И вы можете сами вносить вклад в другие проекты.

  Вы также можете изучить GitHub и все, что он может предложить. Например, GitHub является домом для знаменитых списков Awesome, которые представляют собой огромные коллекции руководств, ресурсов, инструментов и прочего для конкретных фреймворков и технологий.

  Например, Awesome Front-End List, который включает актуальную информацию о последних вещах, которые нужно знать о front-end, и о том, куда он движется.

  Переполнение стека

  Stack Overflow имеет печально известную репутацию самого строгого в мире сайта по программированию вопросов и ответов. И это действительно так.

  Пользователи Stack Overflow не относятся легкомысленно к вопросам, которые не были исследованы или должным образом проанализированы. И хотя это может показаться отталкивающим, это помогает создать сильное чувство цели.

  Видите ли, всякий раз, когда пользователь отправляет ответ на вопрос, другие пользователи могут выступить вперед и проголосовать за этот ответ.В итоге вы получите несколько «проверенных» ответов, которые подробно ответят на вопросы пользователей. В результате иерархия сайта остается четкой и последовательной.

  Как начинающий интерфейсный разработчик, вы захотите использовать Stack Overflow для понимания определенных тем, а также для того, чтобы задавать вопросы, если это необходимо. Однако для большинства новичков вы сможете найти краткие ответы за секунды.

  Учебники и курсы: знакомство с экосистемой.

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

  Когда вы все это сделаете, вы можете переключить свое внимание на учебные пособия и курсы. Это более строго организованные ресурсы с упором на обучение.

  Front-end разработка — это набор инструментов, фреймворков, библиотек, программного обеспечения для тестирования и многого другого. Но пусть вас не пугает сам масштаб!

  Стоит отметить, что некоторые из следующих курсов недоступны для бесплатного использования.Однако мы заверяем вас, что следующие рекомендации являются абсолютно первоклассными.

  Кроме того, такие платформы, как Frontend Masters, помогут вам освоить все технологии, используемые в самых успешных стартапах мира.

  Цель этого поста — не продвигать фронтенд-разработку как хобби, а дать вам ощутимые ресурсы, чтобы вы могли сделать карьеру на основе всего вашего обучения.

  Веб-документы MDN

  MDN (Mozilla Developer Network) так или иначе познакомит вас с вами.Эта платформа веб-документации полностью посвящена рекламе того, как работает Интернет. Здесь вы можете узнать об инструментах разработчика, веб-технологиях и самой веб-разработке.

  Когда вы ищете какую-то конкретную информацию в CSS или HTML, часто именно MDN появляется в качестве первого результата в Google и других поисковых системах. Руководства, спецификации и общие сведения структурированы таким образом, чтобы это было удобно для интерфейсных разработчиков.

  Интерфейсные курсы edX

  Как было сказано ранее в этом руководстве, следование строгой учебной программе — это линейный способ обучения и адаптации.И чтобы начать работу с курсами, вы должны проверить, что может предложить edX. Вы можете не только получить сертификаты по окончании, но и учиться в желаемом темпе.

  Курсы

  edX тщательно структурированы, с четким упором на то, чтобы помочь студентам понять основы каждой темы курса. На данный момент вы можете изучать такие технологии, как JavaScript, HTML5, CSS3 и другие.

  Если вы хотите получить полный интерфейсный сертификат, вам придется вложить скромные средства в размере 500 долларов, но это также дает вам прямой доступ к инструкторам курса и многому другому.Многие компании использовали edX для включения своих сотрудников в эту конкретную программу.

  Мастера интерфейсов

  Frontend Masters похож на буткемп. Курсы, которые вы можете найти на этой платформе, чрезвычайно тщательны, с упором на подробный контент и проектно-ориентированное обучение.

  Здесь вы можете узнать о таких технологиях, как React, Vue, Angular, Node.js и многих других. Качество продукции чрезвычайно высокое, так что вы можете получить удовольствие, аналогичное тому, что было на реальном курсе Bootcamp.

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

  И последнее, но не менее важное: завершение курса Frontend Masters в вашем резюме не останется незамеченным вашим работодателем.

  Яйцеголовый

  Egghead очень похож на платформу, упомянутую выше, но отличается более четкими и сжатыми уроками.Например, урок «Создание динамических списков во Flutter с помощью ListViews» длится всего 2 минуты, хотя он дает вам достаточно учебного материала для правильного понимания концепции.

  Egghead предоставляет учебные пособия и курсы по фреймворкам, библиотекам, языкам, инструментам и платформам. Хотите узнать о мобильной разработке? Не проблема, у Egghead есть учебные материалы для iOS, Android и других платформ.

  Годовая цена составляет скромные 250 долларов, но это дает вам доступ ко всем курсам и учебным пособиям, найденным на сайте.Вы также можете обсудить каждый урок с другими членами сообщества. Стоит вложить деньги!

  CSS-уловки

  Крис Койер — абсолютная легенда в сообществе CSS. Он не только не отставал от CSS-Tricks более десяти лет, но и является соучредителем CodePen — популярной платформы для обмена кодом для веб-разработчиков.

  В CSS-Tricks вы можете рассчитывать только на то, что он постоянно обновляется, а истории публикуются на основе актуальных тем и технологий.В результате вы можете быстро повысить свой набор навыков, используя учебные материалы, предоставленные многими авторами сайта.

  Короче говоря, это полезный сайт, который стоит держать в закладках и проверять раз в день. Вы получите огромную пользу от самих руководств, а также от рекомендаций, которые прилагаются к ним.

  Скотч

  Scotch — это не только учебный ресурс, но и место для последних событий в области веб-разработки. Созданный с 2014 года, сайт собрал огромное количество поклонников наряду с тысячами бесплатных руководств по веб-разработке.

  Авторы

  Scotch уделяют большое внимание таким технологиям, как Vue, React, Laravel, Angular, JavaScript, Node.js и т. Д. И не думайте, что это какие-то подделки.

  По большей части вы будете создавать реальные и осязаемые приложения. Например. Хотите узнать, как создать клон Twitter Vue и Adonis? Не проблема, просто запишитесь на бесплатный курс, и все будет готово.

  Замечательный сайт, и я не могу рекомендовать его достаточно для любых новых и существующих интерфейсных разработчиков!

  Подсказки: Если нет борьбы, нет и прогресса.

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

  Тем не менее, учитывая уровень возможностей, которые вы можете привлечь, это того стоит!

  Учитесь в разумных пределах.

  Почему вы учитесь программировать? Вы хотите получить лучшую работу? Хотели бы вы создавать креативные веб-сайты? Выясните причину, потому что она пригодится.Это пригодится в те дни, даже недели, когда вы бьетесь головой о стену, сомневаясь, стоит ли это того.

  Найдите свое племя.

  Вы захотите завязать хотя бы несколько контактов с единомышленниками и даже с наставниками, если это возможно. Когда я пошел брать книгу по Паскалю у учителя компьютерной науки в моей старой школе, он был очень дружелюбен и готов помочь мне с любыми проблемами, которые у меня могут возникнуть. Рассмотрите аналогичный путь, либо найдя местное сообщество, либо найдя других разработчиков в онлайн-сообществах.Гораздо легче узнать, когда кто-то указывает пальцем на то, куда вам нужно смотреть.

  Избегайте изучения всего.

  Не перекладывайте бремя знания всего на себя. Когда дело доходит до внешнего интерфейса, начиная с HTML5 и CSS3 более чем достаточно. JavaScript похож на глазурь на торте, поэтому будьте осторожны с тем, сколько глазури вы получите, потому что вы можете раздуть себя! Освоив основы, изучите новые области, темы и концепции. Маленькие и компактные обучающие укусы являются здесь ключевыми.

  Если вы хотите узнать больше, прочтите этот пост Али Спиттель, в котором она делится более чем 25 советами для начинающих разработчиков.

  Убирайся

  Чего вы ждете? Выходи и начинай учиться! Обязательно проверяйте это руководство по интерфейсной разработке каждые несколько месяцев, чтобы узнать о новых обновлениях и советах.

  Удачи!

  Полное руководство по становлению единым целым

  Кодирование и программирование становятся все более и более популярными по мере развития технологий, и компьютерные устройства становятся все более распространенными .Поэтому, естественно, поиск в Google вакансий интерфейсных разработчиков начального уровня также стремительно вырос.

  Многие люди без образования в области компьютерных наук задают вопрос: « Что делает веб-разработчик? ? ’, и они также хотят получить необходимые навыки, чтобы стать разработчиками.

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

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

  Мы начнем с рассмотрения того, чем занимаются веб-разработчики, в частности разработчики интерфейсов. Мы рассмотрим , как и почему вам следует подумать о том, чтобы заняться интерфейсной веб-разработкой, и , какие навыки вам нужны , чтобы стать веб-разработчиком.

  Имея это в виду, пора задать первый вопрос: «Чем занимается веб-разработчик?»

  Работа веб-разработчика

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

  Найден последний купон Udacity:

  Выбор проверенного персонала

  ПОЛУЧИТЕ СКИДКУ 50%

  Новогодняя распродажа Udacity

  Начните свой новый год с новыми навыками — поторопитесь и выберите курс Udacity своей мечты с огромными 50% скидка! Эта новогодняя распродажа Udacity действует в течение ограниченного времени.

  Срок годности: 18.02.2021

  2,948 Пользователей

  Осталось всего 37

  ×

  ПОЛУЧИТЕ СКИДКУ 50%

  Новогодняя распродажа Udacity

  Начните свой новый год с новыми навыками — поторопитесь и выберите курс Udacity своей мечты с огромной скидкой 50%! Эта новогодняя распродажа Udacity действует в течение ограниченного времени.

  Идите и делайте покупки со скидкой!

  REDEEM DEAL

  Срок годности: 18.02.2021

  2,948 Пользователей

  Только 37 Осталось

  В некоторых случаях веб-разработчики также несут ответственность за контент , который содержит веб-сайт, но на большинстве крупных веб-сайтов будет отдельная группа управления контентом.

  Обязанности веб-разработчика варьируются в зависимости от их точной должности и роли, но они могут включать:

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

  Как видите, у разработчика есть много дел. К счастью, не все это ложится на плечи одного человека.Существует двух основных типов веб-разработчиков.

  Back-end или серверные разработчики создают код, необходимый для работы веб-сайта. Внешние разработчики несут ответственность за внешний вид веб-сайта и его взаимодействие со зрителями.

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

  Самые популярные результаты

  Ищете более подробную информацию по связанным темам? Мы собрали похожие статьи, чтобы вы сэкономили время.Взглянуть!

  Что такое интерфейсный разработчик начального уровня?

  Становится все легче найти работу веб-разработчика начального уровня, поскольку спрос на опытных разработчиков возрастает. Сменить карьеру и стать фронтенд-разработчиком начального уровня — это то, чем люди в современном мире занимаются все чаще и чаще.

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

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

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

  Некоторые из основных обязанностей интерфейсного разработчика начального уровня могут включать:

  • Создание кода , который сообщает веб-сайту, какой контент и куда помещать .Это контролирует макет сайта, то, что отображается на каких страницах и где что-то появляется на страницах.
  • Сообщаем веб-сайту, как отображать элементы , включая такие вещи, как изменение размера и цвета шрифта, позиционирования и границ изображения, а также цветов фона.
  • Создание интерактивных элементов , таких как интерактивные кнопки, панели прокрутки и другие отзывчивые части дизайна сайта, которые будут привлекать людей и побуждать их выполнять действия, которые вы хотите.

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

  Почему я должен стать Front-End разработчиком?

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

  Ну конечно, это сложно — что за квалифицированная работа, не так ли? Однако работа фронтенд-разработчиком также интересна, увлекательна и расширит ваш кругозор. Вот некоторые из причин, по которым вам следует серьезно подумать об изучении интерфейсной веб-разработки:

  • Вы будете гораздо более трудоспособными

  Даже если вы работаете в сфере, которая традиционно не требовала навыков веб-разработки, их изучение сделает вас гораздо более трудоспособным .

  Например, представьте, что вы работаете в небольшом розничном бизнесе, который продает нишевые продукты. Такой бизнес, как этот , не будет слишком заинтересован в том, чтобы тратить большие деньги на фирму по веб-разработке, чтобы создать и поддерживать веб-сайт для них.

  Однако, если у вас есть интерфейсные навыки, вы сможете взять на себя ответственность за веб-сайт, что сделает вас гораздо более ценным для вашего работодателя.

  • Вы могли бы работать на себя

  Один из самых больших положительных аспектов становления веб-разработчиком — это способность работать на себя из любой точки мира .Единственный физический инструмент, который вам нужен как интерфейсный разработчик, — это компьютер и источник питания.

  Это означает, что вы можете работать столько часов, сколько хотите, из любого места, сколько хотите. . Вы сможете выбрать работу над теми проектами, которые вам нужны, что сделает вашу карьеру интересной и увлекательной.

  • Нет недостатка в вакансиях для разработчиков

  Существует растущий спрос на опытных веб-разработчиков , что привело к появлению огромного количества вакансий веб-разработчиков начального уровня.Когда у вас появятся навыки, необходимые для того, чтобы стать разработчиком начального уровня, вы всегда сможете найти работу.

  Есть множество причин, по которым вам следует подумать о том, чтобы стать фронтендом (или сервером). Я имею в виду, если ты хочешь сменить карьеру, почему бы тебе не сделать это?

  Какие языки интерфейса пользователя мне следует учить?

  Итак, первое, что вам нужно сделать, если вы решили стать разработчиком интерфейсного веб-сайта, — это изучить необходимые языки программирования.Три основных интерфейсных языка используются почти повсеместно: HTML, CSS и JavaScript .

  Это все относительно простых языков , которые довольно легко выучить начинающим программистам. Им не нужно много времени, чтобы свободно овладеть , и они необходимы всем, кто хочет работать в области веб-разработки.

  HTML

  HTML, или язык разметки гипертекста , в значительной степени является универсальным языком Интернета .Он используется почти на каждом существующем веб-сайте , чтобы сделать их контент видимым и легко просматриваемым.

  Если вы хотите найти работу фронтенд-разработчика начального уровня, вам нужно изучить HTML . Прежде чем мы углубимся в полное объяснение того, что это такое и как вы можете этому научиться, мне нужно, чтобы вы открыли это для себя.

  Щелкните правой кнопкой мыши в окне браузера и выберите опцию « просмотреть исходный код страницы ». В вашем браузере должна открыться новая вкладка, содержащая строки кода — это исходный код, который сообщает вашему браузеру, как отображать эту страницу.

  Я знаю, что код выглядит сложным , но не волнуйтесь — это не так. Наряду с HTML, эта страница также содержит фрагменты JavaScript и CSS для интерактивности и стилизации, , но скоро их будет больше .

  Изучение HTML позволит вам указать веб-странице, какой контент отображать и как его отображать . Хотя основной стиль выполняется с помощью CSS, HTML позволяет вам включать такие вещи, как изображения, видео, таблицы и текст разного размера на вашу веб-страницу, обеспечивая повышенную гибкость дизайна.

  Если вы хотите изменить свою карьеру и найти работу фронтенд-разработчика начального уровня, вам следует начать изучать HTML как можно скорее. .

  BitDegree предлагает множество отличных курсов HTML. Вы можете попробовать курс «Кодирование HTML для начинающих» , если хотите узнать основы HTML всего за час занятий.

  Но если вы хотите более глубоко понять HTML-код и то, как вы можете использовать его для максимального эффекта вместе с CSS, вам следует пройти наш интерактивный курс Space Doggos.

  CSS

  В то время как HTML-код сообщает вашему веб-сайту, какой код отображать и где его отображать, CSS сообщает вашему веб-сайту, как он должен выглядеть . Это в значительной степени язык стиля Интернета , поскольку он позволяет вам изменять внешний вид почти всего на вашем веб-сайте.

  Хотя CSS имеет репутацию сложного для изучения и использования , это не обязательно заслужено. Если вы используете приличный курс и не торопитесь, CSS не так уж и сложен .Если вы хотите стать интерфейсным веб-разработчиком, вам все равно нужно будет изучить его, как бы это ни было сложно.

  Вот лишь некоторые из вещей, которые может помочь вам сделать CSS, включая :

  • Смена шрифтов . Если вы работаете с платформой для создания веб-сайтов, такой как WordPress, вы будете весьма ограничены в выборе шрифтов. Однако изучающий CSS позволит вам выбрать не только шрифт, но и части вашей веб-страницы, к которым он должен применяться!
  • Изменение цвета . CSS также позволяет изменять цвет практически всего на вашем веб-сайте . Выберите цвет фона, цвет текста и даже такие вещи, как цвет границ изображения !
  • Изменение размеров элементов . После того, как вы освоите CSS, вы сможете создавать таблицы стилей , которые позволят вам изменять размер различных элементов на вашей странице. Настройте размер таких вещей, как текст, заголовки и даже встроенные изображения и видео.

  JavaScript

  JavaScript — это третий важный язык , который обязательно должен выучить любой потенциальный интерфейсный разработчик начального уровня. Он используется для создания интерактивных элементов, которые нелегко создать с помощью HTML или CSS . Если вы серьезно настроены стать достойным фронтенд-разработчиком, вам нужно освоить JavaScript .

  Поскольку он используется как для внешней, так и для серверной разработки. — среди прочего — JavaScript быстро стал одним из самых популярных языков программирования на земле.

  Спрос на разработчиков JavaScript огромен , а это означает, что хорошее знание этого языка должно помочь вам получить работу веб-разработчика начального уровня. Вот некоторые из вещей, которые вы можете делать с помощью JavaScript:

  • Создание интерактивных элементов веб-сайта . Сюда входят такие вещи, как кнопки , анимация и многое другое, что «выглядит хорошо » и реагирует, когда вы нажимаете на него или прокручиваете его.
  • Создавайте веб-приложения. Хорошо, так что это, вероятно, больше связано с серверной разработкой, чем с интерфейсом, но JavaScript также позволяет создавать веб-приложения . Это может пригодиться в вашей карьере веб-разработчика.
  • Привлекайте больше людей на свой сайт . Как только у вас появятся практические знания JavaScript, вы сможете создать привлекательный, отзывчивый веб-сайт, который привлекает людей и заставляет их реагировать так, как вы хотите.

  Если вы еще не поняли, вам нужно изучить JavaScript, если вы хотите иметь шанс в качестве фронтенд-разработчика начального уровня!

  Перейдите на BitDegree и ознакомьтесь с широким спектром доступных курсов JavaScript.Что-то вроде Interactive JavaScript Tutorial научит вас основам JavaScript, позволяя практиковаться в процессе обучения.

  В качестве альтернативы такой курс, как Video JavaScript Tutorial , предоставит достойное введение в язык и его функции.

  Кстати, если вы найдете несколько интерфейсных курсов на BitDegree, но не можете купить их прямо сейчас (мы понимаем, что иногда финансовая ситуация может быть сложной), вы всегда можете подать заявку на стипендию , чтобы получить свою оплата за курс оплачивается.

  Как я могу получить свою первую работу разработчика?

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

  К сожалению, несмотря на большой спрос на разработчиков, рынок начального уровня может быть несколько конкурентоспособным — что понятно, правда?

  Потенциальные работодатели не хотят тратить свои деньги на тех, кто не прошел проверку и не прошел испытания .

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

  Некоторые из лучших вещей, которые вы можете сделать, чтобы сделать себя более заметным для работодателей и с большей вероятностью получить работу фронтенд-разработчика начального уровня, включают:

  Продолжайте учиться и будьте уверены, что знаете свое дело

  Если вы серьезно настроены получить свою первую работу в качестве интерфейсного веб-разработчика, вам необходимо убедиться, что вы знаете все, что можете, о HTML, CSS и JavaScript. Узнайте, как они используются, попрактикуйтесь в их использовании и, самое главное, никогда не переставайте учиться!

  Создайте свой сайт

  Front-end разработчики создают сайты, не так ли ? Поэтому логично, что если вы хотите устроиться на работу младшим фронтенд-разработчиком, вам следует создать веб-сайт, чтобы продемонстрировать свои навыки.

  Не имеет значения , какой веб-сайт вы создаете или что с ним делаете. Важно, , как он выглядит, как реагирует и как вы его закодировали .Убедитесь, что вы стараетесь изо всех сил, а затем включите это в свои заявления о приеме на работу, когда вы подаете заявку на новые вакансии интерфейсного разработчика.

  Держите портфель

  Аналогичным образом портфолио ваших прошлых проектов и любой другой работы, которую вы проделали, также поможет вам получить работу.

  Многие люди предпочитают хранить свое портфолио на созданном ими веб-сайте (см. Выше), но это не обязательно. Обязательно, чтобы вы, , включили свои лучшие работы, разместили их в привлекательной, увлекательной манере и чтобы вы, , использовали их, чтобы продемонстрировать свои навыки разработчика.

  Возьмите внештатную работу

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

  Выбирайте вакансии, которые, по вашему мнению, у вас достаточно опыта для , которые дадут вам что-то привлекательное, что вы сможете продемонстрировать, и которое будет весело и увлекательно. Кто знает — вы даже можете решить стать разработчиком-фрилансером !

  Волонтер

  Если у вас возникли проблемы с поиском внештатных вакансий для пополнения своего портфолио, можно начать с нескольких небольших волонтерских заданий .Обратитесь к местной некоммерческой организации или благотворительной организации и спросите их, могут ли они воспользоваться вашими услугами.

  В большинстве случаев они будут рады позволить вам сделать что-нибудь для них — даже если это так же просто, как создание информационного бюллетеня в формате HTML. Я имею в виду, кто не любит получать вещи бесплатно?

  Примите участие в хакатоне

  Если вам нравится создавать веб-сайты и создавать интерактивные интерфейсы, то хакатон может быть как раз тем, что положит начало вашей карьере. .Не знаете, что такое хакатон? Вы будете объединены с другими кодировщиками, чтобы собрать некоторый код или программу в соответствии с предопределенными инструкциями . Узнайте больше здесь .

  Это лишь некоторые из вещей, которые вы, как обучающийся интерфейсный разработчик , можете сделать, чтобы начать свою карьеру . Если у вас возникли проблемы с получением первой работы, то вам просто нужно продолжать настойчиво работать с . Будьте в курсе лучших отраслевых практик, продолжайте учиться и продолжайте практиковать .Работа придет!

  Самые популярные результаты

  Просмотрите нашу коллекцию наиболее полных статей, руководств и учебных пособий, связанных с платформой онлайн-обучения. Всегда будьте в курсе и принимайте взвешенные решения!

  Заключение

  Front-end веб-разработка стала очень привлекательной карьерой за последние несколько лет. Нехватка квалифицированных разработчиков привела к большой спрос на интерфейсных разработчиков начального уровня , а это означает, что сейчас лучшее время для начала кодирования.

  Существуют сотни онлайн-курсов и других ресурсов, которые помогут вам начать свой путь к мастерскому разработчику. Если вы не знаете, с чего именно начать, зайдите на edX , Udacity или Coursera и ознакомьтесь с ассортиментом доступных курсов HTML, CSS и JavaScript.

  Если вам лень и вы не хотите искать курсы вручную — мы вам поможем. Ознакомьтесь с планом обучения нашего Front-end Developer, , который включает всю необходимую информацию в одном месте от начала до конца.

  После того, как вы изучили основы интерфейсной разработки, все сводится к практике. Беритесь за внештатную работу и небольшие проекты. Вызовитесь добровольцем для создания своего портфолио, создайте свой веб-сайт и, самое главное, не сдавайтесь!

  Оставьте честный отзыв

  Оставьте свое искреннее мнение и помогите тысячам людей выбрать лучшую платформу для онлайн-обучения.Все отзывы, как положительные, так и отрицательные, принимаются, если они честны. Мы не публикуем предвзятые отзывы или спам. Так что если вы хотите поделиться своим опытом, мнением или дать совет — сцена ваша!

  Есть ли у вас, что нужно, чтобы стать фронтенд-разработчиком? Front End Development

  Просмотр объявлений о вакансиях для front-end разработчика может быть утомительным.

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

  Поскольку нет двух одинаковых описаний должностей интерфейсного разработчика, это может заставить вас задуматься: какие основные навыки мне действительно нужны, чтобы стать интерфейсным веб-разработчиком? Как мне решить, каким фронтенд-разработчиком я хочу стать?

  Это именно то, на что я хочу ответить в этом посте.Я прорежу эти противоречивые списки вакансий, чтобы определить ключевые навыки фронтенд-разработчика, на которых вам следует сосредоточиться, исходя из ваших личных целей.

  Plus, вы узнаете, как на самом деле освоить эти навыки и сделать большие шаги к тому, чтобы стать фронтенд-разработчиком.

  Давайте поработаем!

  Раскрытие информации: я горжусь тем, что являюсь партнером некоторых ресурсов, упомянутых в этой статье. Если вы купите продукт по моим ссылкам на этой странице, я могу получить небольшую комиссию за ваше направление.Спасибо!

  ---

  Контрольный список навыков внешнего интерфейса

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

  Успех! Теперь проверьте свою электронную почту, чтобы подтвердить подписку.

  ---

  Часть 1. Что нужно, чтобы стать фронтенд-разработчиком

  Прежде всего, давайте начнем с основ: что такое интерфейсный разработчик, чем занимается интерфейсный разработчик и как им стать?

  Что такое интерфейсный разработчик?

  Интерфейсный веб-разработчик реализует веб-дизайн с использованием различных языков кодирования (подробнее об этом ниже).Если вы посмотрите на любой сайт, то почти все, что вы видите в интерфейсе, от макета страницы до меню навигации, вероятно, было разработано разработчиком интерфейса.

  Вам также может быть интересно, как стать разработчиком интерфейса . В большинстве случаев термины «разработчик» и «инженер» взаимозаменяемы. Так что, если вы видите объявление о вакансии с заголовком «интерфейсный инженер», не паникуйте!

  Как стать front-end разработчиком

  Теперь, когда вы знаете, что влечет за собой роль, что на самом деле нужно, чтобы стал фронтенд-разработчиком?

  Я собрал свои идеи из четырех источников:

  • Сами должностные инструкции
  • Какие курсы по программированию преподают
  • Какие технологии используют ведущие компании
  • Информация от лидеров в области веб-разработки

  Таким образом, вы получите представление о том, какие требования к интерфейсному разработчику предъявляются в реальном мире — вместо бесконтекстного списка навыков интерфейсного разработчика, который может не основываться на реальной технической индустрии!

  ---

  Должностные инструкции Front-end разработчика

  Давайте посмотрим, что ищут компании, нанимая интерфейсного разработчика.

  В этой первой части я проанализировал различные списки вакансий для интерфейсных веб-разработчиков. Вот что я сделал, чтобы найти эти объявления о вакансиях:

  • Используется Indeed.com
  • Смотрел только объявления начального и среднего уровня (ничего высшего уровня)
  • Если я видел какое-либо упоминание о Flash, я немедленно игнорировал листинг (поскольку это устаревший навык)

  Как упоминалось в начале, описание каждой должности внешнего интерфейса отличается и перечисляет множество навыков, и вы увидите это из первых рук! Однако не волнуйтесь: вам необязательно обладать ВСЕМИ этими навыками.

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

  Работа №1: Интерфейсный инженер

  Этот список интерфейсных инженеров также требует некоторых навыков работы с бэкендом (Python и Django).

  Вы также заметите, что выделены несколько ключевых мягких навыков. Примечательно, что вы должны хорошо работать в команде и быть хорошим коммуникатором. В наши дни развитие может быть довольно социальной ролью; больше никаких одиночных кабинок!

  Работа №2: Младший Front-End разработчик

  В этом списке младших интерфейсных разработчиков вы заметите, что он требует навыков дизайна и UI / UX со знанием Photoshop и Sketch.

  Это демонстрирует, что некоторые рабочие места интерфейсных разработчиков больше сосредоточены на кодировании, другие — на визуальном дизайне, и многие будут комбинировать их в той или иной степени.

  Работа № 3: Интерфейсный инженер-программист

  Это объявление о вакансии интерфейсного инженера-программиста требует знания ES6, d3, webGL — даже большего количества языков, чем перечисленные выше!

  Еще одно отличие в этом списке заключается в том, что в нем упоминается соответствующая степень бакалавра / бакалавра, тогда как в предыдущих двух упоминался только опыт.

  Работа № 4: Front-End разработчик

  Эта последняя работа требует навыков фронтенд-разработчика, включая фреймворки SASS и MVC, знания управления версиями и ветвлениями Git, а также фронтенд-инструментов сборки, таких как NPM, Webpack и Grunt.

  По мере развития навыков межличностного общения вы заметите, что здесь снова появляется коммуникация!

  Прежде чем вы отчаиваетесь, знайте, что подавляющее большинство объявлений о работе — это скорее «список желаний». Очень немногие кандидаты сразу отметят все , и компании этого не ждут.(Подробнее об этом позже!)

  Вернуться к содержанию »

  ---

  Интерфейсные технологии, которые используют популярные технологические компании

  Поскольку списки вакансий фронтенд-разработчиков могут сильно различаться, полезно сузить круг ваших интересов. Возможно, стоит проверить технический стек компании вашей мечты, чтобы узнать, чему вам следует научиться. Самый простой способ сделать это — использовать stackshare.io.

  Вот краткий обзор технических стеков популярных компаний:

  • Airbnb использует React, ES6, SASS, CSS / HTML и JavaScript
  • Uber использует Node.js, React, Angular, LESS, SASS, ES2015 и CoffeeScript
  • Amazon использует интерфейсные технологии, такие как JavaScript, Typescript, Angular.js и LESS

  Спросите себя: если бы вы могли работать где угодно, какие компании Вы выбираете? Затем поищите объявления о вакансиях, чтобы узнать, какие навыки фронтенд-разработчика они обычно просят, и изучите их, чтобы перепроектировать работу своей мечты.

  Вернуться к содержанию »

  ---

  Какие курсы кодирования и учебные курсы преподают

  Давайте обратимся к набирающим популярность буткемпам для разработчиков и посмотрим, чему они учат.Мои аргументы в пользу использования учебных курсов для начинающих по кодированию заключаются в следующем: если человек тратит несколько тысяч долларов на обучение интерфейсным навыкам, этот курс лучше учит отраслевым стандартам.

  Я собираюсь использовать Генеральную Ассамблею (GA) в качестве основного примера, потому что у них есть учебные центры в США и даже в городах по всему миру.

  Вкратце, это интерфейсные языки, которым обучает их курс Front-End Web Development:

  • HTML
  • CSS
  • Введение в программирование с использованием JavaScript
  • Введение в jQuery
  • Принципы адаптивного дизайна

  Вы заметите явное отсутствие некоторых тем:

  • Нет ничего, что связано с фреймворками JavaScript, такими как Angular.js
  • Ничего, относящегося к Sass или другому прекомпилятору (например, Less или Stylus)
  • Никакого упоминания о командной строке или контроле версий
  • И ничего, относящегося к какому-либо внутреннему языку, например PHP или node.js

  Это не означает, что эти навыки не важны, но означает, что не означает, что они не являются «основными» навыками интерфейсного разработчика. По сути, это не первые навыки, которым нужно овладеть, чтобы стать фронтенд-разработчиком: это дополнительные услуги, которые могут появиться после самого важного.

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

  • Actualize обучает JavaScript, VueJS и HTML / CSS
  • Full Stack Academy обучает JavaScript, Node.js, React, HTML / CSS
  • Hack Reactor преподает HTML5, CSS3, SASS / LESS, Backbone.js, JavaScript и jQuery

  Вы нашли сходство? HTML, CSS и JavaScript — это константы, среди которых навыки интерфейсного веб-разработчика преподают большие учебные курсы.

  Вернуться к содержанию »

  ---

  Какие навыки / технологии, по мнению экспертов, вам следует изучить?

  Мы изучили описания должностей, какие компании используют и какие курсы преподают. Пришло время услышать мнение эксперта!

  Брэндон Морелли, создатель codeburst.io, имеет потрясающую интеллектуальную карту, которая показывает важные языки веб-разработки, фреймворки и инструменты для изучения.

  Как видите, он упоминает ряд интерфейсных технологий (некоторые из которых не указаны в списках вакансий или курсах кодирования выше).Вот что Брэндон рекомендует научиться, чтобы стать фронтенд-разработчиком.

  Фреймворки Javascript

  Что касается фреймворков JS, их очень много, но три из самых популярных — это Angular, React и Vue.js.

  Брэндон рекомендует изучить Angular или React. Но будьте готовы: изучение JS-фреймворка — самая сложная часть того, чтобы стать настоящим фронтенд-разработчиком!

  Инструменты CSS

  Вы должны быть знакомы с двумя типами инструментов CSS:

  1. Препроцессоры: Использование препроцессора (или прекомпилятора) имеет множество преимуществ, например, делает код более чистым, поддерживает организацию и лучше придерживается принципов DRY.Популярные прекомпиляторы CSS — Sass, Less и Stylus. Вам нужно выучить только одно; Брэндон предлагает Сасс.
  2. CSS Frameworks: Они помогают оптимизировать рабочий процесс с помощью встроенных сеток и других компонентов CSS. Два популярных примера — это Bootstrap и Foundation. Брэндон лично рекомендует Bootstrap.

  Адаптивный веб-дизайн

  Адаптивный веб-дизайн означает возможность создавать сайты, которые работают на экранах всех размеров — настольных, планшетных и мобильных. Адаптивный дизайн является неотъемлемой частью таких фреймворков, как Bootstrap и Foundation, поэтому, если вы изучите один из этих фреймворков, все готово.

  💡 Изучите методы адаптивного дизайна в этом курсе Codecademy.

  Инструменты сборки переднего плана

  Брэндон рекомендует ознакомиться с тремя основными типами интерфейсных технологий:

  1. Управление пакетами: Сюда входят такие инструменты, как Yarn или NPM. Когда проекты становятся большими, может быть сложно организовать все библиотеки, ресурсы и т. Д. Менеджеры пакетов помогают управлять всеми частями.
  2. Исполнители задач: Хорошими примерами являются сценарии Grunt, Gulp или NPM.Они запускаются в командной строке, сжимают файлы, а также действуют как компилятор для Sass или Less. У них также есть широкий спектр плагинов с другими функциями.
  3. Загрузчик модуля Javascript: Сюда входят такие инструменты, как webpack, Require.js и Browserify, которые предназначены для объединения зависимостей.

  Тестирование

  Jest, Mocha, Jasmine и Enzyme — это инструменты, которые помогают разработчикам писать тесты для приложений. Из всего этого списка обучение тестированию приложений стоит на последнем месте.Это хорошее дополнение к вашему резюме, но вы определенно можете получить работу фронтенд-разработчика и без него.

  Это может показаться длинным списком навыков фронтенд-разработчика, которые нужно изучить, но сам Брэндон подчеркивает, что вам не нужно изучать все до единого. В зависимости от компании и должности вы можете получить работу фронтенд-разработчика с несколькими хорошо подобранными навыками веб-разработки.

  ---

  Часть 2: Как стать фронтенд-разработчиком

  Итак, какие навыки вам стоит начать изучать и как стать фронтенд-разработчиком?

  ---

  Технические навыки, которые вам на 100% необходимо знать, чтобы получить внешнюю работу

  На основании всех четырех элементов вышеприведенного исследования мы пришли к окончательному консенсусу.Вот основы того, что вам нужно знать, чтобы стать фронтенд-разработчиком:

  • HTML
  • CSS
  • JavaScript: JavaScript, скорее всего, станет основным навыком интерфейсной разработки в обозримом будущем. Знание (или производственный опыт) в JS-фреймворках также является преимуществом.
  • Программные платформы для контроля версий (например, Git, Subversion, Mercurial)

  Эти навыки проявляются повсюду. Вам нужно крепко ухватиться за каждого, чтобы ступить ногой в дверь.

  Контрольный список навыков внешнего интерфейса

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

  Успех! Теперь проверьте свою электронную почту, чтобы подтвердить подписку.

  Вернуться к содержанию »

  ---

  Мягкие навыки, необходимые для получения должности фронтенд-разработчика

  Как отмечалось в разделах со списком вакансий выше, мягкие навыки часто так же важны, как и ваши твердые навыки.

  Помимо того, что вы умеете хорошо общаться и работать в команде, есть еще несколько вещей, на которых вы можете сосредоточиться.

  Вот простой: будь дружелюбным! По словам читателя Learn to Code With Me, который нанял фронтенд-разработчиков и сам был одним из них: «Независимо от того, сколько вы знаете, ваш персонаж, ваш персонаж, с которым легко работать, и, как правило, хороший человек, победит того, кто является более квалифицированным, но невыносимым или не имеет хороших навыков работы с людьми ».

  В мире высоких технологий также важно хорошо учиться.Как прокомментировал другой интерфейсный разработчик: «Если вы хотите быть фронтенд-разработчиком, знайте, что вы никогда не закончите обучение. [Работа] будет постоянно меняться и видоизменяться с различными библиотеками, если не будет достигнута некоторая стандартизация ».

  Будьте достаточно скромными, чтобы учиться на своих ошибках (их делают все!).

  Наконец, от процесса подачи заявки до каждодневной работы делайте все возможное, чтобы показать, что вы увлечены и мотивированы тем, что вы делаете.

  Вернуться к содержанию »

  ---

  Навыки, которые позволят вам выделиться

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

  И это тоже может (буквально) окупиться. Как объясняет вышеприведенный менеджер разработчиков: «Если соискатель может предложить ряд навыков, а не только базовые 3 (HTML5, CSS3, JS), он выйдет далеко вперед своих конкурентов и, вероятно, получит предложение, которое будет приходите с большей суммой долларов (или получите прибавку вскоре после начала) ».

  Итак, чтобы выделиться, добавьте несколько таких в свой репертуар!

  Один или два (или больше!) JavaScript-фреймворков

  Этот комментатор говорит: «Такие фреймворки, как Angular и Backbone, изучать необязательно, но иметь их приятно.То же самое и с другими JS-фреймворками — чем больше вы знаете, тем больше вариантов работы вам станет доступно!

  Выберите несколько фреймворков из этого списка:

  1. jQuery
  2. React
  3. Angular
  4. Ember
  5. Backbone

  Также следует рассмотреть другие фреймворки. Чтобы узнать, какие фреймворки JavaScript вам следует изучить, ознакомьтесь с этими ресурсами:

  1. Полное руководство по фреймворкам JavaScript
  2. Лучшие библиотеки и технологии JavaScript, которые нужно изучить в 2018 г.
  3. 6 фреймворков JS, которые необходимо изучить в 2018 г.

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

  JSON

  Этот синтаксис JavaScript помогает структурировать данные для передачи между серверами и веб-приложениями. «JSON имеет решающее значение сегодня из-за огромного роста API и фреймворков», — комментирует этот менеджер разработчиков. «Но это также невероятно легко понять, если вы понимаете синтаксис JS».

  Некоторые навыки дизайна или UI / UX

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

  💡 Независимо от того, являетесь ли вы полным новичком в веб-дизайне или хотите расширить свой набор навыков, ознакомьтесь с этим курсом от нуля до мастерства: Complete Web & Mobile Designer в 2021 году: UI / UX, Figma + другие

  A язык программирования на стороне сервера , например Python, Java или Ruby

  Конечно, вы ищете, как стать веб-разработчиком интерфейса .Тем не менее, в серверной части есть несколько языков, с которыми вы, скорее всего, столкнетесь как разработчик интерфейса.

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

  Однако, хотя хорошо понимать эти языки, вам не обязательно знать их полностью, чтобы стать отличным фронтенд-разработчиком.

  Вернуться к содержанию »

  ---

  Интернет-ресурсы для изучения основных пользовательских навыков

  Вот список интернет-ресурсов, которые помогут вам начать карьеру в области фронтенд-разработки — от новичка до более сложных тем.

  Онлайн-курсы

  Начальный курс информатики

  Если вы новичок в технологиях, вам следует начать с понимания основ CS, прежде чем даже рассматривать более сложный код.

  Попробуйте одно из этих:

  Для изучения HTML / CSS

  Эти ресурсы отлично подходят для опытных новичков:

  Для изучения JavaScript

  После того, как вы освоите основы HTML / CSS, начните изучать JavaScript с курсов / учебных программ, подобных тем, которые предлагаются здесь:

  Для обучения фронтенд-разработке

  Эти варианты отлично подходят для людей, которым нужен комплексный, структурированный путь к изучению интерфейсной разработки:

  Чтобы еще больше повысить свои навыки работы с клиентской частью

  Когда вы получите базовое понимание HTML, CSS и JS, поднимите его на ступеньку выше с помощью следующих курсов:

  Ресурсы LTCWM

  Вот несколько подробных статей, которые я собрал на отличных учебных ресурсах, где вы можете бесплатно изучить навыки фронтенд-разработчика (и многое другое):

  Рекомендуемые книги

  Предпочитаете учиться по книгам, а не по экранам? Без проблем! Посмотрите на этих двоих:

  Вернуться к содержанию »

  ---

  Подача заявки на вакансию фронтенд разработчика

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

  Многие консультанты по вопросам карьеры согласны с тем, что достаточно обладать 80% перечисленных навыков. (Daily Muse объясняет, как определить, следует ли вам подавать заявку на эту труднодоступную работу или нет.)

  Более того, имейте в виду, что описания должностей похожи на список желаний менеджера по найму.Если вы овладеваете всеми навыками и выполняете все требования, вы, вероятно, слишком высококвалифицированы.

  Тем не менее, вот мой совет: любое компьютерное / технологическое / дизайнерское ноу-хау, которое у вас есть, принесите его на стол. Никогда не знаешь, что может искать работодатель. И вы просто можете быть идеальным, даже если (или потому что) у вас нетрадиционный фон!

  Чтобы найти работу фронтенд-разработчика, начните с проверки Stack Overflow, в которой специально представлены вакансии для разработчиков!

  Контрольный список навыков внешнего интерфейса

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