Описание курса «Front-end веб-разработчик (HTML и CSS, JavaScript )»


Курсы Front-end разработчика, иногда называемого веб-дизайнером, помогут Вам заниматься дизайном и интерфейсом сайта. Вы освоите обязательные для этой профессии языки HTML, CSS и Javascript и научитесь создавать клиентскую часть веб сайта, с которыми будут взаимодействовать люди.

Для того чтобы создать полноценный функционирующий сайт необходимы front-end и back-end разработки.

Требование к курсу: Уверенное знание ПК. Если вы считаете свои знания персонального компьютера не достаточными, то вы можете пройти курс "ПК для начинающих".

Стоимость курса «Front-end веб-разработчик (HTML и CSS, JavaScript )»

РАСПИСАНИЕ ЗАНЯТИЙ

18.04.2019 В 18:30

ГРУППОВЫЕ ЗАНЯТИЯ


17210 ք

без скидки : 24580 ք

ИНДИВИДУАЛЬНЫЕ ЗАНЯТИЯ


34400 ք

без скидки : 43000 ք

Дату начала открытого урока утоняйте по телефону +7 (495) 517-03-59
Продолжительность открытого урока: 45-60 минут / количество мест ограничено

Программа курса «Front-end веб-разработчик (HTML и CSS, JavaScript )» (56 акад. ч.)

Основные пункты программы № темы
Знакомство с 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

Вы готовы записаться на курс?

ЗАПИСЬ НА КУРС

Работы наших слушателей на курсе «Front-end веб-разработчик (HTML и CSS, JavaScript )»