про контейнер я знал, а вот чтобы оно норм отображалось на мобилках. моё почтение. автор довольно крутой. теперь буду делать контайнер как у него видео респект тебе от web разраба :)
Есть одно но,оно очень большое.Дело в том что ,на разных медиа устройствах ,разные браузеры,и у всех этих браузеров ,по умолчанию выставлены свои стили,и мало того,уже давно,многие мобильные браузеры имеют встроенные стили для отмены стилей ,которые идут в месте сайтом.А чтоб хоть как то сохранить свои стили,есть такой файлик .access Там нужно прописывать правила ,для каких устройствах иметь отображения,так что очень геморойное дело.Хотя я еще не видел не одного сайта,которой нормально отображалось в мобильных устройствах,все с косяками).Поэтому лучше для мобилки,верстать отдельно,дабы не болела голова))
а вопрос нахера столько всего, если достаточно селектором атрибута определить классы включающие в себя контейнер. для нормального контейнера не нужно никаких медиа запросов и классов, просто ограничение по максимальной ширине, а так как контейнер это блочный элемент, то он по-умолчанию 100% ширины, дальше мы его центрируем марджином и делаем фиксированый паддинг на всю верстку, который будет отлично отображаться везде. Все это делается меньше чем за минуту и все адаптивно и надежно
Здравствуйте. Будьте добры, подскажите причину того, почему у мея перестали работать правила css: сolor, background, backgroung-color, все отвечающие за цвета.Пользуюсь VS Code. Нигде не могу найти ответа. Зарание благодарю.
Благодарю за видео. Есть вопрос по разрыву контейнера: Не проще было просто применить класс "container" к нужным блокам, а не писать лишние строки кода? Ведь по сути разрывом вы применили класс "container" к первому идущему по порядку блоку и последнему. Результат тот же.
В самом простом случае, да, можно просто добавить класс container к блокам, которые нужно ограничить. Но в реальных проектах часто встречаются блоки, у которых задан свой padding, и выравнивание через margin. Предположим, что у нас есть блок с классом form, у него есть свой padding. Ещё блок должен быть выровнен по левому краю и ограничен по ширине (max-width: 400px). Тогда margin и padding, которые заданы для общего класса контейнер будут конфликтовать с padding и margin, которые задали для класса form. Всё потому, что класс container и класс form заданы для одного блока. Поэтому обычно разделяем одно от другого: создаем блок-контейнер, а внутрь него кладём блоки, которые нужно ограничить.
@@AntonioBenderas пересмотрел. Ты прав, при экранах шириной от 768px и выше, ширина контейнера будет не более 768px. Сделал такое ограничение, чтобы на устройствах от 768px до 1279px макет контейнер не растягивался, а имел фиксированную ширину. Такой подход используют не все и не везде, скорее один из вариантов верстать контейнер.
Говорю тебе как Фронтенд разработчик, ты не прав. Контейнер нужен только для того, чтобы большинство сайтов, когда просматриваются на ШИРОКОМ экране, типа монитора, глаза не бегали по экрану из стороны в сторону. На планшете и мобильном устройстве, нет такой огромной ширины, чтобы это вызывало дискомфорт. Достаточно добаить дополнительный паддинг по сторонам, чтобы при пересечении порога максимальной ширины текст не упирался в границы экрана. Стандартом на современные сайты служат 2 величины 1200px и 1000px максимальная ширина контейнера, дальше, сайт сжимается с помощью медиа-запросов, так называемая резиновая или адаптивная верстка. Контейнер в них никто не вкладывается, т.к. это просто не нужно по причинам указанным выше. Все что ты написал делать можно, но зачем?
Есть проекты и "хотелки" клиентов, чтобы сайт ограничивался в ширине даже на планшетах и смартфонах. На этот случай можно применить подход, про который я рассказал. Ну а фишки, которые тут разобрал, дополнительно помогут начинающим понять пользу медиа-запросов, даже если они будут делать макеты по подходу, который описал ты. Спасибо за мнение )
@@one-zero-dev Не спорю, есть такие индивиды =)) Если для новичков выпускаешь, то сделай видео про переполнение контента в блоках, как этого избегать. Анимацию. Псевдоклассы и псевдоэлементы. Flex и Grid. =)) Делаешь хорошо, я просто с некоторым не согласен как разработчик, но опять же, будем честны, единой правильной теории нет, есть проект и результат его выполнения. А это значит идеально правых нет =)) Продолжай в том же духе, Ты делаешь хорошее дело! =))
У блока с классом outer-container есть ещё один класс - container. И для этого класса заданы стили. Так вот в медиа-запросе max-width: 1279px мы переписываем стили для контейнера (отключаем ограничения, отступы). Но делаем это только для outer-container, чтобы отключить стили у одного конкретного блока. Если бы в медиа-запросе max-width: 1279px мы переписали стили для класса container, то отступы и ограничение ширины сбросились бы на всех блоках. А это не то, что нам нужно.
![Урок 1 - Базовые знания по типографике 1/3 [Типографика] [курс для начинающего дизайнера]](http://i.ytimg.com/vi/GOV4FVwka9c/mqdefault.jpg)
![Урок 1 — Базовые знания по типографике 1/3 [Типографика] [курс для начинающего дизайнера]](/img/tr.png)
![[2023] Основы верстки сайта с нуля! HTML5 и CSS3 - верстка макета](/img/n.gif)
Нам нужно больше туториалов!молодец)
Благодарю за туториал, до сих пор не знал о таких фишах. Продолжайте в том же духе Антон!
Большое спасибо за качественные уроки!
про контейнер я знал, а вот чтобы оно норм отображалось на мобилках. моё почтение. автор довольно крутой. теперь буду делать контайнер как у него видео
респект тебе от web разраба :)
Спасибо. Буду ждать новых видео
Полезное видео..с доступным обьяснением
Лайк и подписка сходу..Продолжай не забрасывай канал
Респект Антоха, удачи в продвижении😉
Спасибо за поддержку 🤘
Антон, так держать! Продолжай заливать новые видео.
Есть одно но,оно очень большое.Дело в том что ,на разных медиа устройствах ,разные браузеры,и у всех этих браузеров ,по умолчанию выставлены свои стили,и мало того,уже давно,многие мобильные браузеры имеют встроенные стили для отмены стилей ,которые идут в месте сайтом.А чтоб хоть как то сохранить свои стили,есть такой файлик .access Там нужно прописывать правила ,для каких устройствах иметь отображения,так что очень геморойное дело.Хотя я еще не видел не одного сайта,которой нормально отображалось в мобильных устройствах,все с косяками).Поэтому лучше для мобилки,верстать отдельно,дабы не болела голова))
Привет. Пришли ссылку на такую верстку, интересно посмотреть на подход, который тут описан.
А можно подробнее про технологию, которая отменяет рендеринг дом и цссом и мердж их в рендер три?
чотко!!! Лайк от СЕООНЛИ
а вопрос нахера столько всего, если достаточно селектором атрибута определить классы включающие в себя контейнер. для нормального контейнера не нужно никаких медиа запросов и классов, просто ограничение по максимальной ширине, а так как контейнер это блочный элемент, то он по-умолчанию 100% ширины, дальше мы его центрируем марджином и делаем фиксированый паддинг на всю верстку, который будет отлично отображаться везде. Все это делается меньше чем за минуту и все адаптивно и надежно
Хочется ещё больше PRO-кейсов по сложным элементам UI, блокам карточкам, меню, ...
спасибо большое очеееееень доступно
А общий wrapper макета тоже нужно ограничивать ?
Зависит от ситуации. Обычно достаточно ограничить только контейнер
Ух ты, отличное видео! А как относишься к системе Битрикс?
Здравствуйте. Будьте добры, подскажите причину того, почему у мея перестали работать правила css: сolor, background, backgroung-color, все отвечающие за цвета.Пользуюсь VS Code. Нигде не могу найти ответа. Зарание благодарю.
Здравствуйте. Отправьте ссылку на свой код, чтобы я мог его посмотреть.
Вы способны экран с кодом увеличивать или нет? Вы можете делать исходники и выкладывать их, а в исходниках создавать файл с Подробным ТЗ?
@@КонстантинСмирнов-ъ4ж 🫡
@@one-zero-dev Интересный ответ!?
спасибо!
2:18
а есть разница между
{width: 100%;
max-width: 1000px;}
и
{max-width: 100%;
width: 1000px;}
?
можно max-width: 90%; чтобы били резиновые падинги
Спасибо))
thanks great
Внатуре четко
Благодарю за видео. Есть вопрос по разрыву контейнера: Не проще было просто применить класс "container" к нужным блокам, а не писать лишние строки кода? Ведь по сути разрывом вы применили класс "container" к первому идущему по порядку блоку и последнему. Результат тот же.
В самом простом случае, да, можно просто добавить класс container к блокам, которые нужно ограничить.
Но в реальных проектах часто встречаются блоки, у которых задан свой padding, и выравнивание через margin.
Предположим, что у нас есть блок с классом form, у него есть свой padding. Ещё блок должен быть выровнен по левому краю и ограничен по ширине (max-width: 400px).
Тогда margin и padding, которые заданы для общего класса контейнер будут конфликтовать с padding и margin, которые задали для класса form. Всё потому, что класс container и класс form заданы для одного блока.
Поэтому обычно разделяем одно от другого: создаем блок-контейнер, а внутрь него кладём блоки, которые нужно ограничить.
А что ты используешь, чтобы менять размер окна под разные устройства?
Вызываю панель DevTools - инструмент разработчика, который встроен прямо в браузер.
В Google Chrome эта панель открывается с помощью клавиши в F12.
@@one-zero-dev Спасибо
полезно,спасибо
12:05 сначала идёт mobile-first, а потом бабах, на тебе max-width
Подержите мой смузи, я вручу этому парню награду за внимательность ))
Я верстаю таблицами и считаю это лучший вариант на 2к23
Может все ж таки не таблицами а гридами? Таблицами верстали в 90-х.
Зачем? ведь есть способы проще и надёжнее.=)
Вызавайте дурку
Смотрю тебя и понимаю что ты сам Джун
Понятно ) Спасибо, что посмотрел.
@@one-zero-dev хорошее видео, спасибо ! Побольше вашего опыта хочется видеть, развиваться вместе
3:50
23-27 строчки
При экранах больше 768px ширина контейнера не больше 768px ?
В 23-27 строчке написано: при экранах шириной от 768px и выше, ширина контейнера будет не более 1000px
@@one-zero-dev 4:02 с 4 минут 01 секунды
@@AntonioBenderas пересмотрел. Ты прав, при экранах шириной от 768px и выше, ширина контейнера будет не более 768px.
Сделал такое ограничение, чтобы на устройствах от 768px до 1279px макет контейнер не растягивался, а имел фиксированную ширину.
Такой подход используют не все и не везде, скорее один из вариантов верстать контейнер.
Еще бы неплохо было б выложить код с урока на гитхаб или на диск какой-нить....
Спасибо за идею, закинул код на GitHub: github.com/rihnovec/container-lesson
Говорю тебе как Фронтенд разработчик, ты не прав. Контейнер нужен только для того, чтобы большинство сайтов, когда просматриваются на ШИРОКОМ экране, типа монитора, глаза не бегали по экрану из стороны в сторону. На планшете и мобильном устройстве, нет такой огромной ширины, чтобы это вызывало дискомфорт. Достаточно добаить дополнительный паддинг по сторонам, чтобы при пересечении порога максимальной ширины текст не упирался в границы экрана. Стандартом на современные сайты служат 2 величины 1200px и 1000px максимальная ширина контейнера, дальше, сайт сжимается с помощью медиа-запросов, так называемая резиновая или адаптивная верстка. Контейнер в них никто не вкладывается, т.к. это просто не нужно по причинам указанным выше. Все что ты написал делать можно, но зачем?
Есть проекты и "хотелки" клиентов, чтобы сайт ограничивался в ширине даже на планшетах и смартфонах.
На этот случай можно применить подход, про который я рассказал.
Ну а фишки, которые тут разобрал, дополнительно помогут начинающим понять пользу медиа-запросов, даже если они будут делать макеты по подходу, который описал ты.
Спасибо за мнение )
@@one-zero-dev Не спорю, есть такие индивиды =)) Если для новичков выпускаешь, то сделай видео про переполнение контента в блоках, как этого избегать. Анимацию. Псевдоклассы и псевдоэлементы. Flex и Grid. =)) Делаешь хорошо, я просто с некоторым не согласен как разработчик, но опять же, будем честны, единой правильной теории нет, есть проект и результат его выполнения. А это значит идеально правых нет =)) Продолжай в том же духе, Ты делаешь хорошее дело! =))
@@АлексейСкаливенко-в3с спасибо за идеи и поддержку )
чот я не въехал, а где прописаны стили для outer_container, которые типо нужно отключить, чтобы не было этих отступов
У блока с классом outer-container есть ещё один класс - container. И для этого класса заданы стили. Так вот в медиа-запросе max-width: 1279px мы переписываем стили для контейнера (отключаем ограничения, отступы). Но делаем это только для outer-container, чтобы отключить стили у одного конкретного блока.
Если бы в медиа-запросе max-width: 1279px мы переписали стили для класса container, то отступы и ограничение ширины сбросились бы на всех блоках. А это не то, что нам нужно.
Не знаю уровень поддержки клампа на момент выхода видео, но в конкретном примере не нужен ни 1 медиа запрос