Заверстаю
Программа интерактивных тренажёров для марафона по вёрстке «Заверстаю». Познавайте основы HTML и CSS, и по завершению вы сможете сверстать свой первый макет.
Основы HTML и CSS. Теория0/12Знакомство с фронтендом
В этой части мы под руководством инструктора Кекса познакомимся с основами вёрстки на примере небольшого лендинга.
Основы HTML и CSS. Практика0/4Знакомство с фронтендом
Полезные задания для закрепления теории главы «Основы HTML и CSS»
Структура HTML-документа. Теория0/17Знакомство с HTML и CSS
Начинаем готовить разметку страницы блога, разбираемся из каких тегов она состоит и за что эти теги отвечают.
Структура HTML-документа. Практика0/9Знакомство с HTML и CSS
Полезные задания для закрепления теории главы «Структура HTML-документа»
Разметка текста. Теория0/20Знакомство с HTML и CSS
Продолжаем верстать страницу блога, изучаем, как правильно размечать текстовое содержание: абзацы, заголовки, подзаголовки, списки и многое другое.
Разметка текста. Практика0/20Знакомство с HTML и CSS
Полезные задания для закрепления теории главы «Разметка текста»
Ссылки и изображения. Теория0/16Знакомство с HTML и CSS
Завершаем разметку страницы блога, добавляем навигационные ссылки, а также разбираемся с форматами изображений.
Ссылки и изображения. Практика0/13Знакомство с HTML и CSS
Полезные задания для закрепления теории главы «Ссылки и изображения»
Основы CSS. Теория0/16Знакомство с HTML и CSS
Начинаем оформление страниц блога и заодно разбираем базовые понятия CSS: правила, селекторы, свойства, значения, наследование и каскадирование.
Основы CSS. Практика0/5Знакомство с HTML и CSS
Полезные задания для закрепления теории главы «Основы CSS»
Оформление текста. Теория0/19Знакомство с HTML и CSS
Завершаем оформление страниц блога, учимся оформлять тексты с помощью CSS: задаём шрифты, цвета, отступы, размеры.
Оформление текста. Практика0/4Знакомство с HTML и CSS
Полезные задания для закрепления теории главы «Оформление текста»
Возможности HTML и CSS0/20Продвинутые возможности HTML
Вспомним какие элементы есть в стандарте HTML и как их правильно использовать. Потренируемся вставлять на страницу аудио, видео и векторные изображения, подключать и использовать нестандартные шрифты, а также познакомимся с крутыми возможностями CSS.
Селекторы. Знакомство. Теория0/18Базовые механики стилизации
Опробуем один из самых важнейших механизмов CSS — селекторы. Научимся пользоваться простыми и продвинутыми селекторами, псевдоклассами, а также комбинировать их.
Селекторы. Знакомство. Практика0/1Базовые механики стилизации
Полезные задания для закрепления теории главы «Селекторы. Знакомство»
Наследование и каскадирование. Теория0/18Базовые механики стилизации
Наследование, каскадирование, специфичность: что это и как их правильно использовать?
Наследование и каскадирование. Практика0/1Базовые механики стилизации
Полезные задания для закрепления теории главы «Наследование и каскадирование»
Фоны. Знакомство0/16Базовые механики стилизации
Научимся использовать фоновые изображения и задавать цвета фона. Разберёмся с популярными форматами изображений и взглянем на некоторые приёмы создания декоративных эффектов.
Селекторы. Погружение0/20Погружение в селекторы
Рассмотрим продвинутые селекторы, такие как :nth-last-of-type или :only-child. Также научимся использовать псевдоэлементы, такие как ::before и ::after.
Формы. Погружение0/27Погружение в формы
Научимся создавать продвинутые формы, познакомимся с новыми типами полей для ввода дат, цветов, чисел и адресов сайтов. Также рассмотрим такие возможности как автофокус, подсказки, средства валидации и многие другие.
Блочная модель документа. Теория0/23Боксовая модель и позиционирование
Научимся управлять размерами и расположением элементов, задавать отступы и рамки, а также рассмотрим типы элементов и их особенности. Это первый и самый важный шаг к созданию страниц со сложной сеткой и сложных декоративных элементов.
Сетки0/20Базовые механики построения сеток
Познакомимся с боксовой моделью и потоком. Научимся верстать сетки, ориентируясь на макет страницы. Узнаем, как управлять отступами, центровать элементы и делать колонки с помощью гридов и флексбоксов.
Микросетки. Начало0/19Базовые механики построения сеток
Узнаем, что такое микросетки и как тестировать вёрстку. Разберём, когда лучше использовать гриды, флексы, блочные и строчные боксы. Сверстаем блок навигации и список карточек со сложной плиточной раскладкой.
Микросетки. Продолжение0/20Базовые механики построения сеток
Познакомимся с поперечной осью флексбокса и грид-областями. Разберём, как сверстать сетку, если по макету сложно определить структуру и размеры компонента. Научимся задавать выравнивание отдельным элементам и менять элементы местами, не изменяя разметку. Сверстаем карусель и карточку с асимметричной сеткой.
Флексбокс. Знакомство0/31Погружение в техники раскладок
Рассмотрим основы нового механизма «гибкой» раскладки — флексбокс. Сначала потренируемся «на котиках» направлять оси флекс-контейнера, выравнивать и переносить флекс-элементы, а затем научимся простому применению флексбокса в реальных интерфейсах.
Флексбокс. Погружение0/28Погружение в техники раскладок
Узнаем как управлять размерами и отступами флекс-элементов и как работают коэффициенты растяжения и сжатия, а также потренируемся создавать «гибкие» раскладки и элементы интерфейса.
Знакомство с гридами0/30Погружение в техники раскладок
В этой части мы начнём изучать технологию гридов: разберём, как разными способами создавать грид-раскладки, как управлять расположением грид-элементов в грид-контейнере. Затем мы применим полученные знания на практике и сверстаем с помощью гридов пару небольших интерфейсов.
Позиционирование0/20Боксовая модель и позиционирование
Взглянем на несколько режимов позиционирования элементов: относительный, абсолютный и фиксированный. А также попрактикуемся изменять расположение элементов на странице с помощью CSS-свойств для позиционирования.
Рамки и фоны. Погружение0/33Продвинутая работа с фонами и рамками
Научимся мастерски управляться с рамками и фонами любых форм и размеров, откроем для себя секреты давно знакомых свойств и применим их на практике.