Курс Javascript Front-End

Введение в веб-разработку и интернет. Разбор основных терминов. Разбор всех этапов создания сайта. Ввод в язык разметки - HTML. Блочные и строчные элементы. Поток документа.

Виды элементов. Атрибуты элементов. Гиперссылки. Работа с изображениями и их разновидности.

Основы CSS: базовый синтаксис, селекторы, классы, наследование и каскадирование.

Сложные селекторы, псевдоклассы и псевдоэлементы. Работа со шрифтами. Семейства, начертания, способы подключения.

Фоны. Все свойства background. Табличная верстка. Списки. Формы. Создание интерактивной формы обратной связи. Все виды поля input и его атрибуты. Отправка данных на сервер.

Блочная верстка. Понятие Box Model. Отступы. Обтекание. Блочно-строчные элементы. Позиционирование. Рамки. Верстка карточек товаров.

Photoshop для верстальщика. Начало верстки макета. Семантическая верстка. HTML 5. Верстка сайта по готовому макету в формате PSD. Отработка элементов чекбоксов, радио-кнопок.

Адаптивная верстка. Медиа выражения. Верстка сайта с помощью Desktop похода. Подробный разбор SASS, LESS, SASS, PostCSS. Верстка сайта с помощью Mobile first подхода. Flexbox layout. Обзор графического редактора Figma.

Методологии верстки БЭМ, OOCSS, SMACSS, Atomic CSS.SVG и WEBP изображения. Разбор и верстка сложных блоков. Flexbox и его свойства.

Оживляем сайт. Выбор и подключение библиотеки на страницу. Работа с JavaScript. Популярные jQuery-плагины. Создание слайдера на основе плагина Slick.js

Трансформации. Плавные переходы. Анимации. Обзор готовой анимации Animate.css. Система контроля версий Git. Сборщик проектов Gulp. Настройка и автоматизация задач с помощью Gulp.

Знакомство с Javascript. Среда разработки WebStorm. Создание своего проекта и первой программы на Javascript. Обзор Git - системы управления версиями.

Синтаксис JS. Переменные, выражения, операторы, их типы и взаимодействие. Идентификаторы, литералы. Типы данных в Javascript.

Функции в Javascript. Стрелочные и анонимные функции. Функциональные выражения. Создание и инициализация массива. Команды Pop/Push, Shift/Unshift.

DOM (Дерево). Определение и функции DOM в JS. Навигация по DOM-элементам (getElement* и querySelector*). Основы работы с событиями. Библиотека jQuery.

Ajax. Фоновая отправка формы. Загрузка данных в фоне. Прототипное программирование. ОПП в Javascript. Классы. Модули в JS. WebPacker. NodeJS.

Установка VueJS, знакомство со средой разработки. Написание первого приложения «Hello, world». Изучение директивов: v-if, v-for, v-on, v-model.

Компоненты во VueJS и их структура. Входящие данные: props. События компонента: $emit. Значения по-умолчанию для props. Составные компоненты. Зоны ответственности. Mixins. Однофайловые компоненты. Работа с приложением «Список дел».

Изучение принципа DRY. Повторное использование кода. Примеси Mixins. Навигация в приложениях. Работа с библиотекой VueRouter. Схема маршрутов приложения. Вложенные маршруты. Ссылки перехода router-link. Программная навигация. Передача параметров в машруте. Props и параметры маршрута.

Управление состоянием приложения. Изучение библиотеки Vuex. Работа с хранилищем. Мутации. Геттеры. Работа с приложением “Складской учет”.

Взаимодействие с сервером. Изучение библиотеки VueResource. Архитектура приложения, на API. Обработка ответа. Авторизация в приложении.

Шаблон собственного проекта. Утилита vue-cli. Сборка и публикация финальной работы курса: “Интернет магазин спортивных товаров” на хостинге.

Основы ES2015. Основы React.js. Понятие Виртуальный DOM. React state. React Props. Реакт-элемент. Построение компонентов на JSX. Webpack + Babel.

Жизненный цикл компонентов. Иерархия компонентов. Состояние компонентов. Сборщик приложений Webpack. React Mixins. React Pure Render. Создание компонентов с помощью ES6 классов. Higher Order Components. Functional Components. Знакомство с Redux.

Middleware в Redux. Redux dev tools. Архитектура React / Redux приложений. Асинхронные actions в Redux.

React Router. React Router Hooks. Работа с навигацией в приложении, ссылки и переходы по странице, авторизация пользователя. Интеграция React Router и Redux. Flux. Обзор и структура.

Работа с иммутабельными данными в приложении. Библиотека ImmutableJS от Facebook. Тестирование приложения. Написание unit-тестов для функций, reducers, actions и компонентов. Enzyme.

Селекторы, нормализация кода. Работа с React Performance. Архитектура приложений на React.