День студента в стиле IT: забери скидку 25% с 25 по 31 января стартуй в IT с выгодой

Часть 1: Сетки на флоатах и блочно-строчных

29 заданий и 3 испытания

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

Оформить подписку
Пробуем управлять потокомЗадание
Управление потоком, шаг 2Задание
Управление потоком, шаг 3Задание
Создадим другой потокЗадание
Другой поток, шаг 2Задание
Другой поток, шаг 3Задание
Другой поток, финалЗадание
Погружение во флоатыЗадание
float и ширинаЗадание
float и выпадание из потокаЗадание
Флоат рядом с флоатомЗадание
Когда флоатов много, а места малоЗадание
Испытание: пазл на флоатахИспытание
Свойство clearЗадание
Борьба с выпаданием флоатов: распоркиЗадание
Борьба с выпаданием флоатов: псевдораспоркиЗадание
Простейшая сетка, шаг 1Задание
Простейшая сетка, шаг 2Задание
Простейшая сетка, финалЗадание
Сетка посложнее, шаг 1Задание
Сетка посложнее, шаг 2Задание
Сетка посложнее, шаг 3Задание
Сетка посложнее, добавляем содержаниеЗадание
Последняя сетка, шаг 1Задание
Последняя сетка, шаг 2Задание
Последняя сетка завершенаЗадание
Испытание: строим сеткуИспытание
Погружение в inline-blockЗадание
float vs inline-blockЗадание
Простая сетка на inline-blockЗадание
inline-block и пробелы в кодеЗадание
Испытание: котогалерея на inline-blockИспытание