Дорожная карта веб‑разработчика

От первой строчки кода до первых заказов на фрилансе. Основная программа около 3 месяцев при 2⁠–⁠3 часах в день. Открой модуль: внутри все уроки, практика и зачем это в заказах.

Выбрать тариф Скачать программу в PDF

Рассчитай свой срок

Подвигай ползунки: путь перестроится под твой темп

Первые заказычерез 78 днейпри 2⁠–⁠3 часах в день

  1. Вводный и нейросети 2 дня
  2. HTML и CSS 38 дней
  3. JavaScript 14 дней
  4. WordPress 17 дней
  5. Старт на фрилансе 7 дней

Считаем по длине уроков на платформе и времени на практику: при 2⁠–⁠3 часах в день сроки как в программе на сайте.

  • 304видеоурока73 часа видео, остаются навсегда
  • 44практикикаждую проверяет куратор
  • 9проектовв портфолио к финалу
  • 300+отзывовучеников об обучении

Старт

Первые 2 дня · знакомишься с обучением и подключаешь ИИ

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

  • Знаешь, как проходит обучение и как сдавать практику
  • Пишешь первые строчки кода
  • Понимаешь, как браузер показывает сайт

6 видеоуроков 1 практика с проверкой 1 тест

Уроки модуля на платформе8 уроков, из них 6 видео

  1. 1Приветствие 05:55
  2. 2Как устроено обучение 13:30
  3. 3Первые строчки кода 36:39
  4. 4Как браузер видит наш сайт 07:46
  5. 5Шаблон для домашних заданий 16:26
  6. 6Проверка знаний тест
  7. 7Твое первое домашнее задание практика
  8. 8Промежуточные итоги 03:27
Нейросети для разработчиков · 6 уроков
Урок «Приветствие» вводного модуля на платформе Aroken: плеер, колонка уроков и кнопка «Следующий урок»
Так выглядит урок на платформе

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

  • Работаешь с ИИ прямо в коде в Cursor
  • Пишешь запросы, на которые нейросеть отвечает по делу
  • Ищешь ответы через Perplexity
  • Отличаешь пользу от иллюзии прогресса

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

Уроки модуля на платформе6 уроков, из них 6 видео

  1. 1Введение в нейросети 11:41
  2. 2Cursor. Начало работы 20:41
  3. 3GPTunnel: все нейросети в одном месте 10:42
  4. 4Как задавать хорошие запросы нейросети 13:21
  5. 5Perplexity: гугл нового поколения 12:24
  6. 6Как использовать ИИ без самообмана 08:42
HTML и CSS · 136 уроков

Вёрстка

1-й и 2-й месяц · делаешь сайты по макетам

Дизайнер рисует страницу в Figma, ты переносишь её в код. Так делают лендинги, сайты-визитки и правки чужих сайтов, и с этого ученики берут первые заказы: страницу по картинке от дизайнера, лендинг, замену блока в готовой вёрстке.

  • Верстаешь страницу по макету из Figma
  • Делаешь адаптив: сайт удобно открывать с телефона
  • Собираешь сетки на Flexbox и Grid
  • Пишешь код по БЭМ, чтобы его было легко править
  • Делаешь формы, таблицы, анимации и модальные окна

107 видеоуроков 20 практик с проверкой 9 тестов

Попробуй: собери страницу из макета

Fit StudioТренировки · Цены · Контакты
Подтянутое тело за месяцЗаписаться
Силовые
Кардио
Растяжка
Первая тренировка бесплатно

Уроки модуля на платформе136 уроков, из них 107 видео

Шаг 1. HTML: разметка страницы

  1. 1Введение 01:37
  2. 2Редакторы кода 09:54
  3. 3Знакомство с HTML 08:51
  4. 4Базовая структура HTML документа 18:10
  5. 5Работа с текстом 14:35
  6. 6Списки 09:18
  7. 7Создание ссылок 10:50
  8. 8Вставка изображений 16:59
  9. 9Вставка видео 08:00
  10. 10Пути подключения и комментарии 11:30
  11. 11Блочные и строчные элементы 12:20
  12. 12Тест по пройденным темам тест
  13. 13Практическое задание (разметка статьи) 02:51
  14. 14Домашнее задание (разметка статьи) практика
  15. 15Реализация преподавателя (разметка статьи) 06:40
  16. 16Валидность 08:59
  17. 17Введение в семантику 23:17

