Основы Frontend-разработки (HTML, СSS, JavaScript). Индивидуально

Йде набір на курс!
Срок обучения
42 ак. часа
Стоимость:
Стоимость за весь курс
14 080 грн.
Опис
Основы Frontend-разработки (HTML, СSS, JavaScript). Индивидуально

Цель курса состоит в том, чтобы помочь слушателям освоить стек технолологий 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).
Дни недели занятий на вибір
Время занятий на выбор
Занятий в неделю
Длительность занятия
Часы занятий
Группы
Возраст аудитории Взрослые
Вид подготовки Базовый курс
Город Шевченковский
Преподаватель фахівець-практик
Учебные материалы
Пробное занятие
Документ об окончании Сертификат
Опции Индивидуальное обучение
Працевлаштування Ні
Условия трудоустройства

Запись на курс

Люди
Select people to associate with this registration.
This registration is for
Select person
Person type
New Контакт

Програма навчання

№

п/п 		Темы Занятия (содержание, подтемы) Часы
 1 Введение в Интернет-технологии. Краткая история сети Интернет и развития веб-технологий. 

Основные понятия и термины: HTML, http, web-сервер, web-клиент, браузер, URL, среда гипермедиа, гиперссылка, гипертекст. Технологические основы www. 

Схема работы веб-сайта. Определение веб-сайта и веб-страницы.

Браузеры (обзорно). Развитие версий языка HTML от 2.0 до 5.0.

Основные термины и понятия: тег, атрибут, элемент. Правила вложения и записи элементов.

Рассмотрение основных составных элементов: html, head, body, DOCTYPE.



Практическое занятие №1

Познакомится с основными элементами текстовой разметки

..

,

. 



Создать первую веб-страницу с текстовыми блоками и заголовками.



Домашнее задание

Установить у себя на компьютере любой html-редактор (Notepad++, Sublime и т.д) по выбору.

Создать веб-страницу – краткий рассказ о себе с использованием заголовков различного уровня и текстового блока. 		 2
 2 Основные теги и введение в CSS. Изучение основных тегов разметки:
,
,
,
,
,
2
 3 Типографика на веб-страницах. Особенности форматирования текстов на страницах с помощью стилевых таблиц. Рассмотрение свойств: color, font-size, font-family, font-style, font-weight, font-variant, line-height, font, text-decoration, text-transform, text-align, vertical-align, text-indent, white-space, word-spacing, letter-spacing.

Цвет в CSS. Способы задания цвета. Веб-безопасная палитра.



Практическое занятие №3

Практика по разметке текстового фрагмента с использованием максимального количества различных свойств текста и шрифта.



Домашнее задание

Отформатировать отрывок из книги или статьи на выбранную тему, используя подключение стилевых свойств текста и шрифта. Назначить цвет фона страницы и цвета для заголовков и блоков текста c помощью CSS. 		 2
 4 Списки в HTML и CSS) Список как способ упорядочивания информации на веб-страницах. Виды списков. Список определений. Сфера применения списков. Правила вложений. Ограничения.

Оформление списков через CSS.

Кодировки на веб-страницах. Основные сведения о кодировках и управлении ими.

Символьные подстановки.



Практическое занятие №4

Практическое задание по изученным темам. Создание списка товаров, списка группы и многоуровневого списка Сезоны года с оформлением через стили.



Домашнее задание

Оформить веб-страницу со списком литературы в домашней библиотеке. В тексте использовать наиболее популярные символьные подстановки. 		 4
 5 Навигация и гиперссылки Понятие навигации на веб-страницах. Типы навигации.

Понятие URL и его детальное рассмотрение по отдельным элементам. 

Виды адресации: относительная и абсолютная. Особенности применения.

Элемент гиперссылка и его атрибуты.

Технология якорей. Ссылки внутри документа.



Практическое занятие №5

