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 Завершение
Видео Web-программирование (онлайн лекция 1, grid, адаптивная верстка через flex, grid,@media и bootstrap) канала Михаил Каташевцев
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 Завершение
Видео Web-программирование (онлайн лекция 1, grid, адаптивная верстка через flex, grid,@media и bootstrap) канала Михаил Каташевцев
Показать
Комментарии отсутствуют
Информация о видео
Другие видео канала
![Верстка | Копируем шапку pikabu](https://i.ytimg.com/vi/UstkvbUFGxE/default.jpg)
![Основы разработки ПО на Python (лекция 5, функции, создание консольного меню, телеграмм-бот)](https://i.ytimg.com/vi/qxn_GvkxhEY/default.jpg)
![Electron+Vue+TypeOrm разработка десктопного приложения](https://i.ytimg.com/vi/b-QEZL_XtbY/default.jpg)
![WEB-программирование (онлайн лекция 2, основы Vue 3 Composition API)](https://i.ytimg.com/vi/VbmyINE99N0/default.jpg)
![Разработка на python / PySide6 создание линейного графика](https://i.ytimg.com/vi/1ZC5Tq8OrWo/default.jpg)
![Введение во Vue](https://i.ytimg.com/vi/8FT_AK_pwr8/default.jpg)
![Разработка на python / PySide6 гистограмма](https://i.ytimg.com/vi/XlYhJm8U6bc/default.jpg)
![Верстка Figma шаблона на bootstrap 4](https://i.ytimg.com/vi/qSM6wqvwn7U/default.jpg)
![Основы Laravel](https://i.ytimg.com/vi/xgYQyS2tW5c/default.jpg)
![Разработка на python / PySide6 круговая диаграмма](https://i.ytimg.com/vi/mV4jBptFXGY/default.jpg)
![Django для фуллстек разработки, часть 3/3. Работа с Djano Rest Framework](https://i.ytimg.com/vi/w0ELpa1j-d0/default.jpg)
![Рисуем композицию фигур в JavaFX](https://i.ytimg.com/vi/YRCXpTCJV2k/default.jpg)
![Интерактивное множество мандельброта на C#](https://i.ytimg.com/vi/eMSujMjhY0o/default.jpg)
![Разработка на python / PySide6 + Sqlite вывод статистики](https://i.ytimg.com/vi/Yb4WHWO5X6Q/default.jpg)
![WEB-программирование (онлайн лекция 4, использование Eloquent ORM в PHP, работа с API на vue, ч.2)](https://i.ytimg.com/vi/pw2VH6Wd1R8/default.jpg)
![Wordpress: плагины и работа с хостингом](https://i.ytimg.com/vi/CduriVVCcnY/default.jpg)
![Vue 3, работа с vk api, подключение echarts](https://i.ytimg.com/vi/n3LCWjExkD0/default.jpg)
![Разработка на python / PySide6 работа с QTableView](https://i.ytimg.com/vi/99TLYal4lKE/default.jpg)
![Основы работы с MySQL](https://i.ytimg.com/vi/wRaHyWMTlmw/default.jpg)
![Разработка на Python / PySide6 декомпозиция приложения](https://i.ytimg.com/vi/su2Mu5dveh8/default.jpg)