Шаг 2. CSS: оформление

  1. 18Начало работы с CSS 10:04
  2. 19Способы стилизации HTML элементов 08:11
  3. 20Основные CSS селекторы 17:26
  4. 21Работа с цветом 18:31
  5. 22Стилизация текста 21:13
  6. 23Каскад, Специфичность, Наследование 15:25
  7. 24Блочная модель и отступы 24:50
  8. 25Ширина и высота 09:18
  9. 26Свойство display 08:24
  10. 27Тест по пройденным темам тест
  11. 28Единицы измерения 19:40
  12. 29Background 13:26
  13. 30Border и Outline 18:51

Шаг 3. Таблицы, формы и первая вёрстка по макету

  1. 31Таблицы 11:50
  2. 32Семантика таблиц и объединение ячеек 09:25
  3. 33Тест по таблицам тест
  4. 34Практика по таблицам 01:26
  5. 35Домашнее задание (таблицы) практика
  6. 36Реализация преподавателя (таблицы) 07:34
  7. 37Введение в формы 15:27
  8. 38Поля ввода 14:22
  9. 39Checkbox, Radio, Select 14:00
  10. 40Тест по формам тест
  11. 41Практика по формам 03:34
  12. 42Домашнее задание (формы) практика
  13. 43Реализация преподавателя (формы) 15:06
  14. 44HTML-сущности 05:46
  15. 45Подключение шрифтов 23:22
  16. 46Знакомство с Figma 15:11
  17. 47Советы по работе с кодом 15:48
  18. 48Подготовка к верстке статьи 20:41
  19. 49Верстка статьи 35:02
  20. 50Домашнее задание (верстка статьи) практика

Шаг 4. Flexbox, позиционирование и эффекты

  1. 51Введение в Flexbox 17:27
  2. 52Основные свойства Flex контейнера 23:32
  3. 53Свойства Flex элементов 18:58
  4. 54Тест по Flexbox тест
  5. 55Практика Flexbox 05:05
  6. 56Домашнее задание (Flexbox) практика
  7. 57Реализация преподавателя (Flexbox) 14:33
  8. 58Position 25:20
  9. 59Практика по Position 19:27
  10. 60Transform 14:21
  11. 61Псевдоэлементы 13:51
  12. 62Практика по псевдоэлементам 09:50
  13. 63Домашнее задание (доработка статьи) практика
  14. 64Псевдоклассы 13:27
  15. 65Подробнее про селекторы и псевдоклассы 12:01
  16. 66Переходы и анимации 21:57
  17. 67Свойства видимости 13:32
  18. 68Overflow и работа со скроллом 15:14
  19. 69Тень и градиент 10:50
  20. 70Тест по пройденным темам тест
  21. 71Практика стилизации формы 17:40
  22. 72Практика стилизации checkbox 15:29
  23. 73Домашнее задание (форма) практика
  24. 74SVG 17:57

Шаг 5. Главная страница, доступность и адаптив

  1. 75Подготовка к верстке главной страницы 09:34
  2. 76Верстка шапки 18:35
  3. 77Верстка подвала 13:32
  4. 78Домашнее задание (шапка и подвал) практика
  5. 79Верстка Hero 20:33
  6. 80Декорации в Hero 09:29
  7. 81Верстка Последние новости 24:43
  8. 82Домашнее задание (hero и новости) практика
  9. 83Доступность 09:04
  10. 84Добавляем состояния 07:55
  11. 85Aria-атрибуты и микроразметка 05:44
  12. 86Верстка секции FAQ 26:59
  13. 87Домашнее задание (FAQ) практика
  14. 88Адаптивная верстка 16:25
  15. 89Адаптация изображений 12:20
  16. 90Адаптация Hero 19:04
  17. 91Адаптация Последние новости и FAQ 14:42
  18. 92Адаптация страницы статьи 16:27
  19. 93Кроссбраузерность 09:00
  20. 94Тест по пройденным темам тест
  21. 95Домашнее задание (адаптив) практика
  22. 96Что дальше? 02:16

