[Codepr] Продвинутая верстка HTML5 + Front‑End

Продвинутая верстка HTML5 + Front‑End​

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

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

Урок 1. Оптимизация процесса работы над кодом
Ускоренное написание HTML, CSS, JavaScript. Использование консоли для веб‑разработки. Тонкости работы в Sublime text 3. Тонкости работы в WebStorm 10. Организация работы в репозитории. Веб‑сервисы для написания и тестирования кода.
Урок 2. HTML5
Новые теги и атрибуты HTML5. Web Storage, как альтернатива Сookie. Абстракция над HTML — Haml, Jade. Создание мобильных и веб‑приложений, работающих без постоянного подключения к интернету. Встроенные возможности определения местоположения пользователя. Создание прямого соединения между сервером и клиентом для обмена данными в реальном времени. Управление процессами на десктоп‑сайте с мобильного телефона.
Урок 3. Статические свойства CSS3
CSS3 градиенты, полупрозрачные градиенты, генераторы градиентов. Цветовые форматы RGB, RGBA, HSL, HSLA. Методы работы с фоном блока, использование нескольких изображений для создания фона. Использование подгружаемых шрифтов в браузерах. Обзор библиотек открытых шрифтов. Простое создание многоколоночной раскладки текста на странице. Селекторы, комбинаторы и псевдо‑классы. Методы доступа к элементам без использования классов и идентификаторов. CSS Flexbox.
Урок 4. Динамические свойства CSS3
2D преобразования элементов на плоскости: перемещение, масштабирование, вращение и растягивание. 3D преобразования элементов. Эффекты плавного перехода без JavaScript. Создание и оптимизация анимации CSS3.
Урок 5. JavaScript, jQuery2, Babel (ECMAScript 6)
Для чего использовать и для чего не использовать JavaScript. Отличие jQuery2 от jQuery. Оптимизация написания кода с использованием Babel (ECMAScript 6).
Урок 6. Методология BEM
Методология работы с изменчивым дизайном. Как сделать быстро проект и легко его поддерживать в дальнейшем. Коллаборативная работа и повторное использование кода.
Урок 7. Adaptive HTML5
Media Queries. Решения для адаптивной и мобильной верстки. Адаптация для retina‑экранов. Решения для внедрения parallax‑эффектов. Библиотека Modernizr для проверки поддержки возможностей HTML5/CSS3. Высокопрофессиональный и надежный набор HTML/CSS/JS шаблонов HTML5 Boilerplate для разработки веб‑сайтов и веб‑приложений.
Урок 8. Dynamic CSS, Front‑End Frameworks
Динамические языки стилевой разметки Less, Sass, Stylus. Особенносто решений, критерии выбора технологии. Возможности адаптивных кроссбраузерных Front‑End фреймоворков Bootstrap, Foundation. Создание современных веб‑интерфейсов без участия дизайнера.
Урок 9. Canvas, медиа‑элементы
Использование элемента сanvas для создания интерактивных, высокороизводительных интерфейсов. Фреймворк CreateJS: EaselJS, TweenJS, PreloadJS. Создание игр. Тонкости использования медиа‑элементов video и audio. Поддержка видео и аудио форматов браузерами, мобильными браузерами.
Урок 10. Оптимизация и отладка веб‑страниц
Контроль FPS на сайте. Композитные слои. Сhrome Developer Tools. Кэширование DOM‑элементов. Шторм при перерисовке страниц. Garbage collector. Обнаружение и ликвидация JavaScript‑утечек.