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

Предлагаем путеводитель по интерактивным заданиям, следуя которому вы станете настоящим профессионалом.

Начать

Эпичный тренажёр По подписке

Применяйте полученные знания на практике!

Вы с нуля сверстаете настоящий сайт, используя графический макет. Всё, как у настоящих профессионалов.

Тренажёр открывается постепенно, по мере прохождения программы обучения.

Великий Кексби

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

Основы HTML и CSS0/12Знакомство с веб-разработкой

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

Кексби. Знакомство0/10

Размечаем основные блоки главной страницы магазинчика Кекса.

Основы JavaScript0/16Знакомство с веб-разработкой

Познакомимся с JavaScript, с его помощью изменим вёрстку на странице, напишем переключатель тем, сделаем интерактивную форму подписки и научимся пользоваться консолью.

Основы PHP0/15Знакомство с веб-разработкой

Познакомимся с основами PHP. Научимся внедрять PHP в вёрстку, работать с веб-сценариями и адресной строкой, запрограммируем интернет-магазин.

Структура HTML-документа0/17Знакомство с HTML и CSS

Начинаем готовить разметку страницы блога, разбираемся из каких тегов она состоит и за что эти теги отвечают.

Разметка текста0/20Знакомство с HTML и CSS

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

Кексби. Разметка, оформление текста0/11

Добавляем в разметку текстовые теги: заголовки, списки, цитаты.

Ссылки и изображения0/16Знакомство с HTML и CSS

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

Кексби. Ссылки и изображения0/15

Вставляем содержательные картинки и добавляем ссылки.

Основы CSS0/16Знакомство с HTML и CSS

Начинаем оформление страниц блога и заодно разбираем базовые понятия CSS: правила, селекторы, свойства, значения, наследование и каскадирование.

Оформление текста0/19Знакомство с HTML и CSS

Завершаем оформление страниц блога, учимся оформлять тексты с помощью CSS: задаём шрифты, цвета, отступы, размеры.

Условия и создание элементов0/15Знакомство с JavaScript

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

Коллекции и свойства элементов0/16Знакомство с JavaScript

Познакомимся с коллекциями элементов и циклом for of, научимся с помощью свойств получать данные и управлять элементами, сделаем всплывающие подсказки и валидацию формы.

Прокрутка и операторы0/14Знакомство с JavaScript

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

Динамические стили элементов0/16Знакомство с JavaScript

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

Условия в PHP0/14Знакомство с PHP

Научимся использовать условия в сценариях и шаблонах. Познакомимся с операциями сравнения и логическими операторами. Доработаем страницы интернет-магазина.

Массивы и циклы в PHP0/15Знакомство с PHP

Узнаем, что такое массивы и циклы, и почему они отлично работают вместе. Поработаем с разными массивами и циклами на страницах интернет-магазина. Добавим фильтрацию товаров и решим ещё пару задач.

Массивы и функции в PHP0/16Знакомство с PHP

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

Числа и строки в PHP0/14Знакомство с PHP

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

Сетки0/20Погружение в HTML и CSS

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

Микросетки. Начало0/19Погружение в HTML и CSS

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

Микросетки. Продолжение0/20Погружение в HTML и CSS

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

Возможности HTML и CSS0/20Продвинутый HTML и CSS

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

Знакомство с таблицами0/23Продвинутый HTML и CSS

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

Кексби. Таблицы0/9

Создаём таблицу прайс-листа и задаём ей базовое оформление.

Формы. Знакомство0/18Продвинутый HTML и CSS

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

Кексби. Формы0/11

Завершаем разметку страницы формой вопросов.

Кексби. Промежуточное испытание0/8

Формы. Погружение0/27Продвинутый HTML и CSS

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

Селекторы. Знакомство0/18Продвинутый HTML и CSS

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

Наследование и каскадирование0/18Продвинутый HTML и CSS

Наследование, каскадирование, специфичность: что это и как их правильно использовать?

Кексби. Базовая стилизация0/23

Начинаем базовую стилизацию страницы.

Фоны. Знакомство0/16Продвинутый HTML и CSS

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

Кексби. Графика и оформление0/6

Добавляем декоративные изображения.

Селекторы. Погружение0/20Продвинутый HTML и CSS

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

Блочная модель документа0/23Построение сеток

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

Сетки0/32Построение сеток

Попробуем поймать поток документа и разобраться что это такое. Взглянем на тонкости свойства float и блочно-строчных элементов. Отработаем основные приёмы построения сеток.

Кексби. Сетки0/20

Создаём сетку страницы.

Флексбокс. Знакомство0/31Построение сеток

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

Флексбокс. Погружение0/28Построение сеток

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

Знакомство с гридами0/30Построение сеток

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

Позиционирование0/20Декоративные эффекты

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

Кексби. Четвертьфинал0/17

Завершаем вёрстку шапки, преимуществ и справочника.

Игра теней0/17Декоративные эффекты

Взглянем на процесс создания теней с помощью CSS. Мы по косточкам разберём свойство box-shadow, научимся использовать множественные тени, а также изучим некоторые продвинутые приёмы работы с тенями.

Линейные градиенты0/23Декоративные эффекты

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

Двумерные трансформации0/32Декоративные эффекты

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

Кекстаграм: Начало. CSS-фильтры0/14Декоративные эффекты

Вместе станем мастерами фильтров в CSS: разберёмся, как применять фильтры к разным элементам, а также комбинировать и анимировать их.

Кекстаграм: Эпилог. JavaScript0/25Декоративные эффекты

В сиквеле части «Кекстаграм» нам предстоит запрограммировать небольшое фотоприложение с фильтрами на JavaScript.

Мастерская: создаём меню0/28Мастерские

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

Кексби. Полуфинал0/13

Завершаем вёрстку отзывов и каталога.

Мастерская: декоративные элементы0/18Мастерские

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

Кексби. Финал0/15

Завершаем вёрстку формы обратной связи и подвала.

Кексби. Финальное испытание0/8

Мастерская: декоративные эффекты0/31Мастерские

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