Бесплатный курс по нейросетям при покупке

по внедрению ИИ в образование

№ 1

по версии Edtechs Awards 2025

1 год английского от

в подарок

Готовим к официальной аттестации от Минцифры

Точно знаем требования рынка, государства и времени. Готовим к тестам, помогаем получить сертификат.

Лицензия Л035-01298-77/00181469

Получите диплом
о профессиональной переподготовке

Курс «Веб-разработчик» с нуля

С нуля за 15 месяцев освоите новую профессию, научитесь работать с HTML и CSS, а еще — собирать и оживлять страницы.

Получите бесплатный доступ к первым урокам курса

Освоите самые базовые понятия и определите, подходит ли вам такой формат.

Поможем с поиском работы

Чем занимается веб-разработчик

Какие инструменты использует веб-разработчик

Для работы веб-разработчику необходимы:

Кто такой веб-разработчик

Веб-разработчик — это специалист, который создает и поддерживает сайты и веб-приложения. Он владеет языками программирования и понимает, что нужно для удобства пользователей и стабильной работы ресурса.

На курсе «Веб-разработчик» вы научитесь верстать адаптивные сайты, программировать на JavaScript, создавать интерфейсы на React или Vue, разрабатывать серверную часть, работать с базами данных, а также собирать полноценные веб-приложения.

Чем занимается веб-разработчик

Он проектирует структуру сайта, адаптирует его под любые устройства, настраивает базы данных, оптимизирует скорость загрузки, а еще — тестирует и отлаживает функционал, чтобы избежать сбоев в работе.

Как веб-разработчик помогает бизнесу

Он создает эффективные онлайн-площадки для привлечения клиентов и увеличения продаж. Если сайт работает быстро и надежно, он вызывает доверие и сокращает путь пользователя до покупки. В итоге бизнес получает мощный инструмент продвижения в цифровой среде.

Git

React

Node.js

HTML

JavaScript

TypeScript

Vue

На бесплатной диагностике составите пошаговый карьерный план и найдете себя в новой сфере

Зарплаты и востребованность веб-разработчиков на рынке труда

250 000+ ₽

1 год

3 года

5+ лет

120 000 ₽

60 000 ₽

70 000 ₽

средняя зарплата у выпускников Skypro по веб-разработке

>5000

студентов уже нашли любимое дело после обучения

17–64

такого возраста студенты проходят у нас курс

>1900

вакансий на hh.ru

Это джун — начинающий IT-специалист. Это вы после курса «Веб-разработчик»

Это мидл — уверенный специалист. Работает самостоятельно, помогает джунам-разработчикам

Студенты курса до учебы получали в среднем 71 000 ₽, а после —
86 000 ₽*

*информация на июль 2024 года

Это сеньор — опытный специалист. Знает ответы на все вопросы: настоящий профи в веб-разработке

Нашли работу 5000+ выпускникам: все они прошли испытательный срок. Данные до января 2026 года

Самая младшая — Анна Сердюк, ей 17 лет. А самая старшая — Наталья Николаева, ей 64 года. Обе из Ростова-на-Дону

Как выглядит ваша идеальная работа?

Узнаете в тесте на профориентацию

5 мин.

бесплатно

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

Введение в профессию

1. Введение в веб-разработку и задачи frontend-разработчика

Разберетесь, что такое интернет
Определите, для чего нужны HTML, CSS и JavaScript
Рассмотрите задачи веб-разработчика
Разберетесь, какие виды сайтов бывают
Узнаете, как устроены HTTP-запросы
Познакомитесь с Figma
Разработаете первую HTML-страницу и сможете применять основные HTML-теги

2. Основы HTML

Рассмотрите атрибуты тегов
Разберетесь, что такое семантические элементы, и сможете добавлять изображения, ссылки, списки и формы на HTML-страницу
Освоите, как применять семантические теги

3. Основы CSS

Рассмотрите, что такое CSS
Рассмотрите грамматику CSS
Разберете варианты подключения стилей
Разберетесь в селекторах и основных свойствах стилей
Разберетесь, почему таблица стилей называется «каскадная»
Сможете оставлять комментарии

4. Строчные и блочные элементы

Рассмотрите эффекты наведения и другие псевдоклассы
Разберете особенности блочных и строчных элементов
Познакомитесь с особенностями строчных элементов
Сможете добавлять контент в HTML

5. Мастер-класс. Семантические теги, их назначение и применение

Освоите применение семантических тегов

6. Методология БЭМ

