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

Обучение
Содержание

Кто такой Frontend-разработчик?

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

Что делают Frontend-разработчики и чем занимаются?

Обязанности на примере одной из вакансий:

  • Разработка новых игровых фичей в команде с гейм-дизайнером.
  • Оптимизация производительности.
  • Ревью и рефакторинг устаревших решений.
  • Глубокая интеграция с нашим веб-порталом.
  • Развивать, поддерживать и рефакторить код на Vue;
  • Изредка поддерживать старый код на Node.JS для совместимости с новым кодом;
  • При желании — экспериментировать и решать нестандартные задачи на Svelte (научим и покажем);
  • Проводить и проходить ревью и решать другие frontend-задачи.

Что должен знать и уметь Frontend-разработчик? 

Требования к Frontend-разработчикам:

  • Адаптивная вёрстка сайтов и писем
  • Работа с TypeScript
  • Уверенное знание JavaScript и ООП
  • Разработка серверных приложений на Node.js
  • Работа в системе контроля версий Git
  • Разработка десктопных приложений на Ionic/Electron
  • Знание React.js/Angular/Vue.js
  • Понимание алгоритмов и структур данных в проектах

Востребованность и зарплаты Frontend-разработчика

На сайте поиска работы в данный момент открыто 8 519 вакансий, с каждым месяцем спрос на Frontend-разработчиков растет.

Количество вакансий с указанной зарплатой Frontend-разработчика по всей России:

  • от 95 000 руб. – 2 707
  • от 180 000 руб. – 1 762
  • от 265 000 руб. – 784
  • от 350 000 руб. – 346
  • от 435 000 руб. – 75

Вакансий с указанным уровнем дохода по Москве:

  • от 85 000 руб. – 1 065
  • от 170 000 руб. – 809
  • от 255 000 руб. – 424
  • от 340 000 руб. – 181
  • от 425 000 руб. – 52

Вакансий с указанным уровнем дохода по Санкт-Петербургу:

  • от 95 000 руб. – 461
  • от 180 000 руб. – 331
  • от 265 000 руб. – 137
  • от 350 000 руб. – 61
  • от 435 000 руб. – 14

Как стать Frontend-разработчиком и где учиться?

Варианты обучения для Frontend-разработчика с нуля:

  • Самостоятельное обучение – всевозможные видео на YouTube, книги, форумы, самоучители и т.д. Плюсы – дешево или очень недорого. Минусы – нет системности, самостоятельное обучение может оказаться неэффективным, полученные навыки могут оказаться невостребованными у работодателя;
  • Онлайн-обучение. Пройти курс можно на одной из образовательных платформ. Такие курсы рассчитаны на людей без особой подготовки, поэтому подойдут большинству людей. Обычно упор в онлайн-обучении делается на практику – это позволяет быстро пополнить портфолио и устроиться на работу сразу после обучения.

Ниже сделали обзор 15+ лучших онлайн-курсов.

15+ лучших курсов для обучения Frontend-разработчика: подробный обзор

Что смогут выпускники:

  • создавать адаптивные веб-сайты с использованием CSS, Flexbox
  • разрабатывать интерактивные веб-сайты и приложения на JavaScript и HTML
  • писать сложные компоненты на React и интерфейсы с авторизацией и с подключением к бекенду

 

Программа обучения

  1. Веб-верстка

Вы научитесь:
• создавать страницы на чистом HTML
• позиционировать элементы на странице с помощью CSS
• применять семантическую верстку
• использовать средства разработчика в браузере
• верстать адаптивные веб-страницы на Flexbox
• загружать свой код на GitHub

  1. Javascript

Вы научитесь:
• писать простые программы на Javascript
• применять ООП в Javascript
• создавать сложные скрипты с обработкой событий
• работать с форматом JSON
• использовать препроцессоры CSS
• работать по методологии БЭМ

  1. React и другие фреймворки

Вы научитесь:
• разрабатывать приложения на React
• использовать продвинутый API
• писать свои компоненты на React
• создавать приложение на Angular
• создавать приложение на Vue.js
• использовать анимацию на CSS или на React
• применять библиотеку Redux на приложении React

  1. Архитектура приложений и бекенд

Вы научитесь:
• подключать приложение к базе данных
• разворачивать приложение на Node.js
• писать unit-тесты

  1. Карьерный трек

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

Сертификат после успешного обучения. Отзывы студентов курса на сайте.

Стоимость: 77 940 ₽ или в рассрочку 4 330 рублей/месяц
  • Научитесь создавать сайты и приложения, проектировать интерфейсы и работать с Flexbox и JavaScript
  • Соберите крутое портфолио из 9 жизнеспособных проектов для получения работы своей мечты
  • Формат обучения – Онлайн-занятия 2-3 раза в неделю + домашние работы
  • Уровень – С нуля
  • Документ – Диплом о профессиональной переподготовке 

 

Программа курса

Вёрстка сайта на HTML и CSS

  • Теги для вёрстки контента страницы
  • Теги для вёрстки структуры страницы
  • Теги для вёрстки форм
  • Селекторы CSS
  • Определение контекста элементов
  • Блочная модель
  • Позиционирование элементов
  • Оформление текста
  • Оформление декоративных элементов
  • Состояние интерактивных элементов

Мобильная и адаптивная вёрстка

  • Вёрстка резинового макета
  • Резиновые изображения
  • Медиа-запросы и медиа-функции
  • Вёрстка мобильных устройств
  • Вёрстка адаптивного макета
  • Адаптивная типографика, выбор breakpoints
  • Адаптивные изображения

