ТОП-7 курсов Middle Frontend [2023]: обучение онлайн

Подборка лучших онлайн-курсов по Middle Frontend-разработке.

1 место. Курс «Профессия Frontend-разработчик с нуля до PRO» — Skillbox

https://skillbox.ru/course/frontend-pro-expert/

Стоимость: Рассрочка на 34 месяца — 5 003 ₽ / мес

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

• Стажировка в команде под руководством тимлида в конце курса
• 6 проектов в портфолио
• Помощь в трудоустройстве
• Практика на вебинарах с разработчиками из крупных компаний

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

По данным hh.ru:

• 6 660 компаний

сейчас ищут frontend-разработчиков

• 70 000 рублей

зарплата начинающего специалиста

 

Кому подойдёт этот курс

• Абсолютным новичкам

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

• Начинающим программистам

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

 

Что вам даст этот курс?

• Освоите все необходимые технологии, чтобы стать frontend-разработчиком: HTML, CSS, JavaScript, фреймворки, Node.js. Всё в одном курсе.
• Научитесь программировать на TypeScript — расширенной версии JavaScript. Этот новый язык программирования занял 4 место по популярности на GitHub в 2020 году, всё больше компаний требуют от разработчиков знания TypeScript.
• Добавите в портфолио 5 проектов и поработаете в команде над полноценной CRM-системой.

 

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

1. Верстать веб-страницы и письма с помощью HTML и CSS
2. Работать с фреймворками: Angular, React.js, Vue.js
3. Работать с TypeScript
4. Программировать на JavaScript
5. Применять алгоритмы и структуры данных
6. Создавать десктопные приложения на Ionic/Electron
7. Разрабатывать серверные приложения на Node.js
8. Работать с Git

 

Уровни курса

• Первый уровень: необходимые основы

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

• Второй уровень: стажировка в команде

Вы будете работать под руководством опытного тимлида в составе команды из 5–7 человек. Создадите собственную CRM-систему за 2 месяца по ТЗ. На практике познакомитесь с платформой Node.js и методологией управления проектами SCRUM. Все процессы, через которые вы пройдёте, — это максимально приближенный к боевым условиям опыт. Именно так создаются CRM-системы в компаниях-работодателях.

• Третий уровень: выбор направления

Познакомитесь с TypeScript — продвинутой версией JavaScript — и приступите к изучению frontend-фреймворка на выбор. Фреймворк упростит разработку интерфейсов и сделает вашу работу эффективнее. В конце вы напишете интернет-магазин или трекер задач.

 

Содержание курсов

Вас ждут вебинары и практика на основе реальных кейсов.

• 120 модулей
• 500 видеоматериалов

Основные курсы

1. Веб-вёрстка. Уровень 1
   1. Введение.
   2. Базовый HTML.
   3. Базовый CSS. Часть 1
   4. Базовый CSS. Часть 2
   5. Подготовка к вёрстке
   6. HTML-разметка.
   7. Flexbox.
   8. Стилизация.
   9. Продвинутый HTML. Формы
   10. Продвинутый CSS. Часть 1
   11. Продвинутый CSS. Часть 2
   12. Адаптивность. Десктоп.
   13. Адаптивность. Мобильные устройства.
   14. JavaScript для верстальщика.
   15. Доступность.
   16. Кроссбраузерность.
   17. База знаний.
   18. Сетки
   19. Работа с хостингом.
   20. Анимация.
2. Уровень 1
   1. Введение.
   2. Переменные и работа с числами.
   3. Строки, boolean и условные операторы.
   4. Массивы и циклы.
   5. Функции.
   6. Объекты.
   7. Введение в DOM. Часть 1
   8. Введение в DOM. Часть 2
   9. Константы, области видимости и замыкания.
   10. Преобразования и нестрогие сравнения.
3. Веб-вёрстка. Уровень 2
   1. Вёрстка HTML-писем.
   2.  
   3. Анимация на JS.
   4. Оптимизация и процесс загрузки.
   5. Отрисовка сайта.
   6. Сборщики.
   7. Препроцессоры и постпроцессоры.
   8. CSS Grid.
   9. Будущее вёрстки.
