Мы в сети

VK
FB

Оформите подписку!

 Введите Ваш E-m@il и
получайте свежие новости

Видеокурс
Видеокурс "Фреймворк VUE JS. Полное руководство для современной веб-разработки". (Владилен Минин - Webformyself)
Видео урок

Рейтинг:

Издательство WebForMySelf Издательство: WebForMySelf

Страница автора - Владилен Минин - Webformyself Автор курса: Владилен Минин

Видеокурс Тематика: Веб – разработка | Java, jQuery и JavaScript | Создание сайтов и блогов

Автор: Владилен Минин

Курс состоит из 2-х больших блоков: теория и практика. Изучив теоретический блок, вы получите актуальную исчерпывающую теоретическую базу по состоянию на апрель 2018 года (к которой сможете возвращаться при необходимости в будущем – в качестве удобного систематизированного справочника). В теоретическом блоке собрано практически ВСЕ, что только может вам понадобится при разработке с VUE. В практической части мы с вами с полного нуля шаг за шагом создадим SPA приложение объявлений на material design и firebase. При желании вы сможете его дополнить, дописать актуальные функции, выводить на рынок как полноценный коммерческий продукт, развивать как стартап и т.д.

Смотреть видео:

Фреймворк VUE.JS. Полное руководство для современной веб-разработки. (Владилен Минин)

  • Блок 1. Знакомство с Vue

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

  • Что такое Vue.js

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

  • Создание простого Vue-приложения

Вы увидите, как можно быстро начать разработку с  помощью Vue. В результате урока мы напишем простое приложение, на примере  которого вы увидите самые базовые понятия фреймворка.

  • Блок 2. Основы Vue

Данный блок посвящен всем важным вводным темам, которые есть во фреймворке. Мы разберем самые основные принципы Vue на практических примерах, и подробным образом разберем синтаксис и принципы работы фреймворка.

  • Интерполяция

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

  • Динамические атрибуты

Вы узнаете каким образом работает фреймворк с HTML-атрибутами,  в чем особенность данного взаимодействия. Вы впервые познакомитесь с таким  понятием как директивы и научитесь использовать одну из них – v-bind.

  • Вывод HTML-кода

Иногда встречаются ситуации, когда необходимо  вывести HTML-код прямо из Javascript в шаблон. Но стандартные методы здесь не  сработают, в целях защиты. Вы узнаете, как обойти данные методы используя уже  другую директиву.

  • Добавление событий

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

  • Передача параметров в метод

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

  • Модификаторы событий

Вы узнаете специальную очень удобную особенность  фреймворка Vue – модификаторы. Речь пойдет конкретно про модификаторы, которые  упрощают обработку шаблонных решений в Javascript.

  • Модификаторы событий клавиатуры

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

  • Ярлыки для директив

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

  • Модель для работы с формами

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

  • Работа с CSS-классами

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

  • Динамические стили

Аналогично классам, в этом уроке мы разберем все  способы динамического добавления стилей к HTML-элементам.

  • Управление отображением элементов

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

  • Директива v-show vs v-if

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

  • Работа со списками

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

  • Оптимизация приложения с computed

Вы узнаете про новый объект конфигурации  приложения, с помощью которого вы сможете оптимизировать скорость работы  приложения, используя стандартные методы.

  • Отслеживание изменений с watch

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

  • Связывание разных приложений. Инстанс Vue

Вы узнаете, как связать несколько объектов или  приложений между собой. Мы также поговорим про новые методы и возможности,  которые возникают, если мы проинициализировали несколько приложений.

  • Доступ к DOM-элементам

Вы узнаете про референции, с помощью которых вы  можете получать доступ с нативным HTML-элементам в любом месте Vue приложения.

  • Свойство template

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

  • Жизненный цикл

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

  • Блок 3. Vue CLI&Webpack

В данном блоке мы разберем что такое за инструмент Vue CLI. Мы  установим его на компьютер и с помощью него сгенерируем новый проект на Vue на  основе сборщика webpack.У  нас сразу будет доступно к работе приложение с быстрой перезагрузкой страницы в браузере, технологией Hot Module Replacement и препроцессорами. Так  мы разберем файлы с расширением Vue, которые были сделаны специально для  данного фреймворка.

  • Зачем нужен CLI

Начиная с данного урока, мы перестанем разрабатывать все в HTML-файле и перейдем на новый уровень: будем использовать целый набор удобных инструментов для быстрого разворачивания Vue приложения.

  • Установка CLI и создание проекта

В этом уроке вы узнаете, как установить cli и создать определенный из списка шаблон приложения.

  • Обзор структуры проекта

В этом уроке вы подробно познакомитесь со всеми сущностями и файлами, которые есть в созданном проекте.

  • Как запускается приложение

В этом уроке вы узнаете, как запустить приложение, которое мы сгенерировали.

  • Блок 4. Компоненты

В  данном блоке мы очень подробно разберем понятие компонентов в библиотеке Vue.  Мы  разберем зачем нужны компоненты, как их регистрировать локально и глобально.  Причем мы разберем как это делается в HTML-файле и уже в целом проекте, который  использует файлы с расширением  .vue. Далее  вы узнаете обо всех особенностях взаимодействия между компонентами, а также о  том, как во Vue создаются локальные стили, и многое другое.

  • Зачем нужны компоненты

В данном уроке вы узнаете, что такое компоненты во фреймворке Vue и зачем они нужны.

  • Метод data

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

  • Локальная и глобальная регистрация

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

  • Названия компонентов

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

  • Регистрация компонентов в .vue