Английский язык для начинающих разработчиков

  • Лексика, без которой не обойтись
  • Как вести переписку на английском
  • Чтение документации и анализ требований
  • Программирование
  • Тестирование ПО
  • Стрессовые ситуации
  • Устранение неполадок
  • Работа и роли в команде
  • Поддерживаем любую беседу на английском
  • Собрания, презентации на высшем уровне

Основы программирования

  • Алгоритмы
  • Переменные, числа и строки
  • Логика и математика
  • Ветвление кода
  • Алгоритм с множественным выбором
  • Ошибки в коде
  • Массивы
  • Циклы
  • Подпрограмма, функция
  • Объекты
  • Синхронное и асинхронное выполнение алгоритма

Git — система контроля версий

  • Предназначение системы контроля версий
  • Основные операции (фиксация и откат изменений, поиск, история)
  • Работа с сервисом GitHub
  • Ветки, слияние веток и разрешение конфликтов

Основы JavaScript

  • Основы отладки
  • Базовый синтаксис
  • Расширенный синтаксис
  • Типы данных
  • Функции, объекты
  • Прототип и конструктор объекта
  • ООП в JS (ES6)
  • Обработка исключений и замыкания
  • Прототип массива, функции высшего порядка
  • Асинхронность

Основы JavaScript в браузере

  • Возможности JavaScript в браузере
  • Способы поиска нужного HTML-элемента
  • Объект события
  • DOM
  • Работа с HTML-формами
  • Изменение структуры HTML-документа
  • Асинхронные запросы
  • Хранение состояния на клиенте

Продвинутый JavaScript

  • Стандарты и рабочее окружение
  • Модули и Webpack
  • Платформы: браузер vs Node.js
  • Unit-тестирование
  • Прототипы, конструкторы, классы и наследование
  • Object, Reflection и Proxy
  • Регулярные выражения
  • Контейнеры
  • ArrayBuffer
  • Promises, async/await, timers & event loop
  • Символы, итераторы, генераторы
  • TypeScript

Продвинутый JavaScript в браузере

  • Рабочее окружение
  • Работа с DOM (объектная модель документа)
  • Обработка событий
  • Организация тестирования (Unit, E2E)
  • Работа с HTML-формами, LocalStorage
  • Drag & Drop, работа с файлами
  • Работа с HTTP
  • Анимация и CSS
  • Geolocation, Notification, Media
  • RxJS
  • EventSource, Websockets
  • WebWorkers, ServiceWorkers

Библиотека React

  • Компоненты, композиция компонентов
  • События и состояние
  • Props
  • Формы
  • Жизненный цикл и работа с HTTP
  • HOC
  • hooks, Context API
  • React Router
  • Redux и Redux Thunk, Redux Observable, Redux Saga

Карьера в Frontend-разработке

  • Frontend-разработчик: задачи, работа в команде
  • Поиск работы: компания vs фриланс
  • Карьерная траектория: из студента в senior
  • Первое собеседование
  • Тренды Frontend-разработки: за какими ресурсами следить
  • Резюме, сопроводительное письмо, портфолио

 

Ваше резюме после обучения:

Умею делать

  • Интернет-магазин обуви
  • Онлайн-игру «ходилку»
  • «Крестики-нолики» на JavaScript
  • Cайт-биржу по продаже криптовалюты
  • Веб-менеджер личных финансов
  • Бот для поиска и хранения информации
  • Систему бронирования ж/д-билетов

Мои навыки

  • Вёрстка под тач и мобильные устройства
  • Работа с Flexbox и JavaScript
  • Способность правильно использовать переменные, числа и строки
  • Создание прототипа и конструктора объекта
  • Использование выражений в JavaScript
  • Применение символов, итераторов и генераторов
  • Импорт и экспорт модулей
  • Создание интерактивных веб-страниц
  • Работа с файлами и медиаресурсами
  • Применение принципов клиент-серверного взаимодействия
  • Создание одностраничных веб-приложений (SPA)
  • Навыки использования библиотеки React, JSX, React router, VirtualDom
Стоимость: 48 000 рублей

Программа обучения

Неделя 1 — Workflow
— Знакомимся с наставником и группой.
— При помощи webpack-сборки верстаем выбранный макет выпускного проекта.
— Размещаем результат на Github и сдаём на проверку наставнику.

  • Вводное занятие
  • Yarn
  • PUG
  • Webpack
  • Figma для верстальщика
  • Flexbox
  • GIT
  • Компонентный подход

Неделя 2 — Vue.js
— Делаем верстку адаптивной.
— Реализуем блок “Скиллы” на Vue.js.
— Реализуем блок “Мои проекты” на Vue.js.
— Реализуем блок “Слайдер для отзывов” с помощью Vue.js плагина.

  • js
  • Vue 3. Обзор изменений
  • Адаптивная вёрстка
  • js. Виджеты

Неделя 3 — Нативный JavaScript
— Верстаем админку.
— Изучаем Storybook и применяем в своём проекте.
— Осуществляем необходимую обработку (валидацию) форм проекта.

  • JavaScript — ES6
  • Storybook
  • js. Работа в среде приложения
  • js. Сборка страницы

Неделя 4 — Vue.js, SPA
— Реализуем SPA в админ-панели.
— Изучаем работу с данными через хранилище приложения
— Используем ajax для связи с api, настраиваем взаимодействия клиент-сервер.

  • js. Написание приложения
  • js. Composition API
  • Асинхронность в JavaScript
  • Работа с api для проекта портфолио
  • js. Работа с сервером

Неделя 5 — Практика
— Выводим сохраненные данные из админ-панели на лендинг.
— Тестируем компоненты.
— Групповая работа над проектом с наставником.

  • Тестирование JS-кода
  • js. Тестирование компонентов
  • Анимации во Vue.js
  • js. Завершение работы над проектом

