**Свой сайт знакомств #3: создаем интерфейс фильтрации на Bootstrap 5 — Transcript & Summary | SozAI**
Source: https://sozai.app/transcript/dating-site-filter-interface-bootstrap5/

Создаем интерфейс фильтрации для сайта знакомств на Bootstrap 5 с нуля, включая меню, стили и адаптивность.

## Key Takeaways

- Bootstrap 5 позволяет быстро создавать адаптивный интерфейс для сайта знакомств.
- Разделение кода на отдельные файлы (header.php, style.php) упрощает поддержку и развитие проекта.
- Использование PHP для подключения стилей помогает избежать проблем с кэшированием.
- Адаптивное меню с мобильной версией — важный элемент удобства пользователя.
- Быстрая реализация прототипа важнее идеальной верстки на начальном этапе.

## What the video covers

- Автор приветствует подписчиков и начинает создание сайта знакомств с использованием Bootstrap 5.
- Создается базовый шаблон страницы с разделением на header, контент и футер.
- Подробно рассматривается создание и настройка навигационного меню (navbar) с адаптивной мобильной версией.
- Обсуждается подключение стилей через PHP-файл для обхода кэширования CSS.
- Вводятся вспомогательные классы для отступов и их настройка по макету.
- Проводится работа с цветами меню и шрифтами для улучшения визуального восприятия.
- Автор планирует быстро создать рабочий прототип сайта для тестирования спроса.
- Обсуждаются технические детали верстки и организация файловой структуры проекта.
- Затрагиваются вопросы функциональности интерфейса фильтрации и удобства использования.
- Видео содержит живую импровизацию и объяснения по ходу работы.

## Chapters

1. 00:00 Введение и план работы над сайтом знакомств
2. 04:07 Создание и настройка навигационного меню
3. 09:17 Подключение стилей через PHP для обхода кэширования
4. 14:24 Настройка отступов и вспомогательных классов
5. 19:03 Работа с колонками и структурой страницы
6. 24:03 Создание форм и элементов фильтрации
7. 34:48 Обсуждение функциональности и удобства интерфейса
8. 44:24 Заключение и планы по дальнейшей доработке

Answers

## Questions about this video

Почему автор использует PHP для подключения CSS вместо обычного CSS-файла?

Автор подключает CSS через PHP-файл, чтобы избежать кэширования стилей браузером, что позволяет быстрее видеть изменения при разработке.

Как обеспечивается адаптивность меню на мобильных устройствах?

Используется встроенный в Bootstrap 5 компонент navbar, который автоматически меняет структуру меню для удобного отображения на мобильных устройствах.

Какие основные части страницы создаются в этом видео?

В видео создаются три основные части страницы: header (шапка с меню), контент (основная часть) и футер (нижняя часть), хотя футер пока не реализован.

## Full Transcript — Download SRT & Markdown

00:02

Speaker A

Добрый день, дорогие подписчики! Рад вас приветствовать на очередной серии проекта "Свой сайт знакомств", где мы с вами в прямом эфире практически пытаемся реализовать собственный сайт знакомств. У нас уже есть, соответственно, макет, и сегодня... Что сегодня мы с вами... вот эти первые три странички сверстать. А на чём будем верстать? А мы будем использовать с вами Bootstrap. У меня уже, соответственно, открыта файловая система хостинга, тут мы будем создавать файлики и придавать, соответственно, нашему макету более реалистичное представление.

00:29

Speaker A

Так, я что сделал? Я уже скопировал, соответственно, базовый код для старта, так Bootstrap пример. Я что создаю? Файлик, давайте index.html, дальше размещаю внутри, сохраняем, всё, обновляем страничку. На тестовом домене у нас написано, значит, всё получилось. Так, с какого блока начнём? Начнём, наверное, мы с вами с самого верхнего блока. Ой, не самого верхнего блока. Ну, условно, страничку мы с вами можем разделить на три части: header, контент и футер. Футера у нас ещё с вами нет, поэтому давайте начнём с хедера.

01:01

Speaker A

Так, поскольку мы с вами ещё не продумали толком структуру сайта, поэтому я хочу посмотреть, какие у нас меню есть в Bootstrap встроенное. Так, так, так, navbar, по-моему, отвечает у нас за менюшку, насколько я помню. Так, так, вот такая менюшка есть.

01:34

Speaker A

