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

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

в подарок

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

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

Учитесь уже сейчас — а платите через 30 дней

Сегодня 0 ₽

Через 30 дней остальное

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

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

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

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

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

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

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

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

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

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

React

Кто такой фронтенд-разработчик

Фронтенд-разработчик — это специалист, который создает видимую часть сайта или приложения: кнопки, формы, картинки, меню. Cобирает работающие веб-страницы с помощью HTML, CSS и JavaScript.

На курсе «Фронтенд-разработчик»
вы научитесь создавать интерактивные интерфейсы, разрабатывать компоненты, работать с API и оптимизировать производительность сайта, чтобы делать быстрые и удобные веб-интерфейсы.

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

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

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

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

Git

Node.js

TypeScript

Vue

HTML

JavaScript

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

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

250 000+ ₽

1 год

3 года

5+ лет

120 000 ₽

60 000 ₽

86 000 ₽

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

>200

студентов защитили диплом

17–64

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

>5000

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

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

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

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

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

Такое количество выпадает по запросу «Фронтенд-разработчик» в поиске по России на август 2025 года

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

Все они получили высокую оценку от экспертного жюри. Информация до июля 2024 года

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

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

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

5 мин.

бесплатно

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

Модуль 1. Введение в профессию

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

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

2. Основы HTML

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

3. Основы CSS

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

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

Рассмотрите эффекты наведения и другие псевдоклассы
Разберете особенности блочных элементов
Научитесь добавлять контент в HTML с помощью CS

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. Мастер-класс по курсовой работе

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

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

Модуль 2. Основы JavaScript

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

Узнаете, что такое JavaScript
Поймете, какие задачи решает JavaScript

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

Познакомитесь с Git и GitHub и разберете основы работы в них
Узнаете, что такое репозиторий: удаленный и локальный
Узнаете, как создать свой проект и залить его на удаленный репозиторий
Научитесь использовать командную строку Unix
Начнете работать с инструментами разработчика в браузере: консоль, инспектор элементов

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

Узнаете, как корректно сдавать проекты с помощью Git
Научитесь работать с pull request
Поймете, как работать с ветками
Научитесь создавать коммиты
Узнаете, как стягивать изменения из удаленного репозитория

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

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

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

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

6. Циклы

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

7. Функции

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

8. Массивы

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

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

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

10. Callback, setTimeout, setInterval

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

11. Основы работы с DOM

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

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

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

Модуль 3. Продвинутый JavaScript

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

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

2. Продвинутая работа с массивами и объектами

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

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

Поймете, что такое динамические элементы и как они работают
Углубите понимание работы с событиями
Научитесь работать с динамическими элементами DOM
Начнете создавать интерактивные элементы
Научитесь перерисовывать элементы относительно действия пользователя

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

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

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

Научитесь проводить рефакторинг кода

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

Научитесь работать с DOM-элементами
Научитесь выполнять задачи при работе с DOM

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

Узнаете, что такое асинхронные операции
Поймете, что такое 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-запросы
Поймете, как анализировать и интерпретировать ответы сервера
Научитесь использовать GET для запроса данных с сервера
Начнете применять POST для создания или обновления данных на сервере
Узнаете, как интегрировать запросы в веб-приложения для управления данными

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

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

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

Изучите механизмы авторизации и аутентификации в контексте API
Узнаете, что такое Bearer token
Поймете, как работать с заголовками в запросах
Узнаете про важность безопасного хранения и передачи токенов
Научитесь использовать токены для управления доступом к API
Начнете корректно использовать заголовки HTTP для передачи данных авторизации

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

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

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

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

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

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

Модуль 4. Базовый React или Vue

(на выбор один фреймворк)

React

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

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

2. React Hooks

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

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

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

4. Styled Components

Узнаете, что такое CSS-in-JS и в чём его преимущества
Поймете, что такое библиотека Styled Components
Узнаете об установке и синтаксисе
Поймете, что такое глобальные стили
Освоите установку и базовое использование Styled Components
Научитесь создавать и стилизовать компоненты
Освоите тематическое оформление и глобальные стили

5. Работа с API

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

6. Формы в React

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

7. Context

Узнаете, что такое Context
Поймете, когда использовать Context
Узнаете, какие проблемы решает React Context
Научитесь создавать Context
Научитесь сквозной передаче данных между компонентами

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

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

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

Изучите Composition API
Освоите создание и использование Composables
Научитесь переходу с Options API на Composition API

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

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

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

Изучите основы состояния приложения и Vuex
Освоите создание хранилища и управление состоянием
Узнаете про модули в Vuex для организации кода

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

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

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

Vue

Знакомство с Vue 3

Узнаете, что такое Vue.js, и изучите его основные преимущества
Освоите установку и настройку среды разработки
Создадите первое приложение на Vue 3

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

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

3. Components Vue 3

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

Модуль 5. Продвинутый React или Vue

React

1. Next.js

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

2. TypeScript

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

3. React Refs

Узнаете про концепцию Refs в React
Изучите способы создания Refs
Узнаете про правила интеграции Refs с функциональными компонентами
Поймете, когда и почему использовать Refs
Научитесь создавать и использовать Refs
Начнете управлять фокусом, анимациями и взаимодействием с DOM
Научитесь интегрировать Refs с функциональными компонентами

4. Redux Toolkit

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Vue

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

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

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

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

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

Освоите настройку TypeScript для проекта на Vue
Изучите основы использования TypeScript в компонентах Vue
Узнаете про переход с JavaScript на TypeScript в существующем проекте и научитесь его выполнять

Модуль 6. Дипломная работа

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

Разработка веб-приложения для онлайн-тренировок (клиентская часть: интерфейс, авторизация, работа с API, роутинг, управление состоянием)

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

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

Фронтенд-разработчик

от 70 000 ₽

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

Мои навыки:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Результат: адаптивный интерфейс с тренировочными программами.

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

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

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

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

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

Мини-игры

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

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

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

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

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

Верстальщик

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

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

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

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

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

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

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

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

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

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

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

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

От 3 лет

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

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

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

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

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

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

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

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

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

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

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

Лёша Чудинов

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

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

Влад Чечулин

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

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

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

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

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

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

Руководительница образовательной платформы

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Точка А

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

Точка Б

Стала фронтенд-разработчиком в IT-отделе банка, пишет на React и TypeScript и дорабатывает интерфейс личного кабинета. Получает 130 000 ₽ — на удаленке с гибким графиком.

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

Графический дизайнер

Фронтенд-разработчик

Анастасия Черныш

Точка А

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

Точка Б

Переквалифицировался во фронтенд-разработчика в продуктовой компании, занимается разработкой компонентов на Vue и настройкой взаимодействия с сервером через API.

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

Менеджер

Фронтенд-разработчик

Илья Назаров

Точка А

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

Точка Б

Стала фронтенд-разработчиком в стартапе. Создает интерфейсы для образовательной платформы на React, внедряет анимации и оптимизирует загрузку. Заработок вырос с 45 000 ₽ до 120 000 ₽.

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

Учительница

Фронтенд-разработчик

Екатерина Литовченко

Точка А

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

Точка Б

Устроился фронтенд-разработчиком в финтех-компанию, разрабатывает сложные формы и таблицы с тысячами строк. Получает 140 000 ₽ и работает полностью из дома.