Web-программирование (онлайн лекция 1, grid, адаптивная верстка через flex, grid,@media и bootstrap)

00:00 Подключение 01:04 Преамбула 03:08 Создаем проект 04:45 Прописываем базовые стили 06:09 Добавляем display: grid 06:40 Работаем grid-template-columns 08:15 О фракциях 1fr 10:19 Используем auto 11:15 Управляем высотой всех строк 12:00 Добавляем расстояние меду ячейками через gap 13:02 Центрирование внутри ячейки grid через display:flex 13:55 Управляем индивидуальной высотой строк 15:20 Применяем repeat 17:42 Об объединении ячеек 19:42 Выбираем блок через nth-child 20:28 Склеиваем ячейки через grid-column 21:45 Применяем span в склейки ячеек 23:41 Отрицательная индексация при склейке 25:42 Об склеивании ячейки оп вертикали 26:17 Склеиваем ячейки через grid-row 27:20 Ремарка о транспонировании через grid-auo-flow 28:18 О дублировании строк 28:45 Склеиваем сразу и строки и колонки 30:06 Создаю новый проект под grid-template-areas 31:04 Придумываем верстку через зоны (area) 34:05 Создаем разметку под areas 34:48 Верстаем стили с использованием grid-template-areas 36:54 Привязываем разметку к зонам 38:07 Делаю single page верстку 41:15 Обсуждаем проблему адаптивности по ширине 42:25 Создаем файлик под адаптивность на flex 44:15 Применяем flex-wrap 45:53 Применяем   чтобы убрать разрыв строки 46:50 Контролируем расположение flex-блоков на большом экране 48:00 Создаем файлик под адаптивность на grid 49:20 Верстаем адаптивность на grid через repeat, auto-fit и minmax 52:55 Обсуждаем проблему адаптивности по высоте 55:35 Создаем болванку разметки под список товаров 57:33 Добавляем стили под плашку с товаром 01:00:00 Управляем размером экрана 01:01:20 Дублируем продукты и размышляем о лишней инфе 01:01:50 Скрываю описание на маленьком экране через media запросы 01:02:50 Скрываю tags 01:05:09 Убираю лишние отступы (margin) на небольших экранах 01:06:45 Включаю все теги на больших экранах 01:07:00 Выводим заголовок гарантировано без переносов на новую строку в любом разрешении 01:09:47 Создаем файл под bootstrap для адаптивности 01:10:25 Проблемы media запросов 01:11:20 Убираем media запросы 01:11:53 Подключаем bootstrap и вывожу в три колонки через bootstrap 01:13:50 Меняем количество колонок на разных размерах экрана 01:17:40 Управляем отображением элементов на разных размерах экрана 01:20:32 Немного об адаптивности navbar в bootstrap 01:21:35 О разнице между container и container-fluid 01:22:10 Завершение