4. Уровень 2
   1. События браузера, контекст выполнения.
   2. Модули.
   3. Event loop и асинхронная разработка.
   4. Обработка ошибок.
   5. Классы.
   6. События.
   7. Экосистема JavaScript и npm.
   8. Сборка.
   9. Тестирование.
   10. База знаний.
5. Node
   1. Введение.
   2. Подготовка рабочей среды.
   3. Hello, world!
   4. Решаем базовые задачи.
   5. Асинхронный код.
   6. js.
   7. Базы данных, реляционные БД.
   8. Базы данных, нереляционные БД.
   9. CLI-программы.
   10. Углубляем теорию + продвинутые понятия.
   11. Real-time & WebSockets.
   12. Pro tips.
6. TypeScript, часть 1
   1. Введение.
   2. Компиляция и примитивные типы.
   3. Применение типов.
   4. Типизация ООП.
   5. Дженерики.
   6. Утилитарные типы.
   7. Дополнительные типы.

Выбор направления

1. js
   1. Введение.
   2. Основы Vue.
   3. Создание проекта.
   4. Каталог товаров.
   5. Пагинация и фильтрация.
   6. Страница товара.
   7. Корзина.
   8. Работа с API. Список товаров.
   9. Работа с API. Оформление заказа.
   10. Деплой.
   11. Vue 3.0
2. js
   1. Введение в React.
   2. Создание проекта.
   3. TypeScript (Предложение).
   4. Компоненты на примере новостной карточки Reddit.
   5. Hooks и Функциональное программирование.
   6. Больше о компонентах и введение в тестирование компонентов.
   7. Работа с публичным API на примере Reddit.
   8. API + контекст.
   9. Портал и форма.
   10. Введение в Redux на примере новостной ленты.
   11. Использование Redux-Thunk на примере бесконечной ленты.
   12. Формы на примере комментариев и карточки поста.
   13. Сайдбар + роутинг.
   14. Бонус: Mobx.

Основные курсы после выбора специализации

1. Typescript под Vue/React/Angular
   1. tsconfig
   2. бандлинг
   3. Spread Types
   4. Infer
   5. Conditional types
   6. Маппинг типов
   7. Еще немного про ооп
   8. Декораторы
   9. Миксины
   10. Неймспейсы
   11. Алгебраические типы
   12. Тестирование типов
   13. Строковые типы для разбора строк
   14. Сложные типы
2. Angular
   1. Введение в Angular.
   2. Создаём UI Kit.
   3. Каталог товаров.
   4. Машрутизация.
   5. Сервисная архитектура в Angular.
   6. HTTP Advanced.
   7. RXJS: Поиск товаров.
   8. Формы в Angular.
   9. Страница товара.
   10. Улучшаем приложение.
   11. RXJS & Components Advanced: корзина товаров.
   12. Тестирование.
   13. Способы организации обмена данными.
   14. Дополнительные идеи.
3. TypeScript Pro
   1.  
   2. Сложные типы.
   3. Строковые типы для разбора строк.
   4. Абстрактные алгебраические типы.
   5. Тестирование типов.
   6.  
   7. Чистая архитектура.
   8. Чистая файловая структура.

Дополнительные курсы

1. Системы контроля версий, знакомство с Git
   1. Работаем с Git на своём компьютере.
   2. Работаем с удалённым репозиторием.
   3. Командная работа в Git.
   4. Сравнение версий и отмена изменений.
   5. Инструменты и правила работы с Git.
   6. В результате. Научитесь вести контроль версий ваших проектов в Git. Этот навык поможет вам совместно работать в команде.
2. Работа с командной строкой Bash
   1. Что такое командная строка.
   2. Работа с файлами и папками.
   3. Авторизация и права доступа.
   4. Процессы, сервисы и задачи.
   5. Конфигурация и инструменты.
   6. Написание скриптов на Bash.
   7. Использование Bash на примере настройки веб-сервера.
   8. В результате. Научитесь управлять файловой системой компьютера при помощи командной строки. Ускорите работу и будете меньше времени тратить на рутину.