Разберете методологию БЭМ
Рассмотрите переходы и трансформации
Освоите принципы компонентного подхода
Сможете применять методологию БЭМ для структурирования и организации кода
Разберетесь, как разрабатывать и использовать независимые блоки и модификаторы
Разберете, как улучшать производительность и масштабируемость с помощью методологии БЭМ

7. Мастер-класс. БЭМ

Освоите, как задавать переиспользуемые названия классов
Разберетесь, как пользоваться препроцессорами

8. Знакомство с графическими редакторами

Рассмотрите, что такое градиенты
Разберетесь, как работать с фоном блоков
Разберетесь, как спроектировать тени для блоков и текста
Ближе познакомитесь с графическим редактором Figma
Сможете определять размеры и отступы у блоков
Разберете, какие форматы изображений бывают
Разберетесь, как превращать дизайн-макет из Figma в готовую верстку и стили для браузера
Сможете пользоваться отладчиком браузера для верстки страниц

9. Позиционирование. Flexbox

Сможете делать блочные элементы строчными
Рассмотрите, как скрывать их со страницы
Разберетесь, как делать дочерние элементы

10. Мастер-класс. Flex

Сможете пользоваться flex-раскладкой
Рассмотрите, как корректно применять flex-свойства
Разберетесь, как делать позиционирование с помощью flex в соответствии с макетом

11. Позиционирование. Grid Layout

Разберетесь, для чего нужен Grid, если есть Flexbox
Разберетесь, какие основные задачи решает Grid
Рассмотрите горизонтальное и вертикальное позиционирование
Рассмотрите, что такое внутренние отступы и как происходит объединение ячеек сетки
Сможете разбивать сайт на колонки и на строчки
Освоите, как делать внутренние отступы
Разберетесь, как объединять ячейки сетки

12. Мастер-класс. Grid

Сможете пользоваться grid-раскладкой
Разберетесь, как корректно применять grid-свойства
Освоите, как позиционировать с помощью grid в соответствии с макетом

13. Препроцессоры CSS

Разберетесь в препроцессорах
Рассмотрите переменные, вложенность и математические операции
Разберетесь во фрагментировании и импортировании
Рассмотрите, что такое примеси и наследование
Установите и запустите препроцессор SCSS
Освоите, как совершать операции фрагментирования и импортирования

14. Декоративные элементы и анимация для сайта

Познакомитесь с псевдоклассами и псевдоэлементами
Разберетесь, как их различать
Рассмотрите, что такое относительное, абсолютное позиционирование
Сможете добавлять теги формы на страницу

15. Формы

Рассмотрите, какие элементы формы существуют и как их стилизовать
Познакомитесь с тегами для реализации формы
Освоите, как задавать кастомную стилизацию тегам

16. Введение в адаптивный дизайн

Рассмотрите, что такое адаптивный сайт и адаптивный макет
Поймете, как отладчик помогает настраивать адаптивность сайта
Познакомитесь с meta viewport и узнаете, когда его необходимо использовать
Разберете и min, и max значения
Рассмотрите медиазапросы (media queries)
Узнаете о процентах для отступов и для блоков
Разберетесь в адаптивных возможностях Flexbox
Разработаете планшетную версию проекта

17. Практика создания адаптивного дизайна

Рассмотрите, как создаются адаптивные изображения
Разберете единицы измерения адаптивных блоков vh, vw
Рассмотрите единицу измерения адаптивного текста и отступов rem
Разберетесь в адаптивных возможностях Grid Layout
Освоите, как разрабатывать мобильную версию сайта

18. Финальная проверка сайта

Рассмотрите и освоите фреймворк Bootstrap
Разберетесь, как пользоваться SVG-графикой
Разберетесь, что такое валидный код, оптимизация изображений и кросс-браузерность
Изучите, как проверить сайт на ошибки
Поймете, как проводить код-ревью верстки
Разместите сайт в сети интернет

19. Мастер-класс по курсовой работе

Курсовой проект

Верстка сайта интернет-магазина мебели

Основы JavaScript

1. Знакомство с JavaScript

Разберетесь, что такое JS и какие задачи он решает

2. Основы Git и командной строки

Познакомитесь с Git и GitHub
Разберетесь, что такое репозиторий: удаленный и локальный
Рассмотрите, как разработать свой проект и залить его на удаленный репозиторий
Сможете использовать командную строку unix
Освоите, как пользоваться инструментами: консоль, инспектор

3. Мастер-класс по Git + сессия «вопрос — ответ»

Разберетесь, как корректно сдавать проекты с помощью Git
Сможете работать с pull request
Разберетесь, как пользоваться ветками и добавлять коммиты
Рассмотрите, как стягивать изменения из удаленного репозитория

