Курс: "Основы Frontend-разработки (HTML, СSS, JavaScript)"

kurs-osnovy-frontend-razrabotki-html-css-javascript

Автор курса: Подлесный Д.В.
Преподаватель курса: Подлесный Д.В.

Часов, ак.: 42
Стоимость, грн.: 6400

Краткое описание курса:

Frontend-разработка является одним из наиболее востребованных направлений в программировании. Курс предполагает изучение основных технологий, использующихся на frontend: языка гипертекстовой разметки HTML, каскадных таблиц стилей CSS и языка программирования JavaScript.

Курс является практико-ориентированным и строится на максимальном использовании практических заданий в области создания статических и динамических веб-страниц. При его изучении слушатели ознакомятся не только с базовыми возможностями HTML, CSS и JavaScript, но и популярными библиотеками и фрэймворками в области frontend-разработки (JQuery, Bootstrap). В ходе изучения курса слушателю выдаются методические материалы и презентации лекций.

Цели курса:

Цель курса состоит в том, чтобы помочь слушателям освоить стек технолологий frontend и получить практические навыки их использования. Это позволит им осуществить старт в области frontend-разработки (HTML-верстка, JavaScript-программирование) и заложить основы для дальнейшего изучения технологий веб-программирования.

Преимущества курса:

информационная насыщенность. В ходе изучения курса слушатель познакомится с полным набором инструментов frontend-разработки, включая HTML5, CSS3 и JavaScript.
практическая направленность. Практические и домашние задания строятся на решении реальных задач – верстка статических и динамических веб-страниц, создание модальных окон, обеспечение адаптивности и кроссбраузерности сайта, создание эффектов анимации на сайте, создание форм и реализация скриптов для обмена данными с сервером.
простота и доступность изложения материала.
учет современных тенденций frontend-разработки. В рамках курса Вы ознакомитесь не только с базовыми категориями HTML, CSS и JavaScript, но и современными методиками frontend-разработки – CSS и JavaScript-анимацией, адаптивной версткой с использованием медиа-запросов CSS и фрэймворка Bootstrap.

Для кого предназначен:

Курс предназначен для всех, кто желает освоить технологии frontend-разработки и заниматься версткой сайтов. Может представлять интерес для программистов, тестировщиков и других работников IT-сферы, которые желают повысить квалификацию путем изучения технологий верстки сайтов.

По окончании курса слушатели будут знать:

базовые понятия и методику использования HTML5;
принципы взаимодействия HTML и CSS, особенности CSS3;
основы языка JavaScript (переменные, типы данных, условные конструкции, циклы, массивы, принципы объектно-ориентированного программирования);
способы работы JavaScript с html-документом;
методику и сферу использования библиотек JavaScript (JQuery, Bootstrap).

По окончании курса слушатели будут уметь:

создавать статические и динамические веб-страницы при помощи HTML5, CSS3 и JavaScript (JQuery);
осуществлять адаптивную, кроссбраузерную верстку сайтов;
обеспечивать диалог пользователя с сервером путем использования формы HTML и технологии Ajax;
использовать современные библиотеки и фрэймворки JavaScript - JQuery, Bootstrap;
создавать эффекты анимации на сайте с помощью CSS3 и JavaScript (JQuery).

Преподаватель курса:

Подлесный Дмитрий Вадимович
Имеет более 10-ти лет опыта работы в высшей школе. Кандидат наук (PhD), доцент. Научно-педагогическая деятельность отмечена рядом наград и благодарностей центральных и местных органов власти. В работе активно использует информационные и цифровые технологии. Принимал участие в разработке электронных учебников и дистанционных курсов.
Кроме работы в сфере образования занимается программированием и созданием сайтов.
Внимательно и уважительно относится к ученикам. Доступно объясняет материал с примерами из реальной практики..

Краткая программа курса "Основы Frontend-разработки (HTML, СSS, JavaScript)"

