Front-End Разработка

Чему вы научитесь

  • Научитесь создавать сайты любой сложности
  • Узнаете, как работать с инструментами разработчика и как оптимизировать процесс разработки с их помощью
  • Узнаете как создать дизайн странички в Adobe Photoshop и нарезать макет
  • Сможете применить SEO-оптимизацию на сайте
  • Научитесь создавать сайты быстро и адаптивно с фреймворком 

Программа курса

  1. Введение во front-end разработку и облачные системы контроля версий
  • Понимание Web Single Page Application
  • Основные задачи фронтенда и обзор инструментов разработки

 

2. Работа с Adobe Photoshop

  • Обзор инструментария, настройка среды
  • Форматы файлов: входные, выходные, внутренние
  • Работа со слоями
  • Создание изображения, использование текста, контуров, инструментов рисования
  • Использование фильтров Photoshop для создания эффектов
  • Инструменты цвета, преобразования
  • Создание макета страницы для подготовки к верстке

 

  1. HTML&CSS базовый, SEO
  • Описание стандарта HTML (W3C Standards). Основные теги работы с текстом, изображениями
  • Работа с таблицами данных
  • Базовые контейнеры CSS. Создание и подключение CSS стилей к странице

 

4. HTML5

  • Обзор спецификаций HTML5. Форматы даты и времени
  • Работа с аудио и видео с использованием соответствующих тегов

 

5. Использование процессора LESS

  • Базовые принципы работы CSS препроцессоров. Установка и подключение LESS
  • Синтаксис языка программирования стилей LESS. Использование констант и переменных
  • Функции работы с цветом
  • Создание и использование примесей (Mixin). Параметрические примеси

 

6. Адаптивность и оптимизация верстки с фреймворком BOOTSTRAP3

  • Оптимизация графики с использованием спрайтов
  • Обзор основных возможностей, загрузка и подключение. Введение в Bootstrap CSS
  • Верстка сеткой, шрифты
  • Изучение Bootstrap CSS: таблицы, картинки, формы, группировка элементов форм, кнопки, группировка кнопок

 

7. Выполнение персонального учебного проекта

  • Обработка ТЗ
  • Консультации по проекту (2 ч.)
  • Самостоятельная работа над проектом под руководством тренера (24 ч.)
  • Защита проекта

 

8. JavaScript базовый

  • Обзор языка JavaScript: история, роль и место, семантика и синтакис
  • Обзор инструментария средств отладки кода браузеров. Принципы работы с console: обзор свойств и методов
  • Типы данных. Oператоры: арифметические, логические. Оператор typef(). Приоритет выполнения
  • Выражения. Операции над переменными. Область видимости переменных: Local Context, Global Context
  • Взаимодействие с пользователем через диалоговые окна. Поиск элементов в документе используя getElementById и getElementsByTagName. Вывод, используя innerHTML. Использование валидатора Jshint.com
  • Основные конструкции программирования: ветвления, повторения
  • Массивы данных: одномерные, двумерные, многомерные. Cвойства и методы работы с массивом: length, map(), indexOf(), lastIndexOf(). Конструкция foreach
  • Aссоциативные массивы (структуры данных типа: словарь, хэш). Метод Keys() Стандартный класс Object, методы работы: toString() и valueOf(). Oператор delete. Понятие функции, точки ее вызова, реккурсия, принцип обратного вызова (callback). Интервалы и таймеры (setInterval(), setTimeout(), setImmediate()). Использование return с множественным выбором
  • Понятие и использование замыкания и примеси

 

9. JavaScript продвинутый

  • Обзор объектной модели W3C DOM: определение, история, уровни. Браузерная реализация в веб
  • Классы Document и Element. Динамическое дерево элементов документа
  • Обзор событий элементов в модели DOM. Методы элемента addEventListener(), removeEventListener(). Переопределение события stopPropagation()
  • Объект Form, элементы управления формы input, валидация данных через регулярные выражения
  • События мыши и клавиатуры для элементов управления input
  • Кнопки
  • Поля ввода. Изменение регистра введенных данных
  • Флаги. Массивы флагов
  • Переключатель. Массивы переключателей
  • Визуальная группировка элементов. Управление видимостью элементов используя свойства visibility, hidden, display

 

10. Mодульный подход к разработке

  • Описание подхода к разработке Asynchronous Module Definition (AMD)
  • Установка инструмента, реализующий подход RequireJS и подключение его в проект
  • Описание модуля с помощью define и выполнение с помощью require

 

11. Сборка фронтенд проекта

  • Минификация и обфускация JS и CSS с использованием uglify_js, minify_js и других
  • Обзор препроцессоров GRUNT, GULP, Broccoli
  • Установка GRUNT, структура файла Gruntfile.js. Использование GRUNT на разных примерах

 

12. Знакомство с фреймворками

  • Yahoo! UI Library (YUI)
  • MooTools
  • jQuery
  • Dojo Toolkit
  • Backbone.js
  • Angular
  • Ember.js
  • ReactNative
  • Nativescript

 

13. Выполнение персонального учебного проекта

  • Обработка ТЗ
  • Консультации по проекту (2 ч.)
  • Самостоятельная работа над проектом под руководством тренера (24 ч.)
  • Защита своего учебного проекта

 

14. Аттестационный екзамен

  • Сдача сертификационных тестов
  • Получение сертификата специалиста Junior Front-End Developer
Свяжитесь с нами,
удобным для вас способом!
Оставить заявку