4. Переменные. Типы данных

Рассмотрите, что такое переменные и в чём отличие между var, let и const
Разберетесь, какие типы данных есть в этом языке
Разберете отличие ссылочных переменных от примитивных
Узнаете, какие есть операторы в этом языке
Освоите преобразование типов
Рассмотрите простое взаимодействие с пользователем
Рассмотрите арифметические операторы и преобразование при арифметических операциях
Освоите подключение JS к HTML
Сможете добавлять и подключать файлы
Разберетесь, как писать простой код и выводить сообщения на страницу
Сможете разрабатывать примитивные и ссылочные переменные и писать корректные названия переменных

5. Условное ветвление

Разберетесь, какие бывают операторы сравнения и что такое логические операторы
Рассмотрите, что такое условное ветвление, и начнете его применять
Познакомитесь с понятием «тернарный оператор» и сможете его применять
Узнаете про оператор switch и сможете его применять

6. Циклы

Разберетесь, что такое циклы
Освоите циклы while и do-while
Познакомитесь с циклом for
Разберете зацикливание и узнаете, чем оно опасно
Освоите, как создаются логические выражения

7. Функции

Рассмотрите, что такое функция
Разберете параметры функции
Разберетесь, что такое function declaration/expression и в чём их отличие
Рассмотрите, что такое всплытие
Сможете добавлять/объявлять функции, передавать параметры в функции и возвращать значение из функций

8. Массивы

Рассмотрите, что такое массив и какие задачи он решает
Разберете метод forEach и сможете его применять
Рассмотрите методы массива
Разберетесь, что такое многомерный массив, и сможете его создавать
Поймете, что такое spread и rest, и научитесь их использовать
Сможете разрабатывать массивы и использовать их: добавлять/удалять, проводить манипуляции (сортировка, фильтрация и т. п.)

9. Встроенные объекты

Рассмотрите, какие встроенные объекты существуют и где их искать
Разберете методы использования String
Рассмотрите методы применения Number
Узнаете, как обращаться с Math
Разберете методы использования Date
Рассмотрите, как пользоваться RegExp
Разберетесь, что такое компилятор и интерпретатор
Узнаете про структуру кода
Разберете, что такое самодокументируемый код
Сможете использовать встроенные методы и свойства String
Разберете, как использовать встроенные методы и свойства Number
Освоите использование встроенных методов и свойств Math
Поймете, как использовать встроенные методы и свойства Date
Сможете использовать встроенные методы и свойства RegExp

10. Callback, setTimeout, setInterval

Разберете, что такое callback, для чего он нужен, сможете его использовать и находить callback в программе
Рассмотрите, как запустить таймер и чём разница между таймером и интервалом
Сможете использовать setTimeout, setInterval

11. Основы DOM

Разберете принципы применения DOM в JS
Узнаете про возможные манипуляции с элементами страницы
Получите навык обработки событий
Сможете манипулировать DOM из JS, разрабатывать интерактивные элементы и реализовывать обработку событий

Курсовой проект

Разработка сайта c библиотекой игр

Создание сайта на Tilda

1. Введение в CMS-системы. Знакомство с Tilda

Узнаете о CMS и как их использовать во frontend-разработке
Познакомитесь с платформой Tilda, ее интерфейсом и возможностями для создания сайтов
Разберетесь, какие проекты удобно реализовывать в Tilda, а каким нужна кастомная разработка
Сравните типовые и нетиповые задачи при работе с конструктором
Узнаете о тарифных планах и условиях использования

2. Верстка и многостраничность

Изучите принципы UX/UI и популярных CSS-библиотек и научитесь создавать удобные и красивые интерфейсы
Познакомитесь с основными UI-элементами (карточки, таблицы, карусели) и сможете настраивать шрифты, цвета и фавиконы
Освоите работу с готовыми компонентами Tilda и собственным кодом для дизайна
Изучите настройки адресов страниц и субдоменов
Разберетесь, как связывать страницы и создавать адаптивный дизайн для разных устройств
Создадите сайт Tilda Course Project с тремя страницами («Главная», «Аудит бухгалтерии», «О нас») и настроите блоки по заданным параметрам

3. Работа с формами, корзиной
и данными