3. Figma
   1. Введение в Figma. Обзор возможностей.
   2. Работа с графикой.
   3. Редактор Figma — модульные сетки и монтажные области.
   4. Создание и настройка компонентов, работа с эффектами.
   5. Создание вложенных компонентов. Auto Layout.
   6. Организация рабочего пространства компонентов и стилей. Командная работа, контроль версий и передача макетов в разработку.
   7. Прототипирование.
   8. Figma Animate.
   9. Бонус-модуль. Обзор и применение Figma plugins.
   10. В результате. Познакомитесь с графическим редактором, в котором вам будут присылать макеты для вёрстки. Научитесь извлекать цвета, шрифты, стили и даже попробуете себя в роли веб-дизайнера.
4. Photoshop для веб-разработчика
   1. Введение в Photoshop.
   2. Инструменты.
   3. Работа с файлами и изображениями
   4. Принципы работы со слоями и масками.
   5. Бонус-модуль. Выделения и маски.
   6. Работа со слоями.
   7. Эффекты.
   8. В результате. Научитесь основам работы в редакторе Photoshop.
5. Английский для IT
   1. Терминология.
   2. Чтение документации и библиотек.
   3. Общение на форумах.
   4. Ресурсы технологических новостей
   5. Произношение слов.
   6. Коммуникация.
   7. Акценты.
   8. Просмотр видео оригиналов.
   9. В результате. Научитесь общаться и искать информацию на английском языке.
6. Универсальные знания программиста
   1. Как стать первоклассным программистом.
   2. Вёрстка email-рассылок. Советы на реальных примерах.
   3. The state of soft skills.
   4. Как мы создавали карту развития для разработчиков.
   5. Как эффективно работать с почтой.
   6. Повышение своей эффективности.
   7. Спор о первом языке программирования.
   8. Саморазвитие: как я не усидел на двух стульях и нашёл третий.
   9. Data-driven-подход к продуктивности — инсайты из данных миллиона людей.
   10. Протокол HTTP.
   11. Введение в алгоритмы.
   12. В результате. Получите полезные навыки, которые пригодятся вам на новой работе.
7. Карьера и развитие программиста
   1. Что нужно работодателю.
   2. Как создать резюме и искать работу.
   3. Как успешно пройти собеседование.
   4. Как пройти испытательный срок.
   5. В результате. Получите полезные советы по дальнейшему развитию карьеры.

Итоговые проекты

1. Лендинг

Сверстаете лендинг для арт-галереи Blanchard по макету от заказчика.

2. Страницы для интернет-магазина

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

3. Стажировка в команде: разработка CRM-системы

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

4. Интернет-магазин (на выбор)

Разработаете frontend для агрегатора товаров на Vue или Angular.

5. Трекер задач по методу Pomodoro (на выбор)

Напишете трекер задач с таймером на фреймворке React.

6. Сервис заметок на Node.js

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

7. Банк-клиент

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

 

Ваше резюме после прохождения курса

• Должность: Фронтенд-разработчик
• Зарплата от: 100 000 ₽

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

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

Сертификат Skillbox

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

2 место. Курс «Профессия Фронтенд-разработчик» — Хекслет

https://ru.hexlet.io/programs/frontend

Стоимость: от 6 230 ₽/месяц в рассрочку на 18 месяцев или 98 000 ₽

Гарантированное трудоустройство?

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

1. Практика

Более 350 заданий в тренажере. 4 реальных проекта в портфолио. Разбор задач и вопросов с собеседований

2. Глубокая проработка тем

Мы не сторонники подхода «повтори за учителем». На Хекслете решение задач идет только через реальное понимание

3. Наставники

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

4. Стажировка

Участие в проектах с реальными пользователями. Полный цикл разработки в открытых проектах (исходный код доступен на Github)

Кому подойдёт обучение

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

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

 JavaScript

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

 HTML и CSS

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

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

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

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

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

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

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

 Качество

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

 Архитектура

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

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

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

 

Расписание

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

• Уроки

Теория, тесты, практические упражнения с автоматической проверкой в браузере

Самостоятельно, в удобное время

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

• Мероприятия

Вебинары, слаконары, сессии лайв-кодинга

Один раз в неделю, онлайн, проводит наставник

Если не получается присутствовать, можно смотреть в записи

• Проекты

Реальные приложения, сервисы и сайты — вы пишете их с нуля до релиза

Самостоятельно, в своем темпе, примерно месяц на каждый проект

Наставник контролирует и дает обратную связь

3 место. Курс «Факультет frontend-разработки» — GeekBrains

https://gb.ru/geek_university/frontend