Так, что ещё есть? Вот такая менюшка есть тоже, так себе, может быть, такой вариант. Ну давайте посмотрим. То есть, конечно, в идеале бы хотелось что-нибудь адекватное меню, которое бы имело сразу мобильную версию. Вот, вот что-то такое. Да, но у нас такого нет. Будет ли мобильная версия всего этого? [музыка] Добрая скро. Так, смотрим, смотрим, смотрим, пока не вижу нормального меню, которое бы нам подошло. Ну вот это красиво, да, ну хотелось бы сразу получить кодом нормальное меню верхнее, чтобы навигация была максимально простая на сайте, чтобы по крайней мере над этим не заморачиваться, и потом уже... ну вот этот вариант мне в принципе нравится, только что мы и вот отсюда логотип. Так, смотрите, если что, если мы будем с вами... давайте откроем в панели разработчика это всё дело, так, дополнительные инструменты, инструменты разработчика, и посмотрим, наше меню вообще меняет очертание или нет. Оно сжимается? Похоже, что сжимается, да. Поэтому давайте мы с вами продвинутый вариант этого меню, где оно... блин, снова потерял. Вдруг нам придётся какие-то подпункты добавлять, убавлять. Я поэтому весь код полностью копирую. Дальше что? Дальше давайте мы с вами сохраним. Тут я, наверное, index.html переименую сразу в PHP, да, посмотрим, будет ли отображаться. Да, всё точно так же отображается, значит... что значит? Я создаю файлик header, так, header.php, соответственно, куда и размещу наше меню. Так, body, заголовок. У нас тут есть, угу, всё. Так, это будет верхняя менюшка. Скопировали хедер, тут у нас, так, сохранились. Дальше что? Дальше вот тут это можно удалить всё, что я выделял, и просто при помощи функции include подключить наш header.php, так, точка с запятой, закрываем, сохраняем, смотрим, что получилось. Вот у нас такая менюшка есть. О, ЧМ, забыли, забыли обернуть всё в класс контейнер. Давайте каким образом сделаем? Тади класс контейнер. Дальше что? Дальше копируем мы с вами это всё дело, так, так, так, так, так, и вот тут мы наш контейнер, наверное, закроем после всего. Обновляем страничку. Что мы видим? Да, менюшка уже... Мне не нравится в этом меню, что мне не нравится? Цвет. Давайте цвет сделаем такой, как у нас вот он тут, посмотрим, или добавим к уже существующему вот классу что-то. Давайте, пусть будет, вставили наш цвет, который есть, посмотрим. Что-то изменилось? Нет, ничего не изменилось. Хорошо, если так не работает, давайте посмотрим, какой нам стиль нужно изменить, чтобы всё заработало более-менее. Так, background... Почему ты не закрасил ничего? Интересно. Так, контейнер fluid, так, так, так, navbar — это уже не то. Почему ты не закрасил ничего? Navbar, так. То есть вот этот вот класс у нас отвечает. BG body, BG, где он у нас? В общем, вот этот класс отвечает за закрас. А если мы сверху применим так background-color, например, да? Ой, так ещё раз background-color — не то. Ну хорошо, мы поняли, что вот у нас есть... Я снова потерял цвет. Вот он есть. Так, background-color, что-то вот вот он, тот цвет, который у нас есть. Поэтому что? Поэтому мы целиком вот этот код забираем и пока будем размещать его, давайте внизу странички. [музыка] Наверное, да. Сразу что мы сделаем? Сразу мы создадим файлик style.php, и потом у нас этот файлик превратится, соответственно, в style.css. Почему мы так делаем? Для того чтобы избежать кэширования, потому что CSS-файлики постоянно кэшируются, а нам это не нужно в данный момент никакого кэширования. Поэтому так, обновляем страничку. Нет, ты не закрасил. А я же не подключил его, конечно. Так, ну и вот наш вот этот style.php мы подключим в самом конце страницы. Давайте в индексе где-нибудь перед закрытием тега body, так, посмотрим, получилось перекрасить. Так, не получилось перекрасить. Почему? Потому что я не обернул style. Да, сохраняем, се, обновляем, смотрим, тоже не получилось. Что не так? Ещё раз смотрим background-color. Да, я же его использовал. Раз, цвет какой? Цвет мне вот этот именно нужен. Вот он. Два, я его разместил, тут всё равно не работает. Интересно. Где вот мы его взяли? Откуда он взялся? Такой цвет? Так, смотрим. Нет, не collapse, BG, C3. Давайте сделаем такой класс, раз, сохранить, и в хедере его пропишем вот сюда вот. Если он не перекрасит сверху, то будем удалять тогда тот стиль. Да, мы его [музыка] удаляем, сохраняем, обновляем. Всё, у нас есть этот цвет. Дальше что у нас? Соответственно, верхняя менюшка, шрифты внутри были какого цвета? Белого. Поэтому давайте мы соответственно попытаемся тут и прописать наши менюшки шрифты белого цвета. Я, конечно, сомневаюсь, что это таким образом у нас всё отработает, но попробовать же стоит. Что? Да, конечно, не отрабатывает. Так, хорошо, менюшку вот, правда, да, у нас пока не готова структура сайта. Давайте мы менюшку оставим таким образом пока. Дальше что? Дальше... А как я всегда делаю? Мне нужны вспомогательные классы для расстановки отступов. Давайте им дадим следующий нейминг: например, r5 — это будет отступ в 5 пикселей, 5 пикселей. Дальше r10 — соответственно, 10 пикселей, и так далее. Макет ещё будем, скорее всего, перерисовывать. Я что хочу? Я сейчас хочу получить максимально быстро, короткие сроки, работающий проект, чтобы соответственно его выложить уже в сеть и посмотреть спрос. Потом мы уже будем доводить, соответственно, до ума то, что у нас получится. А для этого что? А для этого на данном этапе нужно писать очень много кода и делать это. Поэтому какие-то моменты я буду упускать где-то умышленно, где-то случайно. Давайте отступ. Так, отступ сверху. Сколько пикселей у нас был? 40. 40 пикселей я сделал? Нет, такой класс g со нету, как раз сейчас сделаем. Так, ну давайте 40 пикселей сверху, 40 пикселей снизу, сохраняем. Так, всё бы по закрывать, конечно, да, все окошки, которые были открыты. Так, r дальше идём. Тут у нас что? 40 пикселей сверху, 40 на мобилке можно будет и уменьшать соответственно вот это вот, вот эти все значения. Так, сохраняем, обновляем страничку. Да, отступы получились. Почему они такие большие? В макете не так. Отвратительно выглядит. Ладно. Так, до менюшки. С какой отступ у нас тут? Уже 20, то есть сверху 40, снизу пускай будет. Посмотрим. Да, ну более-менее хорошо. Мобильная версия будет у этой менюшки? Так, да, у этой менюшки есть мобильная версия. Что замечательно! Это значит, что нам над этим заморачиваться не придётся. Просто когда определимся, какие у нас будут пункты, мы везде сделаем белый цвет. Хотя может быть сейчас сделаем белый цвет. Это что у нас? Это у нас navbar bn? Да, хотя бренд у нас будет сверху. Давайте сразу... Ладно, перекрасил цвет navbar bn. Что мы тут пропишем? col. Да, сохраняем, обновляем, смотрим, изменился у нас что? Какой класс? Это у нас класс... Так, так, так, так, link. Вот мы его прямо забираем тоже в белый цвет красим. Потом нам же проще будет, если некое подобие менюшки уже будет. Нам же проще с этим справиться. Да, дальше вот эту штуку. Так, у неё какой класс? Её так просто класс на флин. Так, смотрим, получилось перекрасить, получилось перекрасить. И последняя ссылка. Она какая у нас? Так, ну то, что при нажатии он чёрным становится — это хорошо. Так, последнее недействительное давайте такое оставим. Пои.