В этом уроке мы повторим подход регистрации компонентов, только уже не в HTML-файле, а в файле с расширением .vue.

  • Передача параметров компоненту

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

  • Валидация входящих параметров

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

  • Передача параметров от дочернего компонента

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

  • Передача функции как параметр

В этом уроке вы узнаете, как можно передавать функцию как параметр в дочерний компонент, и как это отразится на взаимодействии компонентов.

  • Связь дочерних компонентов

В этом уроке, вы узнаете, как связать 2 дочерних компонента. Мы разберем первый подход – связь компонентов через родительский компонент.

  • Использование event emitter

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

  • Изолированные стили

Изолированные стили

  • Передача HTML компоненту

В данном уроке вы узнаете, как можно передавать HTML-код компоненту как параметр. Узнаете про механизм слотов и вывод кода в определенном месте.

  • Блок 5. Директивы

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

  • Создание своей директивы

В данном уроке вы узнаете, как мы можем создать свою собственную директиву.

  • Взаимодействие с элементом

В данном уроке вы увидите, как директива взаимодействует с элементом к которому она была применена.

  • Жизненный цикл директивы

Как и в случае с компонентом, в директиве также присутствуют различные важные этапы ее жизни, и мы разберем каждый из них.

  • Параметры в директивах

В данном уроке вы узнаете, как передавать и обрабатывать параметры, которые были переданы внутрь директивы.

  • Аргументы в директивах

В этом уроке вы узнаете про другой вид параметров, которые можно передать в директиву – аргументы.

  • Модификаторы

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

  • Локальная регистрация

Как и у компонентов, директивы можно изолировать и регистрировать локально, или же наоборот – глобально. Вы узнаете, как это сделать.

  • Блок 6. Фильтры и Миксины

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

  • Создание простых фильтров

В этом уроке вы познакомитесь с понятие фильтров во фреймворке Vue. Вы узнаете, как их создавать и использовать.

  • Фильтрация списков

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

  • Использование миксинов

В этом уроке вы узнаете, что такое миксины, как их использовать и зачем они нужны.

  • Блок 7. Работа с формами

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

  • Текстовый инпут

В этом уроке мы более подробно поговорим, как модель работает с текстовыми полями.

  • Текстарея

Данный урок покажет вам как с помощью модели можно работать с текстареей.

  • Чекбоксы

Из этого урока вы узнаете об особенностях работы с чекбоксами внутри фреймворка.

  • Радио кнопки

В этом уроке вы узнаете, как модель работает с радиокнопками.

  • Селекты

В этом уроке мы разберем еще один элемент – выбор из списка селекта. И вы узнаете как модель работает с подобным элементом.

  • Числовой модификатор

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

  • Создание своего контрола

Часто стандартных элементов не хватает, и нужно создавать свои собственные элементы формы. В этом уроке вы узнаете, как это сделать.

  • Блок 8. Валидация форм с Vuelidate

Данный  блок посвящен сторонней библиотеки Vuelidate. Мы  научимся использовать и регистрировать сторонние плагины во Vue, тем самым  расширяя функционал фреймворка.  Далее  мы научимся создавать динамические и красивые валидации для любых элементов  формы, практически с любыми условиями и выводить сообщения об ошибках, в  зависимости от условия.  Научимся создавать свои собственные валидаторы, которые асинхронно или  синхронно смогут проверять те значения, которые мы запрограммируем.

  • Установка и настройка проекта

Мы создадим проект, в котором будут необходимые элементы формы для дальнейшей валидации. Также мы установим библиотеку, и вы увидите, как во Vue можно подключать различные плагины.

  • Настройка валидаторов

В этом уроке вы увидите и научитесь первым шагам инициализации валидатора и первой проверке правильности введенного значения.

  • Визуальное отображение ошибок

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

  • Валидация пароля

В этом уроке мы рассмотрим следующие способы валидации на поле ввода пароля.

  • Создание своего валидатора

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

  • Отправка формы

В этом уроке мы разберем способ валидации и отправки всей формы.

  • Блок 9. Роутинг с Vue-router

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

  • Установка Vue-router

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

  • Настройка роутера

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

  • Создание навигации

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

  • Обозначение активной ссылки

В этом уроке вы узнаете способы и тонкости определения текущего состояния роутинга и стилистического обозначения активной ссылки.

  • Динамические роуты

В этом уроке вы узнаете, как сделать роуты динамическими – у них будет изменяемая часть. Также вы узнаете, как обрабатывать параметры в компоненте.

  • Программная навигация

В этом уроке вы узнаете, как совершать навигацию уже не в шаблоне, а в самом компоненте.

  • Вложенные роуты

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

  • Передача параметров

В данном уроке вы узнаете про другой вид параметров, которые можно передавать по URL-адресу и обрабатывать в компонентах – гет параметры.

  • Хэш и скролл

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

  • Редирект

В этом уроке мы разберем способ редиректа с различных страниц на другие, и обработку ошибки ненайденного роута.

  • Защита роутов

Вы узнаете про способ защиты роутов с помощью такой сущности как guard. Мы рассмотрим несколько мест и способов, где мы можем реализовать подобный функционал.

  • Ленивая загрузка

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

  • Блок 10. Работа с сервером с Vue-resource

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

  • Настройка приложения

В этом уроке мы создадим каркас приложения, в котором будем рассматривать функционал работы библиотеки. Настроим сервер и установим плагин.

  • Создание объектов POST

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

  • Получение объектов GET