Стоимость: Рассрочка на 36 месяцев — от 2 612 ₽ / мес

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

Кому подойдет курс

• Новичкам

Поможем начать карьеру frontend-разработчика, научим создавать красивые сайты и удобные интерфейсы.

• Начинающим

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

Поможем ускорить карьерный рост: вы получите новый опыт работы с HTML, CSS, JavaScript, ReactJS, Node.js.

• Практикующим

IT-специалистам

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

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

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

Курсы

Как учиться эффективно. Видеокурс от методистов GeekUniversity

— Особенности обучения в GeekUniversity
— Почему тяжело учиться
— Инструменты для самообразования
— Учимся от компетенций
— Особенности обучения взрослых
— Постановка целей по схеме SMART
— Как формулировать образовательный запрос

7 видеоуроков

1 час контента

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

— Создание переменных;
— Операции сложения, вычитания, деления и умножения;
— Логические операции;
— Работа с массивами;
— Функции.

Git. Базовый курс

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

I четверть

Веб-верстка

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

Курсы

HTML/CSS. Интерактивный курс

— Основные понятия веб-разработки
— Основы языка разметки HTML
— Основы таблиц стилей CSS
— Основные теги, псевдоклассы и псевдоэлементы
— Основы позиционирования и работа с технологией CSS Flexbox
— Работа с макетом в графическом редакторе Figma
— Основы создания адаптивного сайта
— Веб-стандарты и вспомогательные инструменты

1 месяц — 8 уроков

8 часов контента, 24 часа практики

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

— Позиционирование элементов. Практическая верстка
— Структура HTML5, знакомство с формами
— Практическое применение Bootstrap
— Препроцессоры: применение на практике
— Эффекты перехода и трансформации в CSS3
— CSS3: медиа-запросы, адаптивная верстка
— Практическое применение адаптивной верстки
— Grid layout, новые возможности CSS3

1 месяц — 8 уроков

12 часов контента, 24 часа практики

II четверть

Frontend-разработка

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

Проект

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

Курсы

Базовый курс JavaScript

— Основы языка JavaScript
— Основные операторы JavaScript
— Циклы, массивы и структуры данных
— Объекты в JavaScript
— Введение в DOM — объектную модель документа
— Обработка событий в JavaScript
— Урок-практикум
— Анонимные функции и замыкания

1 месяц — 8 уроков

12 часов контента, 24 часа практики

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

— Современный JavaScript
— Объектно-ориентированное программирование (ООП) в JavaScript
— Асинхронные запросы
— Регулярные выражения
— Фреймворк Vue.js
— Компоненты Vue.js
— JavaScript на сервере
— Тестирование и сборка кода

1 месяц — 8 уроков

12 часов контента, 24 часа практики

Инструменты сборки проектов

— Установка и работа с упаковщиками Parcel и Webpack
— Работа с таск-менеджером Gulp
— Работа с менеджером пакетов npm
— Подключение сторонних пакетов и библиотек

2 недели — 4 урока

6 часов контента, 12 часов практики

Vue.js

— Знакомство с Vue.js
— Взаимодействие компонентов Vue.js
— Методы и директивы
— Vue CLI для создания проекта приложения Vue.js
— Работа с маршрутизатором Vue Router
— Работа с паттерном управления состоянием Vuex
— Работа с API — программным интерфейсом приложения

1 месяц — 7 уроков

10 часов контента, 21 час практики

III четверть

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

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

Курсы

Библиотека ReactJS. Базовый курс

— Настройка среды разработки и первое React-приложение
— Жизненный цикл React-компонента
— Погружение в React и подключение UI-библиотеки
— Роутинг в React: разделение мессенджера на чаты
— Библиотека Redux для JavaScript
— Функции Redux middleware. Подключение роутера к Redux и хранение данных с помощью библиотеки Redux persist
— Работа с API
— Прогрессивное веб-приложение (Progressive Web App)

1 месяц — 8 уроков

12 часов контента, 24 часа практики

Платформа Node.js

— Знакомство с Node.js
— Консольные программы
— Работа с сетевыми запросами
— Фреймворк Express
— Работа с MySQL — системой управления базами данных
— Аутентификация и авторизация
— Работа с архитектурным подходом REST API
— Веб-сокеты (WebSockets)

