Школа дизайна -
Консультации:
(044) 331-02-06,
(044) 332-41-62,
(093) 53-22-106,
(098) 087-31-41,
(095) 527-00-70
г.Киев, ул.Патриарха М.Скрипника, 58. м."Вокзальная"
             С 1995 года  в сфере образования
О компании
Скидки и акции
Отзывы
Онлайн консультации
Статьи
Контакты
Позвоните мне
Ошибка доступа к серверу.
Попробуйте позже.
Неправильно введены данные.
Исправьте и попробуйте еще раз
Ваш запрос успешно отправлен.
Введите Ваше имя
Введите курс обучения
Введите номер телефона
Введите число
с картинки*:
Введите число
* обязательные для заполнения поля
Онлайн консультации по Skype
Главная /   Школа дизайна /   Курсы Front-end разработчик


Курсы Front-end разработчик

60 ак часов (15 занятий по 4 ак часа, 1 ак час = 45 мин).  Продолжительность: от 1,5 до 2 месяцев. 2-3 раз в неделю (по выбору). Можно подстроить под свой график работы.

Время обучения в группе (на выбор):

  • дневные  группы с 9:00 до 12:00; с 12:00 до 15:00, с 15:00 до 18:00.
  • вечерние группы с 18:30 до 21:30.
  • группы выходного дня: суббота (при наличии группы).

 