В этом уроке вы узнаете, как отправлять GET запросы для того, чтобы получить данные с сервера.

  • Использование resource

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

  • Глобальная настройка

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

  • Интерсепторы

В этом уроке вы узнаете про такой концепт как интерсепторы, зачем они нужны и как с помощью них вы можете управлять http-запросами.

  • Блок 11. Работа с данными с Vuex

В  данном блоке вы познакомитесь с плагином, который позволяет очень гибко и  удобно управлять данными, работая с Vue. Вы  узнаете концепцию Vuex, как его регистрировать, как взаимодействовать с данными  внутри него: забирать, получать, изменять, и многое другое.

  • Установка Vuex

В этом уроке вы увидите, как можно установить плагин Vuex и начать его использовать.

  • Использование state

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

  • Использование getters

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

  • Использование mutations

В данном уроке вы узнаете, что такое мутации в рамках библиотеки Vuex.

  • Использование actions

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

  • Оптимизация с помощью модулей

В этом уроке вы узнаете про то, как можно оптимизировать структуру стора путем модульной декомпозиции структуры стейта.

  • Блок 12. Создание SPA приложения на material design и firebase

Данный  модуль посвящен практической части курса, где мы все знания, полученные в  теории, будем применять на практике. Мы  создадим SPA приложение, которое является Serverless – приложением, которое  работает без серверной части. При этом у нас будет полностью рабочая база  данных в облаке, на сервисе Firebase от Google. У нас там будет реализован  хостинг, база данных, хранение картинок и регистрация с авторизацией  пользователей. В  качестве дизайна нами будет выбран Material Design от Google. Наше приложение  будет полностью адаптивным, то есть оно будет одинаково хорошо отображаться на  любом экране. По  смыслу это будет приложение, в котором будет возможность просматривать и  создавать объявления о продаже чего-либо и прием заявок. Будет реализован  личный кабинет, возможность загружать картинки, редактировать объявления и  просматривать заявки.

  • Создание проекта

В данном уроке мы начнем создавать наш проект и установим с помощью Vue CLI и Vuetify приложение на Material Design на webpack-сборке.

  • Обзор приложения

В данном уроке мы рассмотрим все файлы и папки в новом приложении.

  • Создание тулбара

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

  • Добавление ссылок и адаптация

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

  • Регистрация роутов

В данном уроке мы зарегистрируем все страницы нашего компонента, а также создадим их шаблоны.

  • Создание страницы логина

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

  • Создание страницы регистрации

В этом уроке мы сделаем всю функциональную часть для страницы регистрации с валидацией, сообщениях об ошибках и проверкой идентичности паролей.

  • Создание главной страницы

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

  • Создание страницы заказов

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

  • Создание страницы формы

Мы создадим визуальную часть страницы, в которой будем создавать новые объявления. Мы сделаем валидацию каждого из полей, но пока без загрузки изображений.

  • Создание страницы списка

В этом уроке мы создадим макет страницы списка всех созданных вами объявлений.

  • Создание страницы объявления

Мы создадим страницу отдельного объявления. Мы будем получать параметры из адресной строки и в зависимости от него выводить нужные данные об объявлении.

  • Подключение Vuex

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

  • Добавление объявлений

Мы реализуем возможность добавлять новые объявления уже через общую шину Vuex, где добавление будет работать в динамическом режиме. Также мы полностью перепишем все взаимодействие объявлений на Vuex.

  • Настройка firebase

В данном уроке мы настроим firebase в наш проект и рассмотрим какие функции у нее есть.

  • Регистрация пользователей

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

  • Логин пользователей

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

  • Вывод ошибок

Если у нас будут приходить какие-то ошибки с сервера, например, пароль неправильный, то у нас будет компонент, который будет отвечать за вывод этих данных в красивом формате.

  • Поддержание сессии пользователя

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

  • Защита роутов

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

  • Создание объявления в firebase

В этом уроке мы с помощью данных, введенных в форме на сайте, будем заносить новую запись в базу данных firebase и хранить уже ее на сервере.

  • Загрузка объявлений по умолчанию

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

  • Загрузка изображений в firebase

Мы реализуем возможность загрузки изображений. Будем обрабатывать входящий файл с помощью Vue и далее показывать его превью, а потом загружать изображение на удаленный сервер firebase storage и привязывать новую картинку к нужному объявлению.

  • Создание модального окна редактирования

В этом уроке мы создадим адаптивное модальное окно, с помощью которого сможем редактировать наши объявления.

  • Редактирование объявления

В этом уроке мы напишем функционал для редактирования объявления, где будем редактировать его на лету и сразу же в базе данных.

  • Создание окна покупки

В этом уроке мы создадим адаптивное модальное окно, в котором будем делать заказ через интересующее нас объявление.

  • Создание и обработка заказов

В этом уроке мы создадим новую таблицу в базе данных для записи заявок по покупке определенных объявлений.

  • Управление цветами

В этом уроке вы узнаете, как с помощью простой конфигурации приложения полностью изменить его цветовую гамму за несколько кликов.

  • Подключение препроцессоров

Вы увидите, как можно подключить препроцессор stylus к проекту и начать использовать его возможности глобально и внутри каждого компонента.

  • Заключение

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

Содержание:
  • Блок 1. Знакомство с Vue

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

  • Что такое Vue.js

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

  • Создание простого Vue-приложения

