[Eduson Academy] Frontend-разработчик (Арман Черхаров, Юлия Зотова)

​

Frontend-разработчик — одна из самых востребованных IT-профессий.По данным HeadHunter, только за последний год спрос на Frontend-разработчиков в России вырос на 20%.Frontend-разработчик отвечает за то, как сайт выглядит и работает для пользователя. Дизайнер создаёт макет, а разработчик, превращает его в код — так, чтобы пользователю было удобно взаимодействовать с сайтом.

180 000 рублей — средняя зарплата Frontend-разработчика в 2025 году

Кому подойдёт курс

• Тем, кто хочет сменить профессию и стать разработчиком. Научитесь проектировать интерфейсы с нуля. Отработаете полученные навыки на стажировке и найдёте первую работу через 7,5 месяцев.
• Начинающим разработчикам. Структурируете и систематизируете свои знания. Усилите своё портфолио 13 проектами и сможете брать в работу более сложные кейсы, чтобы вырасти в доходе
• Смежным специалистам в сфере IT. Попробуете себя в новой роли. Сможете применять навыки разработки в текущей профессии или полностью сменить направление.

Курс состоит из

• 120+ теоретических видеолекций с примерами. Вы изучаете теорию в формате видеолекций в удобное вам время. К занятиям прилагаются дополнительные материалы, конспекты и чек-листы.
• 15+ практических заданий
• 20+ интерактивных тренажёров. С помощью онлайн-тренажёров вы сможете отработать практические навыки в интерактивном формате
• 20+ шаблонов, дополнительных материалов и конспектов лекций.13 проектов в портфолио с подробным разбором от экспертов
• Обратной связи от опытных кураторов

Программа обучения

• 269 академических часов
• от 204 интерактивных уроков
• до 13 проектов
• Доступ навсегда

1. Введение в ІТ
Узнаете, что такое операционные системы, серверы и программное обеспечение. Освоите ключевые принципы программирования и архитектуры приложений.

• Устройство компьютера
• Процессоры и графические ускорители
• Характеристики оперативной памяти
• Постоянная память
• Дисковые массивы
• Монитор и его характеристики
• Интерфейсы
• Сервер и его особенности
• Операционная система
• Межпроцессное взаимодействие Устройство программирования Навыки работы с кодом
• Современные языки и среды программирования
• Навыки программирования на любом языке
• Архитектура программного обеспечения
• 5 практических учебных материала

2. Жизненный цикл ПО
Узнаете, как организована разработка в IT-компаниях. Познакомитесь с моделями жизненного цикла разработки ПО. Научитесь работать с таск-менеджерами Trello, Asana, Jira.

• Введение в Agile
• Принципы командной работы по Agile
• Введение в SCRUM
• Модели SDLC и Waterfall
• Процесс тестирования в разных методологиях разработки ПО • Trello, Asana и Jira
• 2 бизнес-кейса

3. Введение в профессию Frontend-разработчика
Познакомитесь с ключевыми компетенциями frontend-разработчика. Разберётесь, как выбрать и настроить IDE для веб-разработки. Освоите систему контроля версий Git. Узнаете, как организована frontend-разработка в IT-компаниях.

• Выбор IDE для веб-разработки
• Профессия веб-разработчик и чем он занимается
• Языки frontend-разработки: HTML, CSS, JS
• Работа с системой контроля версий Git
• 1 тренажёр

4. Основы веб-разработки
Узнаете про разные виды сайтов и их структуру. Разберётесь, как работают браузеры и веб-серверы. Изучите основы SEO-оптимизации.

• Этапы создания сайта Виды и структуры сайтов Устройство браузеров
• ЅЕО-оптимизация
• Принципы работы веб-сервера
• Публикация сайта в интернете
• 5 практических учебных материала

5. Базовая вёрстка: HTML и СЅЅ
Изучите основы HTML, формы, таблицы и семантическую разметку. Научитесь подключать стили и оформлять страницы с помощью CSS. С помощью интерактивных тренажёров начнете разрабатывать первый проект, который сможете добавить в портфолио.

