JavaScript. Профессиональная разработка веб-интерфейсов c 6 июня по 7 августа 2023До 6 июня цена 30 900 ₽

Курсы для новичков

Начните проходить интерактивные задания прямо сейчас.

Начать учиться

Курс «Старт в программировании»

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

НУЛЕВОЙ УРОВЕНЬ → УРОВЕНЬ ПЕРВОКУРСНИКА Карта обучения Подробнее о курсе

Знакомство с фронтендом

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

  • 2части
  • 32задания

Тренажёр обновлён 12 мая 2023

Начать тренажёр

Знакомство с HTML и CSS

Изучаем основы HTML и CSS. На практике разбираемся с семантической разметкой и базовыми механизмами стилизации на примере небольшого сайта.

  • 5частей
  • 109заданий

Тренажёр обновлён 12 мая 2023

Начать тренажёр

Мастер-класс. Создание семантической разметки по макету

Узнаем, что такое разметка по макету, подробно разберём алгоритм её создания, посмотрим на процесс создания разметки опытным верстальщиком в пошаговой демонстрации. Начнём работать над личным проектом этого курса — лендингом яхт-клуба «Под парусом».

Мастер-класс обновлён 23 октября 2022

Начать мастер-класс

Базовые механики стилизации

Разбираемся с селекторами и каскадностью. Учимся задавать фоновые изображения.

  • 3части
  • 54задания

Тренажёр обновлён 12 мая 2023

Начать тренажёр

Мастер-класс. Экспорт графики и параметров из Figmа

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

Мастер-класс обновлён 23 октября 2022

Начать мастер-класс

Боксовая модель и позиционирование

Знакомимся с боксовой моделью. Учимся управлять потоком документа. Разбираемся с позиционированием и управляем координатами позиционированных элементов.

  • 2части
  • 43задания

Тренажёр обновлён 12 мая 2023

Начать тренажёр

Базовые механики построения сеток

Познакомимся с техниками создания крупных сеток страниц и мелких сеток компонентов. Разберём возможности двух технологий создания раскладок: флексбоксов и гридов.

  • 3части
  • 59заданий

Тренажёр обновлён 12 мая 2023

Начать тренажёр

Мастер-класс. Создание сеток страниц по макету с помощью флексбоксов

Выделим базовые типы сеток, научимся их комбинировать для создания более сложных сеток страниц. Рассмотрим приёмы для получения «сеточных» размеров из редактора Figma. Выполним третий этап работы над личным проектом: опираясь на макет, построим сетку страницы.

Мастер-класс обновлён 23 октября 2022

Начать мастер-класс

Мастер-класс. Вёрстка компонентов интерфейса по макету

Научимся строить сетки компонентов, стилизовать интерфейсные тексты, разберёмся с тонкостями стилизации текстового потока и с особенностями создания мелких декоративных элементов. Доведём компоненты личного проекта до полного соответствия макету.

Мастер-класс обновлён 23 октября 2022

Начать мастер-класс

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

Узнаем, как работает JavaScript в браузере. Научимся оживлять интерфейсы. Будем решать задачи, с которыми регулярно сталкиваются веб-разработчики.

  • 4части
  • 61задание

Тренажёр обновлён 12 мая 2023

Начать тренажёр

Мастер-класс. Создание интерактивных компонентов интерфейса

Научимся управлять элементами веб-страницы через JavaScript. Выполним пятый, финальный, этап работы над проектом: c помощью JavaScript мы оживим некоторые элементы интерфейса, опираясь на макет и техническое задание.

Мастер-класс обновлён 23 октября 2022

Начать мастер-класс

Курс «Погружение в вёрстку»

Познакомились с азами HTML и CSS? Погрузитесь глубже в особенности этих языков.
После прохождения курса вы сможете стажироваться в небольшой веб-студии или брать небольшие заказы по вёрстке на фрилансе.

УРОВЕНЬ ПЕРВОКУРСНИКА → СТАЖЁРСКИЙ УРОВЕНЬ Карта обучения Подробнее о курсе

Продвинутые возможности HTML

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

  • 1часть
  • 20заданий

