Программа курса
-
Тема 1. Введение в HTML. Структура страницы.
Понятие HTML. Основы работы глобальной сети Интернет. Понятие веб-сервера. Статичные и динамичные сайты. Основные типы сайтов. Обзор современных стек технологий HTML и CSS. Базовая структура HTML. Варианты разметки страницы. Основные блоки HTML-страницы.Создание гиперссылок и работа с ними. Основы работы с гиперссылками. Взаимосвязь между страницами статичного веб-сайта.
-
Тема 2. Размещение изображений и списков
Размещение изображений на веб-странице. Упорядоченные и неупорядоченные списки
-
Тема 3. Медиа-файлы. Iframe. Формы
Размещение на своих страницах звуковых и видео-файлов.Внедрение внешних HTML-страниц. Взаимодействие ссылок с iframe-элементами.Текстовые поля, радио-кнопки, флажки/чекбоксы, элемент выбора select и их атрибуты. Создание формы обратной связи.
-
Тема 4. Основы каскадных таблиц стилей CSS.
Основы работы с CSS. Подключение файла стилей. Базовые понятия: селектор, свойство, каскад, наследование, единицы измерения. Применение CSS-свойств к оформлению изображений.
-
Тема 5. Макетирование страницы с CSS
Верстка страницы по макету. Построение структуры страницы. Высота и ширина колонок. Свойства float, display.
-
Тема 6. Flexbox. Основы работы
Понятие flex-контейнера. Основные свойства flex-контейнера. Дочерние flex-элементы. Настройка и управление flex-элементами
-
Тема 7. Адаптивные html-страницы
@media, медийные запросы (@mediaqueries) для страниц, mediafeature.
-
Тема 8. Работа со шрифтами
@font-face, GoogleFonts, Единицы измерения для работы со шрифтами и html-элементами.
-
Тема 9. CSS-анимация.
-
Тема 10. Подготовка, размещение и поддержка сайта в сети
Выбор хостинга. Основы работы с FTP-клиентами. Использование тега meta.
-
Тема 1. Введение в JavaScript
Типы данных. Операторы. Инструкции и выражения. Переменные и константы.
-
Тема 2. Конструкции ветвления и циклы
Конструкции ветвления логики программы (if…else, switch). Циклы: с предусловием, постусловием и арифметический.
-
Тема 3. Функции
Понятие функции. Объявление функции. Аргументы функции. Возврат значений. Области видимости. Стрелочные функции. Анонимные функции.
-
Тема 4. Массивы и объекты
Понятие объект (Object). Свойства объекта. Методы объекта. Массивы. Свойство и методы функции. Объект String и его аргументы. Объект Math. Функция parseInt(). Функция parseFloat(). Статические функции объекта Math.
-
Тема 5. Клиентский JavaScript. Объект Window
Объекта Data. Работа с таймерами. Свойства и методы объекта Window. Управление поведением Window. Объект Location. Объект History. Объект Navigator.
-
Тема 6. Клиентский JavaScript. Объектная модель документа: DOM. Работа с HTML элементами.
Причины использования DHTML. DOM (DocumentObjectModel — объектная модель документа). Доступ к узлам DOM. Доступ по идентификационному номеру (ID) . Доступ по атрибуту name. Доступ по имени дескриптора . Доступ и изменение класса через свойство className. Получение информации об узле. Перемещение по иерархическому дереву DOM. Метод removeChild(). Удаление элементов. Методы createElement() и appendChild(). Создание и добавление элементов. Методы insertBefore(). Создание и добавление элементов. Метод createTextNode(). Создание текстовых элементов. Метод setAttribute(). Добавление атрибутов. Метод cloneNode(). Клонирование элементов. Метод replaceChild(). Замена элементов. Свойство innerHTML. Изменение фрагментов кода HTML. Использование CSS стилей в сценариях JavaScript. Соглашения об именах: CSS-атрибуты в JavaScript. Работа со свойствами стилей. DHTML-анимация.
-
Тема 7. Клиентский JavaScript. Cookie
Описание cookie. Cookie в браузере.
-
Тема 8. Клиентский JavaScript. Формы и обработка событий
Элементы управления и объекты. Быстрый доступ к объектам. Динамическое изменение значений атрибутов. Изменение элементов на основе значений, указанных пользователем. Динамическое изменение списка вариантов. Проверка выбранных флажков. Изменение элементов перед отправкой формы на сервер. Использование встроенных функций JavaScript. Отключение элементов. Элементы только для чтения.
-
Тема 1 CSS-фреймворки
CSS-фреймворки: Bootstrap и Foundation. Базовые возможности фреймворков.
-
Тема 2 Контейнеры. Система сеток Bootstrap
Контейнеры. Система сеток Bootstrap. PSD-файл для разработки макета.
-
Тема 3. Оформление HTML-элементов
Оформление списков, шрифтов, таблиц и изображений с помощью Bootstrap.
-
Тема 4. Компоненты Bootstrap
Кнопки. Выпадающие элементы. «Хлебные крошки».
-
Тема 5. Формы
Всплывающие формы. Формы обратной связи. Всплывающие сообщения.
-
Тема 6. Встраивание медиа-файлов
Границы. Иконки. Встраивание медиа-файлов на HTML-страницы.
-
Тема 7. JavaScript и события Bootstrap
Понятие JavaScript. Базовые возможности языка. Взаимодействие с Bootstrap. Управление поведением bootstrap-компонент через JS.
-
Тема 1. Принципы организации CSS
Методология БЭМ. ООCSS. Попиксельная верстка. Инструмент PixelPerfect.
-
Тема 2. GridCSS
Контейнеры, треки, линии, ячейки, области, аллеи. Вложенность grid-ов. Z-index.
-
Тема 3. Таск-менеджер Gulp.
Понятие Таск-менеджера. Преимущества применения. Настройка Gulp на работу c SASS.
-
Тема 4. Препроцессоры CSS
Основы работы с SASS. Переменные. Вложенность кода. Комментарии в SASS. Примеси (Миксины).
-
Тема 5. Препроцессоры CSS
Наседование. Фрагментирование SASS файлов. Импорт. SASS-script.
-
LandingPage: свой собственный сайт портфолио! (25 ак. часов)
Тема 1. Подготовка окружения. Разбор структуры макета. Верстка хэдера.
Тема 2. Верстка футера
Тема 3. Блоки «Мои навыки», «Почему Я?», «Блог»
Тема 4. Подключение сторонних библиотек. «Образование»
Тема 5. Блоки «Портфолио», «Контакты».
-
Тема 1. Системы контроля версий. Репозиторий Git.
Принципы работы систем контроля версий. Введение в Git. Установка и начальная настройка Git (Windows и Linux).Создание, изменение и удаление репозитория. Просмотр истории коммитов. Отмена действий. Метки. Псевдонимы.
-
Тема 2. Ветвление в Git
Принципы ветвления и слияния. Управление ветками. Слияние и разрешение конфликтов. Перебазирование.
-
Тема 3. Использование Git на сервере. Распределенная работа в Git
Установка Git на сервере. Настройка. Протоколы. Рабочие процессы. Создание коммитов. Поддержка. Инструментарий.
-
Тема 4. Использование Git в других окружениях
Графические утилиты. Среды разработки. GitHub.
-
Тема 1. Подготовительные работы. Настройка окружения
Этап 1: Установка Docker. Основы работы с Linux-консолью.
Этап 2: Установка SSH. Настройка SSH. Установка Apache2. Создание и загрузка Docker образа. Установка MySQL (репозиторий Ubuntu). Установка языка программирования PHP.
-
Тема 2. Базовые команды языка PHP
Шаблон php-документа. Переменные и константы. Условные операторы (if-else, switch).
-
Тема 3. Массивы и строки. Циклы
Структура данных массив. Одномерные и двухмерные массивы. Особенности работы с массивами. Сортировка массивов.
Арифметический цикл. Цикл постусловием. Цикл с предусловием.
-
Тема 4. Пользовательские функции
Понятие функции. Создание и использование простых функций. Создание и вызов функций, принимающих аргументы. Создание и использование функций, возвращающих значение. Переменные и функции. Область действия переменных и глобальные переменные. Задание значений аргументов по умолчанию.
-
Тема 5. Подключение внешних файлов
Использование функций include и require. Константы.
-
Тема 6. Глобальные массивы GET и POST.
Основы работы с get и post запросами (через HTML-формы и Ajax-запросы). Обработка данных из HTML-формы.
-
Тема 7. Сессии и куки. Основы работы.
Понятие куки. Установка куки. Использование данных из куки для персонализации сайта. Понятие сессии. Запуск сессии, Создание элемента сессии и вывод его на экран.
-
Тема 8. Работа с БД Mysql.
PHP и базы данных. Соединение с сервером и создание базы данных. Создание таблицы. Отправка данных. Извлечение данных.
Как проходит обучение
Получите тестовый доступ
-
Дистанционное обучение является индивидуальным
-
Начать обучение можно в любое удобное для вас время
-
Начало обучения до оплаты
Профессиональная переподготовка с присвоением квалификации готовит конкурентноспособных специалистов сферы WEBTECH. Наши увлечённые преподаватели-практики передают ценные знания и опыт, которые помогают эффективнее расти в профессии



Преимущества профессиональной переподготовки с присвоением квалификации
-
+12 месяцев лояльности от Университета
Срок обучения можно бесплатно продлить на один год, чтобы проходить обучение в комфортном для Вас темпе.
-
Личные преподаватели
Каждого студента сопровождают опытные преподаватели-практики. Они не только проверяют выполненные задания, но и консультируют по возникающим вопросам.
-
Диплом Университета ИТМО
Университет ИТМО – признанный лидер среди IT-Вузов, широко известный как в России, так и за рубежом.
-
Портфолио
За время обучения Вы вместе с преподавателями пройдете все этапы разработки веб-приложения: от верстки веб-страниц, до развертывания готового проекта на базе платформы Docker. А также в рамках дипломного проекта реализуете полноценное веб-приложение.
-
Не обязательно приезжать в ИТМО
Оформление документов и защита дипломного проекта происходит удаленно. Если Вы живете в Санкт-Петербурге, диплом можно получить лично в Университете, если нет – мы отправим диплом заказным письмом с треком отслеживания.
-
Начало обучения до оплаты
Сначала вы «примеряете» курс на себя, запросив тестовый доступ, и только потом заключается договор и происходит оплата первого этапа обучения.