Неделя 6 — Завершение работы над проектом
— Дорабатываем проект.
— Сдаём проект на проверку наставникам.
— Выставление оценок в дипломы.

  • Как получить работу в IT: фишки и советы

 

Ключевые навыки

  • Уверенная работа с Vue.js.
  • Уверенная работа с React.js.
  • Опыт разработки SPA-приложений.
  • Уверенная работа с SVG.
  • Кроссбраузерная верстка.
  • Уверенная работа с консолью и пакетными менеджерами.
  • Работа с Gulp, Webpack, NPM.
  • Работа с Git.
  • Освоение новых технологий за короткие сроки.
Стоимость: в рассрочку 3 880 ₽/месяц

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

  • 12 месяцев
  • 5 проектов в портфолио
  • Гарантия трудоустройства
  • Диплом о переподготовке
  • Хостинг-партнер курса REG.RU

 

Программа обучения

Подготовительный блок

  • Как учиться эффективно. Видеокурс от методистов GeekUniversity
  • Основы программирования
  • Базовый курс

 

I четверть. Веб-верстка

— Научитесь верстать сайты, создадите страницу и подготовитесь к созданию планировщика задач
— Освоите библиотеку Bootstrap, препроцессоры LESS и SASS
— Освоите адаптивную вёрстку, принципы кроссбраузерности и валидности
— Создадите посадочную страницу

  • HTML/CSS. Интерактивный курс
  • Профессиональная вёрстка


II четверть.
Frontend-разработка

— Освоите JavaScript и принципы ООП
— Научитесь работать с Parcel, Webpack, Vue.js и сторонними API
— Сможете работать в различном окружении и подключать сторонние библиотеки

Проект

— Приложение для учета расходов

  • Базовый курс JavaScript
  • Продвинутый курс JavaScript
  • Инструменты сборки проектов
  • js


III четверть. Библиотека ReactJS и основы backend-разработки

— Научитесь работать с ReactJS
— Сможете применять ECMAScript 6 и использовать концепцию Flux
— Освоите основы разработки бэкенда на Node.js и сможете создавать различные REST API

  • Библиотека ReactJS. Базовый курс
  • Платформа Node.js


IV четверть.
Разработка от идеи до релиза

— Познакомитесь с методологиями Agile, Scrum, Kanban
— Получите навыки командной разработки и научитесь работать с GIT 
— Изучите принципы Continuous Integration и Continuous Delivery

Проекты

— Командный выпускной проект. Пройдете этапы профессиональной разработки: от поиска идеи до тестирования и релиза продукта

  • Профессиональная разработка веб-приложений
  • Командная разработка дипломного проекта

Курсы вне четверти 

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

  • Подготовка к техническому собеседованию
  • Основы баз данных. Видеокурс
  • Базы данных
  • Рабочая станция
  • Фриланс-разработчик: курс подготовки
  • Подготовка к поиску работы

 

Ключевые навыки

— Верстаю сайты и владею адаптивной версткой.
— Создаю одностраничные приложения 
— Работаю с HTML и CSS, Node.js
— Владею инструментами для модульной сборки — Parcel и Webpack
— Использую Vue.js и основных библиотек его экосистемы, разрабатываю компоненты на Vue.js
— Работаю с библиотекой ReactJS
— Использую концепцию Flux с применением библиотек Redux

Стоимость: в рассрочку 4 550 ₽/месяц

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

Чему вы научитесь

  1. Верстать сайты и приложения для всех типов устройств
  2. Создавать сайты и приложения с помощью JavaScript
  3. Работать с системой Git и GitLab
  4. Использовать библиотеки jQuery, React, Redux для ускорения процесса разработки
  5. Делать сайты, которые будут корректно открываться в любом браузере
  6. Тестировать вёрстку
  7. Анимировать веб-страницы

 

Программа

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

  • 49 модулей
  • 150 онлайн-уроков

Веб-вёрстка

  1. Веб-вёрстка. Базовый уровень
  2. Веб-вёрстка. Продвинутый уровень

Онлайн-сессии по веб-разработке

  1. Библиотека jQuery.
  2. Адаптация макета под мобильные устройства.
  3. Практикум по интерактивным элементам.
  4. Что такое Webpack.
  5. Сборка проекта на Gulp и обзор препроцессора Sass.
  6. Анимация в CSS.

JavaScript

  1. JavaScript. Базовый уровень
  2. JavaScript. Продвинутый уровень

Дипломные проекты

  1. Проекты по вёрстке
  2. JavaScript

 

Профессиональные навыки:

  • Адаптивная и кроссбраузерная вёрстка
  • Работа с протоколами HTTP/HTTPS
  • Работа с Web API
  • Использование библиотеки для ускорения процесса разработки
  • Сборка проектов
  • Взаимодействие со внешними сервисами
  • Основы React и Redux
  • Работа с системой контроля версий Git
  • Владение методологией БЭМ
  • Верстка под десктоп и мобильные устройства
  • Знание Node.js
Стоимость: 139 000 рублей

Программа курса

HTML и CSS. Профессиональная вёрстка сайтов

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

HTML и CSS. Адаптивная вёрстка и автоматизация

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

JavaScript. Профессиональная разработка веб-интерфейсов

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

Подготовка вёрстки для cистем управления контентом (CMS)

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

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

Вёрстка React-компонентов

Вёрстка с нуля в экосистеме React и создание интерактивных React компонентов.

  • Принципы работы одностраничных приложений (SPA) и их основные отличия от статичных сайтов. Краткий обзор инструментов для создания SPA
  • Экосистема React и структура проекта для вёрстки в этой экосистеме
  • Синтаксис JSX, работа с компонентами, использование моков для имитации работы с данными
  • Организация стилей в React, CSS-in-JS
  • Работа со state и props для демонстрации состояний страниц

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