Вы увидите, как можно быстро начать разработку с  помощью Vue. В результате урока мы напишем простое приложение, на примере  которого вы увидите самые базовые понятия фреймворка.

  • Блок 2. Основы Vue

Данный блок посвящен всем важным вводным темам, которые есть во фреймворке. Мы разберем самые основные принципы Vue на практических примерах, и подробным образом разберем синтаксис и принципы работы фреймворка.

  • Интерполяция

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

  • Динамические атрибуты

Вы узнаете каким образом работает фреймворк с HTML-атрибутами,  в чем особенность данного взаимодействия. Вы впервые познакомитесь с таким  понятием как директивы и научитесь использовать одну из них – v-bind.

  • Вывод HTML-кода

Иногда встречаются ситуации, когда необходимо  вывести HTML-код прямо из Javascript в шаблон. Но стандартные методы здесь не  сработают, в целях защиты. Вы узнаете, как обойти данные методы используя уже  другую директиву.

  • Добавление событий

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

  • Передача параметров в метод

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

  • Модификаторы событий

Вы узнаете специальную очень удобную особенность  фреймворка Vue – модификаторы. Речь пойдет конкретно про модификаторы, которые  упрощают обработку шаблонных решений в Javascript.

  • Модификаторы событий клавиатуры

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

  • Ярлыки для директив

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

  • Модель для работы с формами

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

  • Работа с CSS-классами

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

  • Динамические стили

Аналогично классам, в этом уроке мы разберем все  способы динамического добавления стилей к HTML-элементам.

  • Управление отображением элементов

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

  • Директива v-show vs v-if

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

  • Работа со списками

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

  • Оптимизация приложения с computed

Вы узнаете про новый объект конфигурации  приложения, с помощью которого вы сможете оптимизировать скорость работы  приложения, используя стандартные методы.

  • Отслеживание изменений с watch

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

  • Связывание разных приложений. Инстанс Vue

Вы узнаете, как связать несколько объектов или  приложений между собой. Мы также поговорим про новые методы и возможности,  которые возникают, если мы проинициализировали несколько приложений.

  • Доступ к DOM-элементам

Вы узнаете про референции, с помощью которых вы  можете получать доступ с нативным HTML-элементам в любом месте Vue приложения.

  • Свойство template

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

  • Жизненный цикл

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

  • Блок 3. Vue CLI&Webpack

В данном блоке мы разберем что такое за инструмент Vue CLI. Мы  установим его на компьютер и с помощью него сгенерируем новый проект на Vue на  основе сборщика webpack.У  нас сразу будет доступно к работе приложение с быстрой перезагрузкой страницы в браузере, технологией Hot Module Replacement и препроцессорами. Так  мы разберем файлы с расширением Vue, которые были сделаны специально для  данного фреймворка.

  • Зачем нужен CLI

Начиная с данного урока, мы перестанем разрабатывать все в HTML-файле и перейдем на новый уровень: будем использовать целый набор удобных инструментов для быстрого разворачивания Vue приложения.

  • Установка CLI и создание проекта

В этом уроке вы узнаете, как установить cli и создать определенный из списка шаблон приложения.

  • Обзор структуры проекта

В этом уроке вы подробно познакомитесь со всеми сущностями и файлами, которые есть в созданном проекте.

  • Как запускается приложение

В этом уроке вы узнаете, как запустить приложение, которое мы сгенерировали.

  • Блок 4. Компоненты

В  данном блоке мы очень подробно разберем понятие компонентов в библиотеке Vue.  Мы  разберем зачем нужны компоненты, как их регистрировать локально и глобально.  Причем мы разберем как это делается в HTML-файле и уже в целом проекте, который  использует файлы с расширением  .vue. Далее  вы узнаете обо всех особенностях взаимодействия между компонентами, а также о  том, как во Vue создаются локальные стили, и многое другое.

  • Зачем нужны компоненты

В данном уроке вы узнаете, что такое компоненты во фреймворке Vue и зачем они нужны.

  • Метод data

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

  • Локальная и глобальная регистрация

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

  • Названия компонентов

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

  • Регистрация компонентов в .vue

В этом уроке мы повторим подход регистрации компонентов, только уже не в HTML-файле, а в файле с расширением .vue.

  • Передача параметров компоненту

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

  • Валидация входящих параметров

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

  • Передача параметров от дочернего компонента

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

  • Передача функции как параметр

В этом уроке вы узнаете, как можно передавать функцию как параметр в дочерний компонент, и как это отразится на взаимодействии компонентов.

  • Связь дочерних компонентов

В этом уроке, вы узнаете, как связать 2 дочерних компонента. Мы разберем первый подход – связь компонентов через родительский компонент.

  • Использование event emitter

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

  • Изолированные стили

Изолированные стили

  • Передача HTML компоненту

В данном уроке вы узнаете, как можно передавать HTML-код компоненту как параметр. Узнаете про механизм слотов и вывод кода в определенном месте.

  • Блок 5. Директивы

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

  • Создание своей директивы

В данном уроке вы узнаете, как мы можем создать свою собственную директиву.

  • Взаимодействие с элементом

В данном уроке вы увидите, как директива взаимодействует с элементом к которому она была применена.

  • Жизненный цикл директивы

Как и в случае с компонентом, в директиве также присутствуют различные важные этапы ее жизни, и мы разберем каждый из них.

  • Параметры в директивах

В данном уроке вы узнаете, как передавать и обрабатывать параметры, которые были переданы внутрь директивы.

  • Аргументы в директивах

