Программа обучения
Предлагаем путеводитель по интерактивным заданиям, следуя которому вы станете настоящим профессионалом.
Эпичный курс По подписке
Применяйте полученные знания на практике!
Вы с нуля сверстаете настоящий сайт, используя графический макет. Всё, как у настоящих профессионалов.
Эпичный курс открывается постепенно, по мере прохождения программы обучения.
Основы HTML и CSS0/12Знакомство с HTML и CSS
В этой главе мы под руководством инструктора Кекса познакомимся с основами вёрстки на примере небольшого лендинга.
Кексби. Знакомство0/10
Размечаем основные блоки главной страницы магазинчика Кекса.
Структура 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: задаём шрифты, цвета, отступы, размеры.
Основы JavaScript0/16Знакомство с JavaScript
Познакомимся с JavaScript, с его помощью изменим вёрстку на странице, напишем переключатель тем, сделаем интерактивную форму подписки и научимся пользоваться консолью.
Условия и создание элементов0/15Знакомство с JavaScript
Познакомимся с условиями, научимся создавать и добавлять на страницу новые элементы, напишем счётчик лайков и систему комментирования.
Коллекции и свойства элементов0/16Знакомство с JavaScript
Познакомимся с коллекциями элементов и циклом for of, научимся с помощью свойств получать данные и управлять элементами, сделаем всплывающие подсказки и валидацию формы.
Прокрутка и операторы0/14Знакомство с JavaScript
Узнаем, как управлять прокруткой в браузере, и познакомимся с операторами равенства и логическим И. Запрограммируем кнопку прокрутки к началу страницы и создадим фильтрацию на новостном сайте.
Динамические стили элементов0/16Знакомство с JavaScript
Научимся менять стили элементов, используя свойство style и данные из полей ввода. Запрограммируем настройки цвета и размера текста на странице, добавим шкалу сложности пароля и возможность посмотреть пароль.
Основы PHP0/15Знакомство с PHP
Познакомимся с основами PHP. Научимся внедрять PHP в вёрстку, работать с веб-сценариями и адресной строкой, запрограммируем интернет-магазин.
Условия в PHP0/14Знакомство с PHP
Научимся использовать условия в сценариях и шаблонах. Познакомимся с операциями сравнения и логическими операторами. Доработаем страницы интернет-магазина.
Массивы и циклы в PHP, часть 10/15Знакомство с PHP
Узнаем, что такое массивы и циклы, и почему они отлично работают вместе. Поработаем с разными массивами и циклами на страницах интернет-магазина. Добавим фильтрацию товаров и решим ещё пару задач.
Возможности HTML и CSS0/20Продвинутый HTML и CSS
Вспомним какие элементы есть в стандарте HTML и как их правильно использовать. Потренируемся вставлять на страницу аудио, видео и векторные изображения, подключать и использовать нестандартные шрифты, а также познакомимся с крутыми возможностями CSS.
Знакомство с таблицами0/23Продвинутый HTML и CSS
Узнаем, из каких тегов состоит таблица и как управлять количеством строк и столбцов. Научимся оформлять таблицы: задавать рамки, фон строк, размеры столбцов, выравнивать текст внутри ячеек. И самое главное — разберёмся, как объединять ячейки.
Кексби. Таблицы0/9
Создаём таблицу прайс-листа и задаём ей базовое оформление.
Формы, часть 10/18Продвинутый HTML и CSS
Разберёмся как создавать простейшие формы, попрактикуемся использовать текстовые поля, выпадающие списки, поля-галочки, кнопки и другие элементы форм.
Кексби. Формы0/11
Завершаем разметку страницы формой вопросов.
Формы, часть 20/27Продвинутый HTML и CSS
Научимся создавать продвинутые формы, познакомимся с новыми типами полей для ввода дат, цветов, чисел и адресов сайтов. Также рассмотрим такие возможности как автофокус, подсказки, средства валидации и многие другие.
Селекторы, часть 10/18Продвинутый HTML и CSS
Опробуем один из самых важнейших механизмов CSS — селекторы. Научимся пользоваться простыми и продвинутыми селекторами, псевдоклассами, а также комбинировать их.
Наследование и каскадирование0/18Продвинутый HTML и CSS
Наследование, каскадирование, специфичность: что это и как их правильно использовать?
Кексби. Базовая стилизация0/23
Начинаем базовую стилизацию страницы.
Фоны, часть 10/16Продвинутый HTML и CSS
Научимся использовать фоновые изображения и задавать цвета фона. Разберёмся с популярными форматами изображений и взглянем на некоторые приёмы создания декоративных эффектов.
Кексби. Графика и оформление0/6
Добавляем декоративные изображения.
Селекторы, часть 20/20Продвинутый HTML и CSS
Рассмотрим продвинутые селекторы, такие как :nth-last-of-type или :only-child. Также научимся использовать псевдоэлементы, такие как ::before и ::after.
Блочная модель документа0/23Построение сеток
Научимся управлять размерами и расположением элементов, задавать отступы и рамки, а также рассмотрим типы элементов и их особенности. Это первый и самый важный шаг к созданию страниц со сложной сеткой и сложных декоративных элементов.
Сетки0/32Построение сеток
Попробуем поймать поток документа и разобраться что это такое. Взглянем на тонкости свойства float и блочно-строчных элементов. Отработаем основные приёмы построения сеток.
Кексби. Сетки0/20
Создаём сетку страницы.
Флексбокс, часть 10/31Построение сеток
Рассмотрим основы нового механизма «гибкой» раскладки — флексбокс. Сначала потренируемся «на котиках» направлять оси флекс-контейнера, выравнивать и переносить флекс-элементы, а затем научимся простому применению флексбокса в реальных интерфейсах.
Флексбокс, часть 20/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/31Мастерские
Это прикладной курс, в котором вы будете создавать сложные элементы интерфейса и крутые эффекты, используя возможности HTML и CSS. Вы построите сложные навигационные элементы, поэкспериментируете с масками, эффектами при наведении и даже создадите слайдер на чистом CSS.
Знакомство с SVG0/15Основы SVG
Мы познакомимся с SVG — форматом векторной графики. Разберём базовые примитивы: линии, прямоугольники, окружности. Научимся позиционировать их, управлять цветом и размерами, собирать из них разные рисунки.
Оформление SVG-фигур0/20Основы SVG
Базовые понятия об оформлении SVG-фигур. Заливки и обводки.
Размеры в SVG0/15Основы SVG
Разберёмся с масштабированием SVG и научимся работать с атрибутами viewBox и preserveAspectRatio.
Основы программирования на JavaScript0/14Программирование на JavaScript
Разберёмся с переменными, операциями и типами данных.
Условия0/16Программирование на JavaScript
Научимся использовать условия на полную. Разберёмся с логическими операциями и сравнениями. Попробуем комбинировать операторы.
Циклы0/26Программирование на JavaScript
Создадим драйвер для печати страниц со множеством режимов. В этом нам помогут циклы, с которыми мы познакомимся в этой главе.
Массивы0/28Программирование на JavaScript
Научимся работать с действительно массивными данными и проведём настоящее аналитическое расследование. А для этого изучим работу с массивами.
Функции0/22Программирование на JavaScript
Отправим Кекса в путешествие, посчитаем зарплаты и доходы, научимся разделять код на отдельные смысловые блоки. И в конце концов научимся работать с функциями.
Объекты0/28Программирование на JavaScript
Будем читать из объектов, использовать встроенные и кастомные методы, узнаем, что такое словари и контекст вызова, отправим котов играть в кости, напишем конфигуратор компьютера. И это ещё не всё!
JavaScript в браузере0/21Погружение в браузерный JavaScript
Углубимся в работу JavaScript с вёрсткой. Научимся менять разметку и создавать её с нуля с помощью скриптов.
Знакомство с событиями0/23Погружение в браузерный JavaScript
Научимся «оживлять» интерфейс и обрабатывать пользовательские события. Узнаем, что такое асинхронность, области видимости, замыкания и как они работают. Соберём обед в школу, запрограммируем всплывающее окно и галерею.
Манипуляции с DOM0/22Погружение в браузерный JavaScript
Узнаем, что такое DOM API, поработаем с шаблонами, познакомимся с новыми событиями и методами для управления DOM, займёмся клонированием элементов и запрограммируем приложение со списком дел.
Плавные переходы0/29Динамические эффекты
Научимся плавно менять CSS-свойства, будем создавать красивые и функциональные элементы форм в стиле Material Design и построим мини-викторину об HTML и CSS.
Анимация0/31Динамические эффекты
Рассмотрим основы анимации на CSS. Нам предстоит пройти путь развития цивилизации и покорить космический простор. Мы будем двигать, поворачивать и видоизменять объекты, попутно осваивая приёмы работы анимации в CSS.
Знакомство с Less0/14Препроцессор Less
Познакомимся с основами препроцессора Less и начнём разрабатывать свою библиотеку визуальных компонентов. Вместе научимся создавать цветовую схему для элементов интерфейса.
Примеси в Less0/30Препроцессор Less
Продолжим изучать возможности препроцессора Less: познакомимся с примесями, научимся применять примеси с условиями, разберёмся, как создавать и использовать циклы. Также мы рассмотрим примеры использования примесей для решения типовых задач вёрстки.
Селекторы, часть 30/18Сборник: Тонкости CSS
Рассмотрим продвинутые селекторы, умеющие искать элементы по подстрокам в атрибутах, а также огромное количество селекторов для стилизации элементов форм, таких как :required, :optional и :checked.
Рамки и фоны, часть 20/33Сборник: Тонкости CSS
Научимся мастерски управляться с рамками и фонами любых форм и размеров, откроем для себя секреты давно знакомых свойств и применим их на практике.
Оформление текста, часть 20/26Сборник: Тонкости CSS
Мы в прямом смысле «наиграемся со шрифтами», декоративными текстовыми эффектами и тенями, а ещё узнаем, как повысить читабельность текстов с помощью новых CSS-свойств.
Таблицы на CSS0/18Сборник: Тонкости CSS
Взглянем на таблицы с другой стороны: научимся строить их с помощью CSS, исследуем и опробуем на практике редкие табличные свойства. а также нас ждёт интересное и непростое путешествие за Святым Граалем.
Некоторые главы интерактивных курсов были перенесены в архив.
