СТАРТ ПРОГРАММЫ
10 ОКТЯБРЯ

ФОРМАТ ОБУЧЕНИЯ
ОНЛАЙН
КОМУ ПОДОЙДЁТ
ДЛЯ JUNIOR/MIDDLE

ПОЭТАПНАЯ ОПЛАТА
НА 4 МЕСЯЦА
ДМИТРИЙ БЕЗУГЛЫЙ
Научим строить frontend для реального бизнеса.
FRONTEND.
ОБУЧЕНИЕ У НАС |
МЫ ПРОЙДЁМ ПОЛНЫЙ ЦИКЛ СОЗДАНИЯ ВЕБ-ПРИЛОЖЕНИЙ
Долгое время считалось, что frontend — это про вёрстку и интерактивность, но сегодня разработчику всё чаще приходится выходить за пределы браузера и копаться в смежных областях.
Мы все были джунами и прошли этот путь:
изучил основы фронтенда
попал в компанию
сделал несколько задач и понял, что знаний не хватает
×
Нехватка системных знаний мешает подниматься по карьерной лестнице. Особенно сильно это заметно на собеседованиях: кандидаты вроде бы знают, как решать типовые задачи, но если копнуть глубже, сразу теряются.
Сильный frontend-разработчик чётко понимает, как работает веб, уверенно общается с бэкендерами, тестировщиками, девопсами и даже может сам залезть руками и что-то настроить.
ЗДЕСЬ >>> НАЧИНАЕТСЯ ТВОЙ ПУТЬ В МИР FRONTEND!
Вашими наставниками будут ведущие специалисты из VK, Яндекс, Semrush, Mail.ru///
VK
Артур Стамбульцян
Антон Резник
VK, EX. YANDEX
Дмитрий Безуглый
VK
КАК ПРОХОДИТ ОБУЧЕНИЕ
ДЛЯ КОГО ЭТА ПРОГРАММА:
JUNIOR FRONTEND
Вы уже работаете в компании или на фрилансе и хотите вырасти в middle frontend специалиста. Мы поможем вам получить все навыки, которые нужны на работе.
MIDDLE FRONTEND
Вы успешно решаете рабочие задачи, но хотите структурировать знания и глубже копнуть в инструментарий. Мы поможем получить навыки, которые позволят вам расти выше.

ТЕХНОЛОГИИ, ИСПОЛЬЗУЕМЫЕ НА КУРСЕ:

