Dozhd
Администратор
- Регистрация
- 18 Янв 2014
- Сообщения
- 135.838
- Реакции
- 387.016
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
Цена 83912 руб
СКАЧАТЬ
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
Цена 83912 руб
СКАЧАТЬ
Для просмотра скрытого содержимого вы должны зарегистрироваться