Стоимость обучения:

  • 3 600 грн (при оплате в рассрочку - за каждые 12 занятий - 1680 грн),
  • 3 240 грн  (при оплате за весь курс (предоплата) - скидка 10% - (экономия 360 грн)
  • Акция! Праздничная скидка к 1 мая +5% при оплате сразу по 1 мая 2018 года!

Аудитория курса Front-end разработчик состоит из:

  • всех желающих обучиться на Front-end разработчика

По окончанию курса Вы будете уметь:

  • Создавать web-страницы, содержащие все необходимые компоненты: текстовое наполнение, гиперссылки, графическое наполнение;
  • Самостоятельно создавать полноценный сайт путем определения иерархии взаимодействия web-страниц между собой;
  • Грамотно разрабатывать интерактивные формы для взаимодействия пользователя с web-сервером;
  • Эффективно использовать возможности каскадных таблиц стилей CSS для повышения функциональности и улучшения оформления web-сайта;
  • использовать технологию фреймов;
  • Выбирать программные средства разработки;
  • Грамотно проектировать веб-страницы и эффективно организовывать разработку кода;
  • Разрабатывать код HTML и CSS в соответствии со стандартами Консорциума W3C;
  • Создавать веб-страницы в соответствии с основными принципами практичности (usability) и доступности (accessibility) для пользователей;
  • Разрабатывать веб-страницы, совместимые с распространёнными браузерами: Internet Explorer 6 и выше, Firefox, Opera 7 и выше;
  • Верстать веб-страницы с применением современных технологий HTML и CSS: бестабличная и комбинированная вёрстка, абсолютное и относительное позиционирование, переполнение и обрезка блоков, внедрение внешних объектов, изображения в CSS;
  • Тестировать веб-страницы, выполнять контроль качества;
  • Понимать сущность программирования;
  • Понимать специфику веб-программирования;
  • Твердо знать язык JavaScript без привязки к среде исполнения;
  • Понимать возможности JavaScript в среде веб-браузеров;
  • Управлять браузерами и элементами HTML-страниц с помощью JavaScript;
  • Создавать компоненты на основе ReactJS;
  • Настраивать жизненный цикл компонентов;
  • Отрисовывать форму по условию;
  • Обрабатывать события и управлять всплытием состояний.

Курсы сопровождаются большим количеством практических заданий.  За время обучения вы научитесь  уверенно верстать, писать код на JavaScript, использовать библиотеку Query и понимать, как должен выглядеть интерфейс сайта.

После окончания обучения выдается диплом и заявки на работу. 

Программа обучения

 

Структура программы обучения:

В программу входят следующие дисциплины:

  • Создание сайтов по стандартам W3C на HTML 5 и СSS 3,
  • Кроссбраузерная верстка, юзабилити
  • Основы веб-программирования,
  • Использование библиотеки jQuery
  • Технология и психология трудоустройства
  • Психология влияния

Программа обучения:

Создание сайтов по стандартам W3C на HTML 5 и СSS 3

HTML и CSS. Создание сайтов на HTML 5 и СSS 3:

Введение и основные понятия

  • Как это работает? Что такое web-сервер, web-сайт, web-страница
  • Цели и задачи языка HTML
  • HTML-разметка. Элементы
  • Структура HTML-документа:
  • Использование комментариев
  • Базовые элементы разметки:
  • Атрибуты элементов
  • Специальные символы
  • Лабораторная работа по теме 

Анатомия страницы

  • Понимаем, как мы пишем: синтаксис HTML
  • Элементы форматирования текста
  • Понимаем, что мы пишем: семантика элементов
  • Валидация HTML-документа
  • Структурные элементы разметки
  • Лабораторные работы по теме

Гиперссылки

  • Понятие гиперссылок в WWW
  • Внешние и внутренние гиперссылки
  • Типы адресов в WWW
  • Дополнительные атрибуты гиперссылок
  • Лабораторная работа по теме

CSS. Каскадные таблицы стилей: основные свойства

  • Основные понятия CSS
  • Способы определения стилей
  • Каскадирование и наследование
  • Единицы измерения в CSS
  • Основные типы селекторов
  • Псевдоклассы и псевдоэлементы
  • Свойства шрифтов
  • Свойства текста
  • Свойства цвета и фона
  • Лабораторные работы по теме

Использование изображений на странице

  • Типы изображений используемые в WWW
  • Вставка изображений на страницу
  • Атрибуты элемента img
  • Лабораторная работа по теме

Структурирование информации при помощи списков

  • Неупорядоченный список
  • Упорядоченный список
  • Список определений
  • CSS свойства для списков
  • Лабораторная работа по теме

Представление табличных данных при помощи таблицы

  • Основные элементы таблицы
  • CSS свойства элементов таблиц
  • Объединение ячеек таблицы
  • Дополнительные элементы таблицы
  • Лабораторная работа по теме

Встраивание внешних данных при помощи фрейма

  • История фреймов
  • Встраиваемые фреймы
  • Фреймы и гиперссылки
  • Лабораторная работа по теме

Передача пользовательских данных при помощи формы

  • Что такое веб-формы?
  • Элемент form и его атрибуты
  • Элементы формы: текстовые поля и кнопки
  • Элементы формы: элементы выбора
  • Дополнительные атрибуты элементов формы
  • Лабораторная работа по теме

Использование CSS для макетирования

  • Оформление границ элемента
  • Внутренние отступы элемента
  • Наружные отступы элемента
  • Размеры элемента
  • Плавающие элементы
  • Видимость элемента
  • Лабораторные работы по теме

Дополнительные возможности HTML и CSS

  • Практическая работа для закрепления изученных тем
  • Стили для различных типов носителей
  • Свойства курсора
  • Встраивание аудио- и видео-файлов
  • Лабораторные работы по теме

Мета-информация на странице

  • Использование мета-информации
  • Элемент meta и его атрибуты
  • Поясняющая мета-информация
  • Мета-информация для роботов
  • Эмуляция заголовков ответа сервера

Выбор хостинга и поддержка сайта

  • Понятие хостинга
  • Поиск хостера
  • Услуги хостера
  • Использование FTP-клиента
  • Доступ к ftp-серверу через проводник Windows

Методологии верстки

  • Методология Яндекс.БЭМ
  • Методология ООCSS
  • Принципы оформления кода

Препроцессоры и язык разметки HAML

  • Язык разметки HAML
  • Препроцессор SCSS
  • Препроцессор LESS
  • Препроцессор Stylus

Компонентная модель верстки

  • Знакомство с WebComponents
  • Компонентный Веб
  • Google Polymer
  • Импорт HTML-файлов

Макетирование страниц с применением модели гибких блоков

  • Верстка страницы с применением Flexible Box Layout

CSS-фреймворки

  • Bootstrap
  • Foundation

3D и современные методы создания сайтов

  • Parallax-эффект
  • 3D-эффекты на страницах

 

Кроссбраузерная верстка, основы юзабилити

 

Веб-стандарты и их поддержка

  • Стандарты W3C. Документация.
  • DOCTYPE.
  • Стандарт Unicode. Кодировки Unicode. Поддержка Unicode в различных браузерах.
  • Протокол HTTP.

Элементы и атрибуты HTML5 и структура страницы

  • Секции, выноски, статьи, навигационные, «шапка», «подвал».
  • Элементы форм и их атрибуты.

Эффективное использование инструментов разработки веб-страниц

  • Инструментарий разработчика:, FTP-клиенты, текстовые редакторы, графические редакторы, вспомогательные программы. Web Developer, Mozilla Firebug, Zen Coding/Emmet, IE WebDeveloper.
  • Составление и анализ требований к вёрстке веб-страниц. Проектирование макетов. Тестирование веб-страниц: просмотр в различных браузерах, проверка валидатором, просмотр при различной ширине окна браузера и различных размерах шрифта. Контроль качества веб страниц.
  • Практическая работа: построение структуры страницы с использованием вспомогательных программ.

Селекторы в HTML5

  • Селекторы перешедшие из HTML4/xHTML.
  • Псевдоклассы/псевдоэлементы. Контекстные селекторы. Новые селекторы в HTML.
  • Ролловеры, спрайты.
  • Практическая работа: использование специфических селекторов при верстке страницы.

Введение в построение удобных для использования сайтов (usability) и доступность (accessibility) сайтов

  • Практичность (usability) сайтов. Цели и задачи пользователей. Общие принципы разработки интерфейсов в применении к сайтам. Психологические аспекты взаимодействия пользователя с сайтом. Тестирование практичности.
  • Доступность (accessibility) сайтов. Обзор различных технических устройств для просмотра сайтов. Технические аспекты взаимодействия пользователя с сайтом. Ограниченные возможности пользователей

Продвинутые технологии HTML и CSS

  • Относительное и абсолютное позиционирование. Поведение дочерних элементов при позиционировании. Порядок наложения: свойство z-index. Примеры позиционирования: наложение блоков, закрепление "подвала" внизу страницы. Обрезка блока: свойство clip. Фиксированное позиционирование. Свойство display.
  • Переполнение блока: свойство overflow. Особенности поддержки overflow в разных браузерах. Создание "фреймообразной" вёрстки с использованием overflow. Расширения IE: свойства overflow-x и overflow-y.
  • Внедрение внешних ресурсов: элемент object. Внедрение файлов HTML, создание "фреймообразной" вёрстки с использованием object. Внедрение роликов Flash в соответствии со стандартами Консорциума W3C. Внедрение векторной графики (SVG); предоставление альтернативного растрового изображения браузерам, которые не поддерживают этот формат.
  • Пиктограмма сайта (favicon). Формат ICO. Особенности поддержки пиктограммы в различных браузерах.
  • Практическая работа: использование на практике CSS-свойств позиционирования, отображения и др.

Совместимость веб-страниц с различными браузерами

  • Условные комментарии.
  • Скрипты для поддержки селекторов и изменения поведения старых браузеров.
  • Программы эмуляторы старых версий IE.
  • Фильтры.
  • Практическая работа: использование кроссбраузерной верстки

Использование свойств CSS2 и CSS3

  • Градиенты, анимация, трансформация (2D и 3D), переходы
  • Медиа-запросы (построение мобильных версий сайтов, адаптивная верстка)
  • @font-face (веб-шрифты), текстовые эффекты,
  • Многоколоночная верстка,
  • Работа с фоном (+градиенты)
  • Закругление углов, модель Flex-блоков.
  • Определение технологий, поддерживаемых браузером.
  • Практическая работа: построение выпадающего меню средствами HTML5 и CSS3

Верстка макета

  • Принципы нарезки макета из psd-файла.
  • Выбор размеров и вариантов верстки.
  • Верстка.
  • Практическая работа: нарезка макета страницы
  • Практическая работа: верстка страницы по заданному макету.

Основы веб-программирования:

JavaScript. Основы веб - программирования

 Основы программирования

  • Введение в JavaScript (ECMAScript-262)
  • Обзор базовых типов
  • Операторы
  • Выражения и инструкции
  • Переменные и константы
  • Манипуляции с базовыми типами
  • Тривиальные типы

 Управляющие конструкции

  • Цикл while
  • Операторы инкремента и декремента
  • Цикл for
  • Цикл do while
  • Управляющие конструкции if – else if – else
  • Прерывание и продолжение цикла
  • Управляющая конструкция switch
  • Практикум: Практическое применение управляющих конструкций в JavaScript

 Функции

  • Понятие функций
  • Декларация функций
  • Аргументы функции
  • Возврат значений
  • Области видимости
  • Функция-выражение
  • Анонимная функция
  • Практикум: Использование функций при процедурном подходе в программировании

Объектные типы

  • Объектный тип: Объект (Object)
  • Свойства объекта
  • Методы объекта
  • Объектный тип: Массив (Array)
  • Свойство и методы функций
  • Практикум: Использование объектных типов в JavaScript

Объектно-ориентированное программирование

  • Конструкторы объектов
  • Прототипы
  • Классы
  • Практикум: Применение объектно-ориентированного подхода в программировании

Объектная модель браузера

  • Объектная модель браузера
  • Объект Window
  • Объект Navigator
  • Объект Screen
  • Объект History
  • Объект Location
  • Объект Document
  • HTML-коллекции
  • Практикум: Практическое использование объектов браузера

Использование элементов HTML

  • Свойства и методы элемента Form
  • Свойства и методы элемента Input
  • Свойства и методы элемента TextArea
  • Свойства и методы элемента Select
  • Свойства и методы элемента Option
  • Свойства и методы элемента Image
  • Свойства и методы элемента Table
  • Практикум: Практическое использование элементов HTML

Объектная модель документа: DOM

  • Document Object Model (DOM)
  • Типы узлов
  • Связи между объектами
  • Свойства и методы интерфейса Node
  • Свойства и методы интерфейса Element
  • Свойства и методы интерфейса Document
  • Нестандартные свойства и методы HTML-элементов
  • Свойства и методы коллекции styleSheets
  • Практикум: Использование объектной модели документа

События и их обработка

  • Список событий
  • Модели событий
  • Назначение обработчиков событий
  • Работа с обработчиками событий
  • Получение ссылки на событие
  • Отмена действий по умолчанию
  • Кроссбраузерные свойства события
  • Получение ссылки на элемент
  • Использование фазы всплытия событий
  • Отмена всплытия события
  • Практикум: Использование разных моделей событий

JavaScript. Использование библиотеки jQuery

Введение в jQuery

  • Использование текстовых редакторов
  • Использование javascript-консоли в браузерах
  • Введение в jQuery
  • API jQuery
  • Выборка в jQuery
  • Фильтрация
  • DOM: отношения элементов
  • Работа с элементами веб-формы
  • Лабораторная работа

События и манипуляции с элементами

  • События jQuery
  • Обработка событий
  • Объект Event
  • Отмена событий
  • Добавление элементов
  • Манипуляции с элементами
  • Делегирование событий
  • Лабораторные работы

Анимация в jQuery

  • Базовые эффекты
  • Управление эффектами
  • Метод animate()
  • Исследование анимации
  • Полезный метод grep()
  • Лабораторные работа

Практическая работа с jQuery

  • Создание кода плавного показа картинок
  • Оптимизация кода
  • Создание шаблонизатора
  • Использование шаблонизатора Handlebars

Технология и психология трудоустройства:

  • Теория типов личности в определении оптимального рода занятий. Оценка собственного психотипа. Цель и две фазы в процессе поиска работы. Сбор и анализ информации. Составление резюме и заполнение анкет
  • CV. Получение приглашения на собеседование. Подготовка самопрезентации.
  • Активная фаза в процессе поиска работы. Организация встречи с работодателем. Собеседование, тестирование: стратегия поведения. Психологический тренинг. Вопросы найма, трудовые и иные контракты.
  • Важные мелочи при подборе работодателя: предупрежден, значит вооружен, или внимание, аферисты!

Психология влияния:

  •  Что изучает деловая психология. Введение в предмет. Типы человеческих темпераментов
  •  Виды психологического воздействия на людей
  •  Особенности психологического манипулирования
  •  Психология создания доверительных отношений
  • Психологические приёмы успешных деловых переговоров

 

Начало занятий:

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

Ближайшие даты начала занятий


Дата
День недели
на 09:00 - 12:00
2018-05-08
вторник
2018-05-22
вторник
2018-06-12
вторник
2018-06-26
вторник
2018-07-10
вторник
2018-07-24
вторник
2018-08-07
вторник
2018-08-21
вторник
2018-09-04
вторник
2018-09-18
вторник
2018-10-09
вторник
2018-10-23
вторник
2018-11-06
вторник
2018-11-20
вторник
Дата
День недели
на 12:00 - 15:00
2018-04-30
понедельник
2018-05-02
среда
2018-05-08
вторник
2018-05-14
понедельник
2018-05-21
понедельник
2018-05-29
вторник
2018-06-04
понедельник
2018-06-06
среда
2018-06-13
среда
2018-06-18
понедельник
2018-06-25
понедельник
2018-06-27
среда
2018-07-02
понедельник
2018-07-16
понедельник
2018-07-25
среда
2018-08-01
среда
2018-08-06
понедельник
2018-08-13
понедельник
2018-08-15
среда
2018-08-22
среда
2018-08-27
понедельник
2018-08-29
среда
2018-09-05
среда
2018-09-10
понедельник
2018-09-17
понедельник
2018-09-19
среда
2018-09-24
понедельник
2018-10-01
понедельник
2018-10-08
понедельник
2018-10-10
среда
2018-10-16
вторник
2018-10-24
среда
2018-10-29
понедельник
Дата
День недели
на 15:00 - 18:00
2018-04-26
четверг
2018-10-17
среда
Дата
День недели
на 18:30 - 21:30
2018-04-25
среда
2018-05-02
среда
2018-05-07
понедельник
2018-05-16
среда
2018-05-21
понедельник
2018-05-29
вторник
2018-05-30
среда
2018-06-06
среда
2018-06-11
понедельник
2018-06-21
четверг
2018-06-25
понедельник
2018-07-02
понедельник
2018-07-04
среда
2018-07-16
понедельник
2018-07-18
среда
2018-07-25
среда
2018-08-01
среда
2018-08-13
понедельник
2018-08-20
понедельник
2018-08-27
понедельник
2018-08-29
среда
2018-09-10
понедельник
2018-09-12
среда
2018-09-19
среда
2018-09-26
среда
2018-10-03
среда
2018-10-08
понедельник
2018-10-16
вторник
2018-10-17
среда
2018-10-29
понедельник

 Варианты оплаты:

Оплатить можно наличными в кассу учебного центра; карточкой через терминал в офисе; с  р/с предприятия, где Вы работаете; на сайте картой, квитанцией через Ощадбанк (Приватбанк).

 

Калькулятор скидок:

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

 

Оплата на сайте, получение счета:

  • Оплатить обучение на сайте можно картами Visa, Master Card.
  • Получить счет-фактуру для оплаты юридическими лицами можно прямо на сайте.
  • Получить квитанцию на оплату через отделение Сбербанка Украины.

Перейти на страницу .....

 

Документы об окончании и трудоустройство:

По окончании обучения выпускники учебного центра получают диплом учебного центра или диплом международного образца, и могут работать Front-end разработчиком.

Наш адрес и телефоны:

  • Украина, Киев, метро "Вокзальная", ул. Патриарха Мстислава Скрипника (бывшая Николая Островского), 58.
  • (093) 53-22-106,  (098) 087-31-41, (095) 527-00-70
Наверх