Научитесь создавать формы на Tilda с помощью встроенных блоков и элементов интерфейса
Узнаете принципы валидации данных и настроите подсказки в реальном времени
Разберете отработку ошибок и поймете, как давать обратную связь пользователю
Сможете создавать сложные формы с использованием HTML и JavaScript
Научитесь собирать и хранить данные, добавлять корзину и работать с пользовательскими данными
Изучите динамическое отображение информации и интеграцию через API для расширения функционала сайта
Создадите форму обратной связи, чтобы собирать заявки на бухгалтерские услуги, и интегрируете ее с CMS Tilda. Настроите три поля: имя (необязательное), email и сообщение (обязательные), а еще кнопки отправки с пользовательским текстом
Подключите сохранение заявок в CRM и указание email для получения копий
Исправите тексты сообщений об ошибках, чтобы пользователям было удобнее
Опубликуете страницу и проверите, насколько корректно работают формы на сайте

4. Сложные блоки и сложная логика в Tilda

Узнаете о динамическом контенте и возможностях Tilda
Добавите скрипты через блок «HTML-код», поработаете с событиями JavaScript (клики, наведения, отправка форм) и настроите динамическое изменение содержимого страницы
Изучите, как подключать сторонние библиотеки и плагины, использовать Zero Block для уникальных дизайнов и анимаций, интегрировать макеты из Figma
Освоите основы работы с API для автоматизации и взаимодействия с внешними сервисами
Создадите страницу репертуара кинотеатра с хедером, фильтром по неделям и карточками фильмов в Grid-сетке
Разработаете модальное окно с описанием фильма, постером и ссылкой на «Кинопоиск»
Настроите календарь: деление месяца на недели, переключение кнопками «Предыдущая» и «Следующая»
Закрепите карточки фильмов за неделями, чтобы всё отображалось правильно
Проверите логику переключения и модальных окон

5. Индексация, статистика и деплой

Оформите Title и Description с ключевыми словами и призывами к действию
Создадите читаемые URL и поработаете с заголовками H1-H3 и alt-тегами
Изучите инструменты для анализа трафика, вовлеченности и географии посетителей
Сможете подключить и настроить Яндекс Метрику и Google Analytics, в том числе передачу пользовательских событий
Подключите домен и настроите протоколы безопасности, чтобы повысить доверие и улучшить SEO

6. Дополнительный урок по Tilda. Самостоятельный проект

Закрепите знания по Tilda и создадите сайт под ключ с использованием Zero Block
Рассмотрите все этапы — от анализа макета в Figma до адаптивной верстки — и подключите внешние библиотеки
Дополнительно сможете выполнить самостоятельное задание — сверстать сервис «Первый в мире ледокольный газовоз»

Курсовой проект

Сайт на Tilda

Центр карьеры для выхода на фриланс

1. Создание и оформление портфолио

Соберете свое портфолио

Продвинутый JavaScript

1. DOM 1. Управление шаблоном события

Вспомните, что было в первом уроке
Получите больше практики
Научитесь манипулировать DOM из JS
Сможете разрабатывать интерактивные компоненты и реализовывать обработку событий

2. Массивы и объекты

Вспомните основные принципы массивов и объектов
Познакомитесь с более сложными примерами
Сможете пользоваться многомерными массивами (массив с объектами)

3. DOM 2. События на динамических элементах

Углубите понимание механики событий
Сможете пользоваться динамическими элементами DOM и перерисовывать их относительно действия пользователя

4. DOM 3. Всплытие событий. Ограничения innerHTML

Поймете, что такое ограничения innerHTML
Рассмотрите безопасные методы использования innerHTML
Разберетесь, что такое всплытие событий
Сможете работать с replaceAll()
Освоите, как работать с e.stopPropagation()

5. Отладка кода

Сможете проводить рефакторинг

6. Разбор по урокам DOM

Сможете работать с DOM-элементами
Освоите, как выполнять задачи при использовании DOM

7. Асинхронность

Рассмотрите, что такое асинхронные операции, Promises и Async/Await
Разберетесь, как обработать ошибки в асинхронном коде
Разберетесь, что такое Event Loop и Call Stack
Разберетесь в распространенных проблемах и паттернах
Сможете реализовывать асинхронные операции
Рассмотрите, как управлять потоком асинхронных задач
Освоите, как обрабатывать ошибки
Освоите, как использовать Event Loop и Call Stack
Сможете использовать Promises и Async/Await

8. API 1. GET, POST, DELETE

Рассмотрите основные HTTP-методы
Освоите использование GET
Разберетесь, как использовать POST
Разберетесь в правилах DELETE
Освоите принципы Fetch API
Сможете правильно формировать HTTP-запросы
Разберетесь, как анализировать и интерпретировать ответы сервера
Разберетесь, как интегрировать запросы

9. API 2. Цепочки промисов