01:52

Speaker A

так поскольку мы с вами ещё не продумали толком структуру сайта поэтому я хочу посмотреть какие у нас меню есть в бутстрапе встроенное так так так на бар по-моему отвечает у нас за менюшку насколько я помню так так вот такая менюшка

02:14

Speaker A

есть Так что ещё есть вот такая менюшка есть тоже так себе может быть такой вариант Ну давайте посмотрим то есть конечно в идеале бы хотело вть нибудь адекватное меню которое бы имело сразу мобильную версию Вот вот что-то такое Да но у нас такого

02:44

Speaker A

нету Будет ли мобильная версию всего этого [музыка] добра скро так Смотрим смотрим смотрим пока не вижу нормального меню которое бы нам подошло Ну вот это красиво да ну хотелось бы сразу получить кодом нормальное меню Верхнее чтобы навигация была максимально

03:16

Speaker A

простая на сайте чтобы по крайней мере над этим не заморачиваться и потом уже ну вот этот вариант мне в принципе нравится только что мы и вот отсюда логотип так смотрите если что если мы будем с вами Давайте откроем

03:38

Speaker A

в панели разработчика это всё дело так дополнительные инструменты инструменты разработчика и посмотрим наше меню вообще меняет очертание или нет оно сжимается Похоже что сжимается да поэтому давайте мы Свами продвинутый вариант этого меню где оно блин снова потерял Вдруг нам

04:07

Speaker A

придётся какие-то подпункты добавлять убавлять Я поэтому весь код полностью копирую дальше Что Дальше давайте мы с вами сохранить тут я наверно индекс HTML переименую сразу в PHP Да посмотрим Будет ли отображаться Да всё точно так же отображается значит

04:35

Speaker A

что значит Я создаю Файлик header так header.php соответственно куда и размещу наше меню так Body заголовок У нас тут есть Угу всё так это будет Верхняя менюшка скопировали хедер тут у нас так сохранились Дальше что дальше Вот тут

05:24

Speaker A

э это можно удалить всё что я выделял и просто При помощи функции include подключить наш Р header.php так точка запятая закрываем сохраняем смотрим что получилось вот у нас такая менюшка есть о ЧМ забыли забыли обернуть всё в класс

06:02

Speaker A

контейнер Давайте Каким образом сделаем тади класс контейнер дальше Что Дальше копируем мы с вами это всё дело так так так так так и вот тут мы наш контейнер наверное закроем после всего обновляем страничку что мы видим да менюшка ужа Мне не