В комплексную программу входят следующие курсы:

  • HTML и CSS. Уровень 1. Создание сайтов на HTML 5 и СSS 3
  • HTML и CSS. Уровень 2. Углубленный CSS и вёрстка макета
  • HTML и CSS. Уровень 3. Продвинутые методологии и инструменты верстки
  • Уровень 1. Основы JavaScript
  • Уровень 2. Расширенные возможности
  • Уровень 6. React и JSX
  • Практика создания веб – приложения (фронтенд)
Стоимость: нет информации

Программа обучения

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

  • Введение в Web-технологии. Структура HTML. Форматирование текста при помощи HTML
  • Форматирование с помощью CSS. Списки. CSS отступы и поля
  • Навигация и Bootstrap
  • История создания Less. Цели и задачи Less. Подключение и компиляция Less;
  • Введение в объектно-ориентированное программирование;
  • Событие. Обработчик события. Обработка событий в сценариях
  • Browser Object Model. Document Object Model;
  • Взаимодействие с DOM
  • Формы. Применение форм. Размещение элементов формы в HTML;
  • Проверка достоверности форм. Использование Cookie;
  • Рисование с помощью Canvas, поддержка медиа-возможностей;
  • JSON, Ajax. Цели и задачи. Синтаксис JSON;
  • ECMAScript 6
  • Модульное тестирование;
  • Паттерны проектирования. Использование UML при анализе паттернов проектирования;
  • Паттерн MVC. Цели и задачи паттерна Model-View-Controller;
  • Принципы проектирования классов SOLID;
  • Введение в jQuery. Доступ к элементам страницы при помощи функции $;
  • Создание обработчиков событий с использованием jQuery;
  • Отображение и скрытие элементов с помощью методов show и hide. Создание эффектов;
  • REST API. Использование метода GET. Использование метода POST;
  • Использование jQuery плагинов;
  • Работа в команде, управление программными проектами;
  • Программная платформа Node.js;
  • Использование фреймворков Angular, React;

 

По окончании курса вы сможете:

  • Верстать веб-страницы с применением современных технологий HTML5 и CSS3;
  • Тестировать веб-страницы, выполнять контроль качества;
  • Управлять браузерами и элементами HTML-страниц с помощью JavaScript;
  • Эффективно манипулировать элементами DOM;
  • Использовать базовую анимацию и управлять эффектами;
  • Создавать высокоэффективные сайты Web 2.0;
  • Использовать объект XmlHttpRequest для выполнения синхронных и асинхронных запросов к серверу;
  • Передавать и обрабатывать данные на сервер всеми доступными методами;
  • Использовать JSON нотацию для передачи данных;
  • Использовать XML-PRC протокол в AJAX приложениях;
  • Использовать систему управления базами данных MongoDB;
  • Владеть фреймворками React и Angular;

Программа курса

  • Верстка сайтов (учимся верстать красивые и адаптивные интерфейсы с помощью HTML и СSS)
  • js (изучаем основу всего Frontend – чистый JavaScript)
  • Работа с хранилищами данных
  • jQuery (Разбираемся как работать с самой распространенной библиотекой )
  • AJAX (Ускоряем работу страниц, делаем первые шаги к SPA)
  • ООП (понимаем как работает объектно ориентированное программирование чтобы создавать крутейшие интерфейсы)
  • js (Изучаем перспективный фреймворк, резко набирающий популярность во всем мире )
  • Работа с компонентами
  • Работа с роутингом
  • js (Изучаем применение JavaScript для написания серверной части приложения)
  • NPM (учимся работать с менеджером пакетов)
  • Работа с фреймворком Express
  • js (изучаем самый востребованный фреймворк в России и Европе от компании Facebook)
  • Работа с компонентами
  • Redux – работа с хранилищами
  • Роутинг
  • Работа с реальными серверами (развертывание проекта на реальном сервере)
  • Git (учимся использовать самую современную и популярную систему контроля версий которая используется практически в любой IT компании)
  • Работа в команде (Набираемся опыта командной разработки перед выходом на работу)
Стоимость: нет информации

ПРОГРАММА ОБУЧЕНИЯ

Только востребованный у бизнеса
стек технологий

WEB CORE – 2 месяца

Изучение основ создания интерфейсов в вебе

Тема 1: Структура HTML документа, блочная модель, основные теги. Выбор формата для изображения.

Тема 2: Семантическая разметка, доступность и SEO.

Тема 3: Работа с формами, взаимодействие с сервером.

Тема 4: CSS стилизация страниц: селекторы и приоритет применения, позиционирование, работа с сетками (flexbox, grid).

Тема 5: Адаптивная верстка: Media queries, подход mobile first.

Тема 6: Организация стилей на проекте, БЭМ методология.

Тема 7: Продвинутые техники CSS: Стилизация псевдоэлеметов, анимации, тени и градиенты.

Тема 8: Анимания, трансформации и фильтры на CSS.

Тема 9: Базовые взаимодействие JavaScript со страницей, обработка событий. Подключение внешних модулей.

Тема 10: Инструменты разработки: Использование препроцессора, минификация кода, npm, webpack.

 

JAVASCRIPT CORE – 2 месяца

Базовые концепции языка, работа в браузере, написание простых программ

Тема 11: Основной синтаксис языка, переменные и константы, типы данных и структуры, функции, циклы.

Тема 12: Продвинутая работа с функциями, функции высшего порядка, рекурсия.

Тема 13: Продвинутый синтаксис языка: rest/spread операторы, деструктуризация.

Тема 14: Стандартные классы в JS: Map, Set. Работа с датами.

Тема 15: Замыкания, область видимости, контекст вызова.