Рассмотрите концепции промисов (Promises) в JavaScript и их роли в асинхронном программировании
Разберетесь, как использовать промисы для взаимодействия с API и как использовать цепочки промисов для демонстрации загрузки данных
Освоите создание цепочки промисов для последовательной обработки асинхронных задач
Сможете строить эффективные цепочки промисов для управления последовательными асинхронными операциями
Разберете, как выводить пользователю статус загрузки данных

10. API 3. Обработка ошибок

Разберете методы обработки ошибок при работе с API и их важность
Рассмотрите различные типы ошибок, которые могут возникать при запросах к API (например, ошибки сервера)
Познакомитесь со статус-кодами HTTP и их значениями в контексте ошибок API
Рассмотрите принципы применения catch-блоков и обработки ошибок в асинхронном коде
Сможете использовать статус-коды для определения типа ошибки и принятия соответствующих мер
Освоите, как выбрасывать ошибки с помощью throw new Error
Сможете обрабатывать ошибки в catch-блоке

11. Разбор по урокам API

Сможете работать с API
Рассмотрите, как форматировать HTTP-запросы и обрабатывать ошибки
Разберетесь, как использовать цепочки промисов
Сможете выводить loader

12. Модульный JS

Разберете принципы модульности в JS
Рассмотрите синтаксис ES6-модулей, включая export и import
Разберете правила разбиения приложения на модули
Сможете разрабатывать масштабируемый и поддерживаемый код, используя модули
Освоите, как структурировать приложения с помощью модулей
Освоите использование import и export
Сможете разбивать готовый код на модули

13. API 4. Авторизация

Рассмотрите механизмы авторизации и аутентификации в контексте API
Разберетесь, что такое Bearer token и как использовать заголовки в запросах
Разберете важность безопасного хранения и передачи токенов
Сможете использовать токены для управления доступом к API
Освоите, как корректно использовать заголовки HTTP для передачи данных авторизации

14. Библиотеки и npm

Рассмотрите роли и правила использования библиотек
Узнаете, что такое npm
Познакомитесь с популярными JavaScript-библиотеками
Узнаете про правила работы с Webpack
Рассмотрите линтеры и начнете с ними работать
Сможете интегрировать библиотеки
Освоите, как пользоваться npm
Сможете использовать библиотеки в соответствии с поставленной задачей
Освоите, как пользоваться Webpack

15. Разбор по урокам «Модульный JS» и «Авторизация»

Сможете добавлять логику авторизации
Начнете выполнять отрисовку разных страниц
Разберетесь, как разбивать приложение на модули и разрабатывать новые модули

Курсовой проект

Разработка сайтов «Лента комментариев» и «Инстапро»

Базовый React или Vue

React

1. Знакомство

Разберетесь, что это такое и для чего он используется, как и зачем разрабатывать проект с помощью Vite
Разберете основы JSX: синтаксис, выражения, условия
Рассмотрите функциональные компоненты
Рассмотрите props: передача данных и методов между компонентами
Сможете с нуля устанавливать и настраивать проект через Vite
Освоите, как работать с props и передавать данные между компонентами
Сможете разрабатывать React-компоненты на JSX
Сможете добавлять дочерние компоненты в JSX-стиле

2. React Hooks

Поймете, что такое хуки и зачем они нужны
Сможете разрабатывать кастомные хуки и использовать их
Рассмотрите цели и принципы работы хуков
Разберете, что такое side effects и почему для их контроля используется useEffect
Поймете, какие еще встроенные хуки предоставляет библиотека
Сможете использовать useState и useEffect: состояние и побочные эффекты
Поймете, когда и как использовать локальное состояние
Рассмотрите поднятие состояния для общего использования между компонентами
Освоите, как применять хуки в реальных задачах

3. Маршрутизация, роутинг

Познакомитесь с библиотекой React Router
Разберете основные принципы роутинга
Освоите основные компоненты в настройке роутеров
Рассмотрите установку библиотеки и базовое использование
Освоите создание навигационной структуры
Рассмотрите переходы между страницами и передачу параметров

4. Styled Components

Разберетесь, что такое CSS-in-JS и в чём его преимущества
Рассмотрите, что такое библиотека Styled Components
Освоите установку и синтаксис
Разберетесь, что такое глобальные стили
Освоите установку и базовое использование Styled Components
Сможете разрабатывать и стилизовать компоненты
Освоите тематическое оформление и глобальные стили

5. API

Освоите принципы использования Fetch API в контексте React
Разберете Fetch API: запросы к серверу
Рассмотрите обработку ошибок и отображение состояния загрузки
Начнете пользоваться Swagger

6. Формы