06:29

Speaker A

нравится в этом меню что мне не нравится цвет Давайте цвет сделаем такой как у нас вот он тут посмотрим или добавим к уже существующему вот классу что-то Давайте йл пускай будет вставили наш цвет который есть посмотрим что-то изменилось

07:00

Speaker A

нет ничего не изменилось Хорошо если так не работает Давайте посмотрим какой нам стиль нужно изменить чтобы всё заработало более-менее так Граунд Почему ты не закрасил ничего Интересно так контейнер флюид так так так навбар это уже не то Почему ты не закрасил ничего

07:37

Speaker A

навбар так то есть вот этот вот класс у нас отвечает BG Body БГ где он у нас в общем вот этот класс отвечает за закрас А если мы сверху применим так background Color например да Ой так ещё раз background

08:07

Speaker A

Color не то Ну хорошо мы поняли что вот у нас есть я снова потерял цвет Вот он есть Так background Color что то вот вот он тот цвет который у нас есть Поэтому что поэтому мы целиком вот этот код

08:39

Speaker A

забираем и пока будем размещать его Давайте внизу странички [музыка] наверное да сразу что мы сделаем сразу мы создадим Файлик Style PHP и потом у нас этот Файлик превратится соответственно фай Style то CSS Почему мы так делаем для того чтобы

09:17

Speaker A

избежать кэширования потому что CSS файлики постоянно кэшируется а нам это не нужно в данный момент никакого кэширования поэтому так обновляем страничку Нет ты не закрасил А я же не подключил его конечно так Ну и вот наш вот этот Style PHP мы

09:43

Speaker A

подключим в самом конце страницы Давайте в индексе где-нибудь перед закрытием тега Бади так посмотрим получилось перекрасить так не получилось перекрасить Почему Потому что я не обернул стай Да сохраняем се обновляем смотрим тоже не получилось что не так ещё раз

10:35

Speaker A

смотрим background Color Да я же его использовал раз цвет какой цвет мне вот этот именно нужен вот он два я его разместил тут всё равно не работает интересно где вот мы его взяли откуда он взялся Такой цвет так Смотрим

11:20

Speaker A

Нет не коллапс БГ СЗ давайте сделаем такой класс раз сохранить и в хедере его пропишет вот сюда вот если он не перекрасить сверху то будем удалять тогда тот стиль Да мы его [музыка] удаляем сохраняем обновляем Всё у нас есть этот цвет дальше что у

12:03

Speaker A

нас соответственно Верхняя менюшка шрифты внутри были Какого цвета белого поэтому что поэтому давайте мы соответственно попытаемся тут и прописать наши менюшки шрифты белого цвета я конечно сомневаюсь что это таким образом у нас всё отработает но но попробовать же

12:32

Speaker A

стоит что Да конечно Не отрабатывает так хорошо менюшку Вот правда да у нас пока не готова структура сайта давайте мы менюшку оставим таким образом пока Дальше что дальше А как я всегда делаю Мне нужны вспомогательные классы для расстановки

12:57

Speaker A

отступов Давайте им дадим следующий нейминг например R5 - это будет отступ в 5 пикселей 5 пикселей дальше r10 соответственно 10 пикселей и так далее макет ещё будем Скорее всего перерисовывать я что хочу я сейчас хочу получить максимально быстро

13:29

Speaker A

Короткие сроки работающий проект чтобы соответственно его выложить уже в сеть и посмотреть спрос потом мы уже будем доводить соответственно До ума м то что у нас получится а для этого что а для этого э На данном этапе нужно писать очень много

13:56

Speaker A

кода и делать это поэтому какие-то моменты я буду упускать где-то умышленно где-то случайно давайте отступ так отступ сверху Сколько пикселей у нас был 40 40 пикселей я сделал нет такой класс г со нету как раз Сейчас сделаем так Ну

14:24

Speaker A

давайте 40 пикселей сверху 40 пикселе сниу сохраняем так всё бы по закрывать конечно да все окошки которые были открыты так р дальше идём тут у нас что 40 пикселей сверху 40 на мобилке можно будет и уменьшать соответственно вот это вот вот эти все

15:08

Speaker A

значения так сохраняем обновляем страничку да отступы получились Почему они такие большие в макете не так отвратительно выглядит ладно так до менюшки С какой отступ у нас тут уже 20 то есть сверху 40 снизу пускай будет посмотрим да Ну более-менее хорошо

15:35

Speaker A

мобильная версия будет у этой менюшки так да у этой менюшки есть мобильная версия Что замечательно Это значит что нам над этим заморачиваться не придётся просто когда определимся какие у нас будут пункты Мы везде сделаем белый цвет Хотя может быть сейчас сделаем белый

15:57

Speaker A

цвет это что у нас это у нас навбар БН Да хотя Бренд у нас будет сверху Давайте сразу Ладно перекрасил цвет навбар БН что мы тут пропиши col Да сохраняем обновляем смотрим изменился у нас что какой класс Это у нас класс так так

