Курс по Vue.js 3
С нуля до результата

Овладей новой версией трендового фреймворка на курсе «Vue.js 3 - практическое руководство с нуля до результата!»‎

  • Длительность 5 недель
  • Доступ к курсу Навсегда
  • Старт потока Формируется группа потока, старт вебинаров уже скоро!
Записаться на курс
-14% 5 недель
Курс по Vue.js 3
В курс включено:
  • Вебинары Пять прямых трансляций с общим чатом и возможностью задать вопрос
  • Домашние задания Пять домашних работ, рекомендации и консультации на всех этапах
  • Кейсы и проекты Четыре выпускных проекта для вашего портфолио и GitHub
  • Доступ к общему чату Чат со всеми участниками и кураторами курса
  • Сертификат Именной сертификат по окончании курса

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


  • Composition API
    Composition API

    Самое значительное нововведение новой версии это Composition API. Вы также изучите Options API тк на курсе мы будем писать код в Options и Composition API.


  • REST API
    REST API

    На API строится весь современный веб. Рассмотрим, как хранить и взаимодействовать с данными по REST API, как отдавать и принимать запросы.


  • UI и компоненты
    UI и компоненты

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


  • Vuex
    Vuex

    Actions, Mutations, State, Getters - все для правильного храненения данных и их дальнейшего взаимодействия.


  • Переиспользование
    Переиспользование

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


  • Библиотки
    Библиотки

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


  • Оптимизация
    Оптимизация

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

Новый формат: курс и вебинары

1. Видеоуроки

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

2. Вебинары

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

Vue.js 3 с нуля до результата
80 000₽

Средняя зарплата Frontend разработчика по РФ

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

Согласно hh, SuperJob и Яндекс работа, где собирались данные о вакансиях - это средняя зарплата vue.js разработчика. В данной выборке не участвовали города миллионники.
Поэтому в Москве, Санкт-Петербурге и других городах-миллионниках она может быть выше (иногда в 2 - 3 раза).

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

#1 Вебинар

Основы Vue.js 3 и знакомство с курсом

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

  • - Про личный кабинет и отправку домашних заданий
  • - Получение сертификата по окончании курса
  • - Лучшие практики прохождения курса
  • - Вводные материалы
  • - Зачем используется Vue.js
  • - Что такое реактивность
  • - Зачем нужен MVC на фротенде
#2 Видеоуроки ~50м.

Основы Vue.js 3

Основные моменты и нововведения в vue.js 3

  • - Про визуальные фреймворки или почему важно писать все самому
  • - Разница между Vue.js и React.js
  • - Новые возможности Vue.js 3
  • - Сравнение Vue.js 3 и Vue.js 2
  • - Work Flow - Настройка редактора
  • - Work Flow - Настройка необходимых плагинов
  • - Work Flow - Настройка конфигов
  • - Work Flow - Code style
  • - Инициализация vue.js
  • - Mount на идентификатор
  • - Динамическая смена данных в data
  • - Работа с объектами
  • - Methods и их применение
  • - Вычисляемые свойства - Computed
  • - Работа с Boolean значениями
  • - Дериктива v-if - условные реднеринг
  • - Привязка атрибутов через v-bind
  • - Применение v-model
  • - Циклы и вывод больших списков
  • - Хуки жизненного цикла вью компонентов
#3 Видеоуроки ~1ч. 20м.

Приложение с заметками

Напишем заметочник, где применим все знания из "Основы Vue.js 3"

  • - Компонентный подход
  • - Интерполяция
  • - Вывод HTML кода
  • - Работа с CSS классами
  • - Динамическая смена классов и стилей
  • - Управление отображением элементов
  • - Toggle у классов
  • - Работа со списками
  • - Сбросы с форм и валидация
  • - Отображение пользовательских ошибок
  • - Фильтрация элементов массива
  • - Оптимизация приложения с computed
  • - Передача параметров от родителя к компоненту и обратно
  • - Передача методов от ребенка на родитель
  • - Оптимизация компонентов
  • - Обработка ошибок
  • - ----- Вторая часть -----
  • - Подключение VUEX
  • - Хранение и сбор данных - геттеры и стейт
  • - Асинхронные действия в Actions
  • - Добавление заметок в Хранилище
  • - Вывод значений из Хранилища
#4 Видеоуроки ~1ч. 40м.

Своя сборка на VUE CLI и Vue 3