1 месяц — 8 уроков

12 часов контента, 24 часа практики

IV четверть

Разработка от идеи до релиза

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

Проекты

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

Курсы

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

— Введение в язык программирования TypeScript
— Продвинутая система типов в TypeScript
— Классы, пространство имён, конфигурирование TypeScript
— Добавление TypeScript в React
— Концепция MobX
— Тестирование приложения: React + TypeScript
— Технология SSR в React

1 месяц — 7 уроков

10 часов контента, 21 час практики

Командная разработка дипломного проекта

— Проект и продукт, MVP продукта, команда
— Требования к проекту и техническое задание 
— Инструменты
— Методологии разработки
— Проблемы и их решение
— Практика командной работы, качество
— Релиз — выход продукта в свет
— Вывод продукта на рынок и монетизация

1 месяц — 8 уроков

12 часов контента, 24 часа практики

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

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

Курсы

Подготовка к техническому собеседованию

— HTML и CSS
— JavaScript
— Инструменты сборки проектов
— Vue.js
— Основы разработки бэкенда для веб-приложения
— Пробное техническое собеседование

2 недели — 6 уроков

9 часов контента, 18 часов практики

Основы баз данных. Видеокурс

— Реляционные базы данных
— Установка СУБД
— Проектирование базы данных, нормальные формы
— SQL-команды: CREATE, INSERT, DISTINCT, ORDER BY, LIMIT, SELECT и WHERE, DELETE и UPDATE
— Согласованность данных
— Внешний ключ
— Создание таблиц с отношением «многие ко многим»
— Составной первичный ключ
— Объединение данных из нескольких таблиц
— Операторы: INNER JOIN, LEFT JOIN, RIGHT JOIN, UNION, GROUP BY
— Агрегирующие функции
— Индексы
— Транзакции

20 видеоуроков

4 часа контента

Базы данных

— Вебинар. Установка окружения и DDL-команды
— Видеоурок. Управление базой данных и работа с языком запросов SQL
— Вебинар. Введение в проектирование баз данных
— Вебинар. CRUD-операции
— Видеоурок + вебинар: операторы, фильтрация, сортировка и ограничение. Агрегация данных
— Видеоурок + вебинар: сложные запросы
— Видеоурок + вебинар: транзакции, переменные, представления. Администрирование. Хранимые процедуры и функции, триггеры
— Видеоурок + вебинар: Оптимизация запросов. NoSQL

1 месяц — 12 уроков

18 часов контента, 36 часов практики

Linux. Рабочая станция

— Установка и знакомство с Linux
— Настройка интерфейса командной строки
— Управление пользователями и группами
— Загрузка ОС и процессы
— Устройство файловой системы Linux. Понятия файла и каталога
— Введение в скрипты Bash. Планировщики задач crontab и at
— Управление пакетами и репозиториями. Основы сетевой безопасности
— Введение в Docker

1 месяц — 8 уроков

12 часов контента, 24 часа практики

Фриланс-разработчик: курс подготовки

— Как работает фриланс
— Первые шаги на фриланс-бирже
— Как получать больше заказов на фрилансе
— Как достигнуть целей на фрилансе и не утонуть в работе
— Кейсы и лайфхаки опытных фрилансеров

5 уроков

7 часов контента, 15 часов практики

Подготовка к поиску работы

— Как составить резюме, которое точно заметят
— Составляем карту поиска работы
— Зачем нужны сопроводительные письма
— Что вас ждет на собеседовании с HR

5 уроков

7 часов контента, 15 часов практики.

https://htmlacademy.ru/profession/frontender

Стоимость: 139 000 ₽

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

Готовим востребованных разработчиков

Ваша подготовка будет проходить в два этапа

Первый этап

Профессиональное обучение

Это серьёзное обучение, которое длится восемь месяцев и построено на базе профессиональной триады «критерии-проекты-наставники».

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

Учебные проекты

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

Вот примеры некоторых из них.

 

Второй этап

Производство

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

 

Как проходит обучение на курсе

• 1 месяц

Подготовка к профессии

• 2 месяца

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

• 2 месяца

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

• 2 месяца

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

• 1 месяц

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

• 1 месяц

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

• 2 недели

Грейдирование

• 3 месяца

Акселератор

