- Курс
- Программа
HTML & CSS
Урок 1. Введение в HTML
На уроке рассматриваются основные этапы истории развития языка HTML, понятия тега, элемента, а также теги форматирования текста. Также не упущены на нем и параметры выше указанных тегов. Полностью рассматриваются ссылки и работа с ними.
Урок 2. Работа с изображениями
Урок предназначен для изучения работы с изображениями в HTML. В него включены такие вопросы как: работа с фоном, правильная вставка в код изображений, параметры тега img, особенности применения тех или иных подходов работы с ним. Также рассмотрены некоторые свойства из CSS3 для работы с фоном.
Урок 3. Таблицы и Списки
Урок содержит полный осмотр работы с таблицами, применение их как инструмента верстки страницы. Также рассматриваются все параметры для работы с таблицами, вложенность таблиц, слияние ячеек таблицы. Вторая половина занятия посвящена спискам а также понятию цвета в верстке.
Урок 4. Divs - слои
Урок всецело посвящен слоям, всем особенностям работы с ними, преимущество над таблицами и многие другие вопросы по даннной теме.Также на уроке рассматриваються элементы span и особенности работы с ними.
Урок 5. CSS каскадные таблицы стилей
Урок всецело посвящен изучению CSS. Методы подключения или внедрения CSS, лексическая структура CSS файлов, преимущества над аналогичными параметрами – это основные вопросы данного занятия.
Урок 6. Метатеги. Позиционирование слоев
На уроке рассматриваются метатеги хранящие мета информацию о страницах и позиционирование слоев. А также рассматриваются много мелких, но необходимых мелочей: свойства прозрачности, закругленные края у слоя, установка иконки.
Урок 7. Формы и их элементы
Урок предназначен для изучения тега form, включая все элементы для ввода информации в форму, основы теории о работе форм и а также параметры необходимые для ее настройки. Также на занятии задеваются основные рычаги на SEO используемые при верстке.
Урок 8. Макеты страниц. Нарезка изображений
Урок содержит в себе осмотр правильных подходов при нарезке изображений для верстки макета, а также правильной планировки будущей страницы для написания наиболее оптимизированного кода.
JavaScript
Essential
Урок 1. Введение в JavaScript
- Что такое JavaScript?
- Версии JavaScript.
- Клиентский JavaScript.
- Переменные и типы данных.
- Выражения и операторы.
Урок 2. Логические структуры
- Условные конструкции.
- Циклические конструкции.
Урок 3. Массивы
- Создание массивов.
- Одномерные и многомерные массивы.
- Методы массивов.
Урок 4. Функции
- Определение и вызов функции.
- Аргументы функций.
- Функции как данные.
- Область видимости функций.
Урок 5. Объекты
- Создание объектов.
- Свойства объектов.
- Свойства и методы универсального класса Object.
- Объекты, подобны массивам.
Урок 6. Практика ч.1
- Что такое библиотека в JavaScript.
- Как работают с библиотеками.
- Практика работы с объектом.
- Разработка функционала библиотеки.
Урок 7. Практика ч.2
- Разработка модели объекта библиотеки.
- Создание мини-игры в виде квеста.
- Рассмотрение интересной игры, созданной с помощью JS.
Advanced
Урок 1. Конструкторы и прототипы
- Конструкторы.
- Прототипы и наследование.
- ООП в JavaScript.
- Общие методы класса Object.
Урок 2. Работа с окнами браузера
- Объекты Window, Screen и Navigator.
- Объекты Location и History.
- Таймеры.
- Методы управления окнами.
- Простые диалоговые окна.
- Обработка ошибок.
Урок 3. Работа с документами
- Динамическое содержание документа.
- Свойства объекта Document.
- Обзор объектной модели W3C DOM.
- Поиск элементов в документе.
- Модификация документа.
Урок 4. CSS и JavaScript
- Обзор CSS.
- CSS для DHTML.
- Использование стилей в сценариях.
- Вычисляемые стили.
- CSS-классы.
Урок 5. События и обработка событий (Часть 1)
- Базовая обработка событий.
- Обработка событий в модели DOM Level 2.
Урок 6. События и обработка событий (Часть 2)
- Обзор событий элементов управления.
- Практические примеры обработки событий мыши.
- Практические примеры обработки событий клавиатуры.
Урок 7. Формы и элементы формы
- Объект Form.
- Определение элементов формы.
- Сценарии и элементы формы.
- Примеры верификации формы.
Урок 8. Cookies и механизмы сохранения данных на стороне клиента
- Обзор cookies.
- Сохранение и чтение cookie.
- Хранимые данные и безопасность.
Урок 9. Работа с графикой на стороне клиента
- Работа с готовыми изображениями.
- Графика и CSS.
- SVG масштабируемая векторная графика.
- VML векторный язык разметки.
- Создание графики с помощью тега canvas.
Урок 10. Ajax и работа с HTTP протоколами
- Использование объекта XMLHttpRequest.
- Определение элементов формы.
- Сценарии и элементы формы.
- Примеры верификации формы.
jQuery
Урок 1. Введение в JQuery
- Знакомство с бибилиотекой JQuery.
- Подключение JQuery к странице.
- КПонятие "селектор" и селекторная выборка элементов.
Урок 2. Фильтры
- Базовые фильтры.
- Фильтры контента.
- Фильтры атрибутов.
- Фильтры элементов форм.
Урок 3. Манипуляция свойствами, атрибутами и стилями
- Чтение и установка значений атрибутов.
- Изменение стиля отображения элемента.
- Установка содержимого элемента.
- Обработка значений элементов формы.
Урок 4. Работа с DOM-деревом
- Методы фильтрации элементов.
- Методы перемещения по DOM-дереву.
Урок 5. События и обработчики событий
- Событийная модель.
- Нативные методы JavaScript для обработки событий.
- Методы обработки событий в JQuery.
Урок 6. Создание анимаций
- Метод "animate" и его возможности.
- Готовые анимационные эффекты JQuery.
Урок 7. Библиотека JQuery UI
- Знакомство с библиотекой JQuery UI.
- Подключение библиотеки.
- Подробное изучение всех виджетов.
Урок 8. Вспомогательные функции
- Методы для работы с массивами.
- Метаданные в JQuery.
Урок 9. Расширение JQuery с помощью собственных модулей
- Основные правила создания модулей расширения для JQuery.
- Создание собственных вспомогательных функций.
- Добавление новых методов в библиотеку JQuery.
Урок 10. Работа с Ajax в JQuery
- Знакомство с Ajax.
- Взаимодействие с сервером нативными методами JavaScript.
- Взаимодействие с сервером методами JQuery.
HTML5 & CSS3
Урок 1. Основы синтаксиса и семантики и передовые методы разметки.
- Объявление DOCTYPE.
- Определение кодировки, языка.
- Оптимизация script и link.
- Добавление в структуру документа новых элементов HTML5.
- Элемент article или section.
- Проверка и изменение структуры документа.
- Временное скрытие содержимого.
- Управление нумерацией списков.
- Создание редактируемых частей страницы.
- Проверка поддержки HTML5.
- Валидация HTML5.
Урок 2. Формы. Встроенное аудио и видео.
- Поле ввода контактной информации.
- Использование полей ввода даты и времени.
- Численный ввод.
- Отображение поискового поля ввода.
- Выбор значения из числового диапазона.
- Создание редактируемого раскрывающегося списка.
- Обязательные поля формы.
- Автофокусировка на поле формы.
- Отображение замещающего текста.
- Отключение автозаполнения.
- Ограничение значений.
- Создание простой формы.
- Добавление НТML5-аудио и управление аудиопотоком.
- Создание аудиопроигрывателя.
- Добавление НТМL5-видео.
- Кроссбраузерная поддержка видео и настройка видеоразрешения.
- Цикличное воспроизведение видео.
Урок 3. Микроданные и пользовательские данные. Геолокация.
- Добавление в разметку микроданных.
- Использование микроданных.
- Добавление в разметку пользовательских данных.
- Доступ к пользовательским данным с помощью JavaScript.
- Управление пользовательскими данными.
- Создание приложения для карты с помощью пользовательских данных.
- Получение основных геолокационных данных.
- Альтернативный способ получения основных геолокационных данных.
- Получение адреса путем обратного геокодирования широты и долготы.
- Преобразование адреса в широту и долготу.
- Drag and drop.
- Progress bar.
Урок 4. Элемент Canvas.
- Рисование на элементе canvas.
- Использование эффекта прозрачности.
- Установка размеров «холста».
- Использование градиентов, узоров и стилей линий.
- Добавление на «холст» внешних изображений.
- Настройка цветовых преобразований.
- Использование геометрических преобразований.
- Добавление на «холст» текста.
- Обрезка рисунков на «холсте».
- Добавление эффекта анимации к рисункам на «холсте».
- Рисование графиков на «холсте».
- Сохранение рисунка с «холста» в файле.
Урок 5. Элементы доступа и расширенные возможности JavaScript в HTML5.
- Создание текстового описания рисунка.
- Определение аббревиатур и сокращений.
- Определение разделов страницы с помощью ключевых ролей ARIA.
- Создание доступных навигационных ссылок.
- Связывание полей формы с метками.
- Логическая группировка полей формы.
- Динамическое включение fieldset.
- Определение обязательных полей формы.
- Использование ARIA для динамических обновлений.
- Локальное хранилище.
- Кэширование приложений.
- Перетаскивание.
- Рабочие процессы.
- Веб-сокеты.
- История.
- Локальные файлы.
Урок 6. Кроссбраузерные свойства CSS3.
- Введение в CSS3.
- Border-radius.
- Text-shadow.
- Box-shadow.
- Background-origin.
- Background-size.
- Одновременное использование нескольких фоновых изображений.
- Parallax.
- Opacity.
- RGBA.
- Практический пример с применением пройденных на уроке свойств.
Урок 7. Переходы в CSS. Градиенты в CSS3. Улучшенние форм.
- Временные функции.
- Задержка перехода.
- Краткая форма записи.
- Краткая форма записи перехода с задержкой.
- Поддержка в браузерах.
- Полная запись перехода.
- Состояния перехода.
- Переход нескольких свойств.
- Переход всех возможных состояний.
- К каким свойствам применимы переходы.
- Простой пример переходов с помощью CSS3.
- Градиенты.
- Разметка для простой формы регистрации.
- Стили для полей и подписей.
- О CSS3-селекторах.
- Оформление полей ввода.
- Пример формы с помощью CSS3.
Урок 8. Преобразование содержимого и добавление CSS-анимаций.
- Масштабирование.
- Поворот.
- Кручение.
- Сдвиг.
- Ключевые кадры.
- Ссылки на keyframe.
- Повторное использование анимации в состоянии hover.
- Практический пример «Создание галереи изображений с помощью HTML5 и CSS3».
Урок 9. Работа с границами, текстом, шрифтом. Полезные псевдо-классы.
- Свойство word-wrap.
- Свойство text-overflow.
- Свойство word-wrap.
- Свойство @font-face.
- Работа с границами.
- Использование условных комментариев.
- Добавление авторского стиля.
- Полезные псевдо-классы.
Урок 10. Адаптивный дизайн.
- Введение в адаптивный дизайн.
- Fluid grid.
- Fluid images.
- Media queries.
- CSS Regions.
- Mobile first.
Практикум
Практикум. Часть 1.
Постановка задачи, обсуждение путей реализации.
Практикум. Часть 2.
Рассмотрение вариантов реализации задач.
Практикум. Часть 3.
Презентация проектов. Обсуждение.