Кексби-челлендж
Мы подготовили для вас программу интерактивных курсов на целый месяц. По её завершению вы полностью пройдёте курс «Великий Кесби» и сможете скачать архив с финальным состоянием вёрстки.
Основы HTML и CSS. Теория0/12Знакомство с фронтендом
В этой части мы под руководством инструктора Кекса познакомимся с основами вёрстки на примере небольшого лендинга.
Основы HTML и CSS. Практика0/4Знакомство с фронтендом
Полезные задания для закрепления теории главы «Основы HTML и CSS»
Кексби. Знакомство0/10Великий Кексби, этап 1
Размечаем основные блоки главной страницы магазинчика Кекса.
Структура HTML-документа. Теория0/17Знакомство с HTML и CSS
Начинаем готовить разметку страницы блога, разбираемся из каких тегов она состоит и за что эти теги отвечают.
Структура HTML-документа. Практика0/9Знакомство с HTML и CSS
Полезные задания для закрепления теории главы «Структура HTML-документа»
Разметка текста. Теория0/20Знакомство с HTML и CSS
Продолжаем верстать страницу блога, изучаем, как правильно размечать текстовое содержание: абзацы, заголовки, подзаголовки, списки и многое другое.
Разметка текста. Практика0/20Знакомство с HTML и CSS
Полезные задания для закрепления теории главы «Разметка текста»
Кексби. Разметка, оформление текста0/11Великий Кексби, этап 1
Добавляем в разметку текстовые теги: заголовки, списки, цитаты.
Ссылки и изображения. Теория0/16Знакомство с HTML и CSS
Завершаем разметку страницы блога, добавляем навигационные ссылки, а также разбираемся с форматами изображений.
Ссылки и изображения. Практика0/13Знакомство с HTML и CSS
Полезные задания для закрепления теории главы «Ссылки и изображения»
Кексби. Ссылки и изображения0/15Великий Кексби, этап 1
Вставляем содержательные картинки и добавляем ссылки.
Знакомство с таблицами0/23Работа с таблицами
Узнаем, из каких тегов состоит таблица и как управлять количеством строк и столбцов. Научимся оформлять таблицы: задавать рамки, фон строк, размеры столбцов, выравнивать текст внутри ячеек. И самое главное — разберёмся, как объединять ячейки.
Кексби. Таблицы0/9Великий Кексби, этап 1
Создаём таблицу прайс-листа и задаём ей базовое оформление.
Формы. Знакомство0/18Погружение в формы
Разберёмся как создавать простейшие формы, попрактикуемся использовать текстовые поля, выпадающие списки, чекбоксы, радиокнопки и другие элементы форм.
Кексби. Формы0/11Великий Кексби, этап 1
Завершаем разметку страницы формой вопросов.
Основы CSS. Теория0/16Знакомство с HTML и CSS
Начинаем оформление страниц блога и заодно разбираем базовые понятия CSS: правила, селекторы, свойства, значения, наследование и каскадирование.
Основы CSS. Практика0/5Знакомство с HTML и CSS
Полезные задания для закрепления теории главы «Основы CSS»
Селекторы. Знакомство. Теория0/18Базовые механики стилизации
Опробуем один из самых важнейших механизмов CSS — селекторы. Научимся пользоваться простыми и продвинутыми селекторами, псевдоклассами, а также комбинировать их.
Наследование и каскадирование. Теория0/18Базовые механики стилизации
Наследование, каскадирование, специфичность: что это и как их правильно использовать?
Оформление текста. Теория0/19Знакомство с HTML и CSS
Завершаем оформление страниц блога, учимся оформлять тексты с помощью CSS: задаём шрифты, цвета, отступы, размеры.
Оформление текста. Практика0/4Знакомство с HTML и CSS
Полезные задания для закрепления теории главы «Оформление текста»
Кексби. Базовая стилизация0/23Великий Кексби, этап 2
Начинаем базовую стилизацию страницы.
Фоны. Знакомство0/16Базовые механики стилизации
Научимся использовать фоновые изображения и задавать цвета фона. Разберёмся с популярными форматами изображений и взглянем на некоторые приёмы создания декоративных эффектов.
Кексби. Графика и оформление0/6Великий Кексби, этап 2
Добавляем декоративные изображения.
Блочная модель документа. Теория0/23Боксовая модель и позиционирование
Научимся управлять размерами и расположением элементов, задавать отступы и рамки, а также рассмотрим типы элементов и их особенности. Это первый и самый важный шаг к созданию страниц со сложной сеткой и сложных декоративных элементов.
Сетки на флоатах и блочно-строчных0/32Ретросетки
Попробуем поймать поток документа и разобраться что это такое. Взглянем на тонкости свойства float и блочно-строчных элементов. Отработаем основные приёмы построения сеток.
Кексби. Сетки0/20Великий Кексби, этап 2
Создаём сетку страницы.
Позиционирование0/20Боксовая модель и позиционирование
Взглянем на несколько режимов позиционирования элементов: относительный, абсолютный и фиксированный. А также попрактикуемся изменять расположение элементов на странице с помощью CSS-свойств для позиционирования.
Кексби. Четвертьфинал0/17Великий Кексби, этап 2
Завершаем вёрстку шапки, преимуществ и справочника.
Мастерская: создаём меню0/28Ретромастерские
Создадим с нуля несколько типовых навигационных меню: вертикальное, горизонтальное, многоуровневое и с выпадающим подменю. Это прикладная часть, в котором вы будете использовать знания и навыки, полученные в предыдущих тренажёрах.
Кексби. Полуфинал0/13Великий Кексби, этап 2
Завершаем вёрстку отзывов и каталога.
Мастерская: декоративные элементы0/18Ретромастерские
Создадим с нуля различные декоративные элементы: социальные кнопки, переключатели страниц, блоки комментариев и так далее. Это прикладная часть, в котором вы будете использовать знания и навыки, полученные в предшествующих тренажёрах.
Кексби. Финал0/15Великий Кексби, этап 2
Завершаем вёрстку формы обратной связи и подвала.