Курс
«Front-End разработка»
«Front-End разработка»
Стань профессиональным frontend-разработчиком
Старт: 17 апреля 2025
16 занятий, 2 раза в неделю
18:30-21:30 (вт/чт)
18:30-21:30 (вт/чт)
880 BYN
Офлайн/онлайн
Кто такой Front-end-разработчик?
Это специалист, который превращает созданный дизайнером макет в статическую веб-страницу или динамическое веб-приложение. Получая дизайн-макет сайта от дизайнера, front-end-разработчик выполняет его адаптивную и отзывчивую верстку для различных устройств с помощью HTML, CSS и программирует взаимодействие частей сайта с помощью JavaScript.
Кто такой Front-end-разработчик?
Это специалист, который превращает созданный дизайнером макет в статическую веб-страницу или динамическое веб-приложение. Получая дизайн-макет сайта от дизайнера, front-end-разработчик выполняет его адаптивную и отзывчивую верстку для различных устройств с помощью HTML, CSS и программирует взаимодействие частей сайта с помощью JavaScript.
Преимущества курса
-
Живой преподавательИндивидуальный подход к слушателям, обратная связь от тренера. -
Оптимальное количество теории и практики
Фокус на выработку профессиональных навыков на реальных кейсах. -
Уверенность и гарантииЕсли вы вынуждены прервать обучение, в течение года вы сможете вернуться и продолжить с того занятия, на котором остановились.
Этапы обучения Front-End разработке
в Академии BELHARD
в Академии BELHARD
2
Курс «Front-End разработка»
4
Junior Front-end-разработчик
ПРОГРАММА КУРСА
«Front-End разработка»
«Front-End разработка»
- Способы подключения скрипта. Структура кода. Режим "use strict". Константы, переменные и литералы. Ключевые слова let, const, var. Типы данных: число, строка, логический тип, значения "null" и "undefined", объекты и символы. Оператор typeof. Преобразования типов.
- Операторы и операнды. Унарный и бинарный операторы. Приоритет операторов. Присваивание. Инкремент/декремент. Операторы сравнения.
- Методы взаимодействия: alert, prompt, confirm, document.write. Условный оператор if и тернарный оператор '?'. Логические операторы. Конструкция "switch".
- Циклы for, while, do…while.
- Редактор кода Visual Studio Code. Настройки редактора. Рабочая область редактора. Разделение экрана. Работа с проектами. Режим просмотра. Работа с терминалом. Базовые операции командной строки. Установка и настройка плагинов. Плагин быстрого набора кода Emmet.
- Консоль разработчика и отладка кода в браузере Chrome.
- Объявление функции: Function Declaration и Function Expression. Области видимости переменных: глобальные и локальные переменные. Параметры функции. Возврат значения. Рекурсия. Замыкания. Выбор названия функции. Принцип: одна функция – одно действие. Функции высшего порядка и callback-функции. Конструктор функций.
- Функции-стрелки. Многострочные стрелочные функции. Immediately invoked function expression
- Объявление массива. Внутреннее устройство и эффективность массива. Перебор элементов с помощью for, for…of и forEach. Свойство length. Отрицательные индексы. Многомерные массивы. Метод toString.
- Методы начала массива: shift, unshift. Методы конца массива: pop, push. Добавление, удаление и замена элементов массива – метод splice. Копирование элементов массива – методы slice, concat. Поиск в массиве – методы indexOf/lastIndexOf, includes, find и findIndex, filter.
- Преобразования и упорядочения массива – методы map, sort, reverse, split и join, reduce/reduceRight и др.
- Методы строки: indexOf, lastIndexOf, substring, escape, unescape, eval. Свойство length. Регулярные выражения.
- Объекты JavaScript, объекты браузера и пользователя. Создание объектов. Свойства и методы объектов. Ключевое слово this. Операции с объектами. Доступ к свойству через точку, квадратные скобки, переменную. Вычисляемые свойства. Методы call, apply, bind.
- Объекты как ассоциативные массивы. Объявление объекта со свойствами: пары ключ-значение. Проверка существования свойства. Перебор и подсчет свойств: цикл for…in. Передача изменений по ссылке. Клонирование объектов. Метод delete. Сериализация объектов – методы JSON.stringify и JSON.parse.
- Объекты Number, String, Boolean и др. Методы объекта Math. Методы объекта Date.
- Классы. Функциональный и прототипный стили. Конструктор объектов. Внутренний (приватный) и внешний (публичный) интерфейсы. Наследование.
- Программный интерфейс DOM. Методы поиска элементов HTML: по идентификатору – getElementById, по имени тега – getElementsByTagName, по имени класса – getElementsByClassName, по CSS селекторам – querySelectorAll, getComputedStyle и др.
- Методы изменения элементов HTML и CSS: внутреннего содержимого – innerHTML, значения атрибута – setAttribute, стиля элемента – style, cssText, classList и др. Принцип именования свойств CSS в JavaScript.
- Методы добавления и удаления элементов HTML: создание – createElement, удаление – removeChild, добавление – appendChild, замена – replaceChild и др.
- Навигация по узлам. Работа с узлами. Наборы элементов. Списки узлов.
- События и реагирования на события (обработчики событий). События объектов браузера. События мыши. Клавиатурные события и др. Атрибуты событий. События выбранного элемента. Метод addEventListener.
- Анимация в JavaScript: методы setInterval, setTimeout, clearInterval, clearTimeout.
- Свойства/методы объектов window, document, screen, location, history, navigator, event.
- Выбор элементов по коллекции document: images, links, forms.
- Хранение пользовательской информации в веб-страницах – cookies.
- Быстрое получение и изменение атрибутов и содержимого элементов DOM.
- Добавление и удаление элементов.
- Управление событиями.
- Создание анимационных эффектов.
- HTTP-запросы. JavaScript AJAX, fetch. JavaScript Object Notation (JSON). jQuery AJAX.
- Структура HTML-документа.
- Списки, изображения, гиперссылки, цвета.
- Работа с таблицами и формами HTML.
- Вставка аудио и видеоматериалов HTML.
- Способы подключения CSS. Синтаксис и элементы стилей.
- Виды селекторов: тега, класса, идентификатора, потомка, дочерний, братский, атрибута, псевдокласса, псевдоэлемента, структурных псевдоклассов, универсальный.
- Комбинирование и группирование селекторов, переменные в CSS.
- Наследование и каскадирование селекторов.
- Использование CSS-медиазапросов для адаптивного дизайна.
- Анимация и трансформация в CSS. Градиенты, рамки, тени, переходы, фильтры.
- Использование препроцессоров и постпроцессоров - вендорных префиксов. CSS-фреймворки.
- Семантические элементы HTML5.
- Блочные элементы <div>. Строчные элементы <span>.
- Блочная модель: контейнеры и обертки. Свойства width, height, margin, border, padding. Тип контейнера элемента – свойство display. Область блочного элемента – свойство box-sizing. Позиционирование элементов - свойство position. Переполнение блочного элемента - свойство overflow. Наложение элементов - свойство z-index. Плавающие блоки - свойство float и clear. CSS-спрайты - свойство background-position.
- Компоновка элементов с помощью модели CSS Flexbox.
- Компоновка элементов с помощью модели CSS Grid.
- Понятие API. API браузера.
- API форм (Form API). Интерфейс HTMLFormElement. Свойства элемента form - name, action, method, enctype. Методы form – submit, reset. Выбор формы по коллекции forms и по значению атрибута name. Выбор элементов по коллекции elements. Элементы <input> с полем ввода текста. Проверка формы с помощью метода setCustomValidity(). Псевдоклассы :focus, :invalid, :valid, :required, :optional. Элементы <input> с выбором значения. Валидация радиокнопок и чекбоксов. Другие элементы формы. События focus/blur.
- API перетаскивания (Drug&Drop API). События источника - dragstart, drag, dragend. События целевого элемента - dragenter, dragover, drop, dragleave. Примеры перетаскивания одного элемента в другой; полного перетаскивания; выбора источника для перетаскивания; выбора позиции относительно указателя мыши; перетаскивание файлов из внешних источников.
- API геолокации (Geolocation API). Определение и слежение за местоположением. Методы getCurrentPosition, watchPosition, clearWatch. Подключение Гугл-карт и Яндекс-карт.
- API Видео и аудио (Video and audio APIs). Свойства, методы и события для программирования интерактивного плейера.
- API web-хранилища (Web Storage API) - развитие технологии cookies.
- API холст (Canvas API). Создания графики с помощью JavaScript: цветной прямоугольник, линии и пути, квадратичная и кубическая кривые Безье, линейный и радиальный градиенты, работа с текстом, создание тени, вставка изображений (обычных, с измененными размерами, кадрированных, шаблоны изображений), трансформация элементов.
- Что такое React JS. Как создать React приложение. Vite. Расширения для Chrome.
- Что такое React компоненты. Функциональные и классовые компоненты. Динамические данные. React Props. React Children.
- События в React. React State. React Hooks. Условный рендеринг. Работа со списками, свойство key. React Fragment.
- JSX. Стилизация React приложений. Работа с формами.
- Использование jQuery плагинов. Owl Carousel 2.
- Работа с документацией. Подключение и настройка third-party сервисов.
- Figma для создание макета Web-сайта. Интерфейс и настройки Figma. Инструменты и команды выделения. Компоненты.
- Работа с Git. Создание удаленного и локального репозитория. Подключение удалённого репозитория. Работа с ветками. Commit. Fetch, Pull и Push.
В ходе курса вы:
- Изучите синтаксис языка JavaScript, научитесь реализовывать на нем базовые алгоритмические конструкции.
- Научитесь работать с DOM, инструментами отладки Chrome, Firebug и др.
- Научитесь пользоваться возможностями библиотек и фреймворков JavaScript. Писать собственные веб-приложения на Angular и React.
- Научитесь использовать ООП в JavaScript для проектирования сложных систем.
- Изучите инструменты контроля версий Git, GitHub и сможете разместить и управлять собственным сайтом на GitHub Pages.
- Приведете в систему знания верстки на HTML5/CSS3. Познакомитесь вплотную с новыми возможностями CSS3, освоите анимацию элементов.
- Научитесь пользоваться онлайн-сервисами для веб-разработчиков: Google Icons, Fonts, Material Design и др.
- Узнаете, как устроена программная платформа Node.js для работы с помощью JavaScript на стороне сервера.
- Узнаете, как работать с HTML5 API с помощью JavaScript.
Есть опция рассрочки!
(подробности уточняйте у менеджеров Учебного Центра)
Почему стоит изучать Front-End разработку
именно в Академии BELHARD?
именно в Академии BELHARD?
-
Оптимальный размер учебных группЭто позволяет, с одной стороны, научиться работать в команде, а с другой – добиться индивидуального подхода к каждому слушателю. -
Минимум требований к базовым знаниямНа наших курсах мы помогаем стать JavaScript-разработчиком каждому, кто имеет базовые знания и минимальные представления о том, что такое Web-разработка. -
Адаптивная программаАкадемия BELHARD даёт выверенные знания, которые позволяют пройти техническое собеседование. Программы регулярно адаптируются под потребности рынка. -
Всего 880 BYN за весь курсВозможна оплата в два этапа. Работаем с системой «Расчет» (ЕРИП). -
ТрудоустройствоНаш карьерный центр окажет содействие в подготовке к успешному интервью с партнёрами-работодателями. Вы также получите персональные рекомендации для создания резюме, которое привлечёт внимание и выделит вас среди других кандидатов! -
Корпоративные группы и индивидуальное обучениеМы адаптируем нашу учебную программу к вашим особым требованиям. Узнать подробнее
При успешном окончании курса вы получите:
-
Сертификат об обучении государственного
образца
*Для подготовки требуются дополнительные данные.
Подробности уточняйте у менеджеров Учебного Центра. -
Cертификат Академии BELHARD
Преподаватели курса
- Минзер АндрейFrontend разработчик с четырехлетним стажем работы. Работает в компании с направлением FinTech, разрабатывает приложение уровня Enterprise. Основной стек технологий - React, HTML, CSS и TypeScript.
- Дмитрий ШиляевFrontend разработчик в сфере eCommerce. Более 5 лет опыта работы как c небольшими проектами, так и с мировыми брендами. Основной опыт работы был с Magento 2, являющейся лидирующей в мире eCommerce платформой уровня Enterprise. Основной стек технологий: HTML, CSS (LESS), JavaScript (jQuery), а также PHP, XML, KnockoutJS. Опытный ментор и тимлид, занимавшийся подготовкой начинающих разработчиков.
- Сергей ШевцовПрактикующий frontend разработчик. Основная специализация - разработка веб-приложений на React с использованием HTML, CSS и JavaScript.
Отзывы наших слушателей