Тема 16: Прототипная модель JS и современный синтаксис классов.

Тема 17: Работа с асинхронным кодом (Promises, callback, async/await). Event loop.

Тема 18: Работа с DOM. Выборка и модификация элементов. Событийная модель. Хранение данных на клиенте.

Тема 19: Работа с сетевыми запросами: ajax, fetch.

Тема 20: Принципы работы веба, веб серверы и DNS, протокол HTTP. Архитектура REST. Аутентификация в вебе.

 

REACT.JS CORE – 2.5 месяца

Основы разработки Single Page Applications

Тема 21: Как работает react.js, синтаксис JSX и работа Virtual DOM

Тема 22: Компонентный подход, состояние компонентов, передача данных, обработка событий

Тема 23: Условия и циклы в шаблонах

Тема 24: Жизненный цикл компонента, оптимизация рендеринга

Тема 25: Работа со стилями в React.

Тема 26: Обработка данных форм, валидация

Тема 27: Построение клиент-серверных приложений.

Тема 28: Роутинг в приложении с react-router

Тема 29: State management: Redux, асинхронное взаимодействие

 

КОМАНДНЫЙ КОММЕРЧЕСКИЙ ПРОЕКТ – 1 месяц

Разработка frontend части для настоящего коммерческого проекта на стеке:

• HTML/CSS/JS
• React + Redux с применением Git
• npm
• webpack

 

ПОДГОТОВКА К СОБЕСЕДОВАНИЮ – 1 месяц

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

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

 

Программа:

Вступительное тестирование

Прохождение тестирования в тренажёре в своём темпе. 15 часов

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

  1. JavaScript: параллельный курс

Прохождение курса в своём темпе. 30 часов

При помощи тренажёра вы самостоятельно повторите важные концепции JavaScript.
Ближе познакомитесь с DOM-деревом и управлением содержимым DOM-узлов.
Глубже изучите асинхронность: начнёте с setTimeout и setInterval, продолжите с Event loop и нулевой задержкой, «приправите» знания чейнингом и callback.

  1. Модуль самостоятельного проекта

10 недель работы над проектом. Код-ревью от разработчика. 120 часов

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

Этот модуль как испытательный период — вы погружаетесь в интенсивную разработку, изучаете внутренности, нюансы работы технологий. Займётесь не только чистым фронтом на JS с типизацией TS, но и узнаете больше о тестировании, DevOps, работе с API.

В этом модуле расскажем, как:

  • выбрать среду разработки, хостить код и проект и даже немножко о выборе операционной системы
  • использовать TypeScript (как основы, так и сложные концепции)
  • отображать элементы в браузере
  • работать с архитектурой CSS и препроцессорами
  • написать свой шаблонизатор и что это такое
  • реализовать компонентный и модульный подходы
  • использовать знание паттернов программирования и ООП
  • настроить роутинг, какие есть нюансы
  • работать с API, что такое WebSockets и в целом о клиент-серверном взаимодействии
  • применять в работе линтеры и code style
  • тестировать приложение при помощи Chai и Mocha
  • работать с безопасностью: CSRF, XSS, CSP, Clickjacking и не только
  • настраивать сборку через Parcel, а потом Webpack, а также работать с Docker
  • работает DevOps (узнаете о сертификатах, CI/CD и HTTP/2)


+ 1 проект в портфолио

  1. Модуль командного проекта

12 недель командной работы над проектом. С ментором и код-ревьюером. 160 часов

Вы объединитесь в команды из 2–3 человек и создадите свою веб-игру с нуля: от продумывания макетов и логики до деплоя в облако. Реализуете клиентскую часть игры и её бэкенд, развернёте результат в Яндекс.Облаке.

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

В этом модуле расскажем, как:

  1. Алгоритмы и структуры данных. Включённый курс

Включённые темы в тренажёре. 40 часов

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

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

  1. Карьерный трек (опционально)

50 часов

После основной программы вы сможете пройти подготовку к получению job offer.

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

Модуль включает в себя персональную работу со специалистами:

Чему Вы научитесь

После окончания курса вы получите все необходимые теоретические и практические навыки для реальной работы на позиции Front-End Developer.

  • Писать качественный код на JavaScript, оперируя знаниями синтаксиса и принципами работы языка
  • Изучите и проработаете знания по основам языка, функциям, массивам, объектам, ООП, замыканиям, исключениям, селекторам, событиям, WEB API, клиент-серверному взаимодействию и многое другое
  • Во время курса сами напишете веб-проект и отработаете навыки применения составляющих проекта: приложения, библиотеки, фреймворки, сборка проекта и другие компоненты
  • Будете готовы к собеседованию на вакансию JavaScript Junior Программист (Front End)

 

Программа:

Вёрстка 1. Основы HTML & CSS

  1. Введение в веб-разработку и интернет. Разбор основных терминов. Разбор всех этапов создания сайта. Ввод в язык разметки – HTML: структура документа, ключевые слова, заголовок, кодировка. Блочные и строчные элементы. Поток документа.
  2. Виды элементов. Спецсимволы. Атрибуты элементов. Гиперссылки и их виды. Абсолютные и относительные пути. Работа с изображениями и их разновидности.
  3. Основы CSS: базовый синтаксис, селекторы, классы, наследование и каскадирование.
  4. Сложные селекторы, псевдоклассы и псевдоэлементы. Работа со шрифтами. Семейства, начертания, способы подключения.
  5. Фоны. Все свойства background. Табличная верстка. Списки.
  6. Формы. Создание интерактивной формы обратной связи. Все виды поля input и его атрибуты. Отправка данных на сервер.
  7. Блочная верстка. Понятие Box Model. Отступы. Обтекание. Блочно-строчные элементы.
  8. Позиционирование. Рамки. Верстка карточек товаров.

