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

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

Начать

Эпичный курс По подписке

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

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

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

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

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

Знакомство0/14Знакомство

Познакомимся с интерфейсами Академии. А заодно рассмотрим базовые понятия вёрстки.

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

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

Структура HTML-документа0/14Основы HTML

Создаём простейшую HTML-страницу, разбираемся из каких тегов она состоит и за что эти теги отвечают. Подключаем к странице CSS-стили и JS-скрипты.

Разметка текста0/17Основы HTML

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

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

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

Ссылки и изображения0/13Основы HTML

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

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

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

Знакомство с таблицами0/23Основы HTML

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

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

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

Знакомство с формами0/18Основы HTML

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

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

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

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

Знакомство с CSS0/15Основы CSS

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

Селекторы, часть 10/18Основы CSS

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

Наследование и каскадирование0/18Основы CSS

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

Оформление текста, часть 10/16Оформление текста

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

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

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

Фоны, часть 10/16Декоративные эффекты

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Знакомство с HTML50/19Основы HTML

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

Формы и HTML50/28Основы HTML

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

Селекторы, часть 20/20Основы CSS

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

Селекторы, часть 30/18Основы CSS

Рассмотрим продвинутые селекторы, умеющие искать элементы по подстрокам в атрибутах, а также огромное количество селекторов для стилизации элементов форм, таких как :required, :optional и :checked.

Рамки и фоны, часть 20/33Декоративные эффекты

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

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

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

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

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

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

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

Оформление текста, часть 20/26Оформление текста

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

Анимация0/31Динамические эффекты

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

Плавные переходы0/29Динамические эффекты

Научимся плавно менять CSS-свойства, будем создавать красивые и функциональные элементы форм в стиле Material Design и построим мини-викторину об HTML и CSS.

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

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