В этом уроке вы узнаете про другой вид параметров, которые можно передать в директиву – аргументы.

  • Модификаторы

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

  • Локальная регистрация

Как и у компонентов, директивы можно изолировать и регистрировать локально, или же наоборот – глобально. Вы узнаете, как это сделать.

  • Блок 6. Фильтры и Миксины

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

  • Создание простых фильтров

В этом уроке вы познакомитесь с понятие фильтров во фреймворке Vue. Вы узнаете, как их создавать и использовать.

  • Фильтрация списков

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

  • Использование миксинов

В этом уроке вы узнаете, что такое миксины, как их использовать и зачем они нужны.

  • Блок 7. Работа с формами

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

  • Текстовый инпут

В этом уроке мы более подробно поговорим, как модель работает с текстовыми полями.

  • Текстарея

Данный урок покажет вам как с помощью модели можно работать с текстареей.

  • Чекбоксы

Из этого урока вы узнаете об особенностях работы с чекбоксами внутри фреймворка.

  • Радио кнопки

В этом уроке вы узнаете, как модель работает с радиокнопками.

  • Селекты

В этом уроке мы разберем еще один элемент – выбор из списка селекта. И вы узнаете как модель работает с подобным элементом.

  • Числовой модификатор

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

  • Создание своего контрола

Часто стандартных элементов не хватает, и нужно создавать свои собственные элементы формы. В этом уроке вы узнаете, как это сделать.

  • Блок 8. Валидация форм с Vuelidate

Данный  блок посвящен сторонней библиотеки Vuelidate. Мы  научимся использовать и регистрировать сторонние плагины во Vue, тем самым  расширяя функционал фреймворка.  Далее  мы научимся создавать динамические и красивые валидации для любых элементов  формы, практически с любыми условиями и выводить сообщения об ошибках, в  зависимости от условия.  Научимся создавать свои собственные валидаторы, которые асинхронно или  синхронно смогут проверять те значения, которые мы запрограммируем.

  • Установка и настройка проекта

Мы создадим проект, в котором будут необходимые элементы формы для дальнейшей валидации. Также мы установим библиотеку, и вы увидите, как во Vue можно подключать различные плагины.

  • Настройка валидаторов

В этом уроке вы увидите и научитесь первым шагам инициализации валидатора и первой проверке правильности введенного значения.

  • Визуальное отображение ошибок

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

  • Валидация пароля

В этом уроке мы рассмотрим следующие способы валидации на поле ввода пароля.

  • Создание своего валидатора

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

  • Отправка формы

В этом уроке мы разберем способ валидации и отправки всей формы.

  • Блок 9. Роутинг с Vue-router

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

  • Установка Vue-router

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

  • Настройка роутера

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

  • Создание навигации

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

  • Обозначение активной ссылки

В этом уроке вы узнаете способы и тонкости определения текущего состояния роутинга и стилистического обозначения активной ссылки.

  • Динамические роуты

В этом уроке вы узнаете, как сделать роуты динамическими – у них будет изменяемая часть. Также вы узнаете, как обрабатывать параметры в компоненте.

  • Программная навигация

В этом уроке вы узнаете, как совершать навигацию уже не в шаблоне, а в самом компоненте.

  • Вложенные роуты

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

  • Передача параметров

В данном уроке вы узнаете про другой вид параметров, которые можно передавать по URL-адресу и обрабатывать в компонентах – гет параметры.

  • Хэш и скролл

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

  • Редирект

В этом уроке мы разберем способ редиректа с различных страниц на другие, и обработку ошибки ненайденного роута.

  • Защита роутов

Вы узнаете про способ защиты роутов с помощью такой сущности как guard. Мы рассмотрим несколько мест и способов, где мы можем реализовать подобный функционал.

  • Ленивая загрузка

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

  • Блок 10. Работа с сервером с Vue-resource

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

  • Настройка приложения

В этом уроке мы создадим каркас приложения, в котором будем рассматривать функционал работы библиотеки. Настроим сервер и установим плагин.

  • Создание объектов POST

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

  • Получение объектов GET

В этом уроке вы узнаете, как отправлять GET запросы для того, чтобы получить данные с сервера.

  • Использование resource

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

  • Глобальная настройка

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

  • Интерсепторы

В этом уроке вы узнаете про такой концепт как интерсепторы, зачем они нужны и как с помощью них вы можете управлять http-запросами.

  • Блок 11. Работа с данными с Vuex

В  данном блоке вы познакомитесь с плагином, который позволяет очень гибко и  удобно управлять данными, работая с Vue. Вы  узнаете концепцию Vuex, как его регистрировать, как взаимодействовать с данными  внутри него: забирать, получать, изменять, и многое другое.

  • Установка Vuex

В этом уроке вы увидите, как можно установить плагин Vuex и начать его использовать.

  • Использование state

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

  • Использование getters

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

  • Использование mutations

В данном уроке вы узнаете, что такое мутации в рамках библиотеки Vuex.

  • Использование actions

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

  • Оптимизация с помощью модулей

В этом уроке вы узнаете про то, как можно оптимизировать структуру стора путем модульной декомпозиции структуры стейта.

  • Блок 12. Создание SPA приложения на material design и firebase

