Иконка

Frontend-разработчик

Профессиональная переподготовка, 480 ак.часов/5 месяцев

Записаться на курс

Треугольник
Треугольник
Треугольник

Аннотация курса

Цель курса «Frontend-разработчик» — подготовить квалифицированного специалиста, владеющего продвинутыми инструментами верстки, навыками профессионального программирования на JavaScriptи использования JS-библиотек, фреймворков. Это одна из самых востребованных и популярных профессий в среде веб-разработчиков.

Во время обучения вы сами:

  • Развернёте платформу Node.js на своём компьютере и облачном хостинге
  • Создадите клиентские сценарии для извлечения данных из удалённых ресурсов и построения элементов интерфейса пользователя
  • Создадите элементы интерфейса пользователя с помощью библиотек Vue и React

Категория слушателей: специалисты с высшим, средним специальным образованием и студенты старших курсов университетов.

Профессиональные стандарты

Курс соответствует:

  • профессиональному стандарту 06.035 «Разработчик Web и мультимедийных приложений» (уровни 4-6)
  • национальному стандарту Российской Федерации ГОСТ Р 56413-2015/CWA 16458:2012 "Информационные технологии. Европейские профили профессий ИКТ-сектора", идентичный международному документу CWA 16458:2012 "Европейские профили профессий ИКТ-сектора".