В текущем модуле мы создадим свою сборку, которую будем переиспользовать во всех последующих проетах!

  • - Преимущества и использование VUE CLI
  • - Установка и знакомство с node.js
  • - Установка VUE CLI через npm
  • - Чем плох флаг -g
  • - Установка глобальных пакетов через npx
  • - Лучшая структура проектов
  • - Подключение SCSS
  • - Подключение шрифтов локально и через CDN
  • - Настройка для не стандартных билдов
  • - Настройка хешей и карт стилей/скриптов
#1 Вебинар ~1ч. 30м.

Composition API

Знакомство с новым Composition API на примере написания модальных окон, форм и обработчиков

  • - Знакомство с setup()
  • - Реактивные ссылки
  • - Методы и комьютеды в Composition API
  • - Динамические атрибуты
  • - Модель для работы с формами
  • - Текстовый инпут / Текстарея
  • - Чекбоксы / Радио кнопки / Селекты
  • - UI компонент модального окна
  • - Использование слотов на практике
  • - Закрытие модального окна по клику на крестик, область или ESC
  • - Валидация входящих параметров
  • - Связь дочерних компонентов
  • - "Шаринг" стейта приложения
  • - Использование телепорта для модальных окон
  • - Учимся переиспользовать модальные окна из проекта в проект
#2 Видеоуроки ~40м.

Vue-router - Динамическая перерисовка

Новый взгляд на роутеринг с Vue.js 3. Научимся строить простые и вложенные маршруты, перерисовывать страницы в зависимости от пути

  • - Основа SPA. Что такое роутер и зачем он нужен
  • - Установка vue-router
  • - Динамическая перерисовка без перезагрузки страницы
  • - Динамичный навбар и ссылки
  • - Активные ссылки
  • - Не существующие роуты - страница 404
  • - Хеш и мод history
#3 Видеоуроки ~1ч.

Vuex + Vue 3

Для быстрого и удобного взаимодействия данные будут храниться внутри приложения. Разберемся как использовать VUEX с Vue.js второй и третьей версии

  • - Правильное хранение данных в VUEX
  • - Использование state
  • - Использование getters
  • - Использование actions
  • - Использование mutations
  • - Разбитие хранилища на модули
#4 Видеоуроки ~30м.

REST API

REST – это архитектурный подход, определяющий, как должны выглядеть API. На REST строится весь современный веб! Далее технлогия REST API будет использоваться во всех последующих приложениях

  • - В чем преимущества REST и почему это лучшее, что есть в вебе
  • - Подробнее про REST API
  • - Один сервер под все версии приложения
  • - Забираем данные с открытых API
  • - Делимся своим API
  • - Защита своего API - CORS / Tokens
  • - CORS дополнительные HTTP-заголовки
  • - Разграничение прав на разные запросы
  • - Все про токены и безопасность авторизаций
  • - Разница между REST API и graphql
  • - Применение graphql как типизация данных и прослойка между REST
#5 Вебинар

Vue-Twitter

Начнем писать клон твиттера с использованием Composition API

  • - Настройка markdown разметки
  • - Использование md для создание твита
  • - Seeders для хранения данных
  • - Рендеринг твитов
  • - Написание своего плагина для сортировки всех сообщений
  • - Сортировка данных по дате создания и имени
  • - Универсальный метод сортировки любых данных
  • - Обработка ошибок
  • - Перенос данных в vuex
  • - Жизненные циклы компонентов
  • - Хранение и сбор данных - геттеры и стейт
  • - Асинхронные действия в Actions
  • - Смена стейта через мутации
#6 Видеоуроки ~50м.

Приложение Clash of Clans

В этом приложении, как и во всех последующих, мы будем использовать vue-roter и vuex. Все персонажи будут храниться в общем хранилище. А роутер будет обрабатывать все динамические маршруты.

  • - Настройка vuex и vue-router
  • - Создание динамического меню
  • - Активная ссылка по текущему роуту
  • - Создание компонента карточек
  • - Хранение картинок
  • - Использование Слотов для карт
  • - Переиспользование компонентов
  • - Хранение и динамическое взаимодействие с картинками в приложении
  • - Знакомство с сидерами (seeders)
  • - Оптимизация компонентов - хранение всех данных в json массиве
  • - Перенос данных во vuex
  • - Хранение и сбор данных - геттеры и стейт
  • - Асинхронные действия в Actions
  • - Работа с сторонними плагинами на примере слайдера
  • - Подключение слайдера со списком персонажей
  • - Адаптация приложения под мобильные устройства
  • - Подгрузка единичного персонажа через отдельный компонент
#7 Вебинар

Firebase по REST API

