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 Завершение