Шаг 6. Grid, БЭМ и CSS-переменные

  1. 97Введение в Grid 10:39
  2. 98Неявная сетка 05:27
  3. 99Свойства Grid элементов 12:35
  4. 100Grid Area 07:41
  5. 101Адаптация Grid 07:39
  6. 102Тест по Grid тест
  7. 103Практика Grid 05:38
  8. 104Домашнее задание (Grid) практика
  9. 105Реализация преподавателя (Grid) 13:33
  10. 106Введение в методологию БЭМ 24:45
  11. 107Практика по БЭМ 03:18
  12. 108Домашнее задание (БЭМ) практика
  13. 109Реализация преподавателя (БЭМ) 17:20
  14. 110CSS переменные 14:30
  15. 111CSS import 08:49
  16. 112Тест по пройденным темам тест

Шаг 7. Дипломный проект: лендинг по макету

  1. 113Начало верстки нового макета 22:41
  2. 114Верстка шапки 39:21
  3. 115Адаптация шапки 23:53
  4. 116Бургер-меню 27:56
  5. 117Домашнее задание (шапка) практика
  6. 118Верстка Hero 23:38
  7. 119Адаптация Hero 17:25
  8. 120Дипломный проект 03:42
  9. 121Домашнее задание практика
  10. 122Верстка секции Air Mag 30:31
  11. 123Общие улучшения по проекту 16:27
  12. 124Домашнее задание практика
  13. 125Верстка секции Размеры часть 1 41:52
  14. 126Верстка секции Размеры часть 2 50:52
  15. 127Доработка секции Размеры 08:57
  16. 128Домашнее задание практика
  17. 129Верстка секции Характеристики 44:14
  18. 130Верстка секции Топ Модели 31:51
  19. 131Домашнее задание практика
  20. 132Верстка Подвала 10:30
  21. 133Добавляем модальное окно 35:50
  22. 134Домашнее задание (заключение) практика
  23. 135Заключение 00:52
  24. 136Финал дипломной работы диплом
JavaScript · 91 урок
Скриншот сайта Fit Studio
Fit Studioпроект курса: сайт фитнес-студии
Скриншот сайта Nike Air Mag
Nike Air Magдипломный лендинг по макету

Заказы учеников на этих навыках

  • 12 500 ₽Страница по картинке от дизайнера
  • 25 000 ₽Лендинг: 20 000 ₽ и 5 000 ₽ премии от заказчика
  • 500 ₽Поменять иконку на другую в вёрстке

JavaScript

2-й месяц · оживляешь страницы

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

  • Пишешь логику: условия, циклы, функции
  • Работаешь с объектами и массивами
  • Управляешь страницей через DOM и события
  • Сохраняешь данные в LocalStorage и делишь код на модули
  • Собираешь своё приложение «Список дел»

69 видеоуроков 12 практик с проверкой 10 тестов

Попробуй: список дел, как в модуле

Осталось задач: 2

Уроки модуля на платформе91 урок, из них 69 видео

Шаг 1. Переменные, типы и условия

  1. 1Введение 01:39
  2. 2Что такое JavaScript? 07:14
  3. 3Переменные и базовые выражения 13:47
  4. 4Наименования переменных 11:33
  5. 5Математические операции 14:51
  6. 6Типы данных 14:51
  7. 7Приведение типов 10:22
  8. 8Тест по переменным и типам данных тест
  9. 9Практика по переменным и типам данных 04:55
  10. 10Домашнее задание (переменные и типы) практика
  11. 11Операторы сравнения 06:06
  12. 12Условия 18:24
  13. 13Тернарный оператор 15:02
  14. 14Switch case 11:13
  15. 15Тест по условиям тест
  16. 16Практика по условиям 08:56
  17. 17Домашнее задание (условия) практика
  18. 18Реализация преподавателя (условия) 16:19

