#4 Верстка сайта для начинающих

No video

#4 Верстка сайта для начинающих | Всплывающие окна

Рет қаралды 6,254

Күн бұрын

Верстаем макет сайта (лендинга) из Photoshop. Видео для начинающих, практика верстки. В уроке сверстаем всплывающие окна.
/* Материалы урока */
Код: github.com/Dmi...
Макет: drive.google.c...
/* Команды урока */
Запуск browser-sync: browser-sync start --server --files "**/*" --no-notify
Меня зовут Дмитрий Бердников, я веб-разработчик. На этом канале буду делиться знаниями по веб-разработке.
/* Соц. сети */
Мой ВК - berdnik...
♫Music By♫
●Kronicle - Another Chill Day
●Soundcloud - / the-chemist-10
#обучение #верстка

Пікірлер: 52

@user-up6es3nr6s 4 жыл бұрын

Таймкоды: 0:28 Разбираем popup-menu 2:48 Разбираем проблему попапов 4:28 Решение проблемы попапов 7:35 Верстаем popup-menu 9:52 Стили для popup-menu 10:35 Стили для btn-close 15:10 Стили для mobile-menu 26:20 Разбираем popup-order 26:50 Верстаем popup-order 34:50 Стили для popup-order 44:12 Верстаем popup-thanks 46:24 Верстаем popup-error

@x-bit5193 3 жыл бұрын

Спасибо, за топ контент. Очень нравиться твой подход к видосам. Заранее готовишься, заморачиваешься над обложками и т.д. Это многого стоит. Успехов и удачи!

@h3ckphy246 3 жыл бұрын

Я нашел решение для твоего первого попапа: Cтавим в .popup display: flex как ты делал, а самому .popup__content ставим margin: auto. Обязательно должно быть overflow: auto у .popup, иначе обрежется нижняя часть.

@irin_Kom 2 жыл бұрын

а вы не могли бы объяснить, почему margin: auto решает проблему?)

@h3ckphy246 2 жыл бұрын

@@irin_Kom честно говоря, даже не знаю) Уже не помню, что там в видео было)

@irin_Kom 2 жыл бұрын

@@h3ckphy246 там popup уплывал за верхнюю границу экрана в случае, когда высота экрана оказывалась меньше высота popup (2:49-3:26) и это, как оказалось, фиксится с помощью margin: auto. Если вдруг сможете объяснить почему - буду очень благодарна) Как я поняла, align-items: center как раз смещает блок за экран, потому что центрирует его, а как работает margin: auto в этих условиях догнать не могу) Отдаёт приоритет top и left в условиях недостатка пространства?

@h3ckphy246 2 жыл бұрын

@@irin_Kom я сам не знаю) я просто часто использую margin с флексами и попробовал такую комбинацию) Но есть предположение. Думаю, вы правы, что при align center элемент просто центрируется так, что его центр всегда прикреплен к центру родителя. Наверное, это похоже на центрирование с position absolute (надо попробовать и сравнить). А при margin элемент просто отталкивается со всех сторон одинаково. И когда места недостаточно он не выходит за границы родителя сверху, только снизу, т.к. у нас все всегда начинает позиционироваться с левого верхнего угла. Повторяюсь, это только предположение, я не гуру верстки и так глубоко не копаю) Я бы посоветовал вам задать вопрос на habr qna или stackoverflow, если так интересно)

@h3ckphy246 2 жыл бұрын

@@irin_Kom а, вы, вроде, тоже такое предположение сделали. Про top и left не сразу понял)

@Techno_AI_Digest 3 жыл бұрын

Лучший, просто лучший

@dudai525 4 жыл бұрын

Спасибо за видос

@radimirbond8994 4 жыл бұрын

я не знал про Ctrl+D Спасибо!

@user-dg4hd4en2c 4 жыл бұрын

👍👍👍👍👍👍👍

@Alexus1504 3 жыл бұрын

Да, круто верстаешь!!!

@MaksssHome 3 жыл бұрын

Привет! Дмитрий, подскажи пожалуйста зачем делается обертка на 4:38 inner, wrapper, это тоже самое что и контейнер? Где можно об этом почитать поподробнее, не пойму никак зачем делает обертки и что это вообще такое, благодарю

@user-up6es3nr6s 3 жыл бұрын

Привет! Можно сказать, что это типо контейнера. Обертки (контейнеры) нужно, чтобы как-то ограничить контент, отцентровать его и тд. То есть дать какие-то стили блоку, в котором уже будет контент. Сам попап, просто так реализовал, так как много способов пробовал. И где-то скролл не работал, где-то центровка. Поэтому пришлось так создавать. По-любому есть и другие решения. Главное понять, здесь нету правильного решения, есть оптимальное. Если интересно, попробуй сам реализовать попап, почитай статьи. Протестируй разные версии. В моем примере убери обертки, попробуй без них сделать и посмотри как что себя ведет

@MaksssHome 3 жыл бұрын

@@user-up6es3nr6s Благодарю)

@jbsharan2189 3 жыл бұрын

блин помги что делать если я когда пишу код по видео чуствую неучем как это решить?

@user-up6es3nr6s 3 жыл бұрын

Привет! Просто продолжай и прими, что это нормально. Через некоторые промежутки времени будешь понимать, что растешь и то что казалось сложным уже не кажется. Если ты уже побыл немного в программировании. То представь себя в самом начале пути и сейчас. Если бы ты показал, что уже умеешь сейчас себе в прошлом. То я уверен, что ты бы удивился и сказал, что это супер сложно. Вот так будет и в будущем, только с каждым разом уровень сложности будет повышаться

@laazz 4 жыл бұрын

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

@user-up6es3nr6s 4 жыл бұрын

В проектах я использую сборку проекта на gulp, все файлы препроцессора sass превращаются в один минимизированный css файл. Здесь я не стал пихать все в кучу, в будущем запишу уроки верстки со сборкой. В этом курсе планирую в конце совместить все в один файл вручную, чтобы не перегружать информацией о сборке, а сделать это в отдельном курсе.

@ohiolezhaa4154 3 жыл бұрын

Попапы можо верстать и на Flexbox. Для этого просто нужно задать попапу (в видео - .popup) свойство overflow: auto; тогда тоже появляется скролл и ничего не скрывается ))

@user-up6es3nr6s 3 жыл бұрын

Надо попробовать, я много вариаций тестировал и всегда что-то ломалось, то на одном устройстве, то на другом. Поэтому использую такой вариант, так как не заметил что он ломается

@ohiolezhaa4154 3 жыл бұрын

@@user-up6es3nr6s html Пицца О нас Контакты +380 50 123 4567 css .popup{ position: fixed; z-index: 10; top: 0; left: 0; background: rgba(0,0,0,.7); width: 100%; height: 100%; opacity: 0; visibility: hidden; overflow: auto; } .popup__body{ display: flex; min-height: 100%; align-items:center; justify-content: center; padding: 30px 10px; } .popup__content{ background: #fff; padding: 70px 20px; width: 730px; margin: 0 auto; position: relative; display: flex; border-radius: 20px; flex-direction: column; align-items: center; text-align: center; } .popup__button-close{ position: absolute; right: 20px; top: 20px; } .mobile-menu__ul{ padding: 0; margin: 0; list-style: none; } .mobile-menu__link{ text-decoration: none; font-family: 'Montserrat', sans-serif; font-weight: 900; color:#1f1f1f; font-size: 24px; display: block; padding-bottom: 30px; } .mobile-menu__li{ text-align: center; } .popup-phone{ border: 3px solid #ffa650; margin-bottom: 30; } .popup-phone__item{ color: #ffa650; } У тебя отличные уроки, мне очень нравятся, жаль, что они не получают должной отдачи

@user-up6es3nr6s 3 жыл бұрын

@@ohiolezhaa4154 Круто, спасибо, надо попробовать в проектах. Почему-то кажется, что я тоже пробовал это решение, наверное, где-то ошибся

@MaksssHome 3 жыл бұрын

Привет, Дмитрий, подскажи пожалуйста, как делаются меню такие, где они не как попап на по середине, а допусти в левом углы на 50% ширины, я вот не могу понять, это попап окна или что-то другое? Например, www.figma.com/file/NlvLmnC79UrdlB6B7SLQe5/OXEM.-%D0%A2%D0%B5%D1%81%D1%82%D0%BE%D0%B2%D0%BE%D0%B5-%D0%B7%D0%B0%D0%B4%D0%B0%D0%BD%D0%B8%D0%B5-Copy?node-id=0%3A1

@user-up6es3nr6s 3 жыл бұрын

Привет! Да, это попапы. Нужно позиционировать контент попапа не по центру. А какому-то краю через left или right. Если нужно можно еще и transform использовать

@MaksssHome 3 жыл бұрын

@@user-up6es3nr6s спасибо))

@whatisloveel 4 жыл бұрын

А зачем вы делали popup__content--centered , я задал те же значения в popup__content и оно так же работало ? объясни пожалуйста

@user-up6es3nr6s 4 жыл бұрын

Я точно не помню. Но если по логике для этого класса popup__content--centered можно задать выравнивание по центру. Если задать для класса popup__content, то для попапов, где не нужно выравнивание по центру придется добавлять класс и убирать

@Street-sport 4 жыл бұрын

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

@user-up6es3nr6s 4 жыл бұрын

1. Можно подключить библиотеку, например, grsmto.github.io/simplebar/ 2. Задать стили через css, в некоторых браузерах может не работать css-tricks.com/custom-scrollbars-in-webkit/

@Street-sport 4 жыл бұрын

@@user-up6es3nr6s Спасибо!

@user-by4sz6is2h 4 жыл бұрын

Привет, ещё возникла такая проблема, я также, как вы прописал для popup-content : height:100%, но почему то popup не увеличился по высоте на весь экран, код сравнил с вашим, все так же, в чем может быть проблема?

@user-by4sz6is2h 4 жыл бұрын

Если же зайти через browser sync на телефоне, все окей, высота 100% срабатывает, на адаптиве на компе нет, очень странно, почему так?

@user-by4sz6is2h 4 жыл бұрын

Опять я, чтобы скрыть блок вы используете свойство visibility и opacity, для чего нужно opacity, вроде никакой роли оно не играет? И нельзя вместо этих свойст просто написать display:none? В чем разница?

@user-up6es3nr6s 4 жыл бұрын

Можно просто display: none. Отличие в том, что для opacity можно задать transition

@user-by4sz6is2h 4 жыл бұрын

@@user-up6es3nr6s понял, спасибо!

@MaksssHome 3 жыл бұрын

@@user-up6es3nr6s Для плавности появления попапа?

@user-up6es3nr6s 3 жыл бұрын

@@MaksssHome ага

@user-by4sz6is2h 4 жыл бұрын

В чем может быть проблема, на адаптиве svg картинки видны, если же открыть сайт через browser sync на телефоне, то картинки не видны, но если же картинки вставить через тег svg а не через img, то картинки появляются?

@user-up6es3nr6s 4 жыл бұрын

1. Остальные изображения нормально работают? 2. Телефон поддерживает svg? 3. Путь до изображения правильный? Можно скачать любое svg изображение, чтобы убедиться, что это правильное svg, вставить и посмотреть, есть оно или нет.

@user-by4sz6is2h 4 жыл бұрын

@@user-up6es3nr6s Фронтендер 1) jpg, png работает все ок, только svg не отображается, svg на телефоне белого цвета, то есть сливается с фото, оно то есть есть, но почему то без цвета 2) сейчас открыл проект который делал из макета figma, этот проект на галпе, и открыл на телефоне сайт, все svg изображения работают, значит телефон поддерживает svg 3) путь верный, на компе же все окей Мб думаю проблема в том, что вы через иллюстратор вырезали, а не как я, через фотошоп сразу.

@user-up6es3nr6s 4 жыл бұрын

@@user-by4sz6is2h Через фотошоп не надо svg экспоритровать. Можно открыть код этого svg и увидеть, что это не svg