Профессия
Научитесь с нуля проектировать интерфейсы сайтов и приложений на HTML, CSS, JavaScript и React
Создадите до 13 проектов для портфолио
Пройдёте стажировку в IT-компании уже во время обучения
Frontend-
разработчик
разработчик
Найдёте работу, или вернем деньги
+
●
●
●
-60%
до 20 сентября
Гибкий график
Учитесь онлайн в удобное время
Интерактивный формат
Видеолекции, скринкасты, тренажёры, тесты
Длительность
От 7,5 месяцев
Поддержка
Личный куратор будет на связи 7 дней в неделю
Документ
Диплом о профессиональной переподготовке
Frontend-разработчик — одна из самых востребованных IT-профессий.
По данным HeadHunter, только за последний год спрос на Frontend-разработчиков в России вырос на 20%.
Frontend-разработчик отвечает за то, как сайт выглядит и работает для пользователя. Дизайнер создаёт макет, а разработчик, превращает его в код — так, чтобы пользователю было удобно взаимодействовать с сайтом.
IT-сфера
Сфера услуг
Гейминг
Ритейл
Банкинг
Специалисты нужны везде, где создают сайты или приложения, например:
IT-сфера
Гейминг
Банкинг
Сфера услуг
Ритейл
Junior
73 000 ₽
Вакансии на hh.ru прямо сейчас:
Middle
180 000 рублей — средняя зарплата Frontend-разработчика в 2024 году
161 000 ₽
Senior
302 000 ₽+
Junior Frontend Developer
от 85 000 ₽ на руки
Москва, можно удалённо
Без опыта
Опыт 1-3 года
Москва, ● Новые Черёмушки
до 200 000 ₽
Frontend-разработчик
Кому подойдёт курс
Тем, кто хочет сменить профессию и стать разработчиком
Научитесь проектировать интерфейсы с нуля. Отработаете полученные навыки на стажировке в IT-компании и найдёте первую работу через 7,5 месяцев.
Смежным специалистам в сфере IT
Попробуете себя в новой роли. Сможете применять навыки разработки в текущей профессии или полностью сменить направление.
Начинающим разработчикам
Структурируете и систематизируете свои знания. Усилите своё портфолио 13 проектами и сможете брать в работу более сложные кейсы, чтобы вырасти в доходе.
Ваши навыки после обучения
Должность
Frontend-разработчик
Навыки
- Владею навыками адаптивной и кроссбраузерной вёрстки на HTML и CSS
- Программирую на JavaScript
- Создаю веб-приложения с использованием библиотеки React
- Использую систему контроля версий Git
- Применяю паттерны проектирования и ООП
- Использую препроцессоры SASS и LESS
- Работаю со сборщиком Webpack
- Провожу анализ и review кода
Инструменты
⠀⠀⠀FlexBox
Метод компоновки в CSS, который позволяет автоматически располагать адаптивные элементы внутри контейнера в зависимости от размера области просмотра.
⠀⠀⠀PostgreSQL
Популярная система управления базами данных.
⠀⠀⠀Git
Система контроля версий для управления кодом и совместной работы.
⠀⠀⠀API
Набор правил, по которым приложения или части программы общаются друг с другом.
⠀⠀⠀ RestAPI
Самый популярный подход к проектированию API.
⠀⠀⠀HTML
Язык, с помощью которого можно разметить структуру будущей веб-страницы: добавить основные блоки, текст, картинки, видео.
⠀⠀⠀CSS
Язык стилей, с помощью которого можно описать внешний вид HTML-элементов.
- Знаю основы DevOps
⠀⠀⠀JavaScript
Один из самых популярных языков программирования для разработки веб-приложений.
- Анализирую и отлаживаю свой и чужой код
- Умею писать документацию по коду
- Провожу анализ и review кода
⠀⠀⠀React
Популярная и удобная JavaScript-библиотека для создания пользовательских интерфейсов.
- Знаю основы UX/UI-дизайна, автоматизирую работу в Figma
- Тестирую сайт, нахожу ошибки и провожу рефакторинг кода
⠀⠀⠀Figma
Сервис, в котором проектируют интерфейсы сайтов и мобильных приложений.
- Умею писать unit-тесты для JavaScript-кода
- Провожу тестирование API
⠀⠀⠀WebPack
Сборщик модулей JavaScript, который помогает управлять зависимостями и оптимизировать код.
- Знаю основы SQL, работаю с СУБД PostgreSQL
- Понимаю и применяю принципы современной разработки ПО: Agile, Scrum, Kanban
⠀⠀⠀Chrome DevTools
Встроенный в браузер Google Chrome инструмент, который позволяет веб-разработчикам тестировать интерфейсы и производительность сайта.
⠀⠀⠀Grid Layout
Сетка CSS позволяет более легко и последовательно создавать сложные адаптивные макеты сетки веб-дизайна в разных браузерах.
⠀⠀⠀SASS
Метаязык на основе CSS, предназначенный для увеличения уровня абстракции CSS-кода и упрощения файлов каскадных таблиц стилей.
⠀⠀⠀LESS
Динамический язык стилей с открытым исходным кодом.
⠀⠀⠀jQuery
Библиотека JavaScript, которая помогает проще добавлять интерактивные элементы на сайты.
⠀⠀⠀AJAX
Технология, которая позволяет обмениваться веб-браузеру и серверу данными в фоне и делает приложения интерактивными и отзывчивыми.
⠀⠀⠀SQL
Язык, с помощью которого разработчики работают с базами данных.
На курсе вы создадите до 13 проектов в портфолио
С помощью HTML и CSS вы создадите одностраничный сайт-каталог со списком экскурсий по Санкт-Петербургу.
Сайт экскурсий
С помощью JavaScript, HTML и CSS вы создадите одностраничный сайт, на котором соберёте информацию о себе, презентуете свои проекты и навыки.
Сайт-портфолио
С помощью HTML- и CSS вы напишите код для адаптивной страницы сайта магазина сантехники по готовому макету из Figma. Также вы настроите сайт для разных типов экранов.
Веб-страница по готовому макету: сайт магазина сантехники
Используете обработчики событий и элементы DOM, чтобы создать онлайн графический редактор. Научитесь работать с тегом и добавите интерактивные элементы в проект.
Онлайн-графический редактор
По готовому макету сайта вы напишете HTML- и CSS-код для всех страниц сайта, добавите интерактивные элементы и настроите автоматическую генерацию контента из JSON-файлов.
Многостраничный сайт-ресторана
Разработаете базовый чат с библиотекой jQuery, отработаете AJAX-запросы и настроите общение браузера с сервером.
Чат с использованием технологии AJAX
С помощью классов напишете робота для игры в шахматы.
Робот для игры в шахматы
Спроектируете базу данных для бизнеса, свяжете её с другими и настроите обмен информацией между таблицами одного проекта.
База данных магазина
Разработаете программу для игры в крестики-нолики, которая запускается в терминале или IDE.
Игра «Крестики-нолики»
Создадите приложение, в котором пользователь сможет редактировать, хранить и удалять заметки.
Приложение для заметок
Разработаете бота, в котором пользователи смогут вести свой календарь: добавлять, редактировать, удалять и просматривать события.
Telegram-бот с функцией календаря
Вы создадите сайт, на который добавите информацию о рейтинге 100 лучших фильмов по мнению IMDB. Будете работать с компонентами React и настроите темы оформления.
Сайт с рейтингом фильмов
Создадите многостраничный сайт для веб- и мобильной версии. Интегрируете API, чтобы загрузить информацию о реальных фильмах. Протестируете ваше веб-приложение и проведёте рефакторинг кода.
Сайт для поиска фильмов
Тариф Pro
Тариф Pro
Тариф Pro
Направим вас на стажировку Eduson X IMPET SPACE уже во время обучения
Вы получите опыт работы над реальным проектом в кросс-функциональной команде. Научитесь разделять задачи на этапы, распределять роли в команде и взаимодействовать с бизнес-аналитиками, project-менеджерами, UX/UI-дизайнерами и тестировщиками.
Вас будет сопровождать ментор по Frontend-разработке: он поддержит в сложных моментах, скорректирует ход работы, ответит на вопросы и поможет реализовать проект так, чтобы он демонстрировал ваши компетенции.
Курс состоит из
Устройство компьютера
•
Процессоры и графические ускорители
•
Характеристики оперативной памяти
•
Постоянная память
•
Дисковые массивы
•
Монитор и его характеристики
•
Интерфейсы
•
Сервер и его особенности
•
Операционная система
•
Межпроцессное взаимодействие
•
Устройство программирования
•
Навыки работы с кодом
•
Современные языки и среды программирования
•
Навыки программирования на любом языке
•
Архитектура программного обеспечения
•
2. Жизненный цикл ПО
Введение в SCRUM
•
Принципы командной работы по Agile
•
Введение в Agile
•
Модели SDLC и Waterfall
•
Процесс тестирования в разных методологиях разработки ПО
•
Trello, Asana и Jira
•
3. Введение в профессию Frontend-разработчика
Языки frontend-разработки: HTML, CSS, JS
•
Профессия веб-разработчик и чем он занимается
•
Выбор IDE для веб-разработки
•
Работа с системой контроля версий Git
•
4. Основы веб-разработки
Устройство браузеров
•
Виды и структуры сайтов
•
Этапы создания сайта
•
SEO-оптимизация
•
Принципы работы веб-сервера
•
Публикация сайта в интернете
•
5. Базовая вёрстка: HTML и CSS
Построение семантической структуру страницы
•
Работа с формами и таблицами в HTML
•
HTML и создание HTML-страницы
•
Очистка и редактирование HTML-кода
•
Создание и подключение CSS-стилей
•
Оформление страниц с помощью СSS
•
Работа с блоками и позиционированием элементов
•
Тестирование сайтов с помощью DevTools
•
6. Работа с макетом сайта
Работа с разными форматами изображений и дизайн-макетов
•
Работа с цветами в дизайне и веб-разработке
•
Дизайн-макет сайта
•
Работа с Figma: интерфейс программы, основные инструменты и функции
•
Перевод элементов Figma на русский язык
•
Автоматизация работы в Figma
•
Использование модульных сеток
•