Тренажёр обновлён 12 мая 2023

Начать тренажёр

Погружение в формы

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

  • 2части
  • 45заданий

Тренажёр обновлён 12 мая 2023

Начать тренажёр

Погружение в селекторы

Рассмотрим продвинутые селекторы, такие как :nth-last-of-type или :only-child. Также научимся использовать псевдоэлементы, такие как ::before и ::after.

  • 1часть
  • 20заданий

Тренажёр обновлён 12 мая 2023

Начать тренажёр

Погружение в декоративные эффекты

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

  • 4части
  • 97заданий

Тренажёр обновлён 12 мая 2023

Начать тренажёр

Погружение в техники раскладок

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

  • 3части
  • 89заданий

Тренажёр обновлён 12 мая 2023

Начать тренажёр

Работа с таблицами

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

  • 1часть
  • 23задания

Тренажёр обновлён 12 мая 2023

Начать тренажёр

Курс «Погружение в программирование на JavaScript»

Познакомились с азами JavaScript и написали несколько скриптов? Погрузитесь в программирование для браузера.
После завершения курса вы сможете стажироваться в небольшой веб-студии или брать заказы по разработке интерактивных компонентов на фрилансе.

УРОВЕНЬ ПЕРВОКУРСНИКА → СТАЖЁРСКИЙ УРОВЕНЬ Карта обучения Подробнее о курсе

Программирование на JavaScript — основы языка

Изучим основные принципы программирования на JavaScript. Познакомимся с переменными, условиями и циклами. Закрепим знания, написав несколько программ: фитнес-калькулятор, драйвер принтера, симулятор дартс-машины.

  • 3части
  • 56заданий

Тренажёр обновлён 12 мая 2023

Начать тренажёр

Базовые структуры данных

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

  • 3части
  • 76заданий

Тренажёр обновлён 12 мая 2023

Начать тренажёр

Погружение в браузерный JavaScript

Углубляемся во взаимодействие с пользователями и оживление интерфейсов.

  • 3части
  • 66заданий

Тренажёр обновлён 12 мая 2023

Начать тренажёр

Практика: фотоприложение с фильтрами

Создадим небольшое приложение с фотофильтрами. Подготовим разметку и стили, необходимые для отрисовки приложения, а затем опишем логику работы на JavaScript.

  • 2части
  • 39заданий

Тренажёр обновлён 12 мая 2023

Начать тренажёр

Сборник задач по программированию

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

  • 3части
  • 51задание

Тренажёр обновлён 12 мая 2023

Начать тренажёр

Курс «Введение в React»

Освоили вёрстку веб-страниц и знакомы с JavaScript? Пора погрузиться в разработку интерфейсов.
После завершения курса вы сможете создавать сложные интерактивные компоненты для веб-приложений и выполнять более дорогие заказы.

УРОВЕНЬ ПЕРВОКУРСНИКА → СТАЖЁРСКИЙ УРОВЕНЬ Карта обучения Подробнее о курсе

Основы React: JSX, компоненты, передача данных

Познакомимся с основами React — одной из самых популярных библиотек для разработки пользовательских интерфейсов. Узнаем о синтаксическом расширении JavaScript — JSX, компонентах и передаче данных в компоненты. Создадим первое приложение на React.

Тренажёр обновлён 28 марта 2023

Начать тренажёр

Интерактивные компоненты в React: состояние, события и React Hooks

Узнаем о работе с состоянием компонентов и обработке событий в React. Познакомимся с новым подходом к управлению состоянием — React Hooks. Создадим первые интерактивные компоненты, которые умеют обрабатывать пользовательский ввод.

Тренажёр обновлён 28 марта 2023

Начать тренажёр

Описание бизнес-логики в React

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

Тренажёр обновлён 28 марта 2023

Начать тренажёр

Навигация и передача данных в React

Разберём на примере многостраничных приложений, как переключать экраны в React-приложении. Узнаем, как передавать данные между компонентами, которые находятся на разных уровнях иерархии. Научимся создавать высокоуровневые компоненты и использовать их для управления передачей данных.