• HTML и создание HTML-страницы
• Работа с формами и таблицами в HTML
• Построение семантической структуру страницы
• Очистка и редактирование HTML-кода
• Создание и подключение СЅЅ-стилей
• Оформление страниц с помощью СЅЅ
• Работа с блоками и позиционированием элементов
• Тестирование сайтов с помощью DevTools
• 8 тренажёров
• 2 учебных материала
• 1 проект

6. Работа с макетом сайта
Узнаете, что такое дизайн-макет сайта. Изучите работу с цветами, форматами изображений. Познакомитесь с интерфейсом Figma и сверстаете страницу по макету.

• Дизайн-макет сайта
• Работа с цветами в дизайне и веб-разработке
• Работа с разными форматами изображений и дизайн-макетов
• Работа с Figma: интерфейс программы, основные инструменты и функции
• Перевод элементов Figma на русский язык
• Автоматизация работы в Figma
• Использование модульных сеток
• 2 учебных материала

7. Продвинутая вёрстка
Разберётесь с HTML5, CSS Grid и Flexbox. Освоите фреймворки СЅЅ и препроцессоры SASS и LESS. Разработаете SEO-оптимизированный сайт. Продолжите работать над проектом сайта для портфолио.

• Отличие HTML5 от предыдущих версий
• Переменные и продвинутые инструменты СЅЅ • Flexbox
• Grid Layout
• Фреймворки СЅЅ
• Препроцессоры SASS и LESS
• Обеспечение доступности вёрстки с помощью WAI-ARI/
• Разработка SEO-оптимизированного сайта
• Стандарт семантической разметки Schema.org
• 1 практическое задание
• 2 учебных материала
• 1 проект

8. Основы программирования
Познакомитесь с математическими основами, которые необходимы каждому ІТ-специалисту. Узнаете, что такое абстракции, простые и сложные типы данных.

• В какой IDE лучше всего писать код
• Математика для IT-специалистов
• Абстракции
• Простые и сложные типы данных
• 4 практических учебных материала
• Множества
• Выражения, ветвления и циклы
• Функции и окружение
• Рекурсия, рекурсивный и итеративный процессы

9. Нейросети для разработчиков
Познакомитесь с возможностями нейросетей. Поймёте, как их используют разработчики и тестировщики, изучите 10+ специализированных Al-инструментов для дебаггинга и написания кода. Повысите эффективность работы и обучения в IT с помощью Copilot, ChatGPT, GigaChat, YandexGPT, Tabnine, Documatic, Mintlify, Snyk Code, Cursor Al, Claude и т. д.

• Что такое нейросети
• Как использовать платные нейросети
• Составление промпта для текстовых нейросетей • Как использовать ChatGPT
• Как работать с нейросетью GigaChat
• 4 практических задания 1 тренажёр
• Как нейросети помогают разработчикам и тестировщикам Как использовать нейросети, чтобы генерировать код
• Как использовать автокомплитеры, чтобы писать код
• Как изучать новые языки и фреймворки с помощью нейросетей Как использовать нейросети для документирования кода

10. Базовый JavaScript
Узнаете, как внедрять JavaScript в HTML. Изучите переменные, операции, ветвления и циклы. Научитесь работать с функциями, массивами и объектами. Разберётесь, что такое DOM и события. Начнёте разрабатывать многостраничный сайт ресторана.

• Устройство JavaScript и его роль в frontend-разработке
• Использование DevTools для отладки веб-страниц
• Переменные и типы данных в JavaScript
• Виды операторов
• Ветвления
• Циклы
• Функции
• Массивы
• Объекты
• DOM
• События
• Оптимизация веб-страницы
• 10 практических заданий
• 1 полноценный проект

11. Введение в дизайн и UX/UI
Познакомитесь с основами дизайна. Изучите композицию, типографику и цветовые схемы. Создадите макеты в Figma и прототипы для веб-дизайна.

