17.04.2020 В 18:30
17150
ք
без скидки : 24500 ք
29900
ք
без скидки : 37380 ք
| Основные пункты программы | № темы |
|---|---|
| Знакомство с Html-разметкой. Инструментарий разработчика. Работа с FTP клиентом. Структура страницы. Cинтаксис HTML. Обзор тегов ( head, html, body, title, meta), работа с тегами на странице. |
Тема № 1 |
| Знакомство с CSS. Основные принципы работы CSS. Синтаксис CSS. Подключение CSS к HTML документу. |
Тема № 2 |
| Работа с CSS селекторами. Cелекторы тегов, идентификаторы и классы. Контекстные селекторы. Наследование и каскад. Приоритеты. Работа над типовыми ошибками. |
Тема № 3 |
| Стили текста и оформления. Работа со шрифтом. Цвет, размер, межстрочное расстояние и т.д. Работа с фоном. Цвет, изображение. Маркеры списка. Рамки и обводки. |
Тема № 4 |
| Работа с блочными и инлайновыми элементами. Виды элементов. Различия и применение блочных и инлайновых элементов. Свойство display. Изучение поведения элемента при отрисовке. Свойство float и «плавающие» элементы. Другие виды поведения элементов. Семантическая разметка документа. Теги для работы с текстом, оформление списков, работа со ссылками и изображениями, таблицы и контейнеры (div). |
Тема № 5 |
| Стили позиционирования, отступы и размеры блоков. Поля (padding) и отступы (margin). Положение на странице. Алгоритм расчета ширины и высоты элементов на странице. |
Тема № 6 |
| Управление блоками в потоке. Базовые способы поведения элементов на странице (display: none, display: inline, display: block, display: inline-block, display: list-item, table*) Области применения тех или иных способов поведения элементов. Позиционирование блоков (stati, Relative, Absolute, Fixed) с «плавающими» элементами и свойство float.. Области применения тех или иных способов позиционирования. |
Тема № 7 |
| Сетка. Базовая верстка. Построение сетки с использованием float и display: inline-block. Преимущества и недостатки построения сетки с данными свойствами. Позиционирование на странице. Отступы, фиксация ширины(центровка, 2,3 и более колонок), фиксация шапки, подвал, выносные элементы. |
Тема № 8 |
| Верстка сайта. Пошаговый алгоритм создания. | Тема № 9 |
| Обзор типовых ошибок, проблемные участки кода, отображение страниц в браузерах. Секреты профессионалов. Принципы работы и профессиональный подход к созданию сайта - оформление кода с помощью CSS, HTML, JavaScript. | Тема № 10 |
| Командная разработка. Контроль версий кода на примере системы Git. Знакомство с системой контроля версий кода. Установка и настройка системы Git. Cоздание репозитория, контроль за его состоянием, фиксирование изменений и их история. Внешние репозитории сервисы GitHub и BitBucket. Организация рабочего процесса. Общий репозиторий. Ветки (отдельные ветки для каждой функции, для разработки, ветки для подготовки релиза, ветки для срочного исправления ошибок, форки) Обзор и особенности HTML5. Элементы HTML, DOCTYPE. Устаревшие атрибуты и теги.Использование новых тегов в HTML5. Атрибуты и их значения. Структура документа, обязательные теги, работа с метаданными. |
Тема № 11 |
|
Основы JavaScript. Синсаксис JavaScript (Тип данных, структура, циклы и переменные в коде языка, основные и условные операторы и выражения, конструкция switch) Массивы Работа с данными и их использование в разных ситуациях. Основные понятия в теме: массивы, дата, время, объекты и строки, свойства, а так же методы. Использование функций. Создание и наделение ее параметрами, результат этой работы. Работа с локальными переменными, область видимости и замыкание переменных. Рекурсия и стек. |
Тема № 12 |
|
Объекты JavaScript. Функциональные выражения и замыкания. Основные ошибки при работе с замыканиями. Синтаксис, функциональная анонимность. Работа с переменными – сохранение, вызов, передача, возврат функций. Область видимости переменных внутри функции. Объекты и их методы. Обзор возможностей и область применения. This и New. Геттеры и сеттеры. Сall, apply, bind. Основы объектно-ориентированного программирования. Работа с конструктором, создание функционального стиля, прототипы и наследование. |
Тема № 13 |
|
Расширенные возможности HTML и JavaScript. Browser Object Model (BOM - Объектная модель браузера). Структура и основные глобальные объекты окно, навигация, локация, история, консоль и др. Document Object Model (DOM - Объектная модель документа). Работа с деревом и его свойства, навигация и поиск элементов, атрибуты DOM. |
Тема № 14 |
|
Расширенные возможности CSS. Адаптивная верстка под различные устройства, в том числе мобильные. Характерные особенности и различные варианты исполнения задач. Работа с CSS media queries. (возможности изменения размеров, цвета, типов, а так же ориентация страниц) Использование языка программирования стилей SASS. Оптимизация кода с помощью SASS. Знакомство с препроцессорами. Работа с переменными (mixins), импорт, родительство, циклы, расширения стилей. Автоматизация задач с помощью менеджера зависимостей NPM. Работа с задачами – создание, настройка, вызов. |
Тема № 15 |
|
Обзор библиотек и фреймворков. Библиотека JQuery. Верстка фотогалереи с добавлением анимации. Базовые понятия анимации. Использование CSS transitions и animations. Cобытие transitionend. Обработка событий и порядок действий. Определение объекта события. Всплытие, перехват и делегирование событий. Создание событий вручную. Браузер - действия по умолчанию. Какие бывают события. События клавиатуры, мыши, окна – изменение размера, прокрутка документа. Загрузки документов и изображений, скриптов. Перетаскивание элементов. Теория: События мыши. Cобытия клавиатуры. Прокрутка документа. Изменение размеров окна. Загрузка документа. Изображений. Cкриптов. Знакомство с AJAX. Кросс-доменные запрос с помощью объекта XMLHttpRequest. Кросс- доменные коммуникации с помощью JSONP. Фреймворк Bootstrap. Как работает фреймворк и его функциональные возможности (линейные, радиальные, повторяющиеся градиенты, получение промежуточного цвета). Создание различных эффектов - форма и размер, трансформация элементов, в том числе трехмерная, смещение, масштаб. |
Тема № 16 |
|
Анимация с помощью CSS. Верстка фотогалереи с добавлением анимации. Базовые понятия анимации. Использование CSS transitions и animations. Cобытие transitionend. Различные виды градиентов. Трансформации обычные и трехмерные. Функции – поворота, масштаб и смещение. |
Тема № 17 |