Вёрстка 2. Адаптивная вёрстка.

  1. Photoshop для верстальщика. Настройка окружения. Разбор макета. Нарезка картинок. Начало верстки макета.
  2. Семантическая верстка. Новые элементы HTML 5. Практика. Верстка сайта по готовому макету в формате PSD.
  3. Стилизация чекбоксов, радио кнопок и переключателей с помощью псевдоэлементов.
  4. Адаптивная верстка. Медиа выражения. Верстка сайта с помощью Desktop похода.
  5. Адаптивная верстка. Верстка сайта с помощью Mobile first подхода.
  6. SVG и WEBP изображения. Разбор и верстка сложных блоков.
  7. Оживляем сайт. Выбор и подключение библиотеки на страницу. Работа с JavaScript. Популярные jQuery-плагины. Создание слайдера на основе плагина Slick.js
  8. Трансформации. Плавные переходы. Анимации. Обзор готовой анимации Animate.css.

Вёрстка 3. Bootstrap.

  1. Методологии верстки БЭМ, OOCSS, SMACSS, Atomic CSS.
  2. Подробный разбор БЭМ. Обзор графического редактора Figma.
  3. Гибкая верстка с помощью Flexbox layout.
  4. Подробный разбор Flexbox и его свойств.
  5. Препроцессоры LESS, SASS, PostCSS. Подробный разбор SASS.
  6. Настройка и компиляция SASS. Обзор UI фреймворков Bootstrap, Semantic UI, Ant Design.
  7. Система контроля версий Git. Сборщик проектов Gulp.
  8. Настройка и автоматизация задач с помощью Gulp.

JavaScript 1. Основы

  1. Знакомство с Javascript. Среда разработки WebStorm. Создание своего проекта и первой программы на Javascript. Обзор Git – системы управления версиями.
  2. Синтаксис JS. Переменные, выражения, операторы, их типы и взаимодействие. Идентификаторы, литералы. Типы данных в Javascript.
  3. Функции в Javascript. Стрелочные и анонимные функции. Функциональные выражения.
  4. Создание и инициализация массива. Команды Pop/Push, Shift/Unshift.
  5. DOM (Дерево). Определение и функции DOM в JS. Навигация по DOM-элементам (getElement* и querySelector*). Основы работы с событиями. Библиотека jQuery.
  6. Фоновая отправка формы. Загрузка данных в фоне.
  7. Прототипное программирование. ОПП в Javascript. Классы.
  8. Модули в JS. WebPacker. NodeJS.

JavaScript 2. Фреймфорки: VueJS

  1. Установка VueJS, знакомство со средой разработки. Написание первого приложения «Hello, world». Изучение директивов: v-if, v-for, v-on, v-model.
  2. Компоненты во VueJS и их структура. Входящие данные: props. События компонента: $emit. Значения по-умолчанию для props. Составные компоненты. Зоны ответственности. Mixins. Однофайловые компоненты. Работа с приложением «Список дел».
  3. Изучение принципа DRY. Повторное использование кода. Примеси Mixins.
  4. Навигация в приложениях. Работа с библиотекой VueRouter. Схема маршрутов приложения. Вложенные маршруты. Ссылки перехода router-link. Программная навигация. Передача параметров в машруте. Props и параметры маршрута.
  5. Управление состоянием приложения. Изучение библиотеки Vuex. Работа с хранилищем. Мутации. Геттеры. Работа с приложением “Складской учет”.
  6. Взаимодействие с сервером. Изучение библиотеки VueResource. Архитектура приложения, на API. Обработка ответа.
  7. Авторизация в приложении.
  8. Шаблон собственного проекта. Утилита vue-cli. Сборка и публикация финальной работы курса: “Интернет магазин спортивных товаров” на хостинге.
Стоимость: Нет информации

7-недельный онлайн-курс

Другие события:

  • Front-end Intensive
  • Видеозапись BEMup Киев
  • BEM мастер-класс
Стоимость: разная стоимость

Front end development — это создание той части веб-приложений и сайтов, которую видит пользователь. Для начала дизайн-макет переносится в веб с использованием HTML и CSS. Затем сайт «оживляют» при помощи интерактивных элементов и эффектов: галерей, поп-апов, форм, счетчиков, анимаций и многого другого.

 

Профессия Front End Developer
Создание интерфейсов и настройка работоспособности сайтов для удобства пользователя


HTML & CSS
Научись делать разметку, оформлять и верстать веб-страницы

JavaScript Basics
JS значительно расширяет функциональность сайта и позволяет «оживить» веб-страницы при помощи различных эффектов

JavaScript Advanced
Углублённое изучение JavaScript для реализации сложных проектов

JavaScript Professional
Ты научишься оптимизировать работу над проектами и овладеешь продвинутыми инструментами разработчика

Front End Advanced
Улучшение качества вёрстки и использование технологий для быстрого развертывания крупных проектов

Курс React
Обучение React.js прокачает твои навыки веб-разработки и работы с JavaScript

Angular 8 Basic
Знакомство с фреймворком Angular позволит тебе развиваться во фронтенд-разработке

Angular 8 Advanced
Научишься интегрировать CI/CD-процессы, создавать билды, взаимодействовать с другими модулями на базе Angular 8

Курс Vue.js
Научись быстрому и качественному созданию веб-приложений с помощью Vue.js

Курс Node.js
Обучение фреймворку JavaScript для легкого свитча в back end-разработку

Учим необходимому

По-простому:
 JavaScript

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

 HTML и CSS

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

 Фреймворки (React + Redux Toolkit)

Задает архитектуру проекта. Решает типовые задачи за программиста. Значительно сокращает количество кода и автоматизирует рутину

 Алгоритмы и структуры данных

