Курс «Front-End»

Обзор задач и средств разработки

• Обзор браузеров, их совместимости. Принципы работы браузера. Основы веб-ориентированной клиент-серверной архитектуры веб-приложения
• Понимание Web Single Page Application
• Основные задачи фронтенда и обзор инструментов разработки

Система контроля версий Github

• Определение системы контроля версий. Сравнение существующих систем
• Github как хранилище кода. Регистрация на Github, установка клиента для компьютера
• Инициализация проекта и настройка аккаунта
• Команды git pull, git add, git push, git commit
• Цикл разработки и философия работы с git

Основы работы с Photoshop

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

Макет страницы

• Графические элементы страницы
• Способы создания графических элементов
• Создание макета страницы для подготовки к верстке

Основы HTML: теги для работы с текстом и изображениями

• Описание стандарта HTML (W3C Standards). Особенности работы с тегами и атрибуты тега. Структура HTML документа. Основные теги для работы с заголовком. Применение валидатора HTML
• Основные теги работы с текстом: заголовки, абзац, перенос строки, формат текста. Тег div
• Работа с изображением: фон, тег работы с изображением. Создание гиперссылок и якорей. Работа со списками. Использование графических гиперссылок

Работа с таблицами данных в HTML

• Работа с таблицами данных. Использование
• Формы и их элементы: текстовые поля и элементы выбора. Атрибуты тэгов form и input

Работа с HTML5

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

Работа с CSS/ CSS3

• Синтаксис CSS. Создание и подключение CSS стилей к странице. Применение валидатора CSS
• Базовые контейнеры CSS: Background, Text, Font, Link, List, Image
• Оптимизация графики с использованием спрайтов

Блочная верстка страницы

• Понятие блочной верстки и преимуществ использования, позиционирование элементов (свойства float и clear),
• Работа со слоями, позиционирование слоев (построение макета). Настройка свойств padding и margin
• Углубленная работа с CSS3
• Новые свойства
• Тени и градиенты
• 2D и 3D трансформация
• Анимация
• Обзор существующих методологий работы с CSS

Основы SEO для разработчика

• Обзор SEO оптимизации
• Задачи SEO, решаемые на странице и вне ее
• Приемы для улучшения SEO

Использование препроцессора LESS/SAAS/PostCSS

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

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

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

Работа над практическим заданием по созданию фронтэнд проекта

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

Основы языка JavaScript

• Обзор языка JavaScript: история, роль и место, семантика и синтаксис
• Обзор инструментария средств отладки кода браузеров. Принципы работы с console: обзор свойств и методов
• Типы данных. Oператоры: арифметические, логические. Оператор typef(). Приоритет выполнения
• Выражения. Операции над переменными. Область видимости переменных: Local Context, Global Context

Взаимодействие с пользователем

• Взаимодействие с пользователем через диалоговые окна
• Поиск элементов в документе, используя getElementById и getElementsByTagName
• Вывод, используя innerHTML
• Использование валидатора Jshint.com

Основные конструкции программирования

• Ветвления: IF, If…else, if… else if
• Циклы (Повторения): While, do…while, for
• Конструкция Swich…Case
• Конструкция try…catch, класс Error. Обработка ошибок

Работа с массивами

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

Встроенные и собственные конструкторы

• Обзор основных втроенных конструкторов
• Рассмотрение основных типов данных в роли объектов

Работа со строками и датами

• Обзор методов
• Введение в регулярные выражения

Обработка событий в модели DOM

• Обзор объектной модели W3C DOM: определение, история, уровни
• Браузерная реализация в веб

Способы получения доступа к элементам DOM

• get ElementById
• get ElementsByTagName
• get ElemensByClassName
• Объекты Document и Element
• Коллекции HTML элементов

Обзор событий элементов в модели DOM

• Методы элемента addEventListener(), removeEventListener()
• Жизненный цикл события(стадии перехвата, на целевом элементе, фаза всплытия)
• StopPropagation(), preventDefault()
• Кроссбраузерная обработка событий

Работа с формами

• Объект Form
• Элементы управления формы
• Поля ввода. Изменение регистра введенных данных
• Валидация данных через регулярные выражения

Основы Canvas

• Интерактив на стороне клиента с использованием Javascript(Canvas)
• Управление видео и аудио c использование javascript
• Обзор основых событий audio, video

Обработка элементов страницы

• События мыши и клавиатуры для элементов управления input
• Кнопки
• Поля ввода. Изменение регистра введенных данных
• Флаги. Массивы флагов
• Переключатель. Массивы переключателей
• Визуальная группировка элементов. Управление видимостью элементов используя свойства visibility, hidden, display

XMLHttpRequest

• Структура URL
• Использование объекта XMLHttpRequest: свойства, методы

JSON и XML

• Форматы передачи данных клиент-сервер-клиент JSON, XML
• Web storage и Cookies
• Local&Session Storage
• Cookies
• Доступ к Cookies
• Механизмы сохранения и чтения Cookies

Технология Ajax

• Технология Ajax
• Работа с HTTP протоколами
• Формирование запросов, обработка ответов

Модульный подход к разработке: RequireJS, Backbone.js

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

Автоматизаторы сборки ФронтЕнд проектов

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

Современные фрейморки

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

Работа над практическим заданием по созданию фронтэнд проекта

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

Защита своего учебного проекта

• Защита происходит в аудитории, перед независимым экспертом практиком, из наших компаний партнеров
• Защита будет напоминать ваше первое техническое собеседование, которое позволит показать ваше мастерство
• Вы получите развернутый фидбек о своей работе, а также узнаете в каком направлении вам еще нужно прокачать скилы