16:35

Speaker A

так так Link вот мы его прямо забираем тоже в белый цвет красим потом нам же проще будет если некое подобие менюшки уже будет нам же проще с этим справиться Да дальше вот эту штуку так у неё какой класс её так просто класс на

17:17

Speaker A

флин так Смотрим получилось перекрасить получилось перекрасить и последняя ссылка Она какая у нас так Ну то что при нажатии он чёрным становится Это хорошо так последнее недействительное Давайте такое оставим поиск нам тут нужен поиск нам наверное не нужен хорошо замечательно допустим

17:42

Speaker A

Верхняя менюшка готова закруглений тем более никаких не было дальше Что Дальше давайте мы с вами а перейдём сразу э к странице поиска потому что с главной тоже непонятно какие у нас там блоки будут хотелось бы сейчас начать что

18:03

Speaker A

начать получается с главной страницы Ой не с главной страницы со страницы поиска и определиться какие у нас с Вами будут фильтры для того чтобы Возможно даже сделать какую-то предварительную регистрацию по инвайта вот среди вас подписчиков среди знакомых Да

18:25

Speaker A

чтобы люди зарегистрировались оставили свои пом уже эти данные смогли [музыка] обработать Вот и начать соответственно работу уже самим самим кодин внутренней части так после хедера давайте сделаем отступ также 20 пикселей ВС замечательно и дальше идм фали вот он тут так 20 пикселей есть сверху я

19:03

Speaker A

тут контейнер закрыл так контейнер страпо ский дальше что нам нашу область нужно разделить на сколько колонок так Смотрим по макету Ну условно говоря если у нас вмещает ширину 12 колонок то это может быть три колонки это 6 и это тоже три Давайте Таким

19:37

Speaker A

образом мы соответственно и разделим нашу рабочую область на такие части Так так я правильно сказал сначала у нас идёт получается с дальше колонок сть колонок и ещё раз три мобилку пока не делаем хочу начать с десктопа А там

20:17

Speaker A

посмотрим так ну напишем что фильтры Да фильтры [музыка] и тут у нас будет в третьей части реклама кстати проект Я скорее всего буду разворачивать на базе своего старого сайта который не оправдал надежд то есть сайт был про психологию про взаимоотношения

20:59

Speaker A

так далее То есть это был статейный сайт но я смотрю по статистике он в общем ведёт себе неважно но он уже прошёл модерацию в рекламной сети Яндекса и то есть мы на этом домене развернув сайт знакомств что сможем

21:19

Speaker A

сделать мы сможем быстро посмотреть вообще реально ли заработать на сайте знакомств Вот в данный момент Ну и вы соответственно узнаете Имеет ли смысл заниматься разработкой вот такого сайта так уже после запуска соответственно так так так нам что нам

21:45

Speaker A

вот эту колонку надо бы ну давайте внутри сделаем ещё один мы соответственно его раскрасим в какой цвет так background пока пишу сюда э все так все стили да и борр по-моему у нас какой так борр радиус сколько 10

22:23

Speaker A

пикселей Да внутри соответственно слово фильтры посмотрим как оно как этот блок будет выглядеть живьём если прилично оставляем Ну да он выглядит в принципе нормально по отступа что у нас сверху по отступом так 36 Ну допустим да давайте сделаем таким

22:54

Speaker A

образом 36 30 А 36 и 30 динг прописываю так 36 сверху справа 30 снизу 36 и слева 30 тоже всё в пикселях прописывается так сохраняем обновляем в принципе выглядит прилично неплохо так Я же говорил про фильтры у нас что у

23:38

Speaker A

нас вот есть такая фильтрация поэтому давайте я таким образом скопирую вот этот вот текст Это что это у нас может быть фильтры либо H2 Да потому что заголовок H1 занят пробуем H2 совсем будет выглядеть плохо или хорошо Ой это слишком крупно Не

24:03

Speaker A

давайте оставим просто обычным получается оберн в тег абзац сохраняем обновляем да да нормально может быть потом чуть пожирнее сделаем так так так нет не то я делаю так вот взять Вот место и из вот этого текста сделать формочку можно скорее всего даже

24:41

Speaker A

раскрыть вот на всю катушку его да давайте раскроем так местоположения сначала просто накида с вами блоки которые могут быть так в бутстрапе есть отдельный раздел для форм где он тут вот формы Так э выбор города - это однозначный

25:09

Speaker A

сект давайте я его просто забираю пока код так местоположение а так назовём местоположение Ну а что нормально местоположение раз всё первый блок у нас Ой в общем первая ячейка для фильтрации У нас есть местоположение замечательно человек выберет местоположение дальше что

25:40

Speaker A

возраст возраст В каком формате нам хранить возраст Давайте подумаем может быть Вот такой вот Рейн использовать было бы здорово Да мы же можем его использовать Min ма Ага вот мне нравится Всё мы его будем использовать это выключены и это у нас