Создание многостраничного тематического сайта с общей навигацией в виде списка. Используем текстовое содержимое и графику. Созданиие объемной статьи, разделенной на главы и подразделы. Создание закладок в тексте и оглавления.



Домашнее задание

Самостоятельно добавить не менее 5-ти страниц в свой созданный сайт, прописать ссылки в меню, оформить все в одном стиле. 		4
6 Графика в WEB. Использование графики на веб-страницах. Особенности сетевой графики. Форматы, оптимизация, сжатие. Фоновая и встроенная графика.

Элемент , его особенности. Свойство background в CSS. Использование текстур в веб.

Теги
и .


Валидация кода. Проверка домашнего задания с помощью валидатора.

Понятие псевдокласса. Псевдоклассы гиперссылок.

Графические ссылки.



Практическое занятие №6

Создание фотогалереи на одной из страниц своего сайта. Связать все страницы сайта воедино. Использовать миниатюры изображений как графические ссылки.



Домашнее задание

Создать веб-страницу – каталог произведений искусства из любой эпохи по выбору с подписями и оформлением через стили. Желательно использование тегов
и .
 		 4
7 Таблицы в HTML и CSS Таблицы в веб как удобное средство для визуализации и представления информации.

Структура разметки таблиц. Теги , ,
.

Управление рамками таблиц, шириной, высотой и выравниванием таблицы. 

Физическое объединение ячеек.

Логическое объединение ячеек.

Новые свойства CSS для оформления таблиц.



Практическое занятие №7

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



Домашнее задание

Создать таблицу с параметрами мобильных телефонов различных производителей (не менее 4-х параметров). Оформить таблицу в современном стиле. 		3
8 Блочная модель в веб. Понятие Box Model. Блоки как кубики для построения сайта. 

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

Специфика Box Model для строчных элементов/

Правило расчета ширины. Свойства width и height.

Визуальные свойства CSS. Переполнение, видимость, прозрачность. Свойство display.

Рассмотрение инструментальных средств браузеров: Google Developer Tools, Firebug, Dragonfly.



Практическое занятие №8

Практика: создание нескольких блоков и применение к ним свойств блочной модели.

Создание 2-х, 3-х и 4-х колонок с текстовым контентом. Настройка границ, отступов, полей.



Домашнее задание

Создать галерею изображений – упрощенные карточки товаров в интернет-магазине с фото, подписью и параметрами. 		 4
9 Плавающая модель в верстке сайтов.

Свободное позиционирование.		 Обзор моделей верстки. Понятие «потока». Плавающая модель. Свойство float.

Свободное позиционирование. Свойство position. Свойства top, left, right, bottom.



Практическое занятие №9

Верстка двухколоночного и трехколоночного макета средствами плавающей модели.



Домашнее задание

Сверстать макет главной страницы сайта по предложенному изображению. Для контента использовать материалы из коллекции слушателя. 		 4
10 Верстка макета в режиме мастер-класс Верстка макета в режиме мастер-класса с обсуждением и комментированием всех интересных мест.

Последовательность верстки.

Организация файлов и папок.

Глобальный сброс – решаем проблему кроссбраузерности.

Работа со шрифтами. Подключение сторонних шрифтов. Свойство @font-face. Подключаем библиотеку Google web-fonts.



Практическое занятие №10

Верстка макета landing page с использованием плавающей модели и свободного позиционирования.



Домашнее задание

Сверстать «шапку» header заданной страницы сайта с использованием новых элементов стандарта html5. подключить выбранный логотип компании (Преимуществом будет подготовка логотипа в одном из редакторов графики). Подготовка к экзамену. 		 3
11 Экзамен. Экзаменационная работа.

Сдача электронного теста.

Сдача практической части экзамена состоит в представлении и защите сайта-визитки, созданного слушателем на протяжении обучения для самого себя либо для компании, в которой он работает. 		 2
Курс проводитПроминь
Адрес:
  • г. Харьков, пер. Кравцова 19 (офис 21)