• Фреймы и фигуры
• Текст
• Элементы
• Маски
• Автоматизация работы в Figma
• Adobe: Illustrator, InDesign, Photoshop
• Обзор графических редакторов
• Линии, формы и текстуры в дизайне
• 19 занятий 13 часов
• Растровая и векторная графика
• Тренировка насмотренности
• Композиция
• Управление вниманием зрителя
• Шрифты
• Типографика
• Цвет в дизайне
• Модульные сетки
• 1 учебный материал
• 1 практическое задание

12. Продвинутый JavaScript
Изучите ООП, классы, замыкания и асинхронный код. Научитесь работать с АЈАХ, АРІ и локальным хранилищем данных. Разберитесь с Webpack и обработкой ошибок. Добавите интерактивные элементы для сайта ресторана.

• Классы и ООП в JavaScript
• Замыкания в JavaScript
• Библиотеки и модули
• Библиотека jQuery
• Асинхронный код на JavaScript
• Создание сетевых запросов AJAX
• Хранение данных на стороне клиента
• Обработка ошибок в JavaScript Упаковка проекта с помощью Webpack
• 1 квиз
• 1 полноценный проект

13. Стиль написания кода
Узнаете, как анализировать и документировать код. Разберетесь, как передать задачу на код-ревью и проанализировать чужой код. Узнаете, как автоматизировать проверку с помощью линтеров и форматтеров.

• Введение в Agile
• Принципы командной работы по Agile
• Введение в ЅСRUM
• Модели SDLC и Waterfall
• Процесс тестирования в разных методологиях
• разработки ПО
• Trello, Asana и Jiга
• • Публикация сайта в интернете
• • IDE для веб-разработки
• Установка и настройка Visual Studio Code
• Система контроля версий Git и GitHub

14. React
Научитесь работать с популярным фреймворком React. Разберётесь с React Hooks и React Router. Познакомитесь с state managers и инструментами отладки. Разработаете сайт с фильмами на React.

• Введение в React
• Компоненты и ЈЅХ в React
• Создание и оформление элементов сайта с помощью React
• Props B React
• React Hooks и states
• React Router
• React Context
• State managers B React
• React Dev Tools

15. Основы работы с базами данных
Научитесь подключаться к БД, проектировать и настраивать их. Познакомитесь с SQL и PostgreSQL.

• Применение баз данных в бизнесе
• Проектирование, установка и настройка базы данных
• Подключение к базе данных с помощью Dbeaver
• 9 занятий © 3.5 г
• Типы данных в PostgreSQL
• Операторы SQL
• Работа с таблицами, шаблонами и фильтрами
• Практическое задание

16. Основы backend-разработки
Разберётесь, как устроена клиент-серверная архитектура. Познакомитесь с API, REST, GraphQL и WebSocket. Настроите базу данных MongoDB. Напишите собственный АРІ с помощью фреймворка Express для среды Node. js и библиотеки Mongoose.

• Применение баз данных в бизнесе
• Проектирование, установка и настройка базы данных
• Подключение к базе данных с помощью Dbeaver
• Типы данных в PostgreSQL
• Операторы SQL
• Работа с таблицами, шаблонами и фильтрами
• 1 тренажёр

17. Тестирование
Узнаете, как выбрать методы тестирования. Напишите unit-тесты для JavaScript-кода.

• Выбор метода тестирования
• Unit-тесты для JavaScript-кода
• Тестирование АРІ

18. Как выложить сайт и поддерживать готовый проект
Узнаете, какие операции с кодом необходимо проводить, когда он уже готов. На практике научитесь анализировать свой и чужой код. Поймете, на что обращать внимание и как найти места для доработки. Разберётесь, как приобрести домен для сайта и добавить SSL-сертификат.

• Как опубликовать сайт в интернете
• Как анализировать, отлаживать, оптимизировать
• и изменять код
• Основы методологии DevOps