Шаг 2. Циклы и функции

  1. 19Циклы 19:49
  2. 20Цикл while и do while 08:32
  3. 21Break и continue 04:34
  4. 22Вложенные циклы 10:27
  5. 23Тест по циклам тест
  6. 24Практика по циклам 05:12
  7. 25Домашнее задание (циклы) практика
  8. 26Реализация преподавателя (циклы) 09:27
  9. 27Функции 16:37
  10. 28Виды функций 16:17
  11. 29Тест по функциям тест
  12. 30Практика по функциям 04:51
  13. 31Домашнее задание (функции) практика
  14. 32Реализация преподавателя (функции) 18:15

Шаг 3. Объекты, окружения и this

  1. 33Объекты 10:37
  2. 34Методы объектов 11:42
  3. 35Цикл for in 10:49
  4. 36Деструктуризация и Spread 11:57
  5. 37Тест по объектам тест
  6. 38Практика по объектам 04:09
  7. 39Домашнее задание (объекты) практика
  8. 40Реализация преподавателя (объекты) 08:55
  9. 41Примитивы, Ссылки, Мутации 20:23
  10. 42Strict mode 02:18
  11. 43Callback функции 13:17
  12. 44Окружения 14:10
  13. 45Особенность var 04:28
  14. 46Замыкание 12:36
  15. 47This 08:42
  16. 48Тест по окружениям и this тест

Шаг 4. Массивы и приложение «Список дел»

  1. 49Массивы 15:59
  2. 50Методы массивов 17:22
  3. 51Тест по массивам тест
  4. 52Практика по массивам 06:01
  5. 53Домашнее задание (массивы) практика
  6. 54Реализация преподавателя (массивы) 12:43
  7. 55Map и Filter 12:14
  8. 56Find, FindIndex, Includes 11:38
  9. 57Some и Every 03:32
  10. 58Reduce и Sort 19:08
  11. 59Slice, Splice и строки 13:19
  12. 60Тест по методам массивов тест
  13. 61Практика по методам массивов 08:21
  14. 62Домашнее задание (методы массивов) практика
  15. 63Практика Todo List 05:36
  16. 64Создание задачи 16:50
  17. 65Выполнение задачи 14:12
  18. 66Удаление задачи 12:12
  19. 67Домашнее задание (Todo List) практика

Шаг 5. DOM и события

  1. 68Введение в Web API 04:08
  2. 69DOM 07:52
  3. 70Получение элементов и манипуляции над ними 15:38
  4. 71События 14:28
  5. 72Работа с классами 07:53
  6. 73Работа с HTML разметкой 10:48
  7. 74Тест по DOM тест
  8. 75Практика по DOM 06:19
  9. 76Домашнее задание (DOM) практика
  10. 77Реализация преподавателя (DOM) 10:05
  11. 78Всплытие событий 09:00
  12. 79Создание задачи через форму 05:19
  13. 80Делегирование событий 08:04
  14. 81Практика по делегированию 13:31
  15. 82Домашнее задание (Todo List DOM) практика

Шаг 6. JSON, LocalStorage, модули и диплом

  1. 83JSON 06:40
  2. 84LocalStorage 07:22
  3. 85Практика по LocalStorage 10:36
  4. 86Модули 13:01
  5. 87Добавляем модули в проект 15:12
  6. 88Тест по пройденным темам тест
  7. 89Домашнее задание (Модули) практика
  8. 90Заключение 07:02
  9. 91Дипломный проект диплом
WordPress · 59 уроков
Урок «Практика по DOM» на платформе Aroken: в плеере список дел на JavaScript
Урок «Практика по DOM»
Скриншот сайта SEO-агентство
SEO-агентстводипломный проект модуля
Скриншот сайта AI & Security
AI & Securityдипломный проект: JavaScript и анимации

WordPress

2-й и 3-й месяц · собираешь сайты под ключ