26:12

Speaker A

Что это у нас просто возраст для того чтобы указывать диапазоны Да ну главное чтобы визуально было красиво всё это работало понятно что мы наверное [музыка] будем с каким-то округлением искать это всё дело то есть потом когда мы параметры

26:37

Speaker A

получим Давайте назовём возраст значит Да так возраст возраст конечно же от вона И до скольки у нас будет возраст у нас с вами будет до сколько люди живут обычно Ну давайте укажем 99 Я надеюсь Вот кто постарше уже не будет На

27:12

Speaker A

нашем сайте регистрироваться Хотя это наверняка интересный экспириенс был бы если бы у нас люди очень взрослые заходили мы сделаем для формочки посмотрим так возраст раз всё готово а соответственно что мы сделаем мы снизу прикрути вот всё это дело так пол пол

27:42

Speaker A

однозначно это у нас напоминает наверное радио кнопку радио кнопку то есть не э невозможность выбора сразу нескольких вариантов а вот такую штуку то есть радиокнопка замечательно так так-так-так пол мужской мужской и женский у нас ниже будет женский пол мужской

28:36

Speaker A

женский замечательно так также сделаем отступ 10 пикселей между блоками пол готов современные вот эти веяния мы не будем использовать потому что что ну потому что не хочется Вот правда хочется сделать нормальный сайт Возможно даже семейный который будет помогать

29:03

Speaker A

людям э находить свои половинки а не просто чтобы вот сайт непонятно для чего так галочки галочки Давайте подумаем нам что нужно нам нужно получается найти сейчас такую галочку которая бы ставилась вот может быть такой свич переключение сделать да давайте сделаем

29:37

Speaker A

свич или вот такой дефолт может быть галочку нет детей поставить Давайте попробуем вариант с галочкой посмотрим так не детей назовём так сохраняем смотрим нет детей поставили галочку дальше образование образование это у нас однозначно должен быть опять У нас есть Т так снова снова снова идём

30:31

Speaker A

в S А вот смотрите есть ещё такой вариант то есть допустим выбор нескольких вариантов может быть Вот такой поставить для детей Давайте вот такой вариант сделаем выглядит очень интересно да Ну или просто галочку нет детей кому-то же это

31:09

Speaker A

важно Ну так три и больше Ну опять же Давайте подумаем так вот Вот этот мы будем использовать вот эту переключал мы будем использовать получается с вами для образования так образование А я там делал пометку так образование среднее средняя средняя общая у нас есть и есть

31:57

Speaker A

средняя ональное может быть полное его назвать Давайте полная а или средняя выше и вариант нет среднее полная давайте так среднее си ональное и выше Почему я хотел бы сначала сделать так среднее среднее профессионально может быть Какой вариант может быть сделать вариант нет допустим

32:54

Speaker A

образования нет средне профессионально сред и выше сделаем вот такой вариант почему у нас только высшее Не отрабатывает Ну там специальный класс есть какой-то да образования нет среднее выше тоже да не подходит немножко Почему начинаем с формы потому что в ближайшее

33:25

Speaker A

время нужно будет за ы данных и мне опять же непонятно В каком виде эти данные хранить поэтому что поэтому мы с вами сначала спроектируем формочку а потом уже из этой формы у нас появится картина Какие данные вообще нам нужны какие не нужны

33:51

Speaker A

вот я сейчас думаю вот образование вот оно Нам нужен этот пункт Я думаю все люди которые Ну регистрируются на сайтах Они наверное с образованием может быть средняя выше таким образом просто такую мы фильтрацию поставим средняя выше Хотя опять же Зачем нам вот это

34:18

Speaker A

когда мы могли бы использовать тот же сект непонятно Так давайте сделаем пункт образования и соответственно тут уже Мы с вами распишем всё то есть Нам же не образование и тут воспользуемся подсказками то есть понятно что хочется сделать конечно

34:48

Speaker A

а максимально красивую форму но но всё-таки у неё должно должна быть функциональность то есть ей удобно должно пользоваться всё должно быть понятно И вот за красотой За разнообразием фильтров нам гнаться абсолютно не нужно Ну и последняя выше Мы кстати Можем потом ещё добавить и

35:22

Speaker A

другие пункты образование может быть кто-то хохочет познакомиться с магистрантам Ну вдруг есть такие любители магистрантов Почему бы и нет так образование прописали или с доктором наук так религиозные убеждения замечательно это тоже будет Селект потому что их очень много нам

35:51

Speaker A

помните чат гпт в прошлом выпуске выдал прям очень много вариантов Я наверное сейчас все вот эти их скопирую и просто размещу внутри селекта вот восемь вариантов так так так да А вот же о у меня есть это всё у меня есть это всё

36:16

Speaker A

