Frontend разработка

Курс Frontend разработки в Могилеве включают в себя необходимый стек технологий для работы Junior frontend разработчиком. Программа курса согласована с могилевским филиалом EPAM Systems и обучает набору навыков, которым должны владеть соискатели, претендующие на позицию веб-разработчика.

Курс состоит из 3 модулей. Занятия по каждому из них идут 3 раза в неделю по 2.5 астрономических часа в вечернее время (расписание - уточняйте) с 18.15 до 20.45

  • HTML / CSS (5 недель)
  • JavaScript (4 недели)
  • Фреймворк Angular2+ (7 недель)

Как проходит обучение

Обучение на курсе "Frontend-разработчик" проходит последовательно, начиная с 1 модуля. Обучаться может любой желающий, предварительной подготовки не требуется.

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

Стоимость обучения и начало занятий

Оплата вносится за каждый модуль отдельно. Оплачивать весь курс сразу не нужно. Начало занятий 11 марта (пнд-срд-пт с 18.15 до 20.45)

1 модуль, HTML / CSS: 5 недель, 15 занятий. Цена: 375 руб 300 руб, действует 20% скидка при заключении договора до 1 марта  

2 модуль, JavaScript: 4 недели, 12 занятий. Цена: 300 руб  

3 модуль, фреймворк Angular 2+: 7 недель, 19 занятий + итоговый тест по курсу. Цена: 475 руб

Записаться / получить консультацию: (29) 627 75 13 и (33) 691 78 40


Программа 1-го модуля курса "Frontend-разработчик": HTML / CSS

15 занятий по 2.5 астрономических часа (3 раза в неделю)

Тема 1:

  • Структура HTML-документа
  • Создание простейшей HTML-страницы, разбор из каких тегов она состоит 
  • и за что эти теги отвечают
  • Подключение к странице CSS и JavaScript
  • Добавление на простейшую HTML-страницу текстового содержания и 
  • правильная его разметка: абзацы, заголовки, подзаголовки, списки и прочие элементы. 
  • Ссылки и изображения


Тема 2:

  • Знакомство с таблицами
  • Рамки, фон строк, размеры столбцов, выравнивание текста внутри ячеек, 
  • объединение ячеек


Тема 3:

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


Тема 4:

  • Знакомство с CSS
  • Базовые понятия CSS: селекторы, каскадность, наследование, приоритеты 
  • CSS-свойства для оформления текста (жирность, курсив, размер, цвет), 
  • создание сетки страницы и позиционирование элементов
  • Наследование, каскадирование, специфичность: что это и как их 
  • правильно использовать?


Тема 5:

  • Блочная модель документа
  • Управление размерами и расположением элементов, задание отступов и 
  • рамок, типы элементов и их особенности
  • Тонкости свойства float и блочно-строчных элементов
  • Основные приёмы построения сеток


Тема 6:

  • Позиционирование элементов: относительное, абсолютное и 
  • фиксированное
  • Изменение расположения элементов на странице с помощью CSS-свойств 
  • для позиционирования
  • Создание нескольких типовых навигационных меню: вертикальное, 
  • горизонтальное, многоуровневое и с выпадающим подменю


Тема 7:

  • Знакомство с HTML5
  • Новые возможности HTML5
  • Новые элементы в стандарте и как их правильно использовать
  • Вставка на страницу аудио и видео, подключение и использование 
  • нестандартные шрифтов и векторных изображений
  • Создание продвинутых форм, используя новые возможности HTML5
  • Новые типы полей для ввода дат, цветов, чисел и адресов сайтов
  • Автофокус, подсказки, средства валидации


Тема 8:

  • Продвинутые селекторы :nth-last-of-type, :only-child, псевдоэлементы ::before и ::after
  • Создание теней с помощью CSS
  • Свойство box-shadow, продвинутые приёмы работы с тенями


Тема 9:

  • Линейные градиенты
  • Двумерные трансформации
  • Использование трансформаций для создания декоративных эффектов
  • Повышение читабельности текстов с помощью новых CSS-свойств


Тема 10:

  • Анимация Основы анимации на CSS
  • Плавное изменение CSS-свойств


Тема 11:

  • Флексбокс
  • Новый механизм «гибкой» раскладки — флексбокс
  • Управление размерами и отступами флекс-элементов, коэффициенты 
  • растяжения и сжатия «Гибкие» раскладки и элементы интерфейса


Тема 12:

  • Знакомство с SVG
  • SVG — формат векторной графики
  • Базовые примитивы: линии, прямоугольники, окружности
  • Базовые понятия об оформлении SVG-фигур, заливки и обводки
  • Масштабирование SVG и атрибуты viewBox и preserveAspectRatio

Программа 2-го модуля курса "Frontend-разработчик": JavaScript

12 занятий по 2.5 астрономических часа. 3 раза в неделю

Тема 1:

  • Введение в JavaScript
  • Справочники и спецификации
  • Редакторы для кода
  • Консоль разработчика


Тема 2:

  • Привет, мир!
  • Внешние скрипты, порядок исполнения
  • Структура кода
  • Современный стандарт, "use strict"
  • Переменные
  • Правильный выбор имени переменной
  • Шесть типов данных, typeof
  • Основные операторы
  • Операторы сравнения и логические значения
  • Побитовые операторы
  • Взаимодействие с пользователем: alert, prompt, confirm
  • Условные операторы: if, '?'
  • Логические операторы
  • Преобразование типов для примитивов
  • Циклы while, for
  • Конструкция switch
  • Функции
  • Функциональные выражения
  • Рекурсия, стек
  • Именованные функциональные выражения