Заказчик хочет сам менять тексты, цены и товары, без программиста. WordPress даёт ему админку, а тебе быстрый путь к готовому сайту: натяжка вёрстки на тему, лендинг на Elementor, магазин на WooCommerce. Самая популярная CMS в мире и отличная ниша для старта на фрилансе.

  • Ставишь WordPress на компьютер и переносишь сайт на хостинг
  • Натягиваешь вёрстку на свою тему с ACF
  • Собираешь лендинг на Elementor и свой виджет
  • Запускаешь магазин на WooCommerce
  • Делаешь квиз, таблицы, слайдер и аудит сайта

44 видеоурока 8 практик с проверкой 7 тестов

Попробуй: заказчик правит сайт сам

Админка WordPress

Пекарня «Утро»

Свежие пончики каждое утро

Заказать к завтраку

Второй пончик в подарок

Уроки модуля на платформе59 уроков, из них 44 видео

Шаг 1. Установка и база PHP

  1. 1Введение в WordPress 13:56
  2. 2Установка WordPress на компьютер (OSP) 11:25
  3. 3Установка WordPress на компьютер (Local WP) 06:28
  4. 4Тур по админке 14:37
  5. 5Вводный урок по натяжке 10:09
  6. 6База языка PHP 13:44
  7. 7Повторим пройденный в уроке по PHP материал тест
  8. 8База языка PHP 13:58
  9. 9Повторим пройденный в уроке по PHP материал тест
  10. 10База языка PHP 12:37
  11. 11Повторим пройденный в уроке по PHP материал тест
  12. 12Отчёт по пройденному материалу практика
  13. 13Иерархия файлов темы 13:31
  14. 14Иерархия файлов темы 13:11
  15. 15Повторим иерархию файлов темы тест

Шаг 2. Натяжка вёрстки на свою тему

  1. 16Установка плагинов 01:51
  2. 17Знакомимся с ACF 14:42
  3. 18Вывод значений из полей ACF 13:44
  4. 19Обзор макета для натяжки 06:18
  5. 20Подготовка файлов темы 16:40
  6. 21Подключение необходимых файлов к теме 24:29
  7. 22Закрепим знания по пройденным урокам тест
  8. 23Приобретение хостинга и перенос WordPress на хостинг 13:40
  9. 24Натяжка шапки и работа с меню 23:50
  10. 25Отчёт по домашнему заданию практика
  11. 26Натяжка Главной. Повторитель ACF и нарезка картинок 30:57
  12. 27Натяжка Главной. Натяжка слайдера и создание шорткода. 22:05
  13. 28Натяжка Главной. Создание и работа с новым посттайпом 24:54
  14. 29Отправляем домашку на проверку практика
  15. 30Натяжка Главной. Работа с блогом 18:31
  16. 31Натяжка Футера. Знакомство с Contact Form 7 31:48
  17. 32Натяжка страницы About Us. Хлебные крошки и прочее 17:11
  18. 33Натяжка страницы Blog. Кастомный архив для посттайпа post 16:56
  19. 34Натяжка страницы открытого поста 29:43
  20. 35Отправляем ваш результат на проверку практика
  21. 36Натяжка страницы Contact. Карты и reCaptcha 17:57
  22. 37Перенос готового сайта и его проверка. Отправка писем CF7 12:41
  23. 38Закрепим знания по базовому ВП! тест
  24. 39Что такое FTP и как с ним работать 08:22
  25. 40Дипломная работа: сайт на своей теме диплом

Шаг 3. Elementor

  1. 41Дополнительно про базы данных, хостинги и переносы сайтов 16:14
  2. 42Конструктор сайтов Elementor 22:05
  3. 43Создание лендинга на Elementor. Тема hello elementor, сборка секций, формы 31:22
  4. 44Создание лендинга на Elementor. Popup, якори, смена языка 28:22
  5. 45Продвинутый Elementor 10:31
  6. 46Собственный виджет для Elementor с Unlimited Elements 11:06
  7. 47Закрепим знания по элементору! тест
  8. 48Дипломная работа: лендинг на Elementor диплом