Научимся отправлять запросы с фронтенда на Firebase, используя asiox или fetch, также получать ответ и заносить данные в VUEX

  • - Методы взаимодействия с сервером
  • - Различия между axios и fetch
  • - Установка axios базовое использование
  • - Firebase - регистрация нового проекта
  • - Запрос PUT - редактирование постов / комментариев
  • - Установка axios
  • - Получение ключа для работы по API
  • - Подключение по API к firebase
  • - Добавление новых постов через POST запрос
  • - Отправка POST и GET запросов
  • - Подгрузка данных со стороннего API
  • - then и обработка ответов
  • - catch и обработка ошибок
  • - Отправка данных в vuex
#8 Видеоуроки ~30м.

Бонус: Git + GitHub

Поскольку в курсе будет несколько выпускных проектов, то я посчитал нужным добавить видео по работе с GIT, для того чтобы вы могли организовать свое портфолио на GitHub и GitHub Pages, что увеличит шансы найти работу и получить больше заказчиков!

  • - GIT Введение
  • - Создание первого коммита
  • - Создание репозитория на GitHub
  • - Загрузка проекта в Ваш репозиторий на GitHub
  • - Добавление новых коммитов
  • - Настройка GitHub Pages для демонстрации работы приложения
  • - Загрузка Вашего Демо на GitHub Pages
#9 Видеоуроки ~1ч. 20м.

Star Wars Wiki

TypeScript + Composition API, работа с открытым API звездных войн. Это будет завершающий модуль, в котором мы раскроем весь потенциал вью 3 в связке TS + Composition API!

  • - Зачем нужна типизация
  • - Основы TypeScript
  • - Компиляция и базовая настройка
  • - Типы данных
  • - Типы функций
  • - Интерфейсы
  • - Пространства имен
  • - Подключение TS во vue
  • - Описание типов используя vue 3
  • - Написание api на ts
  • - Интеграция ts файлов в вью компоненты
  • - Знакомство с REST API
  • - Отправка гет запросов
  • - Знакомство с axios и FETCH
  • - Получение ответов от сервера
  • - Рендер данных полученных от сервера
#10 Видеоуроки ~30м.

Дополнительный модуль

Дополнительный модуль, где мы рассмотрим различные фичи, которые помогут в дальнейшей разработке!

  • - Настраиваем axios пишем универсальный скрипт для форм
  • - Отправляем данные c форм / модалок к себе на почту
  • - Телеграм api. Отправляем данные с форм в телеграмм
  • - Плавные анимации между роутами
#11 Вебинар

Подведение итогов

Готовимся к успешному интервью - разборы тестовых задач с собеседований и часто задоваемых вопросов, а также разберем фриланс биржи на примере Upwork

  • - Текущий вебинар будет корректироваться, точная программа будет составленна позже
Информация о курсе:
  • Последнее обновление: 09-09-2021
  • Количество домашних работ: 5
Информация о вебинарах:
  • Количество вебинаров: 5
  • Длительность: 5 недель
  • Старт: Формируется группа потока, старт вебинаров уже скоро!
Информация о видеоуроках:
  • Продолжительность: ~13 ч
  • Количество модулей: 20
  • Количество видеоуроков: 110
  • В видеоуроки включено 111 статей
Записаться на курс

11 проектов в портфолио

4 Выпускных проекта, плюс бонус - 7 проектов из курса «Vue.js с нуля до про»

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

  • Twitter
    Twitter
    • 🔥 Composition API + Vue 3
    • Markdown разметка
    • Использование Firebase по REST API
    Посмотреть Демо
  • Star Wars Wiki
    Star Wars Wiki
    • 🔥 Composition API + Vue 3
    • 🔥 TypeScript
    • Работа с API по техлогии REST
    • Отправка запросов на апи через отдельные сервисы
    • Хранение данных полученных от сервера
    • Постраничная пагинация элементов
    Посмотреть Демо
  • Clash Of Clans
    Clash Of Clans
    • Vue-Router в связке Vue.js 3
    • Динамических маршрутов
    • Храниение и взаимодействие с данными из Seeders
    • Слайдер с персонажами
    Посмотреть Демо
  • Notes App
    Notes App
    • Полная настройка VUE CLI 3 на Vue 3
    • VUEX + Vue 3
    • Создание глобальных конфигов
    • Передача данных между компонентами
    • Разделение логики по компоненты
    • Локальное хранилище
    • Фильтрация элементов
    Посмотреть Демо
  • Notify App
    Notify App
    • Создание своего API
    • Работа с CORS - делимся своим API
    • LoadMore - постепенная подгрузка содержимого
    • Ленивая подгрузка содержимого
    • Хранение данных полученных от API в Vuex
    • Бонус из курса «Vue.js с нуля до про»
    Посмотреть Демо
  • Users CRM
    Users CRM
    • Работа со сторонним API
    • Сбор данных через REST API
    • Сортировка входных данных
    • Пагинация входных данных
    • Бонус из курса «Vue.js с нуля до про»
    Посмотреть Демо
  • GitHub Finder
    GitHub Finder
    • Работа с API GitHub
    • Вывод информации о пользователе
    • Вывод репозиториев пользователя
    • Обработка ошибок
    • Бонус из курса «Vue.js с нуля до про»
    Посмотреть Демо
  • Shop App
    Shop App
    • Работа с Vue-Router
    • Создание динамических маршрутов
    • Храниение и взаимодействие с данными из Vuex
    • Работа с общим стейтом приложения
    • Бонус из курса «Vue.js с нуля до про»
    Посмотреть Демо
  • Modals
    Modals
    • Переиспользование компонентов
    • Валидация полей
    • Скрытие элементов при клике за облость
    • Отслеживание клавиш
    • Отправка данных с форм на почту + в телеграмм канал
    • Бонус из курса «Vue.js с нуля до про»
    Посмотреть Демо
  • Notes App Vue.js 2
    Notes App Vue.js 2
    • Полная настройка VUE CLI 3
    • Работа с emit
    • Компонентный подход
    • Разделение логики на компоненты
    • Фильтрация элементов
    • Удаление и редактирование элементов
    • Бонус из курса «Vue.js с нуля до про»
    Посмотреть Демо
Навсегда

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

Единомышленники

Общение в чате с одногруппниками и всей командой курса.

Второй курс Бесплатно!

Запишитесь сейчас, чтобы получить
курс по «Vue.js 2 С нуля до про» бесплатно

170+ видео, 7 выпускных проектов, Options Api все это будет доступно сразу и навсегда!

Узнать больше
  • Чтобы получить курс «Vue.js 2 С нуля до про»
    бесплатно нужно:
  • - Записаться на текущий курс
  • Дополнительно:
  • - Вам не нужно покупать курс «Vue.js 2 С нуля до про», он будет доступен бесплатно в личном кабинете.

Ваш будущий сертификат

Сертификат vue-3 tocode

По окончании обучения вы получаете именной сертификат. Это отличное дополнение при трудоустройстве!

Дополнительная информация:

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

Ответы на часто задаваемые вопросы:

  • Необходимый уровень для прохождения курса?
    Курс идет по ступеням - от легкого к более продвинутому.
    Поэтому на начальном этапе будет достаточно пониманимать базис JavaScript, а со всем остальным мы разберемся постепенно!

    Хорошей практикой будет, если вы уже верстали сайт с применением нативного js или jquery, тогда вы легко освоите vue.js! Обычно, верстальщикам этот фреймворк дается проще всего!
  • После курса меня возьмут на позицию Frontend разработчика?
    Этот курс нацелен на успешное трудоустройство. В составлении этого курса мне помогал мой бывший коллега, который сейчас является рекрутером на позицию Frontend-Разработчик / Vue-разработчик. Поэтому у вас есть все шансы успешно устроиться на работу Frontend разработчиком. Более того, как показал опрос по вью 2, 89% студентов уже нашли работу, большенство из которых сделали это уже в первые недели обучения.
    Опрос студентов vue.js
  • Как будет осуществляться доступ к курсу?
    Доступ к курсу будет осуществляться из админ панели. Там вы сможете видеть комментарии других пользователей и оставлять свои, скачивать исходники и тд
    Оплачивая, доступ к курсу навсегда сохранятся у вас со всеми последующими обновлениями после завершения учебы.
  • Как происходит отправка домашних заданий?
    Отправка домашних заданий проиходит через личный кабинет, там же будет ревью и кол-во полученых баллов.

    В текущем курсе пять домашних заданий, почти каждое домашнее задание доступно в двух вариантах: простое и продвинутое.

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

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

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

    Домашние здания можно прислать на проверку и получить ревью в течении 5 (пяти) месяцев с момента записи на курс. После пяти месяцев вы также можете прислать домашнее задание, но только одним архивом, и получить ревью сразу по всем дз, которые будут присланы.
  • Если я что-то не пойму?
    В курсе обсуждаются продвинутые темы при этом - достаточно простым языком и по ступеням - от легкого к тяжелому. Поэтому не понять очень сложно. Есть группа в телеграмме, в которой могут помочь участники курса, в том числе и я. Если вопрос более глобальный - мы всегда можем списаться и закрыть пробелы в знаниях.