Любая программа — это последовательность шагов, выполняемых над данными. Способ организации данных сильно влияет на удобство работы

 Фронтенд (DOM API)

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

 Качество

Автоматизированные тесты — неотъемлемая часть профессиональной разработки

 Архитектура

Создание простого для анализа и изменения кода требует хорошего понимания принципов его организации

 Инфраструктура

Программирование — это не только код, но и сопутствующие инструменты: командная строка, NPM, Git, Webpack

 

Подробно:
1. Основы веб-программирования

Создайте первые страницы с помощью HTML и CSS. Изучите основы программирования: типы данных, условные конструкции, циклы и функции. Прокачайте алгоритмическое мышление и реализуйте самостоятельно функции сортировки. Правильно настройте операционную систему для разработки, научитесь пользоваться командной строкой. Установите git, редактор кода VS Code. Наполните свое портфолио на Github первыми программами.


Программа модуля 

 

  • Настройка окружения (менеджер версий asdf, ubuntu on windows)
  • Эффективная отладка кода (дебагер, подходы)
  • Поиск технической информации (https://guides.hexlet.io/how-to-search/)
  • Организация задач с помощью Kanban-доски (Trello)

 

Курсы

Теория, квизы, практика в тренажере

Основы современной вёрстки

HTML5 CSS3 Developer Tools

Введение в программирование

основы javascript чистый код алгоритмы логика

JS: Массивы

синтаксис вложенные массивы алгоритмическая сложность сортировка

Основы командной строки

терминал shell команды linux

Введение в Git

github рабочая директория клонирование восстановление

JS: Настройка окружения

eslint prettier зависимости npx

 

  1. Профессиональный JavaScript

Научитесь писать production-ready код. Освойте принципы объектно-ориентированного и функционального программирования. Начните писать модульный код, который легко расширять и поддерживать. Ускорьтесь с помощью автоматизированного тестирования своего кода. Настройте непрерывную интеграцию и опубликуйте свой первый пакет в npm. Пишите код аки бог.

 

  1. Разработка браузерных приложений

Создавайте интерактивные приложения в браузере и собирайте их с помощью Webpack. Эффективно используйте DOM API, выполняйте HTTP-запросы к серверу с помощью AJAX. Используйте архитектурный подход MVC для создания устойчивых к изменениям приложений. Научитесь правильно работать с формами: проверять корректность данных и думать о безопасности. Познакомьтесь с асинхронной природой JavaScript и используйте ее во имя добра.

 

  1. Разработка React-приложений

Освойте React для создания сложных одностраничных сайтов (SPA). Подключите Веб-сокеты для работы с приложениями реального времени. Грамотно управляйте состоянием приложения через Redux Toolkit. Создавайте компоненты, которые легко поддерживать и использовать повторно даже на разных сайтах. Интегрируйте с React библиотеки изначально не предназначенные для работы с ним. Используйте на полную катушку знания, полученные в предыдущих модулях.

  • HTML5
  • CSS3
  • JAVASCRIPT
  • BOOTSTRAP
  • JQUERY
  • GIT
  • SASS
  • VUE JS

Навыки:

  • Уверенные знания HTML5 и CSS3
  • Знание JavaScript & jQuery
  • Препроцессор SASS/SCSS
  • Знание таск-менеджера Gulp и Git
  • Фреймворк Bootstrap
  • Разработка на основе Vue JS
  • Знание формата SVG
  • Адаптивная верстка
  • Кроссбраузерная и кроссплатформенная верстка

 

Программа обучения

#1 – HTML-разметка

#2 – CSS3 оформление

#3 – CSS3 анимация, адаптивность и FlexBox

#4 – Фреймворк Bootstrap

#5 – Таск-менеджер Gulp

#6 – Препроцессор SASS

#7 – JavaScript

#8 – JavaScript + HTML

#9 – Библиотека jQuery

#10 – Фреймворк Vue JS

#11 – Контроль версий Git

#12 – Формат SVG

#13 – Создание сайта. Главная страница

#14 – Создание сайта. Страница статей

#15 – Создание сайта. Страница контактов

#16 – Выгрузка на хостинг. Фриланс и дипломный проект

Стоимость: бесплатно

Основные темы:

В курсе рассматриваются темы:

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

Различные разделы предназначены для проработки по порядку, но каждый из них также самодостаточен. Если вы, к примеру, уже хорошо знакомы с HTML, то можете перейти к разделу CSS.

Основные модули

  • Введение в HTML (15–20 часов чтения/упражнений)
  • Мультимедиа и встраивание (15–20 часов чтения/упражнений)
  • HTML таблицы (5–10 часов чтения/упражнений)
  • Первые шаги в CSS (10–15 часов чтения/упражнений)
  • Структурные элементы CSS (35–45 часов чтения/упражнений)
  • Стилизирование текста (15–20 часов чтения/упражнений)
  • CSS разметка (30–40 часов чтения/упражнений)
  • Книга рецептов CSS
  • Первые шаги в JavaScript (30–40 часов чтения/упражнений)
  • Структурные элементы Javascript (25–35 часов чтения/упражнений)
  • Клиентский веб API (30–40 часов чтения/упражнений)
  • Введение в объекты Javascript (25–35 часов чтения/упражнений)
  • Асинхронный Javascript (25–35 часов чтения/упражнений)
  • Веб формы (40–50 часов)
  • Кросс-браузерное тестирование (25–30 часов чтения/упражнений)
  • Доступность (20–25 часов чтения/упражнений)
  • Git и Github (5 часов чтения)
  • Понимание инструментов на стороне клиента (20–25 часов чтения/упражнений)
  • Понимание JavaScript-фреймворков для фронтенда (30-60 часов чтения/упражнений)

Чему ты научишься?

  • Верстать современные адаптивные страницы
  • Создавать сайты с нуля
  • Разрабатывать интерактивные модули для сайтов на JavaScript
  • Получишь фундамент для работы фронтенд-разработчиком

 

Программа курса

  1. Введение, обзор инструментария, основы Git, обзор HTML
  2. Практическое применение HTML; Подключение CSS и JavaScript на странице
  3. Подходы к верстке страниц. Возможности CSS3.
  4. JavaScript
  5. Web-сервер, AJAX, REST API
  6. Модули JavaScript. Препроцессоры CSS. Системы сборки проектов.
  7. Защита дипломного проекта

 

Навыки:

  • Верстка HTML/CSS/SASS
  • Опыт работы с GitHub
  • Опыт разработки JS/jQuery
  • Умение работать с npm, webpack
  • Знание Bootstrap
  • Опыт командной разработки с использованием систем контроля версий Git и управления проектами
Стоимость: 94 000 рублей

Программа курса

Базовые знания о компьютерах и ЯП (языки программирования)

  • история программирования
  • развитие вычислительной техники
  • кодирование информации
  • двоичная система
  • обработка информации процессором
  • понятие потока, многозадачности
  • оперативная память, регистры, прерывания
  • программирование, уровень абстракции
  • исполнение кода компиляция vs интерпретация
  • классификация языков программирования
  • понятия типизации JavaScript в контексте классификации ЯП
  • классификация JS
  • развитие языка, ECMAScript спецификации
  • зачем нужна сборка среды выполнения JS
  • движки JS
  • базовый синтаксис
  • подключение js в браузере
  • способы отладки js

 

HTML CSS

  • тэги
  • атрибуты
  • разметка
  • таблицы
  • bootstrap
  • верстка

 

Основы JavaScript

  • Переменные
  • объявление
  • именование переменных (разрешенные символы, camelCase, snake_case, и не kebab-case)
  • область видимости
  • Типы данных
  • Числа
  • Строки
  • Логический тип (Булевый)
  • Специальные примитивы null, undefined
  • Массивы
  • Объекты
  • Операторы
  • Ветки
  • .else
  • .. else if…else
  • Конструкции
  • ..case
  • ..catch
  • Циклы
  • for
  • ..in
  • while
  • ..while
  • операторы continue break
  • Функции
  • зачем использовать
  • Function Expression
  • Function Declaration
  • Доступ по ссылке
  • оператор return
  • Вызов функции
  • IIFE самовызывающаяся функция
  • Область видимости переменных
  • Замыкание
  • Псевдомассив arguments
  • Hoisting поднятие

 

Мир оъектов в JS

  • Создание объекта через {}, объект как ассоциативный массив
  • Передача объекта по ссылке
  • Ключевое слово this внутри объекта
  • Функции-конструкторы объектов и оператор new
  • Понятие ООП
  • Функциональный стиль vs ООП
  • Классическое понимание ООП
  • Классы
  • Экземпляры класса
  • Абстрактные классы
  • Приватные поля
  • Статические методы
  • Киты ООП
  • Инкапсуляция
  • Наследование
  • Полиморфизм
  • Реализация ООП в JS стандарта ES5
  • инкапсуляция через замыкание
  • наследование через __proto__, prototype
  • Контекст вызова снова
  • поговорим про это this
  • глобальный контекст вызова
  • объект window
  • потеря контекста
  • сохраниение контекста
  • bind байндинг функции
  • подмена контекста call, apply
  • карринг функции
  • наследование через вызов функции-конструктора родительского “класса”
  • достоинства и недостатки разных способов наследования, лучшие практики
  • Работа с объектом с помощью глобального объекта Object
  • keys
  • create
  • defineProperties дескрипторы
  • геттеры и сеттеры
  • freeze
  • assign
  • копирование объекта
Стоимость: разная стоимость
  • HTML, CSS, and Javascript for Web Developers
  • Full-Stack Web Development with React
  • Web Design for Everybody: Basics of Web Development & Coding
  • IBM Full Stack Cloud Developer
  • Responsive Website Development and Design
  • Full Stack Web Development with Angular
  • Front-End Web Development with React
  • UI / UX Design
  • Introduction to Web Development
  • Search Engine Optimization (SEO)
  • How To Create a Website in a Weekend! (Project-Centered Course)
  • Build a Full Website using WordPress
  • Build a Machine Learning Web App with Streamlit and Python
  • Build Your Portfolio Website with HTML and CSS
  • Build a Data Science Web App with Streamlit and Python
  • Introduction to Front-end Development with ReactJS
  • Foundations of User Experience (UX) Design
  • Build a Twitter Clone Front-End with ReactJS
  • Web Development with Java Spring Framework
  • Become a JavaScript Pro with these 7 Skills
Стоимость: Нет информации

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

Необходимы:

  • базовые знания:
  • HTML+CSS;
  • JavaScript;
  • представление о работе веб-серверов;
  • иметь навык разработки на любом языке.
Стоимость: Нет информации

Программа курсов

  • Javascript Basics
  • HTML + CSS Basics
  • HTML + CSS Advanced
  • Javascript Advanced
  • TypeScript
  • React
  • Redux
  • Employment
  • Algorithms and data structures

Насколько публикация полезна?

Нажмите на звезду, чтобы оценить!

Средняя оценка 5 / 5. Количество оценок: 1

Оценок пока нет. Поставьте оценку первым.

Автор статьи. Ответственный за актуальный контент, текст и редактуру сайта. Эксперт по выбору профессии, курсов и профессий с 2016 года. Делюсь личным практическим опытом.

Оцените автора
Добавить комментарий