№ п/п	Темы	Занятия (содержание, подтемы)	Часы
1	Введение в frontend-разработку	Понятие frontend-разработки. Инструменты frontend. Язык гипертекстовой разметки HTML: функции и возможности. HTML5. Каскадные таблицы стилей CSS. Язык программирования JavaScript. Работа в текcтовом редакторе Notepad++. Среда разработки NetBeans. Понятие html-верстки. Структура html-страницы. Элементы, теги и атрибуты. Практическое занятие №1 Создание html-страницы в текстовом редакторе Notepad++. Домашнее задание Установить на своем компьютере текстовый редактор Notepad++. Создать документ html.	2
2	Создание статических веб-страниц с помощью HTML5 и СSS3	Понятие блочной и табличной верстки. Блочные элементы HTML5. Работа со списками. Ссылки. Тег <a>. Создание html-таблиц. Интеграция изображений в html-страницу. Тег <img>. Взаимодействие HTML и СSS. Способы встраивания стилей в документ html. Базовые стили элемента. Позиционирование элемента. Свойство float. Абсолютное и относительное позиционирование. Практическое занятие №2 Верстка веб-страниц, содержащих меню, список, таблицу, изображение и ссылку. Домашнее задание Сверстать каталог товаров для интернет-магазина. Каждая плитка должна содержать наименование, изображение и стоимость товара, а также кнопку «В корзину»	4
3	Особенности использования стилей CSS	Селекторы CSS. Использование псевдоклассов и псевдоэлементов. Наследование в CSS. Каскадность. Практическое занятие №3 Создание стилей CSS для элементов веб-страницы, имеющих различные селекторы. Домашнее задание Создание двухуровнего горизонтального меню, раскрывающегося при наведении мыши.	4
4	Введение в JavaScript	Общая информация о JavaScript. Способы интеграции скрипта в веб-страницу. Основы JavaScript. Переменные и типы данных. Условные операторы, массивы, циклы. Функции в JavaScript. Основы объектно-ориентированного программирования. Модальные окна alert, prompt и confirm. Практическое занятие №4 Написать игру «Угадай число», которая предполагает осуществление диалога с пользователем с помощью модального окна prompt. Написать функцию, которая создает массив, заполняет его случайными числами и выводит на экран с помощью модального окна alert. Домашнее задание Написать программу, которая просит пользователя ввести валюту и сумму, которую он хочет положить на депозит и выводит ему процентную ставку. Процентная ставка зависит от типа валюты и суммы вклада.	6
5	Создание динамических веб-страниц с использованием JavaScript, HTML и CSS	Принципы взаимодействия JavaScript с элементами веб-страницы. Понятие объектной модели документа (DOM). Получение элемента веб-страницы по id, классу, имени, наименованию тега. Изменение и добавление стилей и атрибутов. Добавление элементов веб-страницы. Обработка событий. Основные типы событий. Объект event. Практическое занятие № 5 С помощью объекта sessionStorage реализовать функцию добавления товара в корзину Интернет-магазина. Написать на JavaScript функцию сортировки товаров интернет-магазина. Домашнее задание Написать функцию JavaScript, которая делает видимым элемент html-страницы, id которого передается в функцию.	6
6	Библиотека JQuery	Функции библиотеки JQuery. Способы подключения JQuery к html-странице. Понятие CDN. Селекторы JQuery. Управление контентом веб-страницы. Добавление и удаление элементов, манипулирование стилями. Обработка событий в JQuery. Практическое занятие № 6 Написать функцию JQuery, которая по клику на кнопку добавляет новый элемент на веб-страницу. Написать функцию JQuery, которая меняет стили атрибута страницы по клику на него. Домашнее задание Создать модальное окно html, которое раскрывается/закрывается при клике на кнопку. Функция открытия/скрытия окна и добавления текста пишется с помощью JQuery. Окно должно находиться строго по центру экрана.	6
7	Инструменты адаптивной верстки	Понятие кроссбраузерной адаптивной верстки. Адаптивная верстка с использованием медиа-запросов CSS. Достижение адаптивности с помощью JavaScript/ JQuery. Введение в адаптивную верстку с помощью фрэймворка Bootstrap. Сетка Bootstrap. Практическое занятие № 7 Создание адаптивного меню с помощью JQuery. Верстка адаптивной веб-страницы (меню, 2 колонки, футер) с помощью Bootstrap. Домашнее задание Сделать адаптивной html-страницу, разработанную в рамках выполнения домашнего задания по теме «Создание статических веб-страниц с помощью HTML5 и СSS3».	4
8	Анимация веб-страницы	Инструменты анимации html-страницы. CSS-анимация. Простые анимации ССS3. Свойства CSS3, задающие анимацию. Осуществление анимации с помощью JavaScript. Методы анимации JQuery. Практическое занятие №8 Анимация html-страницы с помощью CCS3 и JQuery. Домашнее задание Анимировать процесс появление модального окна html путем использования ССS3 и методов библиотеки JQuery.	4
9	Обработка форм. Передача данных на сервер. Технология Ajax	Понятие и функции формы html. Создание формы, теги form и input. Атрибуты тега form. Основные типы элемента input (text, password, radio, checkbox, file, submit). Понятие валидации данных формы. Получение данных формы и их передача на сервер. Технология Ajax. Сериализация форм, формат JSON. Методы load, get, post, ajax. Практическое занятие № 9 Написать скрипт, который передает на сервер данные формы обратной связи. Перед отправкой форма должна сериализироваться. Написать скрипт, который передает на сервер информацию о товарах в формате JSON. Информация берется из таблицы html. Домашнее задание Написать скрипт валидации формы логина и пароля перед их отправкой на сервер.	4
10	Экзамен.	Проверка усвоенных знаний и навыков.	2

