Очень крутая штука эти новые контейнеры. Помню когда только начала появляться адаптивность через media почти сразу захотелось адаптировать не только в зависимости от ширины экрана, но и в зависимости от ширины самих блоков. --- - Спустя столько лет? - Всегда… (с)
Спасибо, твой канал один из лучших в русском сегменте, так еще и такие актуальные темы освещаешь. Я сам преподаю frontend и выражаю тебе огромный респект!
Содержимое веб-страниц должно быть размещено в некоем элементе, ширина которого, ограничивающая ширину содержимого, позволяет пользователям удобно работать с материалами сайта. Такие элементы называют «обёртками» (wrapper) или «контейнерами» (container).
Мне кажется очень много используете pading и margin когда например .header выравнивали по центру. Тут можно было флексами обойтись. Но я новичок поэтому пока сужу по тому что уже узнал
Вопрос по подключению шрифтов. Некоторые топят за то, чтобы подключать их в html через link, другие - за то, чтобы в css через @import. Можешь в shorts или тут рассказать какой способ все же лучше использовать и чем они принципиально отличаются?
@@AntonioBenderas Поизучав материал по данному вопросу, пришел к тому, что разница в основном в том, что при подключении через шрифт сразу прогружается на страницу из-за доступа к предзагрузки в кэш, а при подключении через @import страница грузит его по мере прокрутки, постоянно обращаясь к удаленному серверу. При этом совместим со всеми браузерами на любых устройствах, возможности @import при этом ограничены и он может вообще не прогрузиться. Поэтому советуют в большинстве случаев использовать все таки , если шрифт подключается удалено, а @import - если шрифт уже скачан и подключается локально или при тестировании, чтобы иметь возможность быстро влиять на его подключение.
У тебя хорошо получается, когда эта работа уже сделана и ты еë повторяешь.В реальности на решение каких то проблем может уйти несколько часов. Новички думают, что в будущем будут так же шпарить, но по факту, если эту мадам попросить сделать эту вёрстку на стриме, то стрим будет длится целый день, а то и больше
Я не думаю, что она это зубрила. Это неинтересно и муторно, я бы не стал. А еще она может четко и не запинаясь говорить на публику, я пробовал записывать свои видео, у меня так не получается, я говорю медленно и долго подбираю слова, и слушать меня нудно. Это к тому, что при определенных навыках человек может добиваться высот, которые со стороны кажутся нереальными, но на самом деле вполне достижимы. В плане скорости верстки, то реальные ожидания в студиях - верстать страницу (не такую простую, а например лендинг из 10 секций со сложной анимацией, каруселями и т.п.) за 1,5 дня. А сайт целиком из 5-6 страниц - за 5-6 дней (там повторяются модули, поэтому быстрее) И это не самые упоротые требования, это так, человеческие. Она тут по сути верстает 2 секции, несложный хедер и блок комментариев, это от 20 минут до 30 на каждую секцию. В итоге это надо сверстать минут за 50. У нее это заняло 1 час с небольшим, но она параллельно разжевывала, объясняла, т.е. сильно отвлекалась.
Нет, в классике используется .der--title, двойная черта. А __, двойное подчеркивание, - стандарт Яндекса, в котором БЭМ и придумали. Использовать можно как одно, так и другое. Принципиальная разница в том, что при __ ты можешь одним кликом выделить в редакторе все название класса и скопировать. При -- так не получится, выделится только кусок. Т.е. если ты верстаешь на чистом css, то грамотно будет использовать именно нижнее подчеркивание, поскольку в css тебе надо копировать стили полностью. Т.е. она делает все правильно, единственно зря использует составные названия с чертой. А вот если ты пользуешься SASS, то тут все наоборот - ты пишешь стили в духе &-aaa, и тебе нужно копировать именно кусочки стилей. Поэтому удобнее черта.
я больше за reset.css. normalize сбрасывает стили, но как то по своему. В результате все равно какие то элементы имеют отступы по умолчанию, и когда указываешь с дизайна отступы и видишь что очень отличается, а оказывается там еще дефолтные стили указаны.
Нужны оба файла. normalize не сбрасывает, он просто делает во всех браузерах стили одинаковыми. И там далеко не только сбросы паддингов и марджинов, там много фишек, в том числе приведение к одному виду placeholder для хрома и фокса и т.п. Это важно и reset это не заменит. Потом в reset ты можешь просто досбрасывать отступы с дефолтных на нулевые.
@@alexperemey6046 понял спасибо. В последнее время я не пишу больше на чистом css. Беру что то готовое tailwind, shadcn или компонентное ChakraUI, RadixUI у них как раз все эти стили уже установлены как в normalize как я понял.
@@annblok_webdev Вы произносите center как "центер", и CSS - как ЦСС (правда в этом видео услышал 1 раз СИ-ЭС-ЭС). Это не меняет, конечно, сути, но у меня "нежные ушки" на произношение слов на English. Да и в комментариях ниже Ваш слушатель пишет: "Спасибо за практику! Осталось еще записать видео про каждую единицу измерения из цсс контэйнеров". Ай-ай!!!
⚡️ Макеты и демо можно получить через донат: 1) по подписке (доступ ко всем макетам) boosty.to/annblok 2) по подписке (доступ ко всем макетам) vk.com/donut/tpverstak 3) разовая оплата через крипту с получением одного макета new.donatepay.ru/@annblok (в комментариях напишите email)
@@alexwill7818 и?эффект-то в чем? grid же есть, да и как бы vh vw даже без грида прекрасно справятся с этой задачей, а font-sizeкак бы можно же в rem указывать и тогда он тоже будет адаптивным
Я не увидел, чем он лучше именно здесь, выглядит что с медиа-запросами было бы примерно то же самое. Но в принципе дополнительная возможность карман не тянет и несложно представить ситуацию, когда эта вещь пригодится. Если, допустим, на разных страницах разное место под такой блок и это никак не связано с размером экрана. Мы можем заставить этот блок верстаться по-разному в зависимости от собственных размеров, при этом мы заранее можем даже не знать, куда именно этот блок будет вставляться в дальнейшем. Главное, что он при любых размерах будет хорошо выглядеть.
Очень хорошо, что она отметила простую истину: в теории rem хорошо, но на практике дизайнер все равно рисует размер шрифтов от балды для каждого разрешения, поэтому тебе все равно придется ручками прописывать разные rem для разных разрешений, и в итоге никакого отличия от пикселей, кроме неочевидных цифр ты не получишь.
Анна у Вас один из лучших каналов в своем сегменте. Подкупает не только четкое и ясное обучение но и ваш ведущий)))
Очень крутая штука эти новые контейнеры. Помню когда только начала появляться адаптивность через media почти сразу захотелось адаптировать не только в зависимости от ширины экрана, но и в зависимости от ширины самих блоков.
---
- Спустя столько лет?
- Всегда…
(с)
Спасибо автору за это видео. Отличная вёрстка без лишней воды. Также особо понравились пояснения по вёрстке. Будем ждать новых видеороликов!
Спасибо, твой канал один из лучших в русском сегменте, так еще и такие актуальные темы освещаешь. Я сам преподаю frontend и выражаю тебе огромный респект!
Спасибо! ❤
Спасибо за практику! Осталось еще записать видео про каждую единицу измерения из цсс контэйнеров ❤
Хорошо что есть такие видео в которых все понятно и доступно объясняют.
Вы так подробно всё обьяснили и показали👍 Спасибо Вам огромное что пошагово помогаете обучаться в даном направлении👏👏👏
Очень полезный канал для тех, кто следит за новинками и развитием в сфере
Отличный обзор.Оченьпросто и доходчиво объяснил ,самое то чтобы отточить свои навыки .Жду выхода новых Ваших видео .
Для айтишников ваши видео - настоящий клад!
Каждый ваш урок очень ценен и креативен. Спасибо и продолжайте в том же духе.
Твій канал просто супер. Завжди все саме головне і цікаве. Дякую за крутий обзор.
Спасибо за информативный выпуск.Наконец-то смог разобраться в этой теме. Смотрел много видео, но это стало самым понятным.
Самый детальный туториал по CSS который есть на ютюбе.
Содержимое веб-страниц должно быть размещено в некоем элементе, ширина которого, ограничивающая ширину содержимого, позволяет пользователям удобно работать с материалами сайта. Такие элементы называют «обёртками» (wrapper) или «контейнерами» (container).
Ого, я даже и не знала что сайт создать так просто, спасибо большое за понятное разъяснение)
Отличный ролик с очень полезной информацией. Автору спасибо!
Понятно , просто и доступно всё объяснили , спасибо вам за качественный и детальный видео обзор .
Всё очень подробно обьясняете, буду стараться разобраться👍
Аннушка вы очень молодец. Очень доходчиво показываете - я думаю что даже школьник бы понял все контейнеры CSS.
Благодарю за отличный обзор вёрстки сайта при помощи CSS Container...
Одна из лучших, только с тобой прохожу всё
Мне кажется очень много используете pading и margin когда например .header выравнивали по центру. Тут можно было флексами обойтись. Но я новичок поэтому пока сужу по тому что уже узнал
Замечательный урок. Вы спасение для новичков, всё понятно объясняете
навык верстки думаю очень необходим, благодарю, за вашу помощь и обучение
легко и доступно все рассказано, мне понравилось)
Обожаю ваши уроки все так просто и понятно
Спасибо большое за видео, очень полезно для разработки веб сайта)
Вы делаете хорошую работу для многих новеньких и кто не особо понимает.
Спасибо за полезный урок, надеюсь, что и мне получится во всём этом разобраться)
CSS Container однозначно упростит нашу работу..! Пусть это и новинка, но уже сейчас видно, что очень качественная..!
Очень хороший урок. Есть чему поучиться. И здесь выводов
Спасибо! Всё описано очень детально!
Большое спасибо, очень классные и полезные видео!
Согласен, давайте уже будем пробовать верстать сайт с новой технологией CSS Container, а также применим clamp() и единицы измерения ch и cqw.))
Спасибо большое за видео и за информацию🔥было круто♥️
Вопрос по подключению шрифтов. Некоторые топят за то, чтобы подключать их в html через link, другие - за то, чтобы в css через @import. Можешь в shorts или тут рассказать какой способ все же лучше использовать и чем они принципиально отличаются?
В html через линк я так понимаю шрифты будут каждый раз тянуться с удалённого сервера, а в css ты загрузил сайт и шрифты уже у тебя в кэше
@@AntonioBenderas Поизучав материал по данному вопросу, пришел к тому, что разница в основном в том, что при подключении через шрифт сразу прогружается на страницу из-за доступа к предзагрузки в кэш, а при подключении через @import страница грузит его по мере прокрутки, постоянно обращаясь к удаленному серверу. При этом совместим со всеми браузерами на любых устройствах, возможности @import при этом ограничены и он может вообще не прогрузиться. Поэтому советуют в большинстве случаев использовать все таки , если шрифт подключается удалено, а @import - если шрифт уже скачан и подключается локально или при тестировании, чтобы иметь возможность быстро влиять на его подключение.
Тут более интересен вопрос насколько корректно это все подключать из удаленного источника. Локально надежнее выглядит.
Все детально рассказано, теперь осталось усвоить озвученный материал и закрепить его на практике.
Практику лучше сразу выполнять 🙌
Спасибо за урок Анна я еще пока новичок во всём этом.
Обзор, понятен, буду пробовать.
Спасибо вам за это видео, было познавательно посмотреть.
Каждый ваш урок очень ценен и криативен,вы так подробно всё обьяснили.
я до этого момента даже не знал что такое верстать сайт !
27:00 А разве не логично было бы сразу после header создать gradient, а не смешивать изначально header и то, что расположено ниже?
Очень красивая девушка, к тому же умная прям мечта 🔥
У тебя хорошо получается, когда эта работа уже сделана и ты еë повторяешь.В реальности на решение каких то проблем может уйти несколько часов.
Новички думают, что в будущем будут так же шпарить, но по факту, если эту мадам попросить сделать эту вёрстку на стриме, то стрим будет длится целый день, а то и больше
А что не целый месяц сразу? 🤣
Я не думаю, что она это зубрила. Это неинтересно и муторно, я бы не стал. А еще она может четко и не запинаясь говорить на публику, я пробовал записывать свои видео, у меня так не получается, я говорю медленно и долго подбираю слова, и слушать меня нудно. Это к тому, что при определенных навыках человек может добиваться высот, которые со стороны кажутся нереальными, но на самом деле вполне достижимы.
В плане скорости верстки, то реальные ожидания в студиях - верстать страницу (не такую простую, а например лендинг из 10 секций со сложной анимацией, каруселями и т.п.) за 1,5 дня. А сайт целиком из 5-6 страниц - за 5-6 дней (там повторяются модули, поэтому быстрее)
И это не самые упоротые требования, это так, человеческие.
Она тут по сути верстает 2 секции, несложный хедер и блок комментариев, это от 20 минут до 30 на каждую секцию. В итоге это надо сверстать минут за 50. У нее это заняло 1 час с небольшим, но она параллельно разжевывала, объясняла, т.е. сильно отвлекалась.
Немного сложно для меня. но так понятно рассказываешь.
Отлично, спасибо.... Я тоже часто НА ГЛАЗ делаю
Вообще использование нижних подчёркиваний в коде не является правилом хорошего тона .der-title вот такие классы используются в классике
Нет, в классике используется .der--title, двойная черта. А __, двойное подчеркивание, - стандарт Яндекса, в котором БЭМ и придумали. Использовать можно как одно, так и другое.
Принципиальная разница в том, что при __ ты можешь одним кликом выделить в редакторе все название класса и скопировать. При -- так не получится, выделится только кусок. Т.е. если ты верстаешь на чистом css, то грамотно будет использовать именно нижнее подчеркивание, поскольку в css тебе надо копировать стили полностью. Т.е. она делает все правильно, единственно зря использует составные названия с чертой.
А вот если ты пользуешься SASS, то тут все наоборот - ты пишешь стили в духе &-aaa, и тебе нужно копировать именно кусочки стилей. Поэтому удобнее черта.
Проблемы из-за CSS Container интересно было узнать
я больше за reset.css. normalize сбрасывает стили, но как то по своему. В результате все равно какие то элементы имеют отступы по умолчанию, и когда указываешь с дизайна отступы и видишь что очень отличается, а оказывается там еще дефолтные стили указаны.
Нужны оба файла. normalize не сбрасывает, он просто делает во всех браузерах стили одинаковыми. И там далеко не только сбросы паддингов и марджинов, там много фишек, в том числе приведение к одному виду placeholder для хрома и фокса и т.п.
Это важно и reset это не заменит. Потом в reset ты можешь просто досбрасывать отступы с дефолтных на нулевые.
@@alexperemey6046 понял спасибо. В последнее время я не пишу больше на чистом css. Беру что то готовое tailwind, shadcn или компонентное ChakraUI, RadixUI у них как раз все эти стили уже установлены как в normalize как я понял.
Здравствуйте, с какой операционной системы желательно работать, Виндовс или Линукс?
Операционная система может быть любой
Спасибо за ваш обзор, и понятное объяснения, для меня тема не простая.
Ну теперь не всё кажется необыкновенно сложным после вашего видео
спасибо за видео)
Анна, всё отлично, Вы молодец, но буквы (звука) "ц" в English нет :(
Где звучало?
@@annblok_webdev Вы произносите center как "центер", и CSS - как ЦСС (правда в этом видео услышал 1 раз СИ-ЭС-ЭС). Это не меняет, конечно, сути, но у меня "нежные ушки" на произношение слов на English. Да и в комментариях ниже Ваш слушатель пишет: "Спасибо за практику! Осталось еще записать видео про каждую единицу измерения из цсс контэйнеров". Ай-ай!!!
@@sergeytkachenko64 думаю, там я уже больше на русский лад произношу 🤷♀️
А через сколько по времени приходит макет? Оплатила разовый вариант - на один этот макет
Если через donatpay оплатили - отправила сейчас сообщение на почту. Если через Boosty, то пост сразу открывается.
@@annblok_webdev да, уже просто бусти ещё оплатила) от нетерпения)
Рада приветствовать вас на Boosty 🙌 Не забудьте еще в чатик ТГ вступить, чтобы задавать вопросы, общаться
сайт как сайт ничего такого необычного тут не вижу
Макет через донат. 😂😂😂 Случайно посмотрел страницу. а тут такая прелесть. Овес подорожал, что макетами торгуете?
Так с момента, как гугл решил не платить за просмотры от русскоязычных. Считаю справедливым. Труда в создание таких роликов вкладывается не мало.
круто-круто,!
Всем доброе время суток
покажите слепому доступ к макету figma
⚡️ Макеты и демо можно получить через донат:
1) по подписке (доступ ко всем макетам) boosty.to/annblok
2) по подписке (доступ ко всем макетам) vk.com/donut/tpverstak
3) разовая оплата через крипту с получением одного макета new.donatepay.ru/@annblok (в комментариях напишите email)
Что за редактор макета на 06:38?
это Figma
@@annblok_webdev благодарю!
Если последовательно всё делать, то больших проблем и не должно возникнуть
👍
по caniuse пока слабенько для продакшана (
Да, для реальных проектов пока равно, но изучить новое можно уже сейчас 😉
Я первый. Как Гагарин)
я Титов
внукам расскажешь)
@@ShtotoNaChemto 🤣🤣🤣🤣
Первыми были собаки
и все-равно не понятно чем контейнер лучше media, чем cq лучше vh и vw и зачем это всё если grid всё это и так умеет без плясок с бубном и кода меньше
Затем что меда для всего экрана, а контейнер на маленький блок можно навесить который не угадаешь ширину от экрана
@@alexwill7818 и?эффект-то в чем? grid же есть, да и как бы vh vw даже без грида прекрасно справятся с этой задачей, а font-sizeкак бы можно же в rem указывать и тогда он тоже будет адаптивным
Я не увидел, чем он лучше именно здесь, выглядит что с медиа-запросами было бы примерно то же самое. Но в принципе дополнительная возможность карман не тянет и несложно представить ситуацию, когда эта вещь пригодится. Если, допустим, на разных страницах разное место под такой блок и это никак не связано с размером экрана. Мы можем заставить этот блок верстаться по-разному в зависимости от собственных размеров, при этом мы заранее можем даже не знать, куда именно этот блок будет вставляться в дальнейшем. Главное, что он при любых размерах будет хорошо выглядеть.
Без чашки с кофе тут не обойтись... поэтому предупреждаю сразу. Видео слишком уж долгое...
font-size в пикселях? ууу - минус в карму )
Очень хорошо, что она отметила простую истину: в теории rem хорошо, но на практике дизайнер все равно рисует размер шрифтов от балды для каждого разрешения, поэтому тебе все равно придется ручками прописывать разные rem для разных разрешений, и в итоге никакого отличия от пикселей, кроме неочевидных цифр ты не получишь.
макет в бусти. Ты пытаешься рубить деньги вообще из воздуха, я такой макет за пол дня сделаю.
Сделайте
Не советую у неё учиться
А че?
обоснуй
пукнул и слился