[Codepr] Комплекс «FRONT‑END»

Комплекс «FRONT‑END»​

Продвинутый курс для Front‑End разработчиков. Учимся создавать большее меньшими силами. Рассматриваем аспекты оптимизации производительности и тонкости отладки.
HTML и CSS. Основы создания веб‑страниц
Познакомим вас с возможностями современных веб‑технологий и дадим все необходимое, что бы вы сами могли создавать веб‑страницы и сайты.

Спойлер: Программа

Урок 1. Принципы веб‑разработки
Как создаются сайты. Составные части настоящего сайта. Необходимые компоненты для работы сайта. Программы для работы над сайтами. Особенности работы браузеров. Работа сайта на телефонах и планшетах.


Урок 2. Язык разметки HTML страниц
Структура HTML документа. Теги для оформления текста. Спецсимволы. Гиперссылки. Размещение изображений и видео на странице. Списки, формы, кнопки. Кодировка страницы. Мета‑данные на странице.
Урок 3. Язык оформления CSS cтилей
Возможности CSS стилей. Способы подключения стилей к HTML документу. Селекторы по классу, id, тэгу. Наследование и группировка свойств. Приоритеты применения стилей. Псевдоклассы и псевдоэлементы.
Урок 4. Нарезка дизайн‑макета PSD
Отличие PSD макеты от изображения. Выделение основных частей макета. Определение свойств блоков макета (размеры, поля, цвета, шрифты). Подготовка графики для вставки в HTML‑документ.
Урок 5. Таблицы и табличная верстка
Создание таблиц. Объединение ячеек. Вложенные таблицы. Табличная верска макетов. Плюсы и минусы табличной верстки. Предпосылки для перехода к блочной верстке.
Урок 6. Блочная верстка, часть 1
Теги для блочной верстки (div, span). Отступы элементов (margin, padding). Обтекаемые элементы (float). Позиционирование элементов (absolute, relative, fixed). Создание многослойных страниц. Порядок слоев (z‑index).
Урок 7. Блочная верстка, часть 2
Компоновка страницы с помощью блоков. Поведение блоков при изменении размера экрана. Поведение блоков при изменении их содержания. Использование фоновых цветов, изображений и видеофайлов.
Урок 8. Стандарты веб‑разработки
Стандарты W3C для HTML, CSS. Кроссбраузерное отображение страниц. Адаптивность страниц. Критерии оценки качества верстки. Отладка страниц. Нововведения стандартов HTML5 и CSS3.

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

Спойлер: Программа

Урок 1. Взаимодействие JavaScript и HTML страницы
Что такое JavaScript. Взаимодействие с DOM (объектной моделью документа). Взаимодействие клиент‑сервер. Способы подключения JavaScript к странице. Функции и переменные. Типы данных.
Урок 2. Объектно‑ориентированный подход в JavaScript
Принципы ООП. Классы и объекты. Наследование, инкапсуляция, полиморфизм. Особенности ООП в JavaScript. Ключевое слово this. Замыкания в JavaScript. Прототипы. Отладка.
Урок 3. JavaScript фреймворки
Предпосылки появления фреймворков. Обзор фреймворов. Выбор фреймворка. Обзор фреймворка jQuery. Сопоставление с JavaScript (программная логика). Сопоставление с CSS (стилевое оформление).
Урок 4. Подробнее о jQuery
Работа с формами. Обработчики явных и неявных событий. Обработка скроллинга. Фильтрация событий (debouncing, throttling). Простая анимация, сложная анимация, цепочки анимаций. Easing.
Урок 5. Асинхронный JavaScript
Синхронное и асинхронное выполнение функций. Асинхронные запросы к серверу (AJAX). Использование jQuery для AJAX. Сериализация форм. Обработчики событий при работа с AJAX. Таймауты.
Урок 6. Передача данных между сервером и клиентом
Форматы передачи данных в JavaScript. Обзор JSON. Генерация и парсинг JSON. Сравнение форматов. Использование JSON в Ajax. Вопросы безопасности. JSONP и JSONPP. Кроссдоменные запросы.
Урок 7. Создание интерактивного интерфейcа пользователя
Надстройка над стандартными элементами управления (формы, поля, кнопки). jQuery UI. Виджеты. Эффекты. Утилиты. Календари. Автодополнение. Диалоговые окна. Кастомизация элементов управления.
Урок 8. Работа с медиа‑данными и пользовательскими данными
Рисование на Canvas. Управление и кастомизация Video. Использование Flash. Передача данных по web‑sockets. Многопользовательский чат. Хранение данных в браузере (session, cookies, localStorage, web sql).

HTML5 и CSS3. Современные средства веб‑разработки
Познакомим вас с расширенными возможностями современных веб‑технологий. Вы научитесь использовать интересные и красочные возможности HTML5 и CSS3.

Спойлер: Программа

Урок 1. Новые возможности HTML5
Новые теги и атрибуты HTML5. Новые элементы форм HTML5. Семантические возможности HTML5. Векторная графика SVG. Язык математической разметки MathML. Ускоренное написание HTML кода (Haml, Jade, Slim, Markdown).
Урок 2. Стилевые возможности CSS3
Простые и сложные градиенты. Использование изображений в качестве фона. Применение нестандартнх шрифтов. Текстовые эффекты. Способы указания цвета. Полупрозрачность.
Урок 3. Структурирование и анимация в CSS3
Многоколоночность. Flexbox‑лейаут. 2D‑преобразования. 3D‑преобразования. Переходы. Анимация. Оптимизация анимации. Повышение производительности и снижение нагрузки на систему.
Урок 4. CSS препроцессоры (LESS, SASS)
Абстракция CSS кода и упрощение файлов каскадных таблиц стилей. Обзор LESS. Обзор SASS. Использование препроцессоров в development‑окружении. Публикация стилей на production.
Урок 5. Современные инструменты веб‑разработчика
Адаптивный и мобильный дизайн с CSS3 Media Queries. Определение возможностей браузера средствами Modernizr. Шаблоны для быстрого старта HTML5 Boilerplate.
Урок 6. Фреймворки
Обзор Bootstrap. Обзор Foundation. Сетки. Шаблоны. Типографика. Медиа. Таблицы. Формы. Навигация. Алерты. Темы для фреймворков. Кастомизация фреймворка. Использование составных частей фреймворков.
Урок 7. Медиа‑информация
Возможности рисования на странице (canvas). Интерактивная работа с видео (video). Подготовка видео и аудио для размещения на странице. Поддержка кодеков на планшетах и мобильных устройствах.
Урок 8. Расширенные возможности HTML5
Хранение данных. Автономные приложения. Геолокация. Сообщения (Web Messaging). Фоновые вычисления (Web Workers). Сокеты (Web Sockets). Мобильные приложений на HTML5.