Шаг 4. WooCommerce и готовые решения

  1. 49Дочерние темы 05:15
  2. 50Плагин WooCommerce 14:19
  3. 51Дипломная работа: магазин на WooCommerce диплом
  4. 52NULLED темы и Demo Import 11:59
  5. 53Редактируем интернет-магазин на теме Woodmart 18:26
  6. 54Копирование простого сайта 05:31
  7. 55Создание таблиц на WordPress 15:11
  8. 56Как сделать аудит сайта 13:41
  9. 57Slider Revolution: крутой слайдер для WordPress. 17:24
  10. 58Делаем простой квиз на WordPress 18:59
  11. 59Отправляем результаты ваших трудов на проверку практика
Старт на фрилансе · 17 уроков
Урок модуля WordPress на платформе Aroken: натяжка страницы блога
Урок: натяжка страницы блога

Заказы учеников на этих навыках

  • 40 701,20 ₽Магазин на WordPress, вывод с Kwork
  • 18 000 ₽Кастомная аналитика продаж на WooCommerce
  • 21 390 ₽Сайт на Elementor для завода по литью металлов
  • 10 000 ₽Лендинг косметики на WordPress и Elementor, с Профи.ру
  • 8 500 ₽Переделал слайдер на Slider Revolution
  • 2 000 ₽Лендинг для юриста на Elementor Pro

Первые заказы

3-й месяц · выходишь на биржи и зарабатываешь

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

  • Оформляешь продающий профиль на Kwork
  • Пишешь отклики: три мастер-класса с разбором
  • Ведёшь переговоры по 7 этапам продаж
  • Берёшь заказы на Профи.ру
  • Решаешь конфликты без негативных отзывов

16 видеоуроков 1 практика с проверкой

Уроки модуля на платформе17 уроков, из них 16 видео

Шаг 1. Биржи: Kwork и Профи.ру

  1. 1Введение 02:46
  2. 2Что такое фриланс, как начать работать и что нужно 08:00
  3. 3Виды фриланс-бирж. Почему Kwork 12:25
  4. 4Обзор функционала фриланс биржи Кворк 14:12
  5. 5Что нельзя делать на Kwork 06:10

Шаг 2. Продажи и общение с заказчиком

  1. 67 этапов продаж и клиентоориентированность 07:21
  2. 7Негативные отзывы и конфликты с заказчиками 11:02
  3. 8Что значит красивый сайт на языке клиента 05:50
  4. 9Как сделать продающий аккаунт на Kwork 25:39
  5. 10Как сделать продающий отклик на фрилансе 13:02
  6. 11Как выводить клиентов и когда выходить с биржи 04:55
  7. 12Будь клиентом. Заключение 01:59

Шаг 3. Мастер-классы по откликам

  1. 13Мастер-класс по откликам #1 17:06
  2. 14Мастер-класс по откликам #2 24:32
  3. 15Мастер-класс по откликам #3 15:30
  4. 16Профи.ру: полный гайд по работе на бирже 14:46
  5. 17Домашнее задание практика
Софтскиллы в IT · 17 уроков
Созвон в Discord: разбираем переписку ученика с заказчиком
Созвон: разбираем переписку с заказчиком

Такие заказы берут ученики

  • 27 000 ₽Сайт с нуля для салона красоты
  • 50 000 ₽Сайт для кафе, оплатили наличными
  • 35 000 ₽Половина оплаты за сайт-визитку
  • 20 000 ₽Сайт на Тильде: 5 дней по 3⁠–⁠4 часа работы
  • 95 000 ₽Доработка сайта, предоплата 40 000 ₽
  • 3 000 ₽Сайт-приглашение на свадьбу на Тильде

Рост

Без срока · бонусные модули для заказов сложнее и дороже

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

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

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