Тренажёр обновлён 28 марта 2023

Начать тренажёр

Типовые приёмы разработки

Познакомимся с типовыми приёмами разработки в React, которые упрощают процесс создания сложных приложений. Рассмотрим использование внешних сервисов данных в компонентах. Дополним функциональность приложения.

Тренажёр обновлён 28 марта 2023

Начать тренажёр

React в коммерческой разработке

Разберём почему важна правильная сборка проекта. Узнаем зачем нужно делить проект на модули и как использовать для этого webpack. Познакомимся с Create React App и рассмотрим преимущества и недостатки этого инструмента.

Тренажёр обновлён 28 марта 2023

Начать тренажёр

Курс «Продвинутые техники и инструменты вёрстки»

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

СТАЖЁРСКИЙ УРОВЕНЬ → ПРОДУКТОВЫЙ УРОВЕНЬ Карта обучения Подробнее о курсе

Продвинутые декоративные эффекты

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

  • 1часть
  • 32задания

Тренажёр обновлён 12 мая 2023

Начать тренажёр

Продвинутая работа с фонами и рамками

Погрузимся в тонкости работы с рамками и фонами. Эти техники используются при создании сложной CSS-графики, чтобы снизить количество запросов к серверу. Также они нужны для создания декоративных элементов.

  • 1часть
  • 33задания

Тренажёр обновлён 12 мая 2023

Начать тренажёр

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

Продвинутые селекторы используются для улучшения UX форм. Они могут использоваться как в сочетании с JavaScript, так и без. Также с помощью продвинутого поиска по атрибутам можно создавать «умные» элементы интерфейса и диагностические инструменты.

  • 1часть
  • 18заданий

Тренажёр обновлён 12 мая 2023

Начать тренажёр

Табличные раскладки

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

  • 1часть
  • 18заданий

Тренажёр обновлён 12 мая 2023

Начать тренажёр

Интерфейсные анимации

Простые интерфейсные анимации и микроанимации сейчас делаются на чистом CSS. Для этого используются плавные переходы и покадровая анимация.

  • 2части
  • 60заданий

Тренажёр обновлён 12 мая 2023

Начать тренажёр

Инструменты автоматизации: препроцессор

Главный инструмент для ускорения работы верстальщика и организации эффективной командной разработки над библиотекой компонентов — это препроцессор. Разбираем работу с препроцессором на примере Less.

  • 2части
  • 44задания

Тренажёр обновлён 12 мая 2023

Начать тренажёр

Внутреннее устройство SVG

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

  • 3части
  • 50заданий

Тренажёр обновлён 12 мая 2023

Начать тренажёр

Мини-курс «Погружение в бэкенд»

Погружение в бэкенд для людей со стартовыми знаниями в программировании.
После прохождения курса вы будете знать основы языка PHP и сможете на любительском уровне заниматься бэкенд-разработкой — создавать собственные проекты.

УРОВЕНЬ ПЕРВОКУРСНИКА → СТАЖЁРСКИЙ УРОВЕНЬ Карта обучения Подробнее о курсе

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

Добавляем PHP в разметку, работаем с веб-сценариями, данными и адресом.

  • 5частей
  • 74задания

Тренажёр обновлён 12 мая 2023

Начать тренажёр

Курс «Ретровёрстка»

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

Ретросетки

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

  • 1часть
  • 32задания

Тренажёр обновлён 12 мая 2023

Начать тренажёр

Ретромастерские

Разбираемся, как верстать типовые элементы интерфейса на флоатах и блочно-строчных боксах, без упора на семантику.

  • 2части
  • 46заданий

Тренажёр обновлён 12 мая 2023

Начать тренажёр

Великий Кексби, этап 1

Помогаем Кексу запустить магазин кошачьих аксессуаров и фэшена.

  • 6частей
  • 64задания

Тренажёр обновлён 12 мая 2023

Начать тренажёр

Великий Кексби, этап 2

Помогаем Кексу запустить магазин кошачьих аксессуаров и фэшена.

  • 7частей
  • 102задания

Тренажёр обновлён 12 мая 2023

Начать тренажёр