• 3 месяца

Стажировка в «Лиге А.»

 

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

1 месяц

Подготовка к профессии

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

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

В этот минимум входят базовые знания HTML и CSS, основы языка JavaScript и основы работы с браузерными API с помощью JavaScript, а также умение использовать инструменты командной разработки, а именно Git и GitHub.

2 месяца

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

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

2 месяца

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

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

2 месяца

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

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

1 месяц

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

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

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

1 месяц

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

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

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

6 месяцев

Производство

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

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

После акселератора произойдёт плавный переход к оплачиваемой стажировке в «Лиге А.». Мы постепенно погрузим вас в команду и процессы Лиги, проведя от небольших вводных задач до полноценных проектов.

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

Курс «Как стать мидл фронтенд-разработчиком» — АНО ДПО «ШАД», ООО «Яндекс»

https://practicum.yandex.ru/middle-frontend/

Стоимость: 78 000 ₽ при оплате сразу за 5 месяцев обучения.

Это продвинутая программа обучения для разработчиков, которые уверенно чувствуют себя с HTML, CSS и JavaScript, имеют опыт работы с одним из фреймворков. Мидл frontend-разработчик вдумчиво выбирает технологии для реализации проекта и может аргументировать свой выбор. Уверенно чувствует себя в процессах командной разработки и самостоятельно решает комплексные задачи. На курсе мы поможем систематизировать подход к решению рабочих задач и стать более уверенным в своих компетенциях. Вы сможете ускорить профессиональное развитие и расширить свою зону ответственности в работе над проектами.

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

Быстрый рост за счёт прокачки навыков и систематизации знаний

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

Понимание паттернов разработки и смежных областей в вебе

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

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

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

 

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

1

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

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

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

2

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

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 проект в портфолио

3

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

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

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

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

В этом модуле расскажем, как:  
•   ориентироваться в современных подходах к разработке приложений
•   настроить роутинг, если ваше приложение на React
•   хранить данные, а также разберём Redux, Redux-Thunk (или Redux-Saga), а также Reselect и Sequelize
•   работать с безопасностью в React: SQL injection, XSS, CSP, CORS
•   подружить TypeScript и React
•   работает бэкенд: базы данных (MongoDB и PostgreSQL), Node.js и биллинг
•   ещё больше можно работать с API: познакомитесь с Service Workers и узнаете, что такое Canvas API
•   запускать скрипты в «фоновом режиме» при помощи Web Workers
•   настраивать Server-Side Rendering и как добавить его в проект
•   тестировать приложение при помощи Jest
•   реализовать различные способы авторизации: при помощи OAuth и социальных сетей и не только
•   настроить CI/CD в GitHub Actions
•   развернуть приложение на Яндекс.Облаке и чем полезен Nginx
 
+ 1 проект в портфолио

4

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

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

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

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

5

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

50 часов

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

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

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

Курс «Frontend» — KARPOV.COURSES

https://karpov.courses/frontend

Стоимость: 80 000 ₽

ВАШИ НАВЫКИ == ЧЕРЕЗ 4 МЕСЯЦА

Языки: JS, TypeScript, CSS, HTML

Инструменты: React, Redux, Redux Toolkit, БЭМ, ESlint, Stylelint, Prettier, Sentry, Gitlab CI, Nginx, Firebase, Jest, React Testing Library, React Router, Figma, Webpack

Задачи: вёрстка, адаптивность, роутинг, тёмная тема, PWA, офлайн, доступность, производительность, авторизация, MVP из готовых решений, тестирование, мониторинг

ДЛЯ КОГО ЭТА ПРОГРАММА:

JUNIOR FRONTEND

Вы уже работаете в компании или на фрилансе и хотите вырасти в middle frontend специалиста. Мы поможем вам получить все навыки, которые нужны на работе.

MIDDLE FRONTEND

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

BACKEND РАЗРАБОТЧИК

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

ЧТО НЕОБХОДИМО ДЛЯ КУРСА:

HTML

Знание синтаксиса и умение верстать

CSS

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

JAVASCRIPT

Базовые знания (синтаксис, переменные, функции, циклы, замыкания, this, fetch)

GIT

Базовые знания (умение создать репозиторий, создать ветку, закоммитить изменения, запушить в ветку, смержить с мастером)