Разберетесь, что такое управляемые компоненты (controlled components) и неуправляемые (uncontrolled)
Рассмотрите принципы обработки и валидации ввода пользователя
Узнаете, как пользоваться множественными полями ввода
Сможете использовать библиотеку React Hook Form
Освоите работу с состоянием формы, включая валидацию и обработку ошибок

7. Context

Узнаете, что такое Context, когда его использовать и какие проблемы он решает
Сможете разрабатывать Context
Освоите сквозную передачу данных между компонентами

Курсовой проект

Разработка доски задач

4. Основы Composables и Composition API

Изучите Composition API
Освоите создание и использование composables
Сможете переходить с Options API на Composition API

5. Маршрутизация и Vue Router

Освоите установку и настройку
Сможете настраивать динамические маршруты
Освоите защиту маршрутов с использованием Navigation Guards

6. Управление состоянием с Vuex

Рассмотрите основы состояния приложения
Освоите создание хранилища и управление состоянием
Освоите модули

7. Управление данными

Курсовой проект

Разработка доски задач

Vue

Знакомство

Рассмотрите Vue и его основные преимущества
Освоите установку и настройку среды разработки
Спроектируете первое приложение

2. Методы работы с данными

Начнете пользоваться шаблонами и выражениями
Углубитесь в реактивность: ref и reactive
Освоите условные операторы и циклы в шаблонах

3. Components Vue 3

Сможете разрабатывать и использовать компоненты
Освоите передачу данных через props
Освоите, как использовать события для взаимодействия компонентов

Практика реальной разработки

1. Вводный урок

Сможете разбираться в чужом коде
Освоите, как использовать практики, принятые в проекте

2. Внедрение лидерборда

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

3. Мастер-класс по теме «Требования»

Сможете правильно интерпретировать требования
Освоите работу с неполными требованиями
Сможете корректно уточнять требования у заказчика

Курсовой проект

Разработка карточной игры Memo

Продвинутый React или Vue

React

1. Next.js

Разберетесь, что такое Next и в чём его преимущества
Рассмотрите Server Side Rendering (SSR) и Static Site Generation (SSG) в Next.js
Освоите маршрутизацию и API-роуты в Next.js
Рассмотрите оптимизацию производительности и SEO с помощью Next.js
Освоите создание и развертывание приложений на Next.js
Сможете реализовать SSR и SSG для оптимальной производительности и SEO
Освоите создание динамических маршрутов и API-роутов
Рассмотрите оптимизацию загрузки ресурсов и импорта модулей

2. TypeScript

Разберетесь, что такое TypeScript и в чём его преимущества перед JS
Рассмотрите основы статической типизации
Освоите базовые типы в TypeScript (string, number, array, any, unknown, void и др.)
Разберетесь, как объявлять и использовать интерфейсы и типы
Сможете использовать TypeScript в контексте нашей библиотеки
Освоите настройку и интеграцию TypeScript
Рассмотрите объявление и использование типов, интерфейсов и перечислений (enums)
Начнете использовать дженерики для создания универсальных функций и компонентов

3. React Refs

Разберете концепцию Refs
Рассмотрите способы создания Refs
Освоите правила интеграции Refs с функциональными компонентами
Разберетесь, когда и почему использовать Refs
Освоите создание и использование Refs
Освоите, как управлять фокусом, анимациями и взаимодействием с DOM
Сможете интегрировать Refs с функциональными компонентами

4. Redux Toolkit

Рассмотрите архитектуру Redux и ее трех принципов
Освоите основные компоненты Redux: actions, reducers, store
Рассмотрите поток данных в Redux и его однонаправленную архитектуру
Освоите, как использовать middleware в Redux
Освоите установку и настройку Redux
Освоите создание и объединение редюсеров, действия и хранилища
Освоите интеграцию Redux с React

5. Оптимизация производительности

Осознаете причины, ведущие к ненужным ререндерам, и их влияние на производительность
Рассмотрите принципы хука useCallback и как с его помощью предотвращать создание новых ссылок на функции при каждом ререндере
Рассмотрите хук useMemo и как его использовать для мемоизации сложных вычислений и объектов
Разберете принцип хука memo для предотвращения ненужных ререндеров функциональных компонентов
Освоите применение useCallback для оптимизации функций-обработчиков и предотвращения ненужных ререндеров
Освоите, как использовать useMemo для мемоизации сложных вычислений, создания стабильных ссылок на объекты и массивы, чтобы предотвратить ненужные ререндеры
Сможете обертывать функциональные компоненты в memo для предотвращения их повторного рендеринга при получении одинаковых пропсов
Разберетесь, как анализировать и профилировать производительность компонентов с помощью React DevTools, чтобы определить моменты, где мемоизация будет наиболее полезной
Разберетесь, когда использовать мемоизацию, а когда не стоит

