Курс HTML5 и CSS3 — современные сайты и веб-приложения в Иркутске
Для кого
Курс «HTML5+CSS3» предназначен для широкого круга веб-разработчиков, желающих углубить свои знания и освоить на практике новые возможности, предоставляемые HTML5 и CSS3. Для полноценного усвоения материала слушателям желательно иметь навыки браузерной верстки, а так же базовые знания HTML, CSS и JavaScript.
Что сможете делать после окончания курсов - Размечать страницу при помощи новых семантических тегов HTML5: header, footer, aside, nav и других;
- Использовать новые поля ввода для создания автоматически валидируемых форм без JavaScript;
- Создавать восхитительные сайты используя новые возможности CSS3;
- Использовать тени, скругленные углы блоков без использования изображений;
- Создавать текстовые эффекты: вдавленный текст, неоновое свечение, эффект огня;
- Использовать на своих сайтах нестандартные загружаемые шрифты
- Создавать страницы, одинаково хорошо выглядящие на устройствах с разным разрешением экрана при помощи медиазапросов;
- Определять поддерживаются ли возможности HTML5/CSS3 в браузере пользователя с помощью библиотеки Modernizr;
- Создавать быстрые и современные сайты на основе шаблона HTML5 Boilerplate и css-фреймворка Twitter Bootstrap;
- Рисовать на холсте: создавать статическую 2d-графику и анимацию;
- Использовать встроенные возможности браузера для воспроизведения аудио и видео на веб-страницах;
- Определять местоположение пользователя при помощи средств геолокации.
Содержание курса*
Тема1. HTML5
Краткая история HTML; Новая идеология HTML5; Отличия HTML5 от предыдущих версий; Новые теги и атрибуты (<section>, <article>, <header>, <footer> и <nav> и др.); Смысл появления новых элементов и примеры использования; Поддержка новых тегов в устаревших браузерах; Новые возможности для создания форм; Способ ускоренного написания HTML и CSS кода.
Тема2. CSS3
Строчные и блочные боксы; Поток и расположение элементов; Позиционирование: абсолютное и относительное; Схлопывание границ (margin collapsing); Выступ за границы родительского элемента; Верстка плавающими (float) блоками; Приоритет селекторов CSS (специфичность); Введение в CSS3; Создание закругленных углов у блоков, тени под боксом, использование изображений в качестве рамки блока; Текстовые эффекты: тень, свечение, вдавленный текст, винтажный текст, эффект огня и др.; Автоматический перенос длинных слов в блоке; Работа с цветом: форматы цвета, RGBA, HSLA и прозрачность.
Тема3. CSS3, часть 2
Заливка градиентом; Использование полупрозрачных градиентных заливок для создания эффекта блика; Генераторы градиентов; Новые методы работы с фоном блока; Использование нескольких изображений для создания фона; Использование подгружаемых шрифтов в браузерах; Простое создание многоколоночной раскладки текста на странице; Новые функции для управления интерфейсом пользователя; Селекторы, комбинаторы и псевдо-классы: новые методы доступа к элементам без использования классов и идентификаторов.
Тема4. CSS3, часть 3
2D-преобразования: преобразования элементов на плоскости (перемещение, масштабирование, вращение и растягивание); Трехмерные преобразования элементов; Эффекты плавного перехода от одного стиля к другому без использования Flash и JavaScript; Создание анимации на веб-странице с помощью CSS3.
Тема5. Современные инструменты веб-разработчика
Понимание media queries; Адаптивный и мобильный дизайн средствами CSS3; JavaScript-библиотека для проверки поддержки возможностей HTML5 и CSS3 в браузере (Modernizr); HTML5 Boilerplate: Высокопрофессиональный и надежный набор HTML/CSS/JS шаблонов для разработки веб-сайтов и веб-приложений
Тема6. Less и Bootstrap
Динамический язык стилевой разметки LESS; Обзор возможностей Twitter Bootstrap; Twitter Bootstrap как прекрасный пример современного кроссбраузерного CSS-фреймворка; Быстрое создание современных веб-интерфейсов с помощью Twitter Bootstrap
Тема7. Canvas и Video
Элемент Canvas (Холст); Координаты холста; Рисование изображений в реальном времени; Методы создания изображений в реальном времени: пути, обводка, заливка, преобразования, кривые, градиенты, тени; Анимация на холсте; Поддержка спецификации HTML 5 Canvas браузерами; Плюсы и минусы в использовании элементов video и audio; Поддержка видео и аудио форматов браузерами; Атрибуты элементов video/audio; Управление воспроизведением.
Тема8. Новые возможности HTML5
Новые атрибуты HTML5 (contentEditable, data-*, tabindex, hidden и др.); Web Storage — мощная, хорошо поддерживаемая замена файлам cookie; Создание веб-приложений работающих без постоянного подключения к интернету; Встроенные возможности определения местоположения пользователя; Обмен сообщениями между окнами; Создание отдельных потоков для нагруженных вычислений (фоновые вычисления); Создание прямого соединения между сервером и клиентом для обмена данными в реальном времени через сокеты.
* Содержание и продолжительность курса могут быть изменены по желанию слушателя. В этом случае цена изменяется исходя из стоимости одного занятия и количества занятий.