Данный  модуль посвящен практической части курса, где мы все знания, полученные в  теории, будем применять на практике. Мы  создадим SPA приложение, которое является Serverless – приложением, которое  работает без серверной части. При этом у нас будет полностью рабочая база  данных в облаке, на сервисе Firebase от Google. У нас там будет реализован  хостинг, база данных, хранение картинок и регистрация с авторизацией  пользователей. В  качестве дизайна нами будет выбран Material Design от Google. Наше приложение  будет полностью адаптивным, то есть оно будет одинаково хорошо отображаться на  любом экране. По  смыслу это будет приложение, в котором будет возможность просматривать и  создавать объявления о продаже чего-либо и прием заявок. Будет реализован  личный кабинет, возможность загружать картинки, редактировать объявления и  просматривать заявки.

  • Создание проекта

В данном уроке мы начнем создавать наш проект и установим с помощью Vue CLI и Vuetify приложение на Material Design на webpack-сборке.

  • Обзор приложения

В данном уроке мы рассмотрим все файлы и папки в новом приложении.

  • Создание тулбара

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

  • Добавление ссылок и адаптация

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

  • Регистрация роутов

В данном уроке мы зарегистрируем все страницы нашего компонента, а также создадим их шаблоны.

  • Создание страницы логина

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

  • Создание страницы регистрации

В этом уроке мы сделаем всю функциональную часть для страницы регистрации с валидацией, сообщениях об ошибках и проверкой идентичности паролей.

  • Создание главной страницы

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

  • Создание страницы заказов

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

  • Создание страницы формы

Мы создадим визуальную часть страницы, в которой будем создавать новые объявления. Мы сделаем валидацию каждого из полей, но пока без загрузки изображений.

  • Создание страницы списка

В этом уроке мы создадим макет страницы списка всех созданных вами объявлений.

  • Создание страницы объявления

Мы создадим страницу отдельного объявления. Мы будем получать параметры из адресной строки и в зависимости от него выводить нужные данные об объявлении.

  • Подключение Vuex

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

  • Добавление объявлений

Мы реализуем возможность добавлять новые объявления уже через общую шину Vuex, где добавление будет работать в динамическом режиме. Также мы полностью перепишем все взаимодействие объявлений на Vuex.

  • Настройка firebase

В данном уроке мы настроим firebase в наш проект и рассмотрим какие функции у нее есть.

  • Регистрация пользователей

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

  • Логин пользователей

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

  • Вывод ошибок

Если у нас будут приходить какие-то ошибки с сервера, например, пароль неправильный, то у нас будет компонент, который будет отвечать за вывод этих данных в красивом формате.

  • Поддержание сессии пользователя

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

  • Защита роутов

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

  • Создание объявления в firebase

В этом уроке мы с помощью данных, введенных в форме на сайте, будем заносить новую запись в базу данных firebase и хранить уже ее на сервере.

  • Загрузка объявлений по умолчанию

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

  • Загрузка изображений в firebase

Мы реализуем возможность загрузки изображений. Будем обрабатывать входящий файл с помощью Vue и далее показывать его превью, а потом загружать изображение на удаленный сервер firebase storage и привязывать новую картинку к нужному объявлению.

  • Создание модального окна редактирования

В этом уроке мы создадим адаптивное модальное окно, с помощью которого сможем редактировать наши объявления.

  • Редактирование объявления

В этом уроке мы напишем функционал для редактирования объявления, где будем редактировать его на лету и сразу же в базе данных.

  • Создание окна покупки

В этом уроке мы создадим адаптивное модальное окно, в котором будем делать заказ через интересующее нас объявление.

  • Создание и обработка заказов

В этом уроке мы создадим новую таблицу в базе данных для записи заявок по покупке определенных объявлений.

  • Управление цветами

В этом уроке вы узнаете, как с помощью простой конфигурации приложения полностью изменить его цветовую гамму за несколько кликов.

  • Подключение препроцессоров

Вы увидите, как можно подключить препроцессор stylus к проекту и начать использовать его возможности глобально и внутри каждого компонента.

  • Заключение

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


Видеокурс
Видео урок


Видеокурс "Препроцессоры SASS и LESS. Автоматизация Front-end разработки". (Владилен Минин - Webformyself)


Это уникальный видеокурс на рынке Рунета, который во всех подробностях дает теоретическое и практическое освещение всех возможностей двух наиболее популярных и востребованных на рынке CSS-препроцессоров SASS и LESS в рамках единого курса.....


Страница курса - Препроцессоры SASS и LESS. Автоматизация Front-end разработки. (Владилен Минин - Webformyself)

Видеокурс
Видео урок


Видеокурс "FullStack-Мастер. Разработка CRM-системы на Node.js, Express, Angular6". (Владилен Минин - Webformyself)


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


Страница курса - FullStack-Мастер. Разработка CRM-системы на Node.js, Express, Angular6. (Владилен Минин - Webformyself)

Видеокурс
Видео урок


Видеокурс "WordPress-Мастер: разработка тем для WordPress". (Андрей Кудлай - Webformyself)


Видеокурс «WordPress-Мастер: разработка тем для WordPress» состоит из трех частей: одной теоретической и двух практических. Приобретая данный курс, вы получаете целостный продукт, в котором есть все необходимое для изучения и работы с WordPress......


Страница курса - WordPress-Мастер: разработка тем для WordPress. (Андрей Кудлай  - Webformyself)

Видеокурс
Бесплатный видео урок


Бесплатный видеокурс "Angular 4: быстрый старт, первые результаты". (Владилен Минин - Webformyself)


Данный курс посвящен очень популярной технологии от компании Google-Angular 4.Angular - это javascript фреймворк, который позволяет делать реактивные сайты - Single Page Applications. В процессе данного курса мы рассмотрим базовые возможности Angular 4...