6. Тестирование

Осознаете важность тестирования для программного обеспечения
Рассмотрите основные виды тестов: юнит-тестирование, интеграционное тестирование, E2E
Сможете применять библиотеки для тестирования: Jest и React Testing Library
Освоите mock-функции и мокинг зависимостей и внешних вызовов
Сможете писать различные типы тестов: юнит-, интеграционные и E2E
Сможете настраивать и использовать Jest и Testing Library для тестирования компонентов

Курсовой проект

Разработка музыкального сервиса Skypro music

4. Продвинутое использование Composition API

Сможете переиспользовать логику с помощью Composition API
Освоите асинхронные операции
Сможете управлять состоянием приложения с помощью Composition API

5. Оптимизация и производительность

Освоите анализ и оптимизацию производительности приложения
Сможете использовать Vue Devtools
Освоите «ленивую» загрузку компонентов и маршрутов

6. Развертывание и масштабирование

Сможете собирать и развертывать приложения с Nuxt
Освоите, как использовать переменные окружения для различных сред
Освоите стратегии масштабирования и обеспечения доступности приложения

Курсовой проект

Разработка музыкального сервиса Skypro music

Vue

Введение в Nuxt.js

Рассмотрите Nuxt.js и его основные преимущества
Освоите установку и создание первого Nuxt-приложения
Освоите структуру проекта Nuxt и SSR (Server-Side Rendering)

2. Глубокое погружение в Nuxt.js

Освоите динамические маршруты и страницы в Nuxt
Рассмотрите автоматическую генерацию маршрутов
Освоите модули и плагины в Nuxt

3. Переход на TypeScript

Освоите настройку TypeScript
Рассмотрите основы использования TypeScript в компонентах
Освоите переход с JS на TypeScript

Знакомство с backend

1. Основы бэкенда

Разберетесь, как устроен интернет и какие бывают виды протоколов
Изучите основные HTTP-методы
Разберете, какие бывают коды ответа сервера и что они означают
Сможете смотреть, что происходит с запросом на сервер и ответом на него

2. Node.js

Поймете, чем серверный JS отличается от исполняемого в браузере
Разберете, как работать с модулем HTTP
Сможете использовать файловую систему
Освоите настройку отладки Node.js-приложения
Поймете, как настроить Hot Reload
Сможете запускать простой сервер на Node.js с помощью модуля HTTP

3. REST API

Рассмотрите, какие бывают API и что такое REST API
Изучите CRUD-операции
Сможете пользоваться программой Postman для тестирования API

Дипломный проект

1. Финальный проект с использованием всех навыков

Веб-приложение для онлайн-тренировок

Получите полную программу на личной консультации

Чему вы научитесь и почему ваше резюме заметят сразу

Веб-разработчик

от 70 000 ₽

Владею программами:

Мои навыки:

Проекты в портфолио веб-разработчика

Этот курс — база

Потом сможете уйти в любую специализацию или получить повышение на нынешнем месте.

Работаю с HTML и CSS и делаю удобные и красивые страницы

Знаю, как собирать страницы на Tilda под ключ — от идеи до запуска

Пишу код на JavaScript и добавляю на сайты интерактивные компоненты

Верстальщик

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

Разработчик сайтов на Tilda

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

Умею использовать фреймворки

Знаю, как организовать серверную часть и использовать внешние системы

Использую системы контроля и отслеживаю изменения в коде

Это React. Здесь создают сайты из компонентов — удобных и многократно используемых блоков.

Это Git. Здесь сохраняют, отслеживают и возвращают изменения в коде.

Это Node.js. Здесь связывают сайт с сервером и базами данных.

Это HTML. Здесь создается каркас сайта — то, из чего состоит каждая страница.

Это JavaScript. Он добавляет интерактивность, кнопки и анимации.

Это TypeScript. Здесь код становится надежнее и проще в поддержке, особенно в больших проектах.

Музыкальный веб-сервис

Сделаете сайт для прослушивания музыки: можно выбирать треки, запускать их и управлять воспроизведением. Разработаете простой и удобный интерфейс, чтобы пользователь быстро находил нужную музыку.

Результат: сервис для прослушивания музыки.

Технологии: Next.js, HTML, CSS modules, axios, jest.

Фитнес-приложение

Соберете приложение с тренировками: добавите программы, упражнения и структуру занятий. Сделаете интерфейс понятным, чтобы пользователь мог легко и быстро подбирать тренировки.

Результат: веб-приложение (платформа) для фитнеса.