Предварительные требования

  • cпециалисты со средним профессиональным, высшим образованием и студенты старших курсов вузов
  • уверенный пользователь ПК

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

  • HTML. Основы разработки web-сайтов (30 часов)Стрелка вниз
    • Тема 1. Введение в язык HTML

      Редакторы HTML кода. Браузеры. Валидность HTML-документа. Синтаксис языка HTML. Блочные и строчные элементы. Правила написания атрибутов. Универсальные атрибуты. Разделы документа HTML. !DOCTYPE

    • Тема 2. Форматирование текста Веб-страниц.

      Создание нового абзаца. Запрет переноса слов. Выравнивание элементов страницы по центру. Элементы фразы. Цитаты. Нижние и верхние индексы. Текстовые заголовки. Установка гарнитуры, размера и цвета шрифта. Горизонтальные линии. Нумерованный список. Маркированный список. Список терминов. Комментарии языка HTML

    • Тема 3. Графика на Веб-страницах

      Основные форматы графики. Добавление рисунка на Веб-страницу. Путь к файлу изображений. Установка размеров рисунка на странице. Управление обтеканием текста вокруг графического объекта. Фоновый рисунок веб-страницы.

    • Тема 4. Создание ссылок

      Создание ссылки. Указание адрес документа перехода. Установка целевого окна открытия документа по гиперссылке. Гиперссылки на закладки в тексте страницы. Гиперссылки на закладки. Установка цвета гиперссылок. Карты-изображений.

    • Тема 5. Разметка веб-страниц с помощью таблиц

      Теги HTML для создания таблиц. Размеры таблицы. Выравнивание содержимого ячеек. Отступы в таблицах. Использование в таблице фоновых изображений. Объединение ячеек. Группирование столбцов для форматирования таблицы

    • Тема 6. Создание форм

      Типы элементов формы. Добавления поля ввода и поля ввода пароля. Пояснительный текст к элементу формы. Размеры полей ввода. Блокирование элемента формы. Порядок элементов форм. Добавление флажков и переключателей. Создание списков. Текстовые области. Выбор файла с помощью элемента формы. Скрытое поле. Добавление на форму кнопки Сбросить и Отправить.

    • Тема 7. Работа с фреймами

      Преимущества фреймов. Недостатки фреймов. Наборы фреймов. Границы фреймов. Положение и размер фреймов. Создание фрейма. Изменения размеров фрейма. Полоса прокрутки фрейма. Смешанная фреймовая структура. Навигация внутри фреймов. Встроенные фреймы

    • Тема 8. Заголовок документа HTML

      Заголовок страницы. Установка базового шрифта. Установка базового адреса. Фоновый звук на веб-страницы. Мета теги типа NAME. Мета теги типа HTTP-EQUIV.

  • Разработка web-сайтов с использованием CSS3 (40 часов)Стрелка вниз
    • Тема 1. Основы css

      Применение css для html-тега. Применение css для страницы. Применение css для web-узла. Создание внешнего css-файла. Импорт таблицы стилей. Применение css к элементам страниц. Переопределение html-тега. Определение классов для создания тегов. Определение id-селекторов для идентификации объекта. Определение стилей с одинаковыми правилами. Наследование родительских свойств. Определение стилей потомка. Определение стилей прямого потомка. Определение стилей сестринских элементов. Универсальный селектор. Определение стилей атрибутов. Определение стилей с псевдоклассами. Определение ссылок стилей с псевдоклассами. Псевдоклассы. Значение !important. Определение каскадного порядка. Таблицы стилей для разных типов устройств. Установка полей для страницы при печати. Свойства с сокращенной формой записи. Комментарии в css.

    • Тема 2. Управление шрифтом

      Установка семейства шрифта. Размер шрифта. Относительные единицы. Абсолютные единицы измерения. Курсив. Толщина шрифта. Создание капители. Загрузка шрифта. Укороченная запись определения свойств шрифта.

    • Тема 3. Управление текстом

      Кернинг. Интервал между словами. Интерлиньяж. Заглавные и строчные буквы. Выравнивание текста по горизонтали. Вертикальное выравнивание текста. Красная строка. Перенос слов. Настройка цвета текста. Оформление текста. Видимость текста. Тень текста. Кавычки. Настройка направления текста. Установка разрыва страницы для печати. Установка разрыва страницы для печати. Управление свойствами пробелов.

    • Тема 4. Управление элементом

      Составляющие элемента. Изменение внешнего вида элемента. Ширина элемента. Высота элемента. Задание высоты и ширины блока. Отступ элемента. Поле элемента. Граница элемента. Установка толщины границы. Установка цвета границы. Cтиль границы. Общая укороченная форма записи. Скругление углов элемента. Установка границ. Настройка фона. Цвет фона. Установка фонового изображения. Установка начального положения фонового изображения. Повторяемость фона. Прокрутка фона. Фон по границам элемента. Масштабируемость фонового изображения. Общая укороченная форма записи. Тень элемента. Выравнивание элемента. Запрет обтекания.

    • Тема 5. Управление позиционированием элемента

      Позиционирование элемента. Абсолютное позиционирование. Фиксированное позиционирование. Относительное позиционирование. Статическое позиционирование. Настройка положения элемента. Настройка положения слева. Настройка положения справа. Настройка положения сверху. Настройка положения снизу. 3d-позиционирование.

    • Тема 6. Управление видимостью элемента

      Видимость элемента. Определение видимой части элемента. Управление невидимой частью. Управление невидимой частью по вертикали. Управление невидимой частью по горизонтали. Эффект прозрачности.

    • Тема 7. Управление списком, таблицей и интерфейсом

      Списки. Задание типа маркера. Создание собственных маркеров. Создание висячих отступов. Укороченная запись управления списком. Счетчик элемента. Увеличения значения счетчика. Таблицы. Свертывание границ между ячейками таблицы. Расстояние между границами ячеек. Отображение пустых ячеек. Отображение ячеек. Положение заголовка таблицы. Изменение внешнего вида курсора мыши.

  • Динамический язык стилевой разметки LESS (30 часов)Стрелка вниз
    • Тема 1. Введение в LESS.
    • Тема 2. Переменные.

      Интерполяции переменных. Селекторы. URL-адреса. Импортирование less. Свойства. Имена переменных. Переопределение переменной.

    • Тема 3. Примеси.

      Параметрические примеси.

    • Тема 4. Функции LESS.

      Строковые функции. Функции списка. Математические функции. Функции проверки типов данных.

    • Тема 5. Функции LESS для работы с цветом.

      Функции задания цвета. Функции для работы с цветовыми каналами. Операции с цветом. Функции смешения цветов.

    • Тема 6. Предохранители, циклы.

      Примеси, как функции. Предохранители. Циклы. Объединение.

  • JavaScript. Основы программирования (60 часов)Стрелка вниз
    • Тема 1. Основные понятия языка JavaScript.

      Структура программы. Файлы. Выполнение программы в разных средах: в браузере и в интерфейсе командной строки (nodejs CLI). Жизненный цикл приложения на JavaScript.

    • Тема 2. Зависимости.

      Некоторые базовые инструменты (npm, yarn, turbo, nodemon, eslint). Формат JSON. Структура и назначение файла package.json

    • Тема 3. Переменные и области видимости JavaScript.

      Типы данных. Контроль типов данных. Приведение типов. Применение Unicode в JavaScript.

    • Тема 4. Функции.

      Стандартные и стрелочные функции. Возврат значения функцией. Анонимные функции (лямбды). Модели вызова функции. Передача и привязывание аргументов. Аргументы по умолчанию.

    • Тема 5. Функция как тип данных.

      Замыкания и коллбэки. Таймер. Веб-воркеры.

    • Тема 6. Управляющие конструкции JavaScript.

      Ветвление, кейсы, циклы с предусловием и постусловием, со счётчиком и без счётчика. Тернарный оператор. Контроль ошибок (try..catch).

  • Javascript. Событийно-ориентированное программирование (110 часов)Стрелка вниз
    • Тема 1. Объектная модель документа.

      Манипулирование элементами по их селекторам (querySelector). Изменение свойств каскадных стилей. Создание элементов и фрагментов DOM (documentFragment).

    • Тема 2. События.

      Слушатели событий. Всплывание событий. Кастомные события. Создание примера приложения с коммуникацией компонентов.

    • Тема 3. Считывание информации из внешнего интернет-ресурса.

      Кросс-доменные запросы. Интерфейс fetch. Считывание и интерпретация данных в формате JSON.

    • Тема 4. Строки

      Операции над строками. Дополнение строки до заданной длины. Обращение и конкатенация строк. Иммутабельность строк. Регулярные выражения. Валидация полей формы с помощью регулярных выражений.

    • Тема 5. Ссылочные типы данных. Массивы

      Итерация по массиву. Генерация непрерывного массива. Маппинг и свёртка. Синхронные коллбэки и предикаты в массивах: сортировка и фильтрация.

    • Тема 6. Создание объектов (plain JavaScript objects).

      Связь с форматом JSON. Сериализация объектов. Массивоподобные объекты. NodeCollection: новый взгляд на старую проблему. Создание объектов с помощью литерала, прототипа и класса. Энумерабельность и итерабельность.

    • Тема 7. Канвас. Динамическое рисование на холсте с помощью JavaScript.

      Создание паттернов для фонового изображения веб-страницы. Сходства и различия с манипулированием SVG-элементами.

    • Тема 8. Библиотеки

      Использование функциональности сторонних библиотек для создания пользовательского интерфейса и манипулирования данными (на примере jQuery). Библиотеки манипулирования датами (на примере Moment).

    • Тема 9. Веб-компоненты и шаблонизаторы на клиентской стороне.

      Использование Shadow DOM и веб-компонентов для расширения функциональности веб-документа. Шаблонизаторы: императивный и декларативный подход. Использование шаблонизатора на клиентской стороне (на примере Handlebars).

    • Тема 10. Подготовка и размещение итогового проекта.
  • NodeJS. Технологии профессионального программирования (140 часов)Стрелка вниз
    • Тема 1. Потоки (streams) и сокеты.

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

    • Тема 2. Документоориентированные базы данных (на примере Mongo).

      Развёртывание сервера с Mongo и подключение к нему. Пользователи и их права. Импорт и экспорт данных.

    • Тема 3. Использование объектно-документного сопоставителя (Object Document Mapper, ODM) Mongoose.

      Модель и её связь со схемой и коллекцией документов. Проектирование структуры приложения на базе паттерна MVC.

    • Тема 4. Аутентификация и авторизация.

      Механизмы сессий в Express. Технология PassportJS и внешние стратегии аутентификации.

    • Тема 5. Проектирование REST API на примере серверной части микроблога.

      Обслуживание маршрутов с помощью контроллеров. Управление маршрутизаторами.

    • Тема 6. Использование Node совместно с библиотекой React.

      Клиентская маршрутизация. Создание интерфейса одностраничного приложения (SPA). Серверный рендеринг: React SSR. Сборка проекта с помощью Webpack на стороне сервера.

    • Тема 7. Использование других серверных Node-фреймворков

      Разработка Node-приложений с помощью альтернативных серверных фреймворков (на примере Koa). Управление серверным приложением. Менеджер процессов.

    • Тема 8. Подготовка и развёртывание финального проекта с использованием платформы деплоймента (на примере Heroku)
  • Использование JavaScript-фреймворков. Реактивное программирование (40 часов)Стрелка вниз
    • Тема 1. Фреймворки и библиотеки.

      Современная экосистема фреймворков JavaScript.

    • Тема 2. React как библиотека для создания интерфейсов на основе повторно используемых компонент.

      Язык JSX. Байндинг и реактивность. Состояние. Принципы управления компонентами и их событиями. Жизненный цикл компонентов.

    • Тема 3. Фреймворк Vue.

      Встроенный шаблонизатор и система компонентов.

    • Тема 4. Фреймворк Elm.

      Разработка декларативных интерфейсов.

    • Тема 5. Создание типичного фронтэнд-приложения, работающего с серверным API (на примере плеера видеороликов или микроблога).
  • Дипломное проектирование (40 часов)Стрелка вниз

Преподаватели курса

Государев Илья Борисович

Государев Илья Борисович

к.п.н., доцент

Google ссылка Research ссылка

Шуклин Дмитрий Анатольевич

Шуклин Дмитрий Анатольевич

руководитель образовательного центра, к.п.н., доцент

Google ссылка Research ссылка

Перепелица Филипп Александрович

Перепелица Филипп Александрович

старший преподаватель,
автор курсов на платформе OpenEdu

Google ссылка Research ссылка