Страница курса - Angular 4: быстрый старт, первые результаты. (Владилен Минин - Webformyself)

Видеокурс
Бесплатный видео урок


Бесплатный видеокурс "Практика верстки сайта-лендинга с нуля до результата". (Денис Булыга - Webformyself)


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


Страница курса - Практика верстки сайта-лендинга с нуля до результата. (Денис Булыга - Webformyself)

Видеокурс
Бесплатный видео урок


Бесплатный видеокурс "React JS. Основы". (Владилен Минин - Webformyself)


Данный мини-курс посвящен JavaScript библиотеке ReactJS, разработанной компанией Facebook. В этом курсе вы познакомитесь с базовыми возможностями React, начиная с определения концепта компонентов в веб-разработке и заканчивая разработанным приложением....


Страница курса - React JS. Основы. (Владилен Минин - Webformyself)

Видеокурс
Видео урок


Видеокурс "React JS с Нуля до Профи. Полное руководство для современной веб-разработки". (Владилен Минин - Webformyself)


React — обязательный инструмент для современного разработчика React — это библиотека JavaScript с открытым исходным кодом, которая используется для создания пользовательского интерфейса. Она была создана компанией Facebook и представлена разработчикам....


Страница курса - React JS с Нуля до Профи. Полное руководство для современной веб-разработки. (Владилен Минин - Webformyself)

Видеокурс
Бесплатный видео урок


Бесплатный видеокурс "Препроцессоры. Быстрый старт". (Владилен Минин - Webformyself)


Забирайте БЕСПЛАТНО пошаговый мини-курс по основам верстки с использованием CSS-препроцессоров – от одного из наиболее авторитетных издательств Рунета для веб-мастеров. В этом курсе вы на наглядном примере простого сайта с двумя разными темами увидите....


Страница курса - Препроцессоры. Быстрый старт. (Владилен Минин - Webformyself)

Видеокурс
Бесплатный видео урок


Бесплатный видеокурс "Full-Stack практика. Создание JavaScript блога". (Владилен Минин - Webformyself)


Данный курс посвящен теме Full-Stack разработки на JavaScript и знакомства с ней. В курсе мы разработаем небольшой блог, на примере которого мы разберем базовые составляющие Full-Stack разработки. В первую очередь мы реализуем сервер, который будет......


Страница курса - Full-Stack практика. Создание JavaScript блога. (Владилен Минин - Webformyself)

Видеокурс
Видео урок


Видеокурс "Фреймворк VUE JS. Полное руководство для современной веб-разработки". (Владилен Минин - Webformyself)