Технологии: React, TypeScript, CSS modules, axios.

Мини-игры

Сделаете несколько мини-игр для браузера. Реализуете игровую логику, обработку действий пользователя и базовую механику игр.

Результат: сайт с набором интерактивных игр.

Технологии: JavaScript, HTML, CSS.

Это Vue. Здесь делают понятные и простые интерфейсы для одностраничных приложений.

Официальный диплом после курса

Мы выдаем диплом о профессиональной переподготовке и работаем по образовательной лицензии — всё официально

Образовательная лицензия № Л035-01298-77/00181469

Мы знаем, что нужно работодателю

Мы анализируем, какие IT- навыки сейчас востребованы, и обновляем программы. Так мы учим только актуальному.

Центр карьеры Skypro проводит исследование вакансий. Например, насколько много их сейчас на рынке. Затем делаем выводы и изучаем, какие стратегии помогут найти работу быстрее.

1 раз в квартал →

100+ работодателей

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

От 3 лет

опыта в консультировании у карьерных экспертов Skypro. Они знают, как действовать на собеседовании, чтобы вас взяли.

Преподаватели, которые вас научат

Лёша Кадочников

Работал в VK, Wizard-C, GeekBrains, Skillbox и Tutortop. В разработке больше 10 лет, 7 из них — в преподавании.

Ключевой навык Лёши — раскрывать потенциал каждого ученика.

Женя Некипелов

Работал над интерфейсами для крупных ecommerce-платформ и образовательных сервисов. Любит, когда красиво и удобно.

Ключевой навык Жени — находить простые интерфейсные решения для технически сложных задач.

Даша Магомедова

Работала над проектами: от небольших стартапов до крупных систем. Сейчас — практикующий разработчик и технический руководитель образовательной программы. В разработке уже больше 5 лет.

Ключевой навык Даши — переводить с компьютерного на человеческий. Поможет решить задачу любого уровня сложности.

Лёша Чудинов

Работал в аутсорсинге и продуктовых компаниях, сейчас развивает VK Mini Apps. Преподавал в колледже и давал частные уроки. Коммерческий опыт — больше 5 лет.

Ключевой навык Лёши — внедрять практический опыт в учебные процессы.

Влад Чечулин

Работал в финтех-проектах для крупного банка, жил в Испании и участвовал в медтех-стартапе. Сейчас занимается разработкой в VK. В профессии уже 8 лет.

Ключевой навык Влада — превращать новичков в IT-профи.

Эксперты-практики, которые работают в сфере веб-разработки и каждый день создают эффективные цифровые платформы для роста бизнеса.

Сразу после оплаты вы получаете доступ к нашей платформе — и тут же можете начать осваивать материал. Занятия и домашки открываются два раза в неделю, а еще регулярно проходят прямые эфиры с экспертами. Всё это — чтобы вы полноценно изучили новую сферу и нашли любимое дело.

Как проходит учеба

Света Шиманская

Руководительница продукта

Центр карьеры Skypro — команда консультантов с глубокой экспертизой в найме сотрудников. Они знают, каких специалистов ищут работодатели, — и помогают ими стать.

Начнете искать работу уже во время учебы

В центре карьеры научитесь:

грамотно упаковывать свой опыт

отвечать на каверзные вопросы рекрутеров

выбирать только проверенных работодателей

презентовать себя

Составим резюме

Сделаем два резюме: на hh.ru и зарубежной платформе — так вы сможете искать работу по всему миру. А еще проверим каждое по полному чек-листу из 40 пунктов.

Напишем сопроводительные письма

Расскажем, как формулировать короткие и точные тексты под конкретную компанию. Покажем, почему универсальные письма работают хуже, и научим адаптировать отклик под любую вакансию.

Проанализируем отказы и отклики

Вместе разберем путь от первого отклика до собеседования, выясним, что пошло не так, и проведем работу над ошибками.

Соберем портфолио

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

Проведем тренировочное собеседование с наставником

Там вы сможете ошибаться, задавать вопросы и отрабатывать навыки общения, полученные на курсе.

составите пошаговый карьерный план

поймете, как применить прошлый опыт в IT

подберете профессию под навыки и склонности

На бесплатной диагностике с консультантом обсудите свои карьерные перспективы:

Истории и отзывы выпускников

Точка Б

Стала фронтендером в крупной компании — теперь получает стабильную зарплату и работает по комфортному графику, а команда поддерживает и оплачивает развитие.

Узнать весь путь →

Точка А

Работала ведущей праздников с нестабильным доходом и плавающим графиком, уставала физически и решила найти себя в новой профессии.

Читать остальные истории