Тема 3:

  • Отладка в современных браузерах
  • Советы по стилю кода
  • Как писать неподдерживаемый код?
  • Автоматические тесты при помощи chai и mocha


Тема 4:

  • Введение в методы и свойства
  • Числа
  • Строки
  • Объекты как ассоциативные массивы
  • Объекты: перебор свойств
  • Объекты: передача по ссылке
  • Массивы с числовыми индексами
  • Массивы: методы
  • Массив: перебирающие методы
  • Псевдомассив аргументов "arguments"
  • Дата и Время


Тема 5:

  • Глобальный объект
  • Замыкания, функции изнутри для new Function
  • Локальные переменные для объекта
  • Модули через замыкания
  • Управление памятью в JavaScript
  • Устаревшая конструкция "with"


Тема 6:

  • Методы объектов, this
  • Преобразование объектов: toString и valueOf
  • Создание объектов через "new"
  • Дескрипторы, геттеры и сеттеры свойств
  • Статические и фабричные методы
  • Явное указание this: "call", "apply"
  • Привязка контекста и карринг: "bind"
  • Функции-обёртки, декораторы


Тема 7:

  • Типы данных: , instanceof
  • Формат JSON, метод toJSON
  • setTimeout и setInterval
  • Запуск кода из строки: eval
  • Перехват ошибок, "try..catch"


Тема 8:

  • Внутренний и внешний интерфейс
  • Геттеры и сеттеры
  • Функциональное наследование


Тема 9:

  • Прототип объекта
  • Свойство F.prototype и создание объектов через new
  • Встроенные "классы" в JavaScript
  • Свои классы на прототипах
  • Наследование классов в JavaScript
  • Проверка класса: "instanceof"
  • Свои ошибки, наследование от Error
  • Примеси


Тема 10:

  • ES-2015
  • Переменные: let и const
  • Деструктуризация
  • Функции
  • Строки
  • Объекты и прототипы
  • Классы
  • Тип данных Symbol
  • Итераторы Set, Map, WeakSet и WeakMap
  • Promise
  • Генераторы
  • Модули
  • Proxy

Программа 3-го модуля курса "Frontend-разработчик": фреймворк Angular2+

19 занятий по 2.5 астрономических часа. 3 раза в неделю

Тема 1:

  • Что такое Angular?
  • Установка и настройка окружения(NodeJs, Angular CLI, Git SCM, 
  • современный редактор кода)
  • Команды CLI
  • Создание и запуск первого приложения


Тема 2:

  • Основы Git
  • Создание и работа с удаленным репозиторием
  • Архитектура фреймворка
  • Структура проекта
  • Повторение основ HTML/CSS/JS


Тема 3:

  • Основы Typescript
  • Основные типы
  • Переменные
  • Классы и интерфейсы
  • Функции и методы


Тема 4:

  • Перечисления, создание собственных типов данных, основы ООП
  • Пространства имён
  • Модули и декораторы
  • Дженерики


Тема 5:

  • Модули в Angular 2+
  • Создание модуля
  • Понятие компонента и его связь с модулем
  • Использование шаблонов
  • Привязка динамических данных к шаблонам на основе компонента
  • Использование CSS в компоненте


Тема 6:

  • Директивы и их использование(ngIf, ngFor)
  • Метаданные
  • Привязка данных
  • Пайпы


Тема 7:

  • Основы HTTP
  • CRUD операции
  • Понятие MVC
  • Создание собственных моделей на основе класса
  • Пример простого HTTP запроса


Тема 8:

  • Понятие Injectable
  • Создание классов-сервисов и работа с ними
  • Routing & Navigation
  • Конфигурация и создание


Тема 9:

  • Понятие JSON
  • NgForms и обработка пользовательского ввода
  • Обработка ошибок


Тема 10:

  • Использование сторонних библиотек в проекте: установка и удаление
  • Изменение стандартной конфигурации проекта
  • Подготовка проекта к релизу
  • Создание debug и release конфигурации
  • Компиляция и развертывание приложения


Тема 11:

  • Жизненный цикл компонента
  • Создание Lazy-Load модулей
  • Понятия forRoot() и forChild()
  • Повторение пройденного материала


Тема 12:

  • Создание интернет-магазина
  • Создание формы авторизации и регистрации
  • Разработка запросов и моделей для API


Тема 13:

  • Разработка главной формы магазина: тулбар, основная часть и футер
  • Привязка данных
  • Создание REST-сервиса


Тема 14:

  • Разработка формы личного кабинета пользователя
  • Разработка формы "Корзина"


Тема 15:

  • Доработка приложения, подготовка к релизу
  • Deploy готового решения на сервер
  • Понятие Unit-тестов и работа с ними


Тема 16:

  • Повторение пройденного материала
  • Тест по теме "Основы Angular 2+
  • Будущее фреймворка и перспективы развития
  • Книги и дополнительные материалы для углубленного изучения Angular

Записаться / получить консультацию: (29) 627 75 13 и (33) 691 78 40