Уроки модуля на платформе17 уроков, из них 17 видео

  1. 1Введение 00:50
  2. 2Ошибки начинающего фрилансера 09:34
  3. 3Почему не существует уровня сложности? 09:19
  4. 4Построение клиентской базы и какой крах может произойти 09:52
  5. 5В веб-разработку только ради денег? Бессмысленно! 07:21
  6. 6История и план моего марафона: 5 000 ₽ в день 08:43
  7. 7Перегорел, прокрастинация и синдром самозванца 17:35
  8. 8Почему ты проиграл, когда отложил на завтра 07:52
  9. 9Социальная и игровая зависимость. Иллюзия бессмертия 13:37
  10. 10Почему важно правильно ставить цели? 04:40
  11. 11Страх неудачи. Почему ошибаться полезно 09:37
  12. 12Важность времени: не спускай его в унитаз 06:55
  13. 13Синдром Инстаграма: как правильно сравнивать 05:56
  14. 14Как правильно решать конфликты с заказчиками? 15:21
  15. 15Конкуренция на фрилансе: главный страх начинающих 08:29
  16. 16Поиск информации важнее хорошего кода 06:09
  17. 17Итоги 01:07
Git и GitHub · 17 уроков

Git нужен в любой команде и на любом серьёзном заказе: с ним ошибку можно откатить за минуту, а код показать заказчику ссылкой. Работы из портфолио выкладываешь на GitHub Pages.

  • Делаешь коммиты, ветки и решаешь конфликты
  • Откатываешь изменения и ходишь по истории
  • Публикуешь проект на GitHub Pages
  • Подключаешься по SSH и пишешь README

15 видеоуроков 1 практика с проверкой 1 тест

Уроки модуля на платформе17 уроков, из них 15 видео

  1. 1Что такое Git и зачем он нужен 08:35
  2. 2Начало работы с Git 10:25
  3. 3Основные команды 12:05
  4. 4Знакомство с GitHub 11:33
  5. 5Ветки 11:41
  6. 6Работа с ветками 07:39
  7. 7Слияние веток и Rebase 10:08
  8. 8Решение конфликтов 15:02
  9. 9Переход по истории и откат изменений 14:50
  10. 10Изменение состояния и копирование коммитов 05:03
  11. 11Дополнительные возможности Git и GitHub 11:51
  12. 12SSH 12:06
  13. 13Деплой проекта на GitHub Pages 06:31
  14. 14README MD 08:51
  15. 15Заключение 01:59
  16. 16Тест по пройденному материалу тест
  17. 17Дипломная работа диплом
Продвинутая вёрстка · 26 уроков

Vite, SCSS, ESLint и Stylelint: инструменты, с которыми работают в студиях и на больших проектах. Итог модуля: многостраничный сайт с тёмной и светлой темой, собранный и выложенный в интернет.

  • Собираешь проект на Vite и NPM
  • Пишешь стили на SCSS с миксинами и UI-китом
  • Держишь код в порядке с ESLint, Prettier и Stylelint
  • Верстаешь многостраничный сайт с переключением темы

24 видеоурока 1 практика с проверкой 1 тест

Попробуй: переключи тему сайта

Mi Scooter

Электросамокат для города

Лёгкий, тихий и складной

Выбрать модель

Уроки модуля на платформе26 уроков, из них 24 видео

Шаг 1. Инструменты: Node.js, Vite, SCSS, линтеры

  1. 1Введение 00:49
  2. 2NodeJS. Developer environment и Production environment 10:12
  3. 3NPM и Сборщики 10:23
  4. 4Знакомство с Vite 21:11
  5. 5Контроль качества кода. ESLint, Prettier, StyleLint 13:13
  6. 6Препроцессоры. SASS-SCSS 04:30
  7. 7Разбор функционала SCSS 17:23
  8. 8Тест по пройденным темам тест

