Speaker A
Добрый день, дорогие подписчики! Рад вас приветствовать на новом выпуске проекта "Свой сайт знакомств", где мы, соответственно, в режиме реального времени пытаемся создать свой сайт знакомств.
Создание сайта знакомств: верстка страниц с использованием Bootstrap, HTML и CSS в режиме реального времени.
Key Takeaways
- Использование Bootstrap упрощает создание адаптивной и структурированной верстки.
- Важна правильная настройка отступов и размеров шрифтов для удобства восприятия.
- Кастомизация стандартных стилей Bootstrap позволяет добиться уникального дизайна.
- Адаптация интерфейса под мобильные устройства требует продуманного расположения элементов.
- Интерактивные эффекты, такие как увеличение блока при наведении, повышают привлекательность сайта.
What the video covers
- Автор приветствует подписчиков и начинает работу над сайтом знакомств в реальном времени.
- Обсуждается использование Bootstrap 5 для верстки элементов страницы, включая формы и селекты.
- Демонстрируется создание и стилизация блока с анкетой пользователя, включая имя, возраст и описание.
- Показывается работа с отступами, цветами, шрифтами и радиусами скругления для адаптивного дизайна.
- Автор экспериментирует с заголовками h2-h5 для оптимального размера текста.
- Рассматривается адаптация верстки для мобильных устройств, включая расположение кнопок.
- Поясняется переопределение стандартных стилей Bootstrap для кастомизации элементов.
- Обсуждается добавление интерактивности, например, увеличение блока при наведении мыши.
- Ведется работа с CSS-классами для упрощения поддержки и адаптации дизайна.
- Автор делает акцент на удобстве и визуальной привлекательности интерфейса.
Chapters
- 00:00Введение и обзор проекта
- 01:56Выбор версии Bootstrap и документация
- 04:08Работа с формой и селектом сортировки
- 06:23Настройка отступов и адаптивность
- 11:54Создание блока анкеты: фон, скругления и шрифты
- 16:47Настройка заголовков и текста возраста
- 19:17Корректировка отступов и размеров шрифтов
- 28:14Расположение кнопки и адаптация под мобильные устройства
- 30:19Переопределение стилей Bootstrap и работа с CSS
- 37:17Интерактивность и финальные настройки дизайна
Full Transcript — Download SRT & Markdown
Speaker A
Так что у нас на данный момент есть? У нас есть, получается, свна различных анкет. У нас есть неплохой макет Фима, который мы сегодня попробуем как раз-таки доделать и превратить уже в полноценную вёрстку.
Speaker A
Так, в прошлый раз мы остановились с вами, получается, на фильтрации. Пока мы её оставим и перейдём к следующим блокам.
Speaker A
Так, тут у нас что? А давайте мы сразу с вами откроем, получается, документацию по пятому бутстрапу. Вот и будем заглядывать, какие у нас есть, получается, внутри элементы.
Speaker A
Так, так, так, да выберем, наверное, последнюю [музыка] версию.
Speaker A
Так, если вдруг нам что-то понадобится, а в середине странички что я вижу? Я вижу, а у нас есть сортировка.
Speaker A
Вот давайте мы вот эту сортировку, а сейчас возьмём и разместим. Я так понимаю, в виде сортировки у нас должен быть какой-то селект.
Speaker A
Вот давайте мы пока просто возьмём самый простейший селект и разместим его на страничке в том месте, где у нас должен быть контент.
Speaker A
Так, это у нас форма. Дальше, дальше, дальше идём вниз по вёрстке. Как много мы с вами сделали в прошлом выпуске.
Speaker A
Так, вот контент, соответственно, тут что я сделаю? Я размещу наш селект вот так вот. Давайте побольше строчек пропустим, чтобы визуально хотя бы отличать блоки друг от друга.
Speaker A
Так, файл сохранить, обновляем страничку. Всё, у нас есть тут селект сортировки. Пока оставим его таким. Хотя можно, наверное, перекрасить его.
Speaker A
Вот в такой вот цвет. Так, цвет я сейчас что? Цвет я скопирую и давайте мы ему попробуем задать цвет.
Speaker A
Так, это что? Граунд? Так, цвет у нас не скопировал. Се решёточник. Сортировка, по-моему, без цвета было лучше, поэтому что? Поэтому мы уберём, наверное, этот цвет. Пускай будет стандартная сортировка.
Speaker A
Замечательно, так оставляем. Таким образом главное, чтобы глаза не мозоли. А переходим к следующему блоку.
Speaker A
Отступ получается между сортировкой и первой анкетой сколько? 37 пикселей. Я предлагаю сделать просто 35.
Speaker A
Вот у нас есть уже, соответственно, готовые классы, которые мы используем для отступов. Зачем мы делаем именно такую вёрстку?
Speaker A
Да потому что потом в мобильной версии нам проще эти классы адаптировать, мы их можем скрывать и так далее.
Speaker A
Так, тут у нас что внутри? У нас с вами блок. Какого цвета?
Speaker A
Так, посмотрим, у нас блок получается вот такой вот розовенький. Что я сделаю? Получается, новый div, в нём что мы разместим?
Speaker A
Давайте пока посмотрим по цвету, как он будет выглядеть.
Speaker A
Так, так, задаём фон. Дальше что?
Speaker A
Дальше у нас есть закругление в 10 пикселей. Так, border-radius сколько у нас получился? 10.
Speaker A
А внутри, внутри получается вот имя Маша. У нас посмотрим, какие отступы сверху, а со всех сторон по 30 пикселей должно быть.
Speaker A
Будем использовать динг 30 пикселей, 30 пикселей, 30 пикселей и ещё раз 30 пикселей со всех сторон.
Speaker A
Так, имя человека давайте будем использовать, допустим, h2. Посмотрим, какой он большой или небольшой, и пока сохраним.
Speaker A
Сохраним. Да, Маша очень большой размер получился. Попробуем h3 использовать.
Speaker A
Мы, конечно же, можем, наверное, завести этот класс. Ну хочется вот... Ну вот, как визуально выглядит, слишком здоровый.
Speaker A
Давайте h4 поставим. H4, сохраняем, се обновляем. Вот такое имя мне уже не кажется слишком большим.
Speaker A
Так, переходим дальше. Берём, получается, возраст. Возраст давайте попробуем сделать h5, наверное, чтобы он был ещё меньше.
Speaker A
Либо же мы вообще не будем использовать теги h2-6. Нет, слишком большой шрифт получился, поэтому что?
Speaker A
Давайте попробуем сделать обычным, получается, абзацем или просто жирным. Жирным, б, б, 26 лет.
Speaker A
Так, лучше, наверное, взять, получается, н и уже в заголовке мы его разместим для того, чтобы не было у нас никаких переходов и переносов.
Speaker A
Так, слишком много, слишком крупно получилось. Пос h4 правильно? Да, нам этого не нужно, поэтому что?
Speaker A
Поэтому давайте всё-таки мы сделаем это отдельные классы. Соответственно, внутри этого дива у нас будет уже находиться span.
Speaker A
Смотрим, обновляем страничку. Да, получилось у нас сейчас не того размера, который хотелось бы.
Speaker A
Так, 24 пикселя. Так, получается, используем font. Не, давайте йл дальше. Фонт-сай 24 пикселя бы использоваться.
Speaker A
Так, стиль bold это сколько? Интересно, я не помню. Кхт, по-моему, так прописывается.
Speaker A
Так, 600 укажем. Угу. А предлагаю поступить следующим образом: у нас получается пускай Маша будет выделено жирным, а сам возраст мы жирным не будем выделять.
Speaker A
Потом, конечно же, мы это всё будем оборачивать ссылками и смотреть, как у нас что получилось.
Speaker A
Так, тут у нас что? Тут у нас также div должен быть. Сохраняем, обновляем.
Speaker A
Ну вот, более-менее. Единственное, мне бы хотелось сделать отступ побольше. Сколько? 23? Ну даже не 20, можно 30 вполне пикселей поставить.
Speaker A
Так, стайл. Так, margin-left 30 пикселей. То есть это сдвиг получается слева. Всё более-менее прилично. Может быть, n size поставить уже не 24 как-то, а у нас тут какой размер? Просто 20.
Speaker A
Так, n size 20 сделаем. Слишком много всё-таки. Давайте 25 поставим. 25, 25 пикселей. Всё равно слишком далеко, а в макете выглядит нормально.
Speaker A
Да ну нет, давайте тогда сделаем 20 пикселей просто отступ слева и смотрим, что получается.
Speaker A
Вот так, ещё более-менее. Дальше что?
Speaker A
Дальше у нас должен быть текст, себе текст p. Угу. И соответственно должна быть кнопочка. Кнопочка это у нас... А так-так-так, давайте найдём кнопочки у нас где? В бутстрапе компоненты, вот buttons.
Speaker A
За основу красной кнопки мы возьмём вот эту кнопку danger красного цвета, разместим её мы вот тут. И внутри мы что должны написать? Не "изучить анкету", а "к анкете", так, к анкете смотрим.
Speaker A
Да, кнопка красная, лучше её, конечно, прижать вправо бок. Вот, кстати, опять же, может быть, мы "изучить анкету" попробуем.
Speaker A
Такого мне уже сейчас такое расположение блока не нравится, потому что на мобилке нам опять же что? Придётся делать, нам придется, всё равно, вот эту кнопку спускать вниз.
Speaker A
Так зачем нам её спускать вниз сейчас? Ой, пытаться её прижать вправо, если на мобилке она всё равно уйдёт вниз. И вот тут у нас полный контент с описанием не будет размещён.
Speaker A
Поэтому что? Поэтому кнопку мы оставим внизу.
Speaker A
Так, давайте "изучить анкету" мы оставим. Да, "изучить анкету". Но единственное, нам нужно перекрасить вот этот вот стандартный блок вот в такой вот розовый цвет.
Speaker A
Так, стайл, но при этом сохранить все [музыка]. Ау! Сохранить все стандартные бутстрапы, и тут мы их запороли.
Speaker A
Замечательно, значит что? Давайте сейчас мы перенесём вот наши уже готовые классы в CSS.
Speaker A
Так, так, так. А мы завели специальный файлик для стилей, да, и просто сюда будем дописывать класс общего.
Speaker A
Вот это бло, это у нас что? Давайте его назовём, да? Или, например, женская анкета. Так, название скопирую на всякий случай, сохраняем.
Speaker A
Дальше что? Дальше тут girl. Дальше размер шрифта у нас должен быть обязательно. Ничего не изменилось, ничего не изменилось, значит всё делаем правильно.
Speaker A
Идём дальше. Размер шрифта n size давайте будем использовать. Так, name, лас name будет у нас с вами раз.
Speaker A
Напоминаю, что вообще в будущем это будет, конечно же, ссылка, пока мы просто так делаем.
Speaker A
Возможно, мы будем ссылаться сразу всем блокам, то есть есть такой вариант навигации, когда мы что делаем? Ничего не поменялось.
Speaker A
Когда мы наводим, например, мышкой на блок, и он слегка увеличивается на 5-10%. Вот это очень выглядит здорово и привлекательно. Вполне возможно, мы так и сделаем.
Speaker A
Так, name и сделаем ещё один класс, отвечающий за возраст. Где он? Так, сворачиваем возраст.
Speaker A
Файл сохранить, идём дальше. Возраст, замечательно, блок меня устраивает, как выглядит.
Speaker A
И единственное, что мы сейчас... Давайте вот эту кнопочку Button Danger мы её перекрасим, прописывали и укажем вот такой вот розовенький цвет.
Speaker A
Если нужно будет, мы избавимся от рамочек, которые у нас есть уже. Для чего это делается? Это делается, чтобы сохранить, то есть перезаписать стандартное, получается, стиля бутстрапа.
Speaker A
А вот он вообще не срабатывает.
Speaker A
Так, посмотрим на нашу кнопочку. Почему нельзя оставлять такой яркий?
Speaker A
Ну потому что у нас полностью всё внимание перетягивает вот эта вещь button Danger.
Speaker A
Так, тут сохранились. А может быть, я вот этот файл не пересохранил? Да, всё, вот хоп.
Speaker A
То есть она становится красненькой при наведении, но мне не нравится, что у нас есть, получается, рамочка.
Speaker A
Что мы сделаем? Мы просто border: none для того, чтобы убрать вот эту рамочку вокруг. Всё замечательно, рамочки нету при нав...
Speaker A
рынок пиарить и смотреть что с ней будет дальше по-моему интересно решение Да Единственное что бы я сделал я бы между ними отступ подставил побольше поэтому что поэтому давайте колоночки мы сделаем размером по по внутри просто сделаем пустую колоночные
Speaker A
так раз вот это уже мне нравится это уже приятно более-менее выглядит всё понятно единственно кнопочку я не перекрасил Поэтому у кнопочки мы возьмём что нам нужно вот эту кнопочку взять раз так Смотрим код просто скопирую и вставим вместо
Speaker A
кнопочки так вместо кнопки войти Да мы сделаем Кстати если у вас есть иде созданию своего собственного стартапа напишите мне Мы можем с вами сделать коллаборацию вполне то есть и вы можете пропиарить свой бизнес Да с помощью YouTube канала и готового проекта в
Speaker A
дальнейшем и мне опять же будет контент для моего проекта вот можем Здорово помочь друг другу ниже ниже что у нас есть ниже У нас есть анкеты три анкеты будем их мне уже не нравятся Как выглядят три анкеты давайте
Speaker A
мы это делать не будем мы просто вот этот Нижний блок сейчас реализуем один а остальное продолжим уже наверное на следующих уроках так посмотрим как это ВС выглядит в данный момент ничего не поломалось нет ничего не поломалось Так значит что значит
Speaker A
сверху мы с вами пропустим 35 пикселей как и везде мы пропускали уже вот Сверху Раз дальше что хотя бы один вот такой вот информационный блок с плюсами сделаем чтобы было Так что у нас тут класс так контейнер внутри что а внутри мы уже
Speaker A
соответственно будем указывать так так так Нам же вот такой вот блок нужен на всю ширину будем указывать так дальше Что Дальше первый блок сделаем так так так первый блок у нас Сколько должен быть вот полностью рованный поиск раз отступы сверху тоже похожие Нет не
Speaker A
по 30 пикселей сверху 50 справа вообще 68 Ну давайте сделаем 30 чтобы на мобилке нормально смотрелось снизу также будет 50 и справа так справа также 30 ставил сверху 50 так сверху 50 пикселей справа получается 30 50 пикселей 30
Speaker A
пикселей закрываемся дальше что внутри давайте мы пропишет например потому что это можно взлететь хорошо в поиск вот если использовать все все возможности вёрстки Пусть видит Да что у нас есть персонализированный поиск Блин так посмотрим как у нас блок
Speaker A
внутри выглядит раз а мы забыли цвет указать Ну конечно Граунд не прописали так и вот тут Бордер радиус отступим сколько вот по макету сколько у нас пикселей отступ 65 надо много Я предлагаю пока ограничиться тридцать пятью и допустим у нас с вами будет два
Speaker A
Вот таких вот блоков внутри посмотрим так персонализированный поиск м не попали вёрстку так как это а получилось Мы это потому что не завели а получается новый блок внутри так так так div Давайте класс Call 12 пускай будет раз это вот первый блок у
Speaker A
нас это раз И тут мы сделаем ещё один блок соответственно Когда уже будем размещать картинки внутри Всё у нас должно быть хорошо супер Я думаю на сегодня мы с вами закончим этот выпуск обязательно подписывайтесь на канал ставьте лайки Я
Speaker A
жду вас в сообществе на бусте Если вдруг есть какие-то идеи по доработке этого проекта или по другим проектом У вас есть предложение обязательно напишите мне я всё выслушаю и с вами свяжусь Всё Всем спасибо за внимание увидимся
Topics:BootstrapверсткаHTMLCSSсайт знакомствадаптивный дизайнфронтендвеб-разработкастилизацияинтерактивность
