ДМИТРИЙ БЕЗУГЛЫЙ
Научим готовить frontend для реального бизнеса.
FRONTEND.
ОБУЧЕНИЕ У НАС
|
ПОЭТАПНАЯ ОПЛАТА
НА 4 МЕСЯЦА
КОМУ ПОДОЙДЁТ
ДЛЯ JUNIOR/MIDDLE
ФОРМАТ ОБУЧЕНИЯ
ОНЛАЙН
СТАРТ ПРОГРАММЫ
10 ОКТЯБРЯ
ПРОЙДИТЕ ПОЛНЫЙ ЦИКЛ СОЗДАНИЯ ВЕБ-ПРИЛОЖЕНИЙ
Долгое время считалось, что frontend — это про вёрстку и интерактивность. Однако сегодня разработчику всё чаще приходится выходить за пределы браузера и разбираться в смежных областях.
Мы все были джунами и прошли этот путь:
изучил основы фронтенда
попал в компанию
сделал несколько задач и понял, что знаний не хватает
×
Нехватка системных знаний мешает подниматься по карьерной лестнице. Особенно это заметно на собеседованиях: кандидаты вроде бы знают, как решать типовые задачи, но если копнуть глубже, сразу теряются.
Сильный frontend-разработчик чётко понимает, как работает веб, уверенно общается с бэкендерами, тестировщиками, девопсами и даже может самостоятельно что-то настроить.
КАК ПРОХОДИТ ОБУЧЕНИЕ:
О курсе
Проект
Смежные темы
Тонкости разработки
Поддержка студентов
Инфраструктура
Поиск работы
УЗНАЙТЕ ПОДРОБНЕЕ О КУРСЕ
Преподаватели расскажут о том, что такое современный frontend, как появился этот курс, кому он подойдёт и что именно вы будете изучать.
НАЧИНАЙТЕ С НУЛЯ, ОТТАЛКИВАЯСЬ ОТ РЕАЛЬНЫХ ПРОБЛЕМ
Наш проект начнётся с голого HTML и CSS на GitLab Pages, а закончится готовым сервисом на React со своим деплоем на собственном сервере. Мы перейдём на React, чтобы осознать проблемы разработки и по-настоящему разобраться, зачем нужен тот или иной инструмент.
ИЗУЧАЙТЕ СМЕЖНЫЕ ТЕМЫ
Современный frontend-разработчик должен уметь выходить за пределы браузера. Деплой, CI/CD, мониторинг, кэширование, оптимизация на сервере — всё это поможет вам делать качественные, быстрые интерфейсы и решать сложные проблемы.
РАЗБИРАЙТЕ ТОНКОСТИ И НЮАНСЫ РАЗРАБОТКИ
Мы не теоретики — каждый день мы создаём интерфейсы для миллионов пользователей и уже набили шишки и собрали лайфхаки, как разрабатывать быстро и эффективно. Все эти знания и навыки мы передадим вам на этом курсе.
ЗАДАВАЙТЕ ЛЮБЫЕ ВОПРОСЫ В ПОДДЕРЖКУ
— Обсуждайте задачи и проекты с преподавателями и менторами
— Общайтесь в чате с другими студентами
— Вашими наставниками будут frontend-разработчики из ведущих компаний России
ИСПОЛЬЗУЙТЕ НАШУ ИНФРАСТРУКТУРУ

— Работайте на выделенном сервере
— Практикуйтесь, решая реальные задачи
— Изучайте решения преподавателей и других студентов
По окончании курса мы помогаем нашим студентам устроиться на работу: объясняем, как правильно составить резюме и сопроводительное письмо, отрабатываем навыки самопрезентации, а затем отправляем ваше резюме с рекомендациями компаниям-партнёрам. В течение всего процесса трудоустройства мы поддерживаем и сопровождаем наших студентов — вплоть до получения желаемого оффера.
УСТРАИВАЙТЕСЬ НА РАБОТУ ПОСЛЕ КУРСА
НАЧИНАЙТЕ С НУЛЯ, ОТТАЛКИВАЯСЬ ОТ РЕАЛЬНЫХ ПРОБЛЕМ
Наш проект начнётся с голого HTML и CSS на GitLab Pages, а закончится готовым сервисом на React со своим деплоем на собственном сервере. Мы перейдём на React, чтобы осознать проблемы разработки и по-настоящему разобраться, зачем нужен тот или иной инструмент.
79
РАЗБИРАЙТЕ ТОНКОСТИ И НЮАНСЫ РАЗРАБОТКИ
Мы не теоретики — мы каждый день создаём интерфейсы для миллионов пользователей и уже набили шишки и собрали лайфхаки, как разрабатывать быстро и эффективно. Все эти знания и навыки мы передадим вам на этом курсе.
90
ЗАДАВАЙТЕ ЛЮБЫЕ ВОПРОСЫ В ПОДДЕРЖКУ
— Обсуждайте задачи и проекты с преподавателями и менторами
— Общайтесь в чате с другими студентами
— Вашими наставниками будут frontend-разработчики из ведущих компаний России
108