ПРОГРАММА КУРСА ://
|
Частая ошибка разработчиков — пытаться создать идеальный продукт сразу. Однако, как показывает практика, гораздо важнее сначала быстро создать минимально жизнеспособный продукт, а уже потом заниматься его доработкой и улучшением. В этом модуле мы напишем работающий прототип новостной ленты с помощью React, Webpack, TypeScript и GitHub Pages.
Открыть программу
1. HTML, CSS, JavaScript
Создадим нашу первую страницу без инструментов, добавим по необходимости интерактивность и столкнёмся с первыми сложностями и неудобствами в разработке.
2. Деплой на GitHub Pages
Первая страница готова — самое время её задеплоить.
3. Введение в React: JSX, hooks
Теперь, когда на собственном опыте мы поняли, что на чистом JavaScript работать с состоянием неудобно, познакомимся с React. Разберёмся, что это такое, зачем он нужен и как его запустить, и перепишем с помощью него наш проект.
4. Webpack + NodeJS
Для дальнейшей работы с React рассмотрим, зачем нужна NodeJS и что такое Webpack.
5. API, fetch, CORS
У нас готов интерфейс на React — пора подлить настоящих данных. Разберёмся с тонкостями и трудностями в общении с сервером.
6. TypeScript
Типизируем наш код, чтобы каждый раз не думать, что нам приходит от API.
|
Сегодня frontend-разработчику важно не только уметь писать клиентский код, но и знать, как этот код доставлять на сервер. Эти знания позволяют находить общий язык с остальными членами команды разработки и существенно повышают ценность специалиста на рынке труда. В этом модуле мы поговорим о том, как собирать, доставлять и открывать код.
Открыть программу
1. Регистрация домена
Выкатим наш сайт на GitHub и сделаем так, чтобы в названии не было слов github.io. Для этого заведём свой домен.
2. Как браузер открывает сайт: IP, DNS
Рассмотрим, как устроен браузер под капотом и как он открывает сайт.
3. Связываем домен и GitHub Pages
Разберёмся, как сделать так, чтобы код лежал на серверах GitHub Pages, но при этом сайт открывался по нашему домену.
4. Роутинг в современных веб-приложениях, React Router
Настало время сделать новостную страницу. Для этого познакомимся с роутингом: разберёмся, в чем его суть и какие у него есть нюансы.
5. Заводим свой сервер: Linux, Nginx, VPS, VDS, SSH
GitHub Pages — это хостинг с довольно скудным функционалом. Рассмотрим ограничения хостинга и обойдём их, подключив свой сервер.
6. CI/CD через GitHub
Научимся собирать сайт при пуше в мастер, чтобы не тратить время на рутину.
7. Как угнать данные: HTTP/HTTPS, SSL
На практическом примере рассмотрим, как хакеры угоняют данные в общественных местах, и поймём, почему HTTPS — это важно.
|
Админка — это сайт, доступный владельцам для управления основным приложением. Админки делаются с помощью готовых технологий, чтобы не тратить время дизайнеров и разработчиков. В этом модуле мы научимся собирать админку быстро и эффективно.
Открыть программу
1. Быстрый интерфейс без дизайна: Bootstrap
Админка необходима для создания рекламных постов, которые будут попадать в ленту. Научимся быстро создавать её интерфейс с помощью популярного фреймворка Bootstrap.
2. Firebase: backend для frontend
Так же быстро развернём backend для создания и получения постов из админки.
3. Авторизация: HTTP, Cookie, JWT, oAuth
Админка готова, но мы не можем выкатить её на сервер, потому что тогда её увидят все пользователи. Научимся делать так, чтобы интерфейс админки был доступен только администраторам.
|
Любой интерфейс сталкивается с рядом требований, которые при этом ещё и меняются со временем. Сегодня актуальными трендами являются мобильная версия, тёмная тема и плавные анимации. Frontend-разработчик должен идти в ногу со временем, поэтому мы подробно рассмотрим все эти требования.
Открыть программу
1. Как браузер рисует страницы
Рассмотрим, как устроена отрисовка страниц браузером. Это поможет нам понять, как делать адаптивные сайты и плавные анимации.
2. Анимации
Научимся делать плавные переходы между страницами, добавим предзагрузку изображений и предложение подписаться на новости.
3. Делаем сортировку по дате
Чтобы пользователь имел возможность сортировать новости по дате, ему необходимо показывать удобный календарь. Писать его вручную довольно долго, поэтому научимся искать уже готовые решения и встраивать их на сайт.
4. Мобильная версия и темная тема: media queries, window.onresize
Разберёмся, как создать адаптивный интерфейс и сделать тёмную тему.
|
PWA — это ряд требований к веб-приложениям, сформированных компанией Google. Доступность приложения в офлайне — одно из основных требований, которое значительно повышает его юзабилити. Также в индустрии всё чаще встречается запрос на инклюзивность, поскольку часть аудитории веб-сервиса — люди с ограниченными возможностями. Им необходимо обеспечить комфортные условия пользования продуктом. В этом модуле мы подробно остановимся на каждом из этих актуальных требований.
Открыть программу
1. Service Worker, IndexedDB
Рассмотрим, как сделать интерфейс нашего продукта доступным в офлайне.
2. PWA
Разберёмся, что такое PWA, и добавим возможность сохранить веб-сервис на экран смартфона.
3. Локализация
Расширим охват аудитории: предоставим англоязычным пользователям возможность пользоваться нашим продуктом.
4. Доступность: Lighthouse, VoiceOver
Сделаем интерфейс нашего веб-сервиса доступным для людей с ограниченными возможностями: добавим доступность с клавиатуры и корректное озвучивание интерфейса специальными программами.
|
Рано или поздно кода станет так много, что сайт начнёт тормозить. Поэтому важной задачей является повышение производительности за счёт увеличения скорости загрузки ресурсов и быстроты выполнения кода. В большинстве браузеров есть специальные инструменты для анализа производительности. В этом модуле научимся с помощью них находить причины проблем с производительностью и оперативно их устранять.
Открыть программу
1. Откуда берутся лаги. Профилирование, тонкости и нюансы
Познакомимся с основными инструментами для работы над производительностью и научимся находить проблемные места в продукте.
2. Why-did-you-render, memo, useMemo, useCallback, виртуализация
Изучим практические приёмы оптимизации фронтенда на React.
3. Webpack-analyze
Рассмотрим популярный инструмент для анализа объёма клиентского кода.
4. Клиентские оптимизации скорости загрузки сайта
Научимся настраивать код-сплиттинг, а также делать сжатие кода и картинок.
5. Серверные оптимизации скорости загрузки сайта
Разберём популярные алгоритмы сжатия: Brotli и gzip. Научимся отдавать браузеру более лёгкий код.
|
По мере развития продукта становится всё сложнее следить за тем, чтобы новые фичи не ломали сайт. Чтобы быть уверенным в том, что мы пишем работоспособный код, необходимо покрывать его автотестами — специальными программами, которые выявляют ошибки в коде. В этом модуле мы рассмотрим, какие бывают тесты и как их писать. Также затронем тему мониторинга ошибок, который позволяет вовремя узнавать о проблемах в работе продукта.
Открыть программу
1. Какие бывают тесты
Разберёмся с теорией и нюансами тестирования. Рассмотрим различные виды тестов: модульные, интеграционные, снапшот и E2E.
2. UNIT-тесты: Jest, TDD
Научимся писать UNIT-тесты и рассмотрим, для каких случаев хорошо подходит Test Driven Development.
3. E2E: Cypress
Cypress даёт возможность писать сценарные тесты. Это нужно, чтобы каждый раз не тестировать интерфейс вручную. Рассмотрим, как настраивать этот инструмент, и научимся на нём писать.
4. Статический анализ кода: ESLint, Stylelint
Статический анализ позволяет отлавливать ошибки прямо во время написания кода. Узнаем, какие существуют анализаторы кода и как их настраивать.
5. Мониторинг: Sentry
Мониторинг помогает оперативно понять, что у пользователей что-то идёт не так. Sentry — один из популярных инструментов для мониторинга. Научимся им пользоваться.
|
В некоторых ситуациях применение сложных инструментов разработки себя не оправдывает и является излишним. В этом модуле мы поговорим о том, как в очень сжатые сроки и в условиях нехватки ресурсов быстро запустить работающий продукт.
Открыть программу
1. Create React App
Познакомимся с Create React App — набором инструментов, который избавит нас от необходимости настраивать сборку вручную.
2. Firebase
Воспользуемся Firebase, чтобы не тратить время на бэкенд.
3. NextJS
Теперь необходимо без backend настроить серверный рендеринг. В этом нам поможет фреймворк NextJS.
4. Heroku, Vercel и друзья
Рассмотрим популярные платформы, на которых можно быстро задеплоить своё веб-приложение.
НА КУРСЕ МЫ С НУЛЯ И ПОШАГОВО ОТВЕЧАЕМ НА ВОПРОС, КАК БЫТЬ ФРОНТЕНДЕРОМ СЕГОДНЯ
Тимлид VK, куратор курса
ДМИТРИЙ БЕЗУГЛЫЙ
На учёбу наши студенты тратят в среднем 10 часов в неделю
ДОМАШНИЕ ЗАДАНИЯ ВЫ РЕШАЕТЕ НА НАШЕЙ ИНФРАСТРУКТУРЕ
Все лекции доступны в записи
ОБУЧЕНИЕ ПРОХОДИТ В ИНТЕНСИВНОМ ФОРМАТЕ ПО 3 ЗАНЯТИЯ В НЕДЕЛЮ
Сегодня frontend пестрит изобилием информации, которая требует систематического изучения. Мы хотим, чтобы у студентов формировалась полная картина веб-разработки, поэтому мы будем идти от проблемы и объяснять, какую задачу решает конкретный инструмент или технология.
ПРОГРАММА ТРУДОУСТРОЙСТВА>>>
Помощь с резюме и сопроводительным письмом, отработка навыков самопрезентации
Рекомендации партнёрам, среди которых Озон, Яндекс, Авито и др.
Сопровождение наших выпускников в трудоустройстве до момента оффера
ПОЛНАЯ "УПАКОВКА"
РЕКОМЕНДАЦИИ КОМПАНИЯМ
СОПРОВОЖДЕНИЕ
— Как только вы будете готовы, наши HR отправят ваше резюме с рекомендациями компаниям-партнёрам
— Свой прогресс в трудоустройстве вы будете отслеживать с помощью специальных дневников
— Работать над ошибками мы будем вместе с вами: мы подскажем, что нужно подтянуть и в каком направлении лучше мыслить, чтобы эффективнее справляться с задачами на собеседованиях.
— Наша цель — довести вас до оффера.
ПОМОЖЕМ С ПОИСКОМ РАБОТЫ, УСИЛИМ ВАШЕ РЕЗЮМЕ И НАУЧИМ ПРАВИЛЬНО ПРЕЗЕНТОВАТЬ СВОИ НАВЫКИ
У НАС ПРЕПОДАЮТ:
УЧИТЕСЬ У >ЛУЧШИХ>
СТОИМОСТЬ
Все модули курса. Доступ к поддержке от наших преподавателей, готовых ответить на любые вопросы. Возможность работы на удалённом сервере.
25 000 ₽
ПОМЕСЯЧНО:
80 000 ₽
ПОЛНАЯ ОПЛАТА:
Оплата в течение
4 месяцев
Скидка 20 000 ₽
при полной оплате
100 000₽
> Производительный frontend
> Тестирование и мониторинг
> Frontend на коленке
> Поддержка от преподавателей
> Работа на удалённом сервере
> Новостная лента 1.0
> FrontOps
> Быстрая админка
> Модный frontend
> Офлайн и доступность
УЗНАТЬ БОЛЬШЕ
Мы свяжемся с вами и ответим на все ваши вопросы по курсу. Если вы хотите оплатить курс, перейдите по этой ссылке.
Удобный способ связи
FAQ
Какой уровень требуется для прохождения курса?
Мы ожидаем, что вы умеете верстать, знаете HTML, CSS и базовый JS: синтаксис, переменные, функции, циклы, замыкания. Также плюсом будет понимание Git на базовом уровне. Если вы его не знаете, рекомендуем пройти бесплатный курс GitHowTo.
Можно ли посмотреть отзывы уже прошедших курс студентов?
Это первый запуск курса. Как студенты первого потока вы получите доступ ко всем обновлениям в течение года, если курс будет обновляться.
Как оформить поэтапную оплату?
Поэтапная оплата происходит равными платежами раз в месяц. Для оплаты поэтапно просто перейдите по ссылке на странице оплаты.
Как проходит обучение?
Вы смотрите лекции, выполняете домашние задания на удалённом сервере. А если у вас появляются вопросы, вы можете задавать их менторам или преподавателям в Slack.
Если я пропущу лекцию, смогу ли я посмотреть её потом?
Да, конечно. Записи лекций будут вам всегда доступны.
Какой язык программирования мы будем использовать?
Frontend будем писать на JavaScript, а как только нам станет неудобно, сразу перейдём на TypeScript.
Какие технологии будут использоваться на курсе?
На курсе будут использоваться все самые популярные технологии, которые являются стандартом качества в области frontend-разработки в компаниях по всему миру.
Могу ли я получить помощь в перерывах между занятиями?
Конечно. Все студенты курса общаются с преподавателями и между собой в Slack. В чате можно задать любые вопросы по обучению, наши преподаватели обязательно ответят вам.
Я начал курс, но мне не понравилось. Вы вернёте деньги?
Да. В течение двух недель после начала курса вы можете вернуть оплату за весь курс. Также в течение месяца мы готовы вернуть вам сумму за вычетом уже пройденного материала.
Получу ли я сертификат?

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


Для этого необходимо выполнить два условия:

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

2. Выполнить финальный проект и получить на него рецензию.


Однако важно помнить, что как при приёме на работу, так и непосредственно в работе главное — это полученные Hard и Soft Skills.

Есть ли у вас образовательная лицензия?
Нет. Мы оказываем информационно-консультационные услуги.
У меня есть свои задачи по работе с данными, которые я хочу научиться решать. Поможет ли мне ваш курс?
Уверены, что поможет. Вы всегда можете посоветоваться в чате с кураторами или другими студентами.
ПО ЛЮБЫМ ВОПРОСАМ ОБРАЩАЙТЕСЬ ЧЕРЕЗ ФОРМУ НА САЙТЕ ИЛИ НА НАШУ ПОЧТУ
ПО ЛЮБЫМ ВОПРОСАМ ОБРАЩАЙТЕСЬ 
НА НАШУ ПОЧТУ
УЗНАТЬ БОЛЬШЕ
Мы свяжемся с вами и ответим на все ваши вопросы по найму учеников.