Курс по Vue.js 3 Практическое руководство c нуля до результата

Что вас ждёт в процессе обучения?

Знания и навыки

0% воды и 100% практических примеров, которые действительно пригодятся в работе.

Подготовка к интервью

Курс нацелен на успешное прохождение интервью и дальнейшее трудоустройство.

Доступ к чату

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

Домашние задания

Проверка домашних заданий, общие рекомендации и консультации на всех этапах.

Кейсы и проекты

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

Сертификат

Именной сертификат об окончании курса с общими рекомендациями и оценкой.

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

Правильно разделять код и UI на компоненты
Правильно разделив код на компоненты, вы сможете переиспользовать их в разных частях вашего приложения и любых других приложениях
Composition API на Vue 3
Самое значительное нововведение новой версии это Composition API. Вы также изучите Options API тк на курсе мы писать код в Options и Composition API
Переиспользовать компоненты
Зачем писать код дважды? Научимся писать универсальные компоненты, которые можно будет переиспользовать в любых проектах
Выбирать правильные инструменты и технологии
Помимо стека vue-приложений мы пройдемся по основным библиотекам и технологиям, которые помогут в создании больших приложений
REST API
На API строится весь современный веб. Мы изучим как хранить данные, взаимодействововать с ними по технологии REST API - принимать и отдавать запросы
Оптимизировать Vue.js приложения
Правильный подход к оптимизации изначально может значительно скоратить время в дальнейшем. Научимся понимать, когда нужна оптимизация и как применять ее наиболее корректно
Защите и авторизации
Авторизация на клиенте, защита данных, проверка авторизации на сервере, а также разграничение ролей
Состоянию приложения с VUEX
Actions, Mutations, State, Getters - все для правильного храненения данных и их дальнейшего взаимодействия

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

Видеоуроки ‑ cхема обучения:

Основы 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
- Циклы и вывод больших списков
- Хуки жизненного цикла вью компонентов

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

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

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

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

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

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

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

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

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

Vuex + Vue 3

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

- Правильное хранение данных в VUEX
- Использование state
- Использование getters
- Использование actions
- Использование mutations
- Разбитие хранилища на модули

REST API

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

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

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

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

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

Бонус: Git + GitHub

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

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

Star Wars Wiki

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

- Текущий модуль будет корректироваться, точная программа будет составленна до 1 марта

#10

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

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

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

Программа вебинаров:

#1 Скоро

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

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

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

#2 2 Мая

Composition API

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

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

#3 9 Мая

Vue-Twitter

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

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

#4 16 Мая

Firebase по REST API

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

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

#5 23 Мая

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

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

- Текущий вебинар будет корректироваться, точная программа будет составленна до 10 Апреля

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

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

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

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

Записаться на курс

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

Необходимый уровень для прохождения курса?

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

Хорошей практикой будет, если вы уже верстали сайт с применением нативного js или jquery, тогда вы легко освоите vue.js! Обычно верстальщикам этот фреймворк дается проще всего!
Можно ли оставить заявку сейчас и оплатить позже?

Да, оставляя заявку вы также гарантированно бронируете место со скидкой, сохраняя текущую цену (при условии оплаты в течении 10 дней с момента отправки заявки)
После курса меня возьмут на позицию Frontend разработчика?

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

Доступ к курсу будет осуществляться из админ панели. Там вы сможете видеть комментарии других пользователей и оставлять свои, скачивать исходники и тд
Оплачивая, вы получаете пожизненный доступ к курсу со всеми последующими обновлениями.
Как происходит отправка домашних заданий?

Отправка домашних заданий проиходит через личный кабинет, там же будет ревью и кол-во полученых баллов.

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

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

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

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

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

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

Что вас ждёт в процессе обучения?

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

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

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