Шаг 2. Многостраничный сайт с тёмной и светлой темой

  1. 9Подготовка к верстке #1. Создаем миксины 18:57
  2. 10Подготовка к верстке #2. UI-Kit 21:46
  3. 11Подготовка к верстке #3. Работа с изображениями и HTML 14:11
  4. 12Верстка Header и реализация переключения темы 55:39
  5. 13Верстка главной страницы. Секция Hero 61:29
  6. 14Верстка главной страницы. Секция Overview 26:40
  7. 15Верстка главной страницы. Секция Features 36:26
  8. 16Верстка главной страницы. Секция Strength и Partners 36:18
  9. 17Верстка главной страницы. Секция Insight и реализация слайдера 29:07
  10. 18Верстка главной страницы. Секция Testimonials и реализация слайдера 34:46
  11. 19Верстка Footer 41:12
  12. 20Верстка страницы Pricing. Секция Hero 60:41
  13. 21Верстка страницы Pricing. Секция FAQ 23:28
  14. 22Верстка страницы Contact. Секция Hero и подключение карты 21:01
  15. 23Верстка страницы Contact. Секция Get-started 35:06
  16. 24Сборка и деплой проекта 17:14
  17. 25Заключение. Что ещё можно изучить 08:35
  18. 26Дипломная работа диплом
Скриншот сайта Электросамокат Mi
Электросамокат Miдипломный проект модуля

К финалу у тебя 9 проектов в портфолио, профиль на бирже и первые заказы, взятые ещё во время обучения.

Где ты будешь учиться

Наша платформа: уроки с телефона и ноутбука, практика прямо в уроке, куратор отвечает в чате в течение 15 часов.

  • Урок «Приветствие» вводного модуля профессии на платформе Aroken: плеер, колонка уроков модуля, конспектУроки в своём темпе304 видеоурока без дедлайнов, после тем конспекты и тесты. Уроки остаются навсегда.
  • Модуль JavaScript профессии на платформе Aroken: в колонке уроков тест и домашнее задание с проверкойПрактика с кураторомСдаёшь работу прямо в уроке, куратор проверяет и записывает видеоразбор, если что-то непонятно.
  • Созвон в Discord: разбор переписки с заказчикомСозвоны про заказыВ Discord вживую разбираем твои заказы и переписку с заказчиками.

Заказы, которые берут ученики

Скрины оплат и заказы из открытого канала учеников @aroken_result. Суммы как в посте или на скрине.

  • Скрин оплаты ученика: Страница по картинке от дизайнера Страница по картинке от дизайнера
  • Скрин оплаты ученика: Лендинг: 20 000 ₽ и 5 000 ₽ премии от заказчика 25 000 ₽ Лендинг: 20 000 ₽ и 5 000 ₽ премии от заказчика на скрине первая часть, 10 000 ₽
  • Скрин оплаты ученика: Поменять иконку на другую в вёрстке Поменять иконку на другую в вёрстке
  • Скрин оплаты ученика: Магазин на WordPress, вывод с Kwork Магазин на WordPress, вывод с Kwork
  • Скрин оплаты ученика: Переделал слайдер на Slider Revolution Переделал слайдер на Slider Revolution
  • Скрин оплаты ученика: Половина оплаты за сайт-визитку Половина оплаты за сайт-визитку
  • Скрин оплаты ученика: Сайт на Тильде: 5 дней по 3–4 часа работы Сайт на Тильде: 5 дней по 3⁠–⁠4 часа работы
  • Скрин оплаты ученика: Редизайн веб-платформы в Figma, оплата четырьмя частями 40 000 ₽ Редизайн веб-платформы в Figma, оплата четырьмя частями на скрине первая часть, 12 000 ₽
  • Доработка сайта, предоплата 40 000 ₽октябрь 202695 000 ₽
  • Кастомная аналитика продаж на WooCommerceоктябрь 202618 000 ₽
  • Сайт для кафе, оплатили наличными50 000 ₽
  • Сайт с нуля для салона красоты27 000 ₽
  • Сайт на Elementor для завода по литью металлов21 390 ₽
  • Лендинг косметики на WordPress и Elementor, с Профи.ру10 000 ₽
  • Товар с фильтром по цвету в интернет-магазине7 500 ₽
  • Доработка мини-сайта на Тильде, около 3 часов4 800 ₽
  • Сайт-приглашение на свадьбу на Тильде3 000 ₽
  • Лендинг для юриста на Elementor Pro2 000 ₽

Вся программа в одном файле

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

Скачать программу в PDF Выбрать тариф