39 курсов по Frontend разработке доступных для прохождения в 2024 году

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

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

С нуля изучите 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

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

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

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

• Верстать сайты на языках HTML и CSS
• Работать с фреймворками
• Программировать на JavaScript и TypeScript
• Разрабатывать серверные приложения на Node js
• Работать в команде как профессионал.

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

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

1. Веб-вёрстка. Базовый уровень
2. Javascript. Базовый уровень
3. Фреймворк на выбор: React.js, Vue.js, Angular
4. Node js
5. Typescript. Базовый уровень
6. Карьерный курс: трудоустройство и развитие
7. Трудоустройство с помощью Центра Карьеры
8. Дополнительные курсы.

Приобретаемые профессиональные навыки:

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

Освойте современную профессию: вы научитесь создавать сайты и приложения, проектировать интерфейсы и работать со сложными инструментами 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 часов практики.

Освойте современную профессию: вы научитесь создавать сайты и приложения, проектировать интерфейсы и работать со сложными инструментами 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

Профессиональная frontend-разработка на ReactJS

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

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

• Научитесь создавать сайты и приложения, проектировать интерфейсы и работать с 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

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

Вы научитесь создавать удобные и эффектные сайты, приложения и сервисы. Освоите одну из самых актуальных профессий и станете востребованным специалистом для любой IT компании. Изучите синтаксис языка Javascript, познакомитесь с переменными и операторами, научитесь писать и структурировать свой код и разбираться в чужом. Освоите HTML до продвинутого уровня, а также познакомитесь с крутыми возможностями CSS.Изучите основы тестирования верстки + DevTools. Поймёте, как улучшить пользовательский опыт (UX) и достичь идеальной верстки.

• 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

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

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

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

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

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

2. Javascript

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

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

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

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

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

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

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

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

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

Необходимы:

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

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

Неделя 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.
• Освоение новых технологий за короткие сроки.

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

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 Basics
• HTML + CSS Basics
• HTML + CSS Advanced
• Javascript Advanced
• TypeScript
• React
• Redux
• Employment
• Algorithms and data structures

В отличие от верстальщика, фронтенд-разработчик владеет продвинутыми инструментами верстки, хорошо знает и умеет использовать 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 и умение решать базовые алгоритмические задачи.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

4. Разработка 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 - Выгрузка на хостинг. Фриланс и дипломный проект

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

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

1. Практика

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

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

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

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

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

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

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

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

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

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

 JavaScript

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

 HTML и CSS

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

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

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

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

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

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

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

 Качество

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

 Архитектура

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

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

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

Расписание

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

• Уроки

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

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

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

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

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

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

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

• Проекты

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

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

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

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

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

• Базовая настройка и как правильно проходить курс
• Веб-стандарты и лучшие решения (такие как доступность и кросс-браузерная совместимость)
• 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 часов чтения/упражнений)

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

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

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

Первый этап

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

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

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

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

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

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

Второй этап

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

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

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

• 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 месяцев

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

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

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

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

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

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

• Верстать современные адаптивные страницы
• Создавать сайты с нуля
• Разрабатывать интерактивные модули для сайтов на 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 и управления проектами

Это продвинутая программа обучения для разработчиков, которые уверенно чувствуют себя с 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 технических мок-интервью
•   ответы на вопросы и персональная помощь в доработке резюме и других артефактов
•   поддержка и помощь куратора трудоустройства

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

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

• история программирования
• развитие вычислительной техники
• кодирование информации
• двоичная система
• обработка информации процессором
• понятие потока, многозадачности
• оперативная память, регистры, прерывания
• программирование, уровень абстракции
• исполнение кода компиляция 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
• копирование объекта

ВАШИ НАВЫКИ == ЧЕРЕЗ 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

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