ниже так и назовём мы пункт соответственно религиозное убеждение отступ тут должен быть также 10 мне начинает казаться что сайты знакомств умышленно вот этого всего избегают Почему Потому что потому что многие люди могут отказаться указывать эти данные либо же

37:01

Speaker A

аудитория сайтов знакомств не такая большая чтобы позволить себе ещё кого-то фильтровать то есть ну не просто так же вот в условном тиндере было была такая механика как пролистывание карточек то есть понимаете там вероятность найти своего человека вообще крайне минималь

37:28

Speaker A

можно идти на улицу и и просто вот пытаться познакомиться со всеми Ну вот с каждым проходящим так буддизм и идём дальше и есть ещё получается два пункта так на велью пока мы не обращаем внимания никакого так буддизм шаманизм и что у нас

38:02

Speaker A

ещё индуизм надо ещё добавить пункт что у человека нет религии Ну это видимо потом да потом Мы это сделаем Да так хорошо так тип отношений дружба так Дружба давайте сделаем встреча брак например вот таким вот образом Да так тип

38:52

Speaker A

отношений тип отношения вот тут вот уже нам понадобится кнопка так чек радиус смотрим смотрим смотрим смотрим такой вариант был уже так вот в одной линии может быть сделать Давайте попробуем в одной линии То есть я беру просто так вот так вот копирую то

39:26

Speaker A

есть фо е мы ум Так подождите Вот пока говорил забыл на каким над каким пунктом мы с вами сейчас работаем тип отношений тип отношений Возможен ли вариант выбор нескольких вариантов вот вопрос да Ну давайте сделаем выбор У нас есть вообще множественный выбор

40:01

Speaker A

где-то ещё вот множественный выбор я бы наверное поставил на языки Ну с какой целью идёт человек на сайт знакомств наверное с какой-то определённой или множественный выбор оставить Так давайте подумаем хорошо Нет вот мы оставим так чек замечательно самую первую форму так

40:28

Speaker A

назовём е тип отношений дальше Что Дальше У нас тут первый пункт Дружба пускай будет Дружба дальше романтические отношения и пунктов на самом деле может быть невероятное количество брак последний пун на страницу то есть мы сейчас посмотрим возможно какие-то вещи мы с Вами

41:04

Speaker A

уберём потому что если у нас фильтр не будет влазить на страницу это будет печаль так Хотя с другой стороны Ну наверх человек пролис ничего страшного в этом нету да так образование хоп хоп Почему два образования получилось так ещё раз обновляем

41:33

Speaker A

страничку обновились у нас два почему-то пункта образования Неужели я не заменил образование и образование два раза один раз нам достаточно образование будет образование среднее выбираем дальше тип отношений Следующий пункт дальше внешность вот внешность самая наверное спорное такое то есть нам что

42:10

Speaker A

нам чат гбт набросал вариант Рост вес цвет волос и глаз Давайте подумаем что это может быть какую механику такую выдать Чтобы вс было так тип отношений есть дальше наверное пункт внешность Да мы его как-то вот жирным даже можем сделать

42:36

Speaker A

либо будет открываться ещё один вариант то есть ещё какая-то дополнительная формочка как фильтр на внешность Да так цвет волос цвет глаз Наверное ограничимся мы просто ростом Потому что если ещё люди будут указывать цвет глаз ну рост и вес

43:06

Speaker A

наверное Хотя опять же Ну вот рост обязательно нужно сделать вес может быть тоже Давайте рост и вес сделаем два пункта по поводу цвета волос и цвета глаз Ну это как-то странно на самом деле Так давайте так Посмотрим может быть я какие-то пункты

43:43

Speaker A

пропускаю опять же так М Control дальше что у нас тут есть Так Большое спасибо моим подписчикам на бусте есть делать новый контент У нас есть специальный чат куда вы можете писать идеи можете мне написать личным сообщением предложить новую тему для

44:15

Speaker A

ролика В общем большое спасибо что вы есть и наверное без вас свежих выпусков не выходило бы так идм дальше что у на ту Гру Да смотрим пам-пам-пам Нет давайте ренж наверное снова Да Range Это что это вот как раз-таки

44:44

Speaker A

показатели веса веса и роста Ma and Min опять вот эта механика сомнительно может быть просто диапазона указать Ну хорошо давайте вот сделаем таким образом внешность это у нас будет первым рост рост минимальный рост человека допустим 40 кг максимальный Ой нет это рост рост

45:22

Speaker A

какой Давайте полтора сделаем 150 и максимальное значение какое будет у нас с вами и максимальное Давайте э 210 рост и вес следом вес должен быть вес вес минимальный вес наверное 40 кг Вот кстати Нужно будет посмотреть по критериям Здорово Так ну и вес наверное

45:55

Speaker A

150 думаю если люди будут больше в принципе мы будем округлять Да каким-то образом нужно будет придумать Вот это округление то есть грубо говоря Если у человека разница вот с тем весом в которые указан вот тут в фильтре допустим 5-10 кг мы всё равно этого