Курс состоит из 2-х больших блоков: теория и практика. Изучив теоретический блок, вы получите актуальную исчерпывающую теоретическую базу по состоянию на апрель 2018 года (к которой сможете возвращаться при необходимости в будущем – в качестве удобного...


Страница курса - Фреймворк VUE JS. Полное руководство для современной веб-разработки. (Владилен Минин - Webformyself)

Видеокурс
Бесплатный видео урок


Бесплатный видеокурс "VUE JS – быстрый старт, первые результаты." (Владилен Минин - Webformyself)


Данный курс посвящен самому быстрому javascript фреймворку - Vue JS. В рамках данного курса в 6 практических уроках мы создадим динамическое веб-приложение, где пошагово разберем на простых примерах, как работает фреймворк Vue.


Страница курса - VUE JS – быстрый старт, первые результаты. (Владилен Минин - Webformyself)

Видеокурс
Бесплатный видео урок


Бесплатный видеокурс "Создание Telegram бота". (Владилен Минин - Webformyself)


В процессе данного курса вы познакомитесь с основными понятиями, необходимыми, для создания ботов. Вы узнаете, как регистрировать бота в Telegram, получив его токен для выполнения запросов на API Telegram....


Страница курса - Создание Telegram бота. (Владилен Минин - Webformyself)

Видеокурс
Видео урок


Видеокурс "Telegram-бот мастер. Практический курс создания бота. Телеграм bot". (Владилен Минин - Webformyself)


Данный курс посвящен разработке Telegram-ботов на платформе NodeJS. Курс состоит из 3 частей, которые подробно и структурировано обучат вас создавать ботов с полного нуля....


Страница курса - Telegram-бот мастер. Практический курс создания бота. Телеграм bot. (Владилен Минин - Webformyself)

Видеокурс
Видео урок


Видеокурс "Angular 4 c Нуля до Профи. Полное руководство для современной веб-разработки". (Владилен Минин - Webformyself)


Angular — это JavaScript-фреймворк с открытым исходным кодом. Создан он компанией Google для создания клиентских приложений. Прежде всего, он нацелен на разработку SPA-решений (Single Page Application), то есть одностраничных приложений.....


Страница курса - Angular 4 c Нуля до Профи. Полное руководство для современной веб-разработки. (Владилен Минин - Webformyself)

Видеокурс
Видео урок


Видеокурс "JavaScript. Полное руководство для современной вебразработки". (Владилен Минин - Webformyself)


Данный курс – это полный охват теоретических и практических знаний и навыков по JS – без воды и в концентрированном виде. В курсе собраны лишь самые актуальные и востребованные в 2019 году знания по JS – для современной веб-разработки.


Страница курса - JavaScript. Полное руководство для современной вебразработки. (Владилен Минин - Webformyself)

Видеокурс
Видео урок


Видеокурс "Фреймворк Nuxt.js. Руководство по FullStack-разработке". (Владилен Минин - Webformyself)


Nuxt.js — это фреймворк высокого уровня, который создан с целью улучшения библиотеки Vue.js. Nuxt — это удобный инструмент, который позволяет быстро и относительно легко создавать действительно сложные приложения. Это основа для более простого создания...


Страница курса - Фреймворк Nuxt.js. Руководство по FullStack-разработке. (Владилен Минин - Webformyself)

Видеокурс
Видео урок


Видеокурс "Технология CSS Grid. Руководство по адаптивной верстке". (Денис Булыга - Webformyself)


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


Страница курса - Технология CSS Grid. Руководство по адаптивной верстке. (Денис Булыга  - Webformyself)

Видеокурс
Бесплатный видео урок


Бесплатный видеокурс "Server Side Rendering с Nuxt.js. Быстрый старт". (Владилен Минин - Webformyself)


Данный вводный курс расскажет вам про то, что такое Server Side Rendering, почему его стоит изучать и внедрять в свои проекты уже сейчас и какие плюсы вы получите, используя данную технологию. Вы узнаете про фреймворк,позволяющий очень просто создавать...


Страница курса - Server Side Rendering с Nuxt.js. Быстрый старт. (Владилен Минин - Webformyself)

Видеокурс
Бесплатный видео урок


Бесплатный видеокурс "JavaScript. Быстрый старт". (Владилен Минин - Webformyself)


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


Страница курса - JavaScript. Быстрый старт. (Владилен Минин - Webformyself)

Видеокурс
Бесплатный видео урок


Бесплатный видеокурс "Фреймворк Bootstrap 4. Быстрый старт". (Андрей Кудлай - Webformyself)


Представляем вам мини-курс «Bootstrap 4. Быстрый старт». Курс включает в себя 9 небольших уроков общей продолжительностью почти 2 часа. В курсе показана верстка макета из PSD с применением CSS-фреймворка Bootstrap 4. Bootstrap – это популярнейший......


Страница курса - Фреймворк Bootstrap 4. Быстрый старт. (Андрей Кудлай - Webformyself)

Видеокурс
Бесплатный видео урок


Бесплатный видеокурс "Верстка сайта на Grid. Быстрый старт ". (Денис Булыга - Webformyself)


В этом цикле уроков будет показана верстка PSD-макета при помощи современных Web-технологий на чистом HTML и CSS без использования препроцессоров, автоматизации и других дополнительных возможностей. В целом макет является довольно простым, но на его .....


Страница курса - Верстка сайта на Grid. Быстрый старт. (Денис Булыга  - Webformyself)

Видеокурс
Бесплатный видео урок


Бесплатный видеокурс "NodeJS. Быстрый старт". (Владилен Минин - Webformyself)


Данный курс по основам NodeJS является практическим, в результате которого вы увидите, как пишется консольное приложение, позволяющее взаимодействовать с файловой системой. Увидите, как через консоль добавлять новые заметки, читать уже существующие......


Страница курса - NodeJS. Быстрый старт. (Владилен Минин - Webformyself)

Видеокурс
Видео урок


Видеокурс "NodeJS. Полное руководство". (Владилен Минин - Webformyself)


В курсе предоставлена информация от самых основ, от установки самого NodeJS, до деплоя готового приложения и размещения его на сервере. Кульминацией практической части курса является создание большого статического интернет-магазина и сложного REST API....


Страница курса - NodeJS. Полное руководство. (Владилен Минин - Webformyself)

Видеокурс
Видеокурс


Видеокурс "React JS, Redux, ES2015 с Нуля до Гуру". (Михаил Русаков, Владилен Минин)


Данный курс-это обширный курс по JavaScript и фреймворку React, который позволит Вам с нуля создавать мощные современные, динамические JavaScript-приложения. Вы узнаете о тонкостях работы с "профессиональным" JavaScript,а так же узнаете о нововведениях...


Страница курса - React JS, Redux, ES2015 с Нуля до Гуру. (Владилен Минин)
КОЛЛЕКЦИЯ БЕСПЛАТНОГО ВИДЕО

Если Вы не нашли видео на сайте то воспользуйтесь наши каналом с большим количеством разнообразных видео курсов на различные темы

Смотреть видео Смотреть видео

Видеокурс "Фреймворк VUE JS. Полное руководство для современной веб-разработки". (Владилен Минин - Webformyself)
Страница курса - Фреймворк VUE JS. Полное руководство для современной веб-разработки. (Владилен Минин - Webformyself)

ПОПУЛЯРНЫЕ КНИГИ, КУРСЫ И ТРЕНИНГИ

Видеокурс Бесплатный видео урок
Видеокурс Видео урок
Видеокурс Видео урок
Видеокурс Бесплатный видео урок
Видеокурс Видеокурс
Видеокурс Бесплатный видео урок

БЕСПЛАТНОЕ ВИДЕО, МИНИ - КУРСЫ

Промо ролики видеокурса React JS. Основы. (Владилен Минин - Webformyself)
Промо ролики видеокурса Full-Stack практика. Создание JavaScript блога. (Владилен Минин - Webformyself)
Промо ролики видеокурса Создание Telegram бота. (Владилен Минин - Webformyself)
Промо ролики видеокурса VUE JS – быстрый старт, первые результаты. (Владилен Минин - Webformyself)
Промо ролики видеокурса Angular 4 быстрый старт, первые результаты. (Владилен Минин - Webformyself)
Промо ролики видеокурса Препроцессоры. Быстрый старт. (Владилен Минин - Webformyself)