Про раздаточный материал:

Раздаточный материал выдается на занятиях по соответствующей теме и включает в себя презентации лекций, распечатки практических заданий, перечень сайтов и видеоуроков для закрепления материала и самостоятельного изучения.

Где можно использовать полученные знания:

Полученные знания и навыки можно использовать в области frontend-разработки и HTML-верстки, работая как в IT-компании, так и на фрилансе. Базовые знания, полученные при изучении курса, могут стать основой для изучения других технологий, в частности, библиотек и фрэймверков Javascript.

Поддержка выпускников преподавателем:

После прохождения курса преподаватель сохраняет коммуникацию с учениками посредством электронной почты и социальных сетей. На основе взаимной договоренности преподаватель оказывает ученику консультативную поддержку в области практического применения полученных знаний, решения конкретных задач в области программирования, разработки дальнейшей траектории обучения.

Дополнительная информация:

Главным условием прохождения курса «Основы Frontend-разработки (HTML, СSS, JavaScript)» является наличие собственного компьютера (ноутбука) для того, чтобы работать с раздаточным материалом и делать домашние задания. Крайне желательным является также наличие начальных знаний в области программирования.

Изображения, иллюстрации к заданиям, программам, документам учебного курса

К практическому занятию по теме «Введение в Frontend-разработку». Создание документа html в редакторе Notepad++.

sozdanie-dokumenta-html-v-redaktore-notepad++

К практическому занятию по теме «Создание статических веб-страниц с помощью HTML5 и СSS3». Создание контента страницы с использованием тега div и изображений.

Пример выполнения домашнего задания по теме «Особенности использования стилей CSS». Двухуровневое выпадающее меню.

К практическому занятию по теме «Библиотека JQuery». Функция открытия и закрытия модального окна.

К практическому занятию по теме «Инструменты адаптивной верстки». Код создания адаптивного меню с помощью фрэмворка Bootstrap.

К практическому занятию по теме «Обработка форм. Передача данных на сервер. Технология Ajax». Форма обратной святи в виде модального окна HTML/JQuery.