46:22

Speaker A

человека будем показывать Да потому что без этого будет крайне тяжело вообще обеспечить какую-то нормальную сортировку так уровень дохода тоже сомнительная сомнительный пункт так уровень дохода он нужен ли на этом сайте Хотя это важный фактор Давайте уровень дохода также

46:55

Speaker A

сделаем плашкой вот такой вот пока Да я не думаю что люди будут писать свой уровень дохода нет уровень дохода Мы уберём вообще так профессия и карьера профессия и Карьера - это что это наверное сфера где может работать человек М Вот давайте мы сделаем

47:24

Speaker A

множественный фильтр нам он нужен множественный однозначно Так где же где же где же вот вот в одну линию Да вот и пригодился вот он или так вот Не давайте вот таким образом чтобы можно было выбирать сразу несколько критериев прое

47:57

Speaker A

количество СГУ запросов нам придётся прописать Какая должна быть мощная структура у базы данных Да так профессии карьера и карьера Возможно мы даже сегодня не успеем закончить вот всю эту вёрстку карьера потому что правда если мы это всё реализуем это

48:29

Speaker A

будет круто так профессия карьера какой там список у нас был у нас был список профессии карьер А ну вот они вот они есть но правда у меня вызывают сомнения некоторые пункты поэтому Давайте профессии карьера мы оставим пока виде 1 2 3 4 и так далее

48:54

Speaker A

так языки пользователь Я предлагаю давайте или вот также множественно выбора оставим языки хорошо языки вдруг кому-то нужен партнёр допустим со знанием английского может быть тако может быть Ну пока языки так оставим так курение и употребление алкоголя тут я думаю однозначный выбор должен

49:30

Speaker A

быть то есть галочка однозначная Да не Курт не пьёт Допустим мы её ставим если м вот мы Switch будем использовать вот такой вот красивый свич переключатель так так не курят Курт так не пьёт так курение это наверное да будет

50:21

Speaker A

отдельный пункт опять же Да мощно количество S запросов просто правда уже страшно уже страшно но опять же если получится Этот проект довести до конца и в одиночку его сделать А ещё и записать из этого серию видео да по которому вы сможете

50:53

Speaker A

повторить это ВС я думаю будет круто домашне животные оставляем посмотрим сколько у нас вообще уже там появилось пунктов Ой как много пунктов мы не влезаю на страницу вопрос опять же как не курит не пьёт у нас стоит дальше

51:18

Speaker A

возраст Да нет детей галочка так образование релиз тип отношений смотрим внешность рост вес не подписали так профессии и карьера Наверное нужно будет сделать селекто языки тоже домашнее животное стиль жизни интересные пункты ну как их реализовать кто объективно может оценить

51:53

Speaker A

свой стиль жизни ли делать хобби тоже непонятно а хорошо давайте пока ограничимся вот этими фильтрами А вот которые уже есть походу мы ещё будем дорабатывать это всё дело но пока вот такие раз я кстати Жду от вас комментарии

52:19

Speaker A

А может быть я действительно упускаю какой-то важный момент да поэтому мы пока за комментируем эту форму вот этот вариант да Так что-то может быть у вас есть предложение своё видение как бы мог выглядеть Этот проект Да я с удовольствием всё прочитаю

52:43

Speaker A

ваше мнение послушаю Да ну интересная форма уже так профессию карьеру мы заполним внешность А так первое получается рост вес Давайте где это у нас всё-таки Мы сверху напишем так так так так где у нас рост и вес рост вес Почему вес не отобразил

53:13

Speaker A

внешность уберём тогда сохраняем се обновляем страничку рост А где вес Почему веса нету а сломался сломался У нас этот лейл вот даже в таком виде в принципе у нас с вами фильтрация лучше чем на многих сайтах знакомств да А если мы е раздел животными добавим

53:56

Speaker A

это вообще огонь так Hello world Давайте заменим на сайт знакомств всё-таки чтобы у нас более-менее прилично Да выглядела какая-то законченность была но опять же я говорю я не знаю пока какие разделы сделать на сайте пока идеи нету что Какую информацию Мы можем выдать

54:22

Speaker A

пользователю кроме фильтрации может быть статьи какие-то може б Может быть но пока ступор а сайт нужно делать контент нужно делать Поэтому вот буквально на ходу с вами сейчас сижу импровизирую так я в случайно прописал о конечно же ня еся

Topics: Bootstrap 5 сайт знакомств верстка адаптивный дизайн PHP навигационное меню фильтрация веб-разработка интерфейс CSS кэширование


---
This is the markdown twin of https://sozai.app/transcript/dating-site-filter-interface-bootstrap5/ — the same content, without the markup.
Published by SozAI (https://sozai.app). Reuse and quotation are allowed with attribution and a link back.
Machine-readable index: https://sozai.app/llms.txt · data API: https://sozai.app/api/