ИСПОЛЬЗУЙТЕ НАШУ ИНФРАСТРУКТУРУ

— Работайте на выделенном сервере
— Практикуйтесь на данных из реальных задач
— Изучайте решения преподавателей и других студентов
Вы успешно решаете рабочие задачи, но хотите структурировать знания и глубже копнуть в инструментарий. Мы поможем получить навыки, которые позволят вам расти выше.
MIDDLE FRONTEND
Вы уже работаете в компании или на фрилансе и хотите вырасти в middle frontend специалиста. Мы поможем вам получить все навыки, которые нужны на работе.
JUNIOR FRONTEND
ДЛЯ КОГО ЭТА ПРОГРАММА:
BACKEND РАЗРАБОТЧИК
Вы хотите быть Fullstack разработчиком — мы поможем вам приобрести необходимые компетенции и делать более интересные задачи, за которые вам будут платить больше.
ЧТО НЕОБХОДИМО ДЛЯ КУРСА:
Знание синтаксиса и умение верстать
HTML
Знание базы для оформления сайтов (специфичность, тяжелые селекторы, блочная модель)
CSS
Базовые знания (синтаксис, переменные, функции, циклы, замыкания, this, fetch)
JAVASCRIPT
Базовые знания (умение создать репозиторий, создать ветку, закоммитить изменения, запушить в ветку, смержить с мастером)
GIT
НА КУРСЕ ИСПОЛЬЗУЕМ >>>
ПРОГРАММА КУРСА ://
|
Частая ошибка разработчиков — пытаться создать идеальный продукт сразу. Однако, как показывает практика, гораздо важнее сначала быстро создать минимально жизнеспособный продукт, а уже потом заниматься его доработкой и улучшением. В этом модуле мы напишем работающий прототип новостной ленты с помощью React, Webpack, TypeScript и GitLab Pages.
Открыть программу
1. HTML, CSS, JavaScript
Создадим нашу первую страницу без инструментов, добавим по необходимости интерактивность и столкнёмся с первыми сложностями и неудобствами в разработке.
2. Деплой на GitLab 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. Связываем домен и GitLab Pages
Разберёмся, как сделать так, чтобы код лежал на серверах GitLab Pages, но при этом сайт открывался по нашему домену.
4. Роутинг в современных веб-приложениях, React Router
Настало время сделать новостную страницу. Для этого познакомимся с роутингом: разберёмся, в чем его суть и какие у него есть нюансы.
5. Заводим свой сервер: Linux, Nginx, VPS, VDS, SSH
GitHub Pages — это хостинг с довольно скудным функционалом. Рассмотрим ограничения хостинга и обойдём их, подключив свой сервер.
6. CI/CD через GitLab
Научимся собирать сайт при пуше в мастер, чтобы не тратить время на рутину.
7. Как угнать данные: HTTP/HTTPS, SSL
На практическом примере рассмотрим, как хакеры угоняют данные в общественных местах, и поймём, почему HTTPS — это важно.
|
Админка — это сайт, доступный владельцам для управления основным приложением. Админки делаются с помощью готовых технологий, чтобы не тратить время дизайнеров и разработчиков. В этом модуле мы научимся собирать админку быстро и эффективно.
Открыть программу
1. Быстрый интерфейс без дизайна: Bootstrap
Админка необходима для создания рекламных постов, которые будут попадать в ленту. Научимся быстро создавать её интерфейс с помощью популярного фреймворка Bootstrap.
2. Firebase: backend для frontend
Так же быстро развернём backend для создания и получения постов из админки.
3. Авторизация: HTTP, Cookie, JWT, oAuth
Админка готова, но мы не можем выкатить её на сервер, потому что тогда её увидят все пользователи. Научимся делать так, чтобы интерфейс админки был доступен только администраторам.
|
Когда на рынке есть несколько конкурирующих продуктов, важно, чтобы ваш продукт был привлекательнее с точки зрения UX. Продукт с богатым функционалом, но сделанный небрежно, проигрывает более модному. Плавные и продуманные анимации, адаптация под разные экраны и тёмная тема — эти UX оптимизации могут сильно повлиять на популярность вашего продукта.
Открыть программу
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 и друзья
Рассмотрим популярные платформы, на которых можно быстро задеплоить своё веб-приложение.
НА КУРСЕ МЫ С НУЛЯ И ПОШАГОВО ОТВЕЧАЕМ НА ВОПРОС, КАК БЫТЬ ФРОНТЕНДЕРОМ СЕГОДНЯ
На учёбу наши студенты тратят в среднем 10 часов в неделю
ДОМАШНИЕ ЗАДАНИЯ ВЫ РЕШАЕТЕ НА НАШЕЙ ИНФРАСТРУКТУРЕ
Все лекции доступны в записи
ОБУЧЕНИЕ ПРОХОДИТ В ИНТЕНСИВНОМ ФОРМАТЕ ПО 3 ЗАНЯТИЯ В НЕДЕЛЮ
Сегодня frontend пестрит изобилием информации, которая требует систематического изучения. Мы хотим, чтобы у студентов сформировалась полная картина веб-разработки, поэтому мы будем идти от проблемы и объяснять, какую задачу решает конкретный инструмент или технология.
Тимлид VK, куратор курса
ДМИТРИЙ БЕЗУГЛЫЙ
ПРОГРАММА ТРУДОУСТРОЙСТВА>>>
ТРУДОУСТРОЙСТВО
Устраиваем не только на junior позиции, но и более опытных специалистов
ПОДГОТОВКА
Помощь с резюме и сопроводительным письмом, отработка самопрезентации
РЕКОМЕНДАЦИИ
Рекомендации компаниям-партнёрам, среди которых Озон, Яндекс, Авито и др.
СОПРОВОЖДЕНИЕ
Сопровождение наших выпускников в трудоустройстве до момента оффера
84,4%
Процент успешно трудоустроенных студентов
Процент посчитан по числу устроенных на работу студентов, обратившихся за помощью в поиске работы
Поможем с поиском работы, усилим ваше резюме и научим правильно презентовать свои навыки.
Наша цель — довести вас до оффера.
Процент посчитан по числу устроенных на работу студентов, обратившихся за помощью в поиске работы
ПОДРОБНЕЕ
САМОПРЕЗЕНТАЦИЯ
Чтобы получить сильное резюме и навыки самопрезентации вы пройдете:
— Лекции и вебинары по составлению резюме от HR-эксперта Яндекс
— Тест-драйв собеседования
— Консультацию, на которой определите стратегию поиска работы и пропишете карьерные цели
79
ОТСЛЕЖИВАНИЕ ПРОГРЕССА
Свой прогресс в трудоустройстве вы будете отслеживать с помощью специальных дневников. Работать над ошибками мы будем вместе с вами: мы подскажем, что нужно подтянуть и в каком направлении лучше мыслить, чтобы эффективнее справляться с задачами на собеседованиях.
90
РАБОТА МЕЧТЫ
Наша цель — довести вас до оффера. Среднее время трудоустройства с сопровождением составляет 1−1,5 месяца.
108
Самопрезентация
Выбор вакансий
Отслеживание прогресса
Работа мечты
САМОПРЕЗЕНТАЦИЯ
Чтобы получить сильное резюме и навыки самопрезентации вы пройдете:
- Лекции и вебинары по составлению резюме от HR-эксперта Яндекс
- Тест-драйв собеседования
- Консультацию, на которой определите стратегию поиска работы и пропишете карьерные цели
ВЫБОР ВАКАНСИЙ
После подготовки всех необходимых материалов вы получите доступ к Telegram-каналам, где ежедневно обновляются вакансии от наших партнёров. На заинтересовавшие вас вакансии HR отправят ваше резюме с рекомендациями и организуют собеседование.
ОТСЛЕЖИВАНИЕ ПРОГРЕССА
Свой прогресс в трудоустройстве вы будете отслеживать с помощью специальных дневников. Работать над ошибками мы будем вместе с вами: мы подскажем, что нужно подтянуть и в каком направлении лучше мыслить, чтобы эффективнее справляться с задачами на собеседованиях.
РАБОТА МЕЧТЫ
Наша цель — довести вас до оффера. Среднее время трудоустройства с сопровождением составляет 1-1,5 месяца.
НАШИ ВЫПУСКНИКИ РАБОТАЮТ ЗДЕСЬ >>>
У НАС ПРЕПОДАЮТ:
УЧИТЕСЬ У >ЛУЧШИХ>
Модули >>>
Тимлид VK
Руководитель frontend команды отдела рекламы и бизнеса VK и Mail.ru. Разрабатывал интерфейсы для VK, до этого работал в Yandex. Больше 5 лет работает во frontend, обучает стажеров, записывает курсы. Самые активные студенты устроились в Яндекс, SEMRush, MailRu, Тинькофф и Рамблер.
ДМИТРИЙ БЕЗУГЛЫЙ
Модули >>>
Тимлид VK
Опыт работы во frontend более 7 лет. Начинал с вёрстки лендингов и сайтов на WordPress. Попал в ВК и занялся инфраструктурой для написания UI. Так родилась open source библиотека VKUI, на которой сейчас пишутся многие разделы ВКонтакте, а также подавляющее большинство VK Mini Apps.
АРТУР СТАМБУЛЬЦЯН
Модули >>>
Ведущий frontend разработчик в VK
Раньше работал в Яндекс. Деньгах в должности старшего fullstack разработчика, сейчас занимает позицию ведущего frontend разработчика в ВК. В 2020 году занял второе место в конкурсе Web Telegram Client и шестое место в JS Яндекс.Контесте.
АНТОН РЕЗНИК
СТОИМОСТЬ
Все модули курса. Доступ к поддержке от наших преподавателей, готовых ответить на любые вопросы. Возможность работы на удалённом сервере.
25 000 ₽
ПОМЕСЯЧНО:
80 000 ₽
ПОЛНАЯ ОПЛАТА:
Оплата в течение
4 месяцев
Скидка 20 000 ₽
при полной оплате
100 000₽
> Производительный frontend
> Тестирование и мониторинг
> Frontend на коленке
> Поддержка от преподавателей
> Работа на удалённом сервере
> Новостная лента 1.0
> FrontOps
> Быстрая админка
> Модный frontend
> Офлайн и доступность
УЗНАТЬ БОЛЬШЕ
Мы свяжемся с вами и ответим на все ваши вопросы по курсу. Если вы хотите оплатить курс, перейдите по этой ссылке

НАЧАЛО КУРСА 10 ОКТЯБРЯ
Удобный способ связи
FAQ
Какой уровень требуется для прохождения курса?
Мы ожидаем, что вы умеете верстать, знаете HTML, CSS и базовый JS: синтаксис, переменные, функции, циклы, замыкания. Также плюсом будет понимание Git на базовом уровне. Если вы его не знаете, рекомендуем пройти бесплатный курс GitHowTo.
Какой язык программирования мы будем использовать?
Frontend будем писать на JavaScript, а как только нам станет неудобно, сразу перейдём на TypeScript.
Какие технологии будут использоваться на курсе?
На курсе будут использоваться все самые популярные технологии, которые являются стандартом качества в области frontend-разработки в компаниях по всему миру.
Как проходит обучение?
Теорию вы будете осваивать в формате видеолекций и конспектов-шпаргалок к ним, а оттачивать практику на удаленном сервере. Если у вас появляются вопросы, вам ответят на них менторы или преподаватели в Slack.
Для удобства студентов и преподавателей мы записали все лекции заранее. Они будут вам доступны в личном кабинете даже после окончания обучения.
Могу ли я получить помощь в перерывах между занятиями?
Конечно. Все студенты курса общаются с преподавателями и между собой в Slack. В чате можно задать любые вопросы по обучению, наши преподаватели обязательно ответят вам.
Я начал курс, но мне не понравилось. Вы вернёте деньги?
Да. В течение двух недель после начала курса вы можете вернуть оплату за весь курс. Также в течение месяца мы готовы вернуть вам сумму за вычетом уже пройденного материала.
Получу ли я сертификат?

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


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


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

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