Vue.js Продвинутая веб-разработка

все курсы

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

4.5

2 отзыва

6 недель

Сложность

Продвинутый

Тип обучения

Курс

Формат обучения

С проверкой домашнего задания

Трудоустройство

Отсутствует

Сертификат

Да

Стоимость курса

28 500 ₽

есть рассрочка

Что ожидать от обучения?

Насыщенная программа
17 обучающих модулей, 100+ часов обучения.

Поддержка наставника
Практикующий IT-специалист будет отвечать на любые вопросы и делать кодревью.

Готовое портфолио
Технологичное и красивое SPA-приложение на vue.js с админ-панелью.

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

Telegram-чат
Общение с преподавателями и одногруппниками в уютной и дружелюбной атмосфере.

Сертификат
С уникальным ID, подтверждающий уровень ваших знаний.

Ламповая атмосфера
Никаких скучных и занудных “дядек“. В Loftschool вас будут учить в атмосфере rock-and-roll.

Начало карьеры
После обучения вы сразу же готовы к старту карьеры в веб-индустрии.

Каждая неделя обучения включает:
2-3 обучающих модуля
1 групповую практику
1-2 воркшопа
Обратную связь

Что вы получите после обучения

Приобретаемые навыки

Vue.js

SPA

Pug

PostCSS

Workflow

Unit-тесты

End-to-End тесты

Вёрстка

Webpack

GitHub

Npm

ESLint

Flexbox

Git

Storybook

ES6

Axios

Асинхронность

VueRouter

Авторизация

Тестирование

Сертификат, ссылками на который можно делиться с другими людьми

Вас будут обучать

Максим

курс

Дают знания, а не ответы.Любят объяснять и умеют доносить сложную информацию понятным языком.Требовательны к качеству вашего кода: вы не сдадите ДЗ, пока ваш код не станет идеальным.Хорошо понимают других людей и умеют находить подход к любым ученикам.Всегда готовы прийти на помощь.

Дают знания, а не ответы.

Образовательная организация

Loft School

4.3

13 отзывов

Добро пожаловать в LoftSchool - уникальный образовательный ресурс от самого быстроразвивающегося IT сообщества рунета и СМИ - LoftBLog. Здесь помогают стать востребованным IT специалистом или фрилансером, чтобы работать удаленно из любой точки мира.

LoftSchool — образовательная площадка, специализирующаяся на профессиях в IT-сфере. На рынке образования с 2012 года. Преподаватели и наставники школы практикующие специалисты из таких компаний, как Mojang, Avito и других. Образовательные программы на платформе поделены на профессии, интенсивы и видеокурсы.

Обучение программированию с нуля онлайн с личным наставником. Школа онлайн образования Loftschool обучает: web разработке, php, javascript, seo, интернет маркетингу, android разработке.

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

Неделя 1 — Workflow

— Знакомимся с наставником и группой.
— При помощи webpack-сборки верстаем выбранный макет выпускного проекта.
— Размещаем результат на Github и сдаём на проверку наставнику.

Открытие курса
1. Как проходит обучение (01:09:37)

Vue. Основные возможности
1. Теория (04:49)
2. Hello World (06:20)
3. Обработка событий (02:38)
4. Обработка нескольких событий (01:19)
5. Динамические значения (01:30)
6. Знакомство с директивами (05:40)
7. Сокращенные записи директив (00:37)
8. Методы с параметрами (01:36)
9. Модификаторы событий (08:52)
10. Вычисляемые свойства (10:50)
11. Вотчеры (06:02)
12. Работа с классами (03:37)
13. Работа с CSS свойствами (02:49)
14. Обращение к DOM элементам (03:50)
15. Условный рендеринг (04:46)
16. Рендеринг списков (05:12)
17. Создание компонента (04:16)
18. Локальные компоненты (02:44)
19. Реактивность данных (04:35)
20. Свойства компонента (03:52)
21. Слоты (04:37)
22. Слоты с областью видимости (04:52)
23. Пользовательские события (04:27)
24. Телепорты (02:53)

Vue. Однофайловые компоненты
1. Установка проекта. VUE-CLI (09:22)
2. Однофайловый компонент (03:18)
3. Работа со стилями (07:02)
4. Передача атрибутов и обработчиков (02:53)
5. Отдельные файлы (01:26)
6. Валидация свойств компонента (07:35)
7. Валидация пользовательских событий (02:01)
8. Двусторонняя связь данных (04:11)
9. Пользовательский v-model (05:51)
10. Хуки жизненного цикла (07:08)
11. Примеси (04:40)

NPM
1. Что такое npm? (05:50)
2. Установка и обновление npm (02:33)
3. Справка по работе с npm (01:28)
4. Поиск и установка пакетов (04:24)
5. Зависимости пакета (02:09)
6. Файл манифест package.json (03:02)
7. Удаление и обновление пакетов (03:02)
8. dependencies и devDependencies (01:51)
9. Webpack и npx (04:04)
10. npm-скрипты (04:02)
11. npm, git и github (02:40)

Yarn
1. Yarn (07:07)

Webpack. Основы работы
1. Теория (01:09)
2. Минимальный конфиг и запуск (04:41)
3. Именование файлов (02:34)
4. Лоадеры (04:28)
5. Dev-server (02:43)
6. Плагины (02:34)
7. Поиск модулей (03:18)
8. Сорсмапы (03:17)
9. Дев и прод (02:42)
10. Типы модулей (03:00)
11. Минимальная сборка (05:30)

ESLint. Обзор конфигурации
1. Введение (01:26)
2. Установка и запуск (03:10)
3. Исправление ошибок (02:04)
4. Конфигурация (05:21)
5. Формат вывода (00:52)

Figma для верстальщика
1. Figma. Интерфейс (04:37)
2. Figma. Организация проектов (01:32)

Flexbox
1. Введение (00:45)
2. Флекс-контейнер (01:43)
3. Выравнивание по главной оси (01:37)
4. Выравнивание по поперечной оси (01:50)
5. Выравнивание отдельного элемента (01:09)
6. Флекс-элемент – контейнер (00:53)
7. Направление осей (03:18)
8. Многострочный контейнер (02:54)
9. Выравнивание многострочного контента (01:25)
10. Пропорции (02:46)
11. Пропорции при сжатии (01:24)
12. Базовый размер (04:02)
13. Порядок элементов (02:40)

GIT
1. Введение (07:03)
2. Начинаем работать с Git (03:01)
3. Создание нового репозитория (01:09)
4. Добавление файлов в индекс (область слежения) Git (06:49)
5. Создание коммита (07:17)
6. Навигация по коммитам. Отмена изменений (12:10)
7. Типичный цикл работы с Git (03:34)
8. Ветвления в Git (11:27)
9. Конфликты при слиянии веток (06:06)
10. Временное (без коммита) сохранение данных (05:25)
11. Работа с удалёнными репозиториями (20:04)
12. Использование GitHub Pages для хостинга проектов (04:31)

Vue. Воркшоп #1
1. Старт проекта (05:24)
2. Компонент хедера (04:13)
3. Компонент иконок (05:06)
4. Вывод списка компонентов (02:56)
5. Компонент toggler (03:19)

Неделя 2 — Vue.js

— Делаем верстку адаптивной.
— Реализуем блок "Скиллы" на Vue.js.
— Реализуем блок "Мои проекты" на Vue.js.
— Реализуем блок "Слайдер для отзывов" с помощью Vue.js плагина.

Storybook
1. Установка (01:56)
2. Первая история (04:35)
3. Подключение компонента (01:24)
4. Расширение конфига (04:26)
5. Общие стили (02:08)
6. Стори для компонента (05:23)
7. CDD (04:16)
8. Создание компонента (02:28)
9. Применение компонента (02:29)
10. Логирование событий (03:29)
11. Аддон Backgrounds (01:41)
12. Аддон Knobs (02:28)
13. Аддон Source (02:17)
14. Заключение (01:11)

JavaScript — ES6
1. Строковая интерполяция (07:39)
2. Упрощение описания методов (13:35)
3. Значения по умолчанию (30:08)
4. Деструктурирующее присваивание: Объекты (07:30)
5. Новые возможности и старые браузеры (13:07)

Асинхронность в JavaScript
1. Таймеры (23:44)
2. Загрузка картинок (22:21)
3. Промисы (36:29)
4. AJAX (32:28)

Axios. Библиотека для запросов
1. Введение (02:23)
2. Отправляем запрос (02:12)
3. Обзор конфигурации (04:30)
4. Тело запроса (01:43)
5. Настройки по умолчанию (01:38)
6. Перехватчики (02:11)
7. Сервисы (02:33)
8. async-await (01:18)

Vue. Воркшоп #2
1. Подготовка (02:39)
2. Подключение компонента (02:16)
3. Вывод контролла (02:38)
4. Компонент Progress (05:09)
5. Запрос к серверу (06:38)
6. Вывод данных (05:55)

Неделя 3 — Нативный JavaScript

— Верстаем админку.
— Изучаем Storybook и применяем в своём проекте.
— Осуществляем необходимую обработку (валидацию) форм проекта.

VueRouter. Роутинг в браузере
1. Введение (04:31)
2. Создание ссылок (02:41)
3. Программная навигация (02:35)
4. Параметры пути (04:42)
5. Параметры как свойства (00:49)
6. Расширенные параметры и 404 (03:29)
7. Вложенные маршруты (03:23)
8. Классы активности (02:37)
9. Разные Router-View (01:08)
10. Динамические импорты (02:00)
11. Красивый URL (02:16)

Vuex. Менеджер состояния
1. Введение (01:13)
2. Подключение (02:30)
3. Экшены (02:27)
4. Мутации (02:16)
5. Геттеры (02:02)
6. Применение на практике (08:07)
7. Функции помощники (02:59)
8. Модули (05:18)
9. Динамические модули (01:38)
Вопрос-ответ

Vue. Воркшоп #3
1. Верстка (04:33)
2. Вывод данных (02:42)
3. Подготовка к анимации (02:14)
4. Отображение кнопок (03:45)
5. Догрузка контента (11:38)
6. Отображение слайда после перехода (02:17)

Неделя 4 — Vue.js, SPA

— Реализуем SPA в админ-панели.
— Изучаем работу с данными через хранилище приложения
— Используем ajax для связи с api, настраиваем взаимодействия клиент-сервер.

Авторизация. Токены
1. Типы авторизации (04:20)
2. GitHub OAuth (01:42)
3. Создание приложения GitHub (02:28)
4. Получение токена (08:38)
5. Хранение данных в коде (01:46)
6. Защита роутов (04:13)

Vue. Воркшоп #4
1. Подготовка (01:33)
2. Создание экшена (02:30)
3. Состояние загрузки (04:01)
4. Запрос (02:27)
5. Удаление дубликатов (03:29)
6. Защита роутов (03:23)
7. Логаут (00:51)

Неделя 5 — Практика

— Выводим сохраненные данные из админ-панели на лендинг.
— Тестируем компоненты.
— Групповая работа над проектом с наставником.

Vue.js. Composition API
1. Введение (01:29)
2. Общий пример (03:57)
3. Функция композиции (01:51)
4. Функция reactive (00:55)
5. Функция toRef (01:35)
6. Функция toRefs (00:58)
7. Computed свойства (00:56)
8. Функция watch (01:41)
9. Функция watchEffect (03:14)
10. Функция readonly (00:40)
11. Функции-проверки (02:30)
12. Функция unref (01:27)
13. Хуки жизненного цикла (00:58)
14. Пример. Обзор проекта (00:53)
15. Пример. Функционал подгрузки (01:20)
16. Пример. Категории (02:20)
17. Пример. Начальная фильтрация (02:46)
18. Пример. Переключение фильтра (02:11)
19. Пример. Остальные функции фильтрации (02:03)
20. Пример. Метод сортировки (03:05)

Тестирование JS-кода
1. Введение (16:05)
2. Jest (15:47)
3. Польза тестов (09:01)
4. Coverage (10:02)

Vue.js. Тестирование компонентов
1. Настройка пакетов (04:39)
2. Обертка компонента (04:13)
3. Что тестировать (02:48)
4. Первый тест (05:25)
5. Проверка эмит-события (03:44)
6. Передача свойств (02:58)
7. Работа с элементами форм (05:42)
8. Общие установки (01:15)
9. Моки (05:04)
10. Подключение библиотек (02:32)
11. Тестирование экшена (03:26)
12. Тестирование стора (02:53)
13. Тестирование снимками (03:08)

Тестирование. Моки
1. Создание мока (02:39)
2. Работа с аргументами (01:39)
3. Возвращаемое значение (02:57)
4. Модули (04:24)
5. Таймеры (02:05)

Vue. Воркшоп #5
1. Простой компонент (03:03)
2. Компонент со стором (05:21)
3. Тестирование. Подготовка (03:20)
4. Тестирование. Toggler (02:38)
5. Тестирование. Issues (05:08)

Неделя 6 — Завершение работы над проектом

— Дорабатываем проект.
— Сдаём проект на проверку наставникам.
— Выставление оценок в дипломы.

Как получить работу в IT: фишки и советы
1. Как получить работу в IT? Поиск, собеседование и испытательный срок (42:21)
2. Как найти удаленную работу и фриланс-заказы? (20:12)
3. Первая работа в IT — как себя вести? Стажировки, официальное трудоустройство и работа "за еду" (14:11)
4. Как пройти испытательный срок? (27:10)
5. Как подготовиться к собеседованию в компании уровня FAANG (08:52)
6. Процесс загрузки web страницы (25:19)
7. Собеседование программиста – всё, что нужно знать (01:24:07)
8. Решение задачи с собеседования программиста (19:36)
9. Собеседование Frontend-разработчика (01:37:17)

Рейтинг курса

4.5

рейтинг

Отзывы о курсе

2 отзыва

по рейтингу

по дате

Школа научит вас создавать сайты

Достоинства: Наставники и кураторы. Качественный материал. Формат обучения - наставники, видеоматериал, методички, тестирование, групповые и индивидуальные созвоны, чат. Недостатки: Очень сложный 3 курс. Было сложно понять фреймворк VUE, не изучив глубоко JS. И если изучать фреймворк, то уже на готовой верстке сайта самостоятельно делать админ.панель или же практиковать написание различных SPA...

хорошие курсы

Достоинства: качество обучения Недостатки: нет В школе Loftschool проходила курсы по комплексному обучению веб-разработке. Все занятия проходили в интересном формате, удалось освоить всю базовую теорию необходимую для успешного трудоустройства. Интенсивность занятий была огромной, каждый день приходилось перерабатывать большой объем поступающей информации, к этому я постепенно привыкла. Стил...