📌 Друзья, в телеграмме у нас есть канал и отдельный чат, где вы можете задать вопрос по фронтенд-разработке и вам постараются помочь: 💬 Чат: t.me/friendlyFrontendChat ℹ Основной канал: t.me/friendlyFrontend Если вам это интересно, присоединяйтесь, задавайте вопросы и помогайте другим 🙂
Чат это конечно хорошо, но чем больше людей в чате, тем сложнее отслеживать вопросы по конкретным темам, можно перевести чат в группу и там добавить несколько чатов по отдельной тематике, так люди смогут писать вопросы в конкретных чатах-подтемах
Смотришь урок до момента, когда автор начинает реализовывать какой-то блок на странице, ставишь паузу, пробуешь реализовать самостоятельно, затем продолжаешь просмотр видео и сравниваешь код из видео с тем, что ты написал, ищешь минусы и плюсы, делаешь для себя выводы и по такой же схеме двигаешься дальше.
Спасибо огромное за уроки! Ценнейший материал, даже на англоговорящем Ютубе ему нет ровни! Я очень рада, что учу прямо в то же время, что вы выпускает ролики. Мотивирует! ❤
Очень полезный контент, пересмотрел все твои видео с самого начала, верстал предыдущий сайт вместе с тобой, даже купил ещё один монитор, чтобы было удобнее и быстрее верстать 😂 многих смотрел и вот ты единичный случий, когда обьясняешь именно как правильно делать.
Видео на 2 часа смотрел часов 10 (останавливался на каждой новой строчке кода, смотрел, что меняется, оставлял в проекте коммент и запускал дальше). Полет нормальный! Спасибо!
Александр, ваши уроки - это божественная эссенция лучшего учебного материала и вашего опыта! Я прошел через курсы скилбокс, но там по верстке дали не больше половины того, что вы показали в этом уроке. С удовольствием впитываю все нюансы и тонкости верстки, которые вы рассказываете в процессе работы. Очень хорошо, что объясняете каждый блок кода, почему написали вот так и т.д. Это очень помогает понять множество вещей и увидеть картину в целом. Безмерно благодарен вам за ваш труд!
@@MathInfo-ye1gf и да и нет) 2 недели отработал верстальщиком на ВордПресс, выперли за медленную работу. Похвалили конечно за грамотность, но им нужно было конвейер сайтов обслуживать, а ждать когда я научусь быстро работать не захотели. Больше никуда не брали. Беру сейчас редкие заказы на фрилансе, накупил книг и читаю, практикуюсь по мере возможности.
Александр, спасибо за труды. Благодаря вам я здорово прокачал вёрстку, каждый день узнаю какие-то новые нюансы, подходы. Преимущество вашего материала это тщательная подготовка текста, что делает его всеобьемлющим и исключает воду. Так же чувствуется, что код продакшн уровня. В свободном доступе такое найти очень сложно. Надеюсь увидеть такой же материал и по React, без воды, тудушек ,сразу и по возрослому))
Аааааааа, я все повторяю, записываю, сохраняю в гисты какие-то рецепты, такой кайф!!! Оч много нового и передового! Решил в процессе обучения на другом курсе, подчерпнуть знаний у вас, так как начинается вёрстка в портфолио и хочется прям усовершенствоваться в вёрстке. Спасибо! Щас отдохну немного и на вторую часть пойду)))
На 45:20 ты уменьшил кнопку без медиа запроса, значит не для планшета, а вообще. Не по макету получается. Править уже поздно, так для информации, тем кто будет верстать по видео.
очень полезно по поводу файловопапочной структуре и в целом модульности =) давай такого еще и побольше ) еще бы по вьюшке такого =) реакт кажется более сложным)
Отличное видео, благодарю за труд. Вынес для себя несколько очень полезных моментов, вспомнил как вообще верстать спустя несколько лет простоя, но вместе с этим возникло несколько вопросов, скорее касательно подготовки проекта: Почему в _variables используются не переменные в стиле scss, т.е. через $, а стандартные переменные css, через -- в root? Как была выведена формула в миксине fluid-text? Очень полезно при адаптации, но хотелось бы узнать про нее подробнее, и узнать есть ли еще подобные формулы? Адаптацию стоит проводить под строгие значения, т.е. под 1280, 1024, 768 и т.д., или стоит подходить более универсально, т.е. просто сужать экран, отслеживать на каких значениях ширины поехал тот или иной блок и исправлять его. Например, сужали страницу, обнаружили что на значении 859px съехал такой-то блок, создали media с этим значением и исправили. Относительно этого я гуглил те самые несколько лет назад, и мнения относительно вопроса расходились: одни адаптировали по конкретным значениям, другие просто сужали экран Разве адаптацию нужно проводить не до 240px?
Привет! Спасибо за фидбек :) По переменным - потому что CSS-переменные работают в рантайме, это зачастую удобнее, нежели использовать компилируемые переменные из Sass. По формуле миксина - в clamp первым и последним аргументом ограничиваем диапазон минимума и максимума значения, а во втором аргументе рекомендуемое значение по формуле, которая переводит font-size из px в vw-единицу измерения, обычное деление на ширину макета и умножение на 100, чтобы получилось корректное значение. По адаптации - никогда не надо плодить лишних уникальных медиазапросов, а то интерфейс будет слишком дерганным при сужении экрана. Берем за основу 3-4 контрольные точки (можно как у меня в этом мастер-классе, можно из сетки бутрстрапа), и когда при сужении, к примеру, ломается что-то на ширине 1111px, начинаем применять меры сильно заранее, на ширине ближайшего (!) бОльшего значения медиазапроса, max-width 1280px в моем случае. Адаптировать нужно вплоть до 360px, экранов уже в глобальной статистике уже не существует. Номоводные раскладушки не в счет, там и долей процента пока нет.
32:29 - а за чем дублировать меню? Если можно стилями, через медиа запросы с помощью позиционирования сделать мобильное меню. В чём преимущество или плюс такого подхода? Хотелось бы узнать)
Вообще, я хотел показать работу с прежде всего 😅 Ну а медиазапросами переделать разметку уже имеющегося десктопного меню можно, главное не пихать костыли с абсолютным позиционированием и точечным смещением.
Александр, спасибо за Ваши уроки! Если будет возможность, покажите, пожалуйста, верстку интернет-магазина с фильтрами товаров, сложным меню и прочими наворотами )
Подскажите, зачем писать ul > li > а, если все равно потом list-style: none. Почему нельзя использовать сразу ссылки. Сделал их флекс-элементами и делай с ними что хочешь?
Привет! Однотипные элементы стоит помещать в списки для улучшения семантики и доступности (пользователь скринридера получит информацию о том, сколько элементов со ссылками в списке, и у него будет возможность пропустить зачитывание всего списка).
При использовании Vite получаю предупреждение о депрецированности @import в SCSS: Deprecation Warning: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.. Когда я заменяю @import на @use в styles.scss, возникает проблема: в файле utils миксины, такие как mobile и mobile-above, становятся недоступными, и появляется ошибка Undefined mixin. Как правильно использовать @use или @forward, чтобы миксины были доступны в других SCSS файлах?
Так... Объясню, как я в новом мастер-классе организовал всё через use и forward. 1. В папке styles создал папку helpers. 2. В папке helpers у меня лежат файлы _media.scss, _mixins.scss и _index.scss (названия с нижним подчеркиванием в начале, это важно). 3. В файле _index.scss следующее: @forward 'media'; @forward 'mixins'; 4. Пример использования миксинов и миксинов медиазапросов в файле styles/_globals.scss: @use 'helpers' as *; body { @include fluid-text(18, 14); @include tablet { background-color: red; } } 5. Пример использования в файле styles/blocks/_button.scss: @use '../helpers' as *; .button { @include flex-center(true); }
Чтобы верстка была более надежная. В реальных проектах бывает ситуация - через некоторое время по требованиям заказчика часть контента убирают, то есть удаляются элементы из разметки и если у элемента, находящегося до удаленного элемента, остались внешние отступы margin-bottom, то они будут лишними. И вот в таких ситуациях комбинация псевдоклассов not last child позволяет избавиться от нежелательного отступа, когда элемент внезапно оказывается последним среди своих соседей, лежащих на одном уровне.
В миксине fluid-text устаревшее выражение, деление используется только с calc, в новой версии sass иначе работать не будет, лучше сразу привыкать писать по новому. старое - font-size: clamp(#{$min}px, #{$max / 1440 * 100}vw, #{$max}px); новое - font-size: clamp(#{$min}px, #{calc($max / 1440) * 100}vw, #{$max}px);
А в чем смысл миксинов @mixin reset-link, reset-button 14:30? Почему, например, не использовать класс .reset-link и .reset-button? Миксин же будет дублироваться к коде.
@@AleksanderLamkov а почему тогда не пользуются @extend? При extend компиляция всех классов, в которых использовался extend пишется через запятую и подходит для данных примеров, а чем больше пишется миксинов, тем больше будет дублированного кода. Вот этот момент я не понимаю, как новичок.
Можно в utils. Просто стилей у этого класса довольно много, плюс есть внутренние grid__item элементы. Отдельный файл использован сугубо для декомпозиции и разгрузки utils.
мне понравились обе части! но заметила один нюнс( возможно это только у меня так в браузере отражается ?). при breakpoint 767px в header отражается и burger-button и само меню nav )
Это из-за нестандартной плотности пикселей твоего монитора. Забываю о том, что такой баг может у некоторых возникать. Тебе нужно вместо ровных значений 767 использовать 767.98 в медиазапросах и всё будет работать как надо.
Привет! Для консистентности. Чтобы секции были структурно похожи друг на друга. В некоторых секциях есть section__header, а располагать иной БЭМ-блок на том же уровне - кажется мне не совсем правильным, поэтому добавляю новый БЭМ-элемент section__body и размещаю новый БЭМ-блок именно там.
@nderLamkov Прохожу курс по веб-программированию. Дошел до середины раздела Vue и понял, что у меня недостаточно базовых знаний HTML и CSS. Каждый день захожу на твой канал и изучаю материал. Прошло чуть больше недели, и я уже успел выучить курс по HTML и CSS +-БЭМ, а также реализовать первый макет. Сейчас повторяю второй макет. Вот-вот дипломная работа (уже 4 курс). Тема веб-сайт (5страниц). Срочно нужно набрать скилл)) Спасибо за контент и отвтет
1:12:00 у меня вылезала ошибка, пока не изменил на @media (было @include) готовый код: @media desktop { --section-padding-y: 50px; } @media mobile { --section-padding-y: 30px; }
Скорее должен. У меня MacOS, а на этой ОС по умолчанию визуально отключены все скроллбары, поэтому на видео его и не видно. Можно для всех остальных ОС дополнительно стилизовать скроллбар, чтобы он не выглядел так странно (как, например, на Windows). В этом шортсе рассказывал, как это делается: ua-cam.com/users/shortspgjRYNT2LQA
Спасибо за урок! Всегда повторяю за тобой. Подскажи, пожалуйста, такой момент: использую VS Code, если в разметке указать высоту лого 100, как указано у тебя, то она не будет изменяться в процессе, когда мы для планшетной и мобильной версии убавляем ширину до 144, 120 пикселей, высота остаётся без изменений, в итоге получается очень большой паддинг. Сейчас решением для себя увидел только выставить height:auto, либо же вовсе убрать height из разметки. Что скажешь? Спасибо заранее за ответ.
Привет! В разметке изображениям всегда нужно задавать атрибуты width и height (значения брать из десктопной версии макета), а в стилях обязательно нужно задать для всех img max-width 100%, чтобы ни одно изображение не выпирало за пределы родительского блока и height auto для сохранения пропорций.
Насчёт loading="lazy" для логотипа. Не нужно добавлять его тем картинкам, которые находятся в области изначальной видимости при загрузке страницы. Это ухудшит их время отрисовки.
У вас на канале есть видео «Пиксели не нужны» где в верстке в основном используются rem и em, а здесь только пиксели. Вопрос: как понять, когда использовать rem, em и px?
1:44:30 У .banner__inner задан background-color: var(--color-gray) и на видео он отчётливо серый, но у .service-card (1 и 4 карточка) цвет такой же задан, но карточки на вид такого же белого цвета, как и фон страницы. Как так получилось?
Привет! Не понимаю о чем ты. На видео четко виден белый фон страницы и светло-серый фон у banner__inner и service-card 1 и 4. У тебя иначе отображается? Может из-за монитора? Бывает так, что оттенки настолько малым отличаются, что на некоторых мониторах отличий не видно.
Привет ! Спасибо за контент, но у меня остался вопрос касаемо твоих миксинам по размерам экрана. Я ломаю голову над тем как изменить миксин. По факту на переходных точках 1 пиксель теряется и из-за этого выходит некрасиво
Привет! Почему теряется? Миксин mobile отвечает за диапазон 0-767px включительно, а mobile-above отвечает за 768px и выше. С остальными миксинами аналогично.
Под капотом миксина tablet конструкция "max-width: 1023px", которая отвечает за диапазон от 0 до 1023 пикселей включительно, а миксин tablet-above за диапазон от 1024px и выше.
Это было бы уже второе nav-меню в разметке. И так как оно буквально дублирует десктопную версию, решил сделать нейтральным дивом. Но только сейчас подумал, что на мобилках основной будет скрыт и недоступен для скринридеров. Действительно стоило и это второе дублирующее меню сделать через , ты прав.
Классный урок, просмотрел минут 15, спасибо, качество на высоте! Я уже не новичок в верстке, смотрю с целью обмена опытом. Сделаю 2 небольших заметки, может быть, кому-то пригодятся. 1) В последнее время я отказался от img { max-width: 100%; height: auto; ... } в reset или в normalize для тега img, так как нередко юзаю object-fit для картинок. Я бы это лучше вынес в утилити-класс типа .img-fluid, ну или в миксин. 2) Для того, чтобы сразу видеть все шрифты, заюзанные в макете, в Фигме есть классный плагин Font Fascia, рекомендую. Не придется прощелкивать текстовые элементы макета.
Спасибо за комментарий! 1. Я object-fit использую только в случаях, когда дизайнер мудрит с пропорциями изначальной картинки на адаптиве. Ну а в наличии max-height 100% и height auto глобально для всех img я не вижу ничего плохого. В каких случаях это может что-либо испортить? Не могу придумать. 2. Плагин Font Fascia хорош для идеальных макетов, где дизайнеры не мусорят, оставляя скрытые слои с альтернативными шрифтами. Раньше и я этим плагином пользовался, но когда плагин выдает два десятка шрифтов вместо двух действительно нужных - это не ок. Понимаю, проблема конкретного макета, но как показывает практика - дизайнеры редко встречаются педантичные, чаще это творческие люди без задродства на красоте "невидимых вещей", типа слоев, их компоновки и на их оправданном наличии в конечном макете :)
@@AleksanderLamkov Благодарю за ответ! 1) Вы пишете: "Я object-fit использую только в случаях, когда дизайнер мудрит..." - На реальных проектах есть более суровый парень, чем дизайнер - это Контент-менеджер заказчика :) Нет абсолютно никакой гарантии, что он загрузит картинки нужных пропорций и размеров. Тут и пригодится `object-fit: cover`, то есть в тех же случаях, что и `background-size: cover`, но когда нужен не фон, а именно `img`. Пример: где-нибудь в одном месте поста картинка должна быть вписана в прямоугольный контейнер `.article__img-box { padding-bottom: 60%; } `, и она же в другом месте (в галерее этого поста) должна быть внутри квадратного контейнера `.article-gallery__img-box { padding-bottom: 100%; }`. Да, если я делаю и фронт и бэк, то я могу сделать нарезку картинок на бэке при загрузке. Но если я не имею отношения к бэку? или вдруг дизайн поменялся? Перенарезать все картинки? поэтому я для страховки в любом случае вписываю картинки через object-fit: cover (если того требует макет, конечно). Здесь как раз и мешает height: auto, так как для контейнера мы пишем типа `.article__img-box { padding-bottom: 60%; }` и утилити-класс `.img-cover-box { position: relative: overflow: hidden; }` , а для самой картинки пишем утилити-класс: .img-cover { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; } HTML получится такой:
2) "Плагин Font Fascia хорош для идеальных макетов" - он ведь показывает не только шрифты, но и под каждым шрифтом даёт кликабельный список элементов дизайна, выполненных этим шрифтом. Так что, даже в описанном вами случае, легче прокликать 20-30 сгруппированных списков, чем 200-300 элементов самого дизайна :) P.S. Но всё это моё мнение, я ни в коем случае не претендую на истину в последней инстанции, а за видео-урок ещё раз благодарю. Обязательно пройду его полностью, чтобы увидеть ваши приемы работы.
@aharito по 1-му пункту у меня ещё есть что сказать. Если для в разметке добавлены атрибуты width и height, то независимо от того, какого размера и пропорций картинку загрузит контент-менеджер, она встанет в верстке как надо. Если пропорции загруженного изображения не те, картинка исказится, это факт, но object-fit спасает и при этом не нужно задавать фиксированные ширину и / или высоту. При max-width 100% и height auto размер итоговой картинки в интерфейсе будет вычислен на основе значений атрибутов width и height в разметке, но при этом ширина никогда не будет больше допустимых 100% от ширины родителя. А вот на счет хака с padding-bottom 100% - от него можно отказаться в пользу свойства aspect-ratio, вот мой шортс про него: ua-cam.com/users/shortsM-OcxRDB3bs
А есть ли какое правило для группировки блоков scss или все кидается в одну папку? Тут страница простая, а в более сложных проектах где блоков может быть существенно больше и разобраться потом будет не реально сложно. :(
Привет! Можно дополнительно в blocks разделить файлы на две категории - ui и views, в ui располагать кнопки, поля ввода, модальные окна, селекты, аккордеоны, в общем - всё, что точно может повторяться на странице неоднократно, а во views помещать всё остальное. А для более серьезных проектов (особенно SPA) есть feature-sliced.design/ru/
Подскажите как у вас работают сокращённые css через двоеточие, например mr:a ( margin-right: auto ). В Emmet такого нет. Пользуюсь sublime, неужели на все сниппеты писать?
кто может подсказать почему у меня не сохраняются изменения если я создаю scss файл в папке style как на видео (в терминале выдает ошибку), а если я создаю файл изначально в самой папке проекта все сохраняется
Привет! Возможности всё ещё сильно ограничены, но технология набирает популярность в связи с блокировками приложений в AppStore, многие банки свои веб-приложения дополнительно перевели на PWA. Наверняка в будущем её возможности будут расширяться.
Здравствуйте, подскажите зачем делать миксин "reset-link" и "reset-button", если можно просто добавить эти обнуления стилей по тегам в файле обнуления стилей "_normalize" ?
Обнулять стили кнопкам глобально по тегу button не очень хорошо. Лучше все же к классу button подвязаться. Ну а что касается ссылок - можно сделать и так, как ты предложил.
Благодарю за видео, есть ещё вопрос. Хорошей практикой, вроде бы, считается "mobile-first". Здесь вы идете от обратного, от десктопа. Я в своей практической работе также зачастую иду от десктопа на запросах "max-width", но при этом испытываю чувство некоторого неудоства - типа делаю-то не по "best practices". Вопрос: насколько часто в своей реальной работе вы юзаете "mobile first" и если юзаете, то при каких условиях?
Не часто. Когда явно нужна необходимость работы какого-либо свойства только на определенных диапазонах а-ля 768px / 1024px и шире, в частности в утилитарных классах а-ля visible-mobile, visible-tablet.
@@AleksanderLamkov Простите за навязчивость, ещё вопрос: а почему? Можете сформулировать, почему чаще работаете в концепции "изящной деградации", по-простому "desktop first"? ведь все авторитеты говорят, что mobile-first рулит, потому что... (и тут 100 вполне резонных доводов).
Потому что мне «отсекать» проще, чем «наращивать». Частый аргумент в пользу Mobile First - скорость загрузки на мобильных устройствах. Я не согласен с этим. Современные сайты страдают НЕ от количества медиазапросов, а от неоптимальной работы с медиаконтентом и скриптами. Поэтому не надо делать корнем всех проблем Desktop First. Это последнее, что губит сайт. Сначала нужно оптимизировать действительно важные вещи. Считаю, что эти два подхода в принципе не нужно противопоставлять. Нужно использовать их одновременно в подходящих ситуациях.
@@AleksanderLamkov Благодарю. Думаю, что нужно разделять этап проектирования сайта/приложения и этап собственно написания CSS/HTML и прочего. При проектировании - да, Mobile First скорее всего рулит, так как мобильных юзеров уже большинство, и UI в первую очередь нужно разрабатывать для них, а уже потом навешивать плюшки для больших экранов. А когда мы по готовому дизайну кодим сайт, тут уже, действительно, как вы сказали - каждый юзает тот подход, что ему ближе, и противопоставлять их не нужно.
Подскажите, пишу в VScode, как настроить так что бы переменные появлялись в подсказках? может есть какое расширение, на подобие SCSS IntelliSense ( он почему то не работает)
У меня SCSS IntelliSense в VSCode работает, возможно у вас настройки не те? там есть настройки Suggest Functions, Mixins и Vars, правда по дефолту они включены. В общем, проверьте settings для этого расширения. А вообще для SCSS юзаю этот самый SCSS IntelliSense и ещё пару: eCSStractor и Live Sass Compiler, если ещё не юзаете, очень рекомендую.
@@aharito Спасибо большое за ответ, помогли найти решение в чате канала. Помогло такое расширение как CSS Variable Autocomplete. Да, eCSStractor и Live Sass Compiler использую)))
Вопрос: почему в миксине fluid-text мы юзаем 1440, а не 1240? Ведь экран ограничен контейнером, макс. ширина полотна 1240, и шрифт должен расти только до этого размера экрана?
@@AleksanderLamkov Кстати, насчет нижней границы то же самое. Ведь шрифт становится минимальным на определённом размере экрана и далее не уменьшается. Строго говоря, размер шрифта между мин. и макс. размерами должен изменяться пропорционально размеру экрана между мин. и макс. размерами. Получится что-то типа такого: // $property - св-во, напр. font-size // $maxSize, $minSize - макс. и мин. знач-я св-ва // $maxWidth, $minWidth - макс. и мин. ширина экрана @mixin adaptivePropFluid($property, $minSize, $maxSize, $minWidth, $maxWidth) { $deltaSize: $maxSize - $minSize; $deltaWidth: $maxWidth - $minWidth; #{$property}: clamp( #{$minSize}px, calc(#{$minSize}px + #{$deltaSize} * ((100vw - #{$minWidth}px) / #{$deltaWidth})), #{$maxSize}px ); }
Да, интересные мысли, спасибо! Кстати, в последнем видео я предлагаю другую формулу, улучшенную, на основе комбинации rem и vw: ua-cam.com/video/6l6IJLlSoLo/v-deo.html Вот там вроде бы нет проблемы пропорционального изменения значения.
Александр. Просматривая данный ролик, обратил внимание на то, что в утилитах, вы неоднократно использовали "!important", да бы перебить все погрешности при каскаде стилей. Разве это не считается плохим тоном в современной верстке? Благодарю за ответ!
Для утилитарных классов !important нужен, без него не обойтись. Это, пожалуй, единственный сценарий использования этой механики, который нельзя назвать "плохим тоном" :)
Для кнопки в header медиазапрос для планшетной версии не добавлен. А ещё терминал vsc ругается на: font-size: clamp(#{$min}px, #{$max / 1440 * 100}vw, #{$max}px); Пишет, что использование символа "/" для деления вне функции calc() устарело и будет удалено в Dart Sass 2.0.0. Я то вообще такую конструкцию впервые вижу.
Привет! В каком плане «не добавлен»? Верстка на планшетной версии разве ломается? А по поводу "/" - можно не обращать внимание. Sass v. 2 выйдет не скоро.
@@AleksanderLamkovстили для кнопки были добавлены без медиазапроса. Просто ты забыл @include tablet. Раз уж ты ответил, хочу сказать, что я учился на курсе, в котором ты был одним из наставников. По окончании курса я выпросил доступ к записям всех консультаций всех групп (где-то 7-9 групп в общем, точно не помню). Я пересмотрел все записи и могу сказать, что ты не зря канал создал. Консультации, которые ты вёл, были самыми содержательными и полезными. Жаль, что я не к тебе в группу попал тогда.
> Просто ты забыл @include tablet Понял. Да, допустил ошибку. Спасибо, что поправил. > Я пересмотрел все записи и могу сказать, что ты не зря канал создал. Консультации, которые ты вёл, были самыми содержательными и полезными. Очень приятно слышать, что мои прошлые деяния всё ещё приносят людям пользу! О канале как раз начал думать в то время, когда наставничал на том курсе по фронтенду :)
Этот параметр нужен для сайтов без адаптива, где на мобилке и десктопе открывается одинаковая десктопная версия. В таком случае на мобилке без возможности зума будет тяжко. Валидатор же не определяет, есть ли на проверяемом сайте адаптив и подстраховывается, выводя такое предупреждение.
@AleksanderLamkov А как прикажите на телефоне изображение зазумить и рассмотреть? Открывать его в отдельной вкладке? За пользователя не нужно ничего решать. user-scalable=no является антипаттерном в доступности веб приложений и не стоит его показывать в обучающих видео. За него предупреждение будет не только в валидаторе, но и в lighthouse от гугла, ну и в самом chrome в ошибках будет.
@@aliexpress2109 аха, если конечно там не будет 10 лендосов от одной компании - это стоит обсудить в начале проекта. А если один лендинг, то там это не особо нужно
Александр, такой вопрос. В первом мастер классе, как я помню, мы в начале каждой секции ставили h1 и названием секции с классом visually-hidden для доступности. В этом мастер классе такого нет, хотя он более сложный. Насколько важно это делать?
В первом мастер-классе мы добавляли визуально скрытые заголовки уровня h2 в каждую секцию потому, что их не было по макету. Заголовок h1 был в разметке ровно один. В макете этого мастер-класса заголовки у секций имеются и так. Поэтому для них visually-hidden не нужен.
Привет, Александр. Видео как всегда - шикарно, спасибо за труд. Хотел спросить про переменные, есть ли какая-то задумка в использовании конкретно :root, а не scss переменных(через $), или это дело привычки? Поскольку на мой взгляд, запись через $($color), выглядит короче чем условная var(--color).
Привет! Спасибо за комментарий! Отвечаю на вопрос. Во-первых, не нужно путать :root {} и $ - это о разном. :root {} - это обычный CSS-селектор, аналог селектора html {}, дающий доступ к , корневому элементу. В этом селекторе принято объявлять так называемые глобальные переменные, которые будут использоваться в стилях многих компонентов страницы. $ - это синтаксис объявления (и по совместительству использования) Sass-переменной. В CSS же переменные объявляются через двойной символ '-', а используются через функцию var(). Sass-переменные и CSS-переменные служат разным целям и они совершенно разные, не только в синтаксисе. CSS-переменные работают в рантайме (во время обработки стилей браузером), а Sass-переменные после компиляции scss => css пропадают из финального файла, заменяются на конкретные значения. CSS-переменными можно манипулировать через JS, а Sass - нет. CSS-переменные подверженны всем принципам каскада, а в сочетании с работой в рантайме, можно творить очень классные штуки. Приведу пример. Бывают ситуации, когда различным всплывающим менюшкам и модальным окнам нужно знать, какой высоты сейчас шапка страницы. Эта задача решается так: через JS получаем текущую высоту шапки, через JS в :root {} записываем новую глобальную CSS-переменную header-height, в которой будет соответствующее значение, затем эта переменная будет использована в CSS там, где требуется. А при ресайзе окна (изменении ширины в частности) через JS обновляем значение header-height, чтобы стили зависящих от шапки элементов своевременно обновились. На Sass-переменных сделать это невозможно. И темизация - большая и сложная механика, которую на Sass сделать можно, но так редко кто делает, обычно используются классические CSS-переменные, которые можно переопределять, в зависимости от наличия на или специального класса от темы. Вообще, раньше CSS-переменных не было, поэтому все использовали Sass-переменные, сейчас же это не обязательно, лучше использовать нативный инструмент, а не надстройку. Удобство синтаксиса - вопрос привычки. Когда нужна мощь нативных CSS-переменных (а это требуется почти всегда в реальных проектах), можно и нужно писать переменные через var, иного пути нет.
И последнее: Sass-переменные стоит использовать в Sass-синтакисе, а CSS - в CSS. О чем это я. В параметрах Sass-миксина без $ не обойтись, а в CSS-функции calc() можно смело использовать нативные var() переменные и это будет прекрасно работать.
Мы используем кастомный нормалайз, про который объяснял в одном из первых уроков курса по CSS. Если у элементов в разметке есть классы (атрибут class), то нормалайз сбросит у таких элементов лишние отступы и маркеры (если речь идет про li). Ну а ссылкам даже reset ничего не делает, тут нужно точечно для каждого проекта прописать те стили, которые требуются по дизайну.
Подскажите, а почему в каждой секции отдельно прописывать container? Ведь ширина контентной части по макету одинаковая, не лучше ли было сделать один общий container и внутри него поместить секции?
Привычка. Часто так бывало на работе, что какая-то из секций макета выбивается по ширине (например, добавляется фон на всю ширину экрана), а из-за ограничений родителя реализовать бы её уже не получилось. Но ты прав, что для этого макета можно было бы и один раз применить container и не создавать лишних оберток.
@@AleksanderLamkov Спасибо за ответ. У меня еще один вопрос, у некоторых людей я видел margin заданный в %. Мне кажется использование margin в % сокращает количество медиа запросов и кода. Но я никогда не применял это в своей практике. Что можете посоветовать, стоит ли его применять и применяете ли вы это в своей практике.
Чисто в %? Странно. Ну или верстка получается «на глаз» и при определенных обстоятельствах всё съезжает, либо в CSS выверенные, но жуть какие неудобные дробные значения. Лучший выбор - % или vw / vh в связке с функциями min, max и clamp. В таком случае действительно получится сэкономить медиазапросы. Было про это отдельное видео на канале: ua-cam.com/video/wLWO58PJFrE/v-deo.html
@@AleksanderLamkov Извините за банальный вопрос. Подскажите, почему в обнуляющем стиле вы установили margin-block: 0; только для тегов с классами? Просто у меня в коде попались некоторые теги без класса и я сначала не понял откуда взялся лишний margin. Пришлось немного изменить код. :where( h1, h2, h3, h4, h5, h6, p, ul, ol, dl ) { margin-block: 0; } Наверно правильнее не допускать использования этих тегов без классов?
Не совсем. Наличие элементов p, ul, li и подобных БЕЗ классов допускается, но в местах разметки, которые впоследствии будут наполняться контент-менеджерами через wysiwyg-редакторы. Нагенерированные таким способом элементы будут в итоговой разметке без классов. И для них важно все же прописать какие-то внешние отступы, чтобы контент не слипался друг с другом.
Почему ты класс container задаешь тегу section? Обычно section остается на всю ширину. Или это было сделано специально, т.к цвет фона body и section один и тот же?
Угу, в макете нет ни одной секции с иным фоном, нежели белый цвет, потому не вижу смысла переносить контейнер в дополнительную внутреннюю обертку секции.
На всякий случай. Добавил по привычке. Вроде как в проекте так и не заюзали ни разу. Можно удалить. P. S. Но в целом, они же не мешают, в финальный бандл CSS не попадут :)
Вопрос по нормализации, в вашем билде данного файла последний блок @media имеет строчку с transition duration 0.01s !important, что в итоге сказывается на анимации тк перебивает длительность анимации через константу заданную в variables, но у вас при создании анимации константа работает, как так получается? 🧐
Привет! Длительность перехода в 0.01s включается только в режиме пониженных движений (меидиазапрос prefers-reduced-motion: reduce). Это нужно для пользователей, у которых включены специальные настройки на компьютере или в самом браузере. Если у тебя также, то посмотри следующее: при открытом девтулз жмакни Ctrl + Shift + P, введи в открывшемся терминале Rendering, далее на этой новой панели найди пункт Emulations и подпункт prefers reduced motion, там скорее всего стоит нестандартное значение reduced, нужно его отключить. И тогда медиазапрос с 0.01s срабатывать не будет.
Спасибо за такое полезное видео! Подскажите, окуда берется формула для динамического шрифта? И ещё, почему для размера шрифта используются px а не rem?
Привет! Формула простая: берем значение в пикселях из десктопной версии макета, делим на ширину контентной части и умножаем на 100, чтобы по итогу перевести всё во вьюпорт-единицы vw. rem принципиально не использую, так как многие новички допускают ситуацию, когда слишком маленький размер шрифта на мобильной версии по итогу становится гораздо меньше рекомендуемых 14px Функция clamp с мин-макс ограничениями гораздо безопаснее. Сложнее выстрелить себе в ногу при адаптации.
@@AleksanderLamkov Спасибо за ответ! Мне было интересно, откуда именно это формула, так как на сайтах вроде css-tricks приведена совсем другая формула для динамического шрифта
Да, только с дополнительным onclick на сами ссылки :( Про урок по dialog - хорошая идея. Только там без JS скудная версия получается. Хочу после курса по JS сделать гайды по всем популярным UI компонентам.
Ссылки на плейлисты обоих мастер-классов есть в описании под каждым видео канала. Верстка Kropp Fitness (HTML, CSS) ua-cam.com/play/PL0MUAHwery4rqkzKF1mDBCIH_eZgjY6uN.html
Спасибо за контент. Использование методологии бэм в проекте с ванильном js еще вроде понятно. Но когда проект пишется на фреймворке(библиотеке) +scss если ли смысл в бэм? Тогда как в таком случае обычно проект делится на компоненты, у которых стили в отдельном файле slyle.module.scss и при сборке проекта названия стилей меняется везде.
Привет! Модульные стили и БЭМ плохо совместимы, нужно выбрать что-то одно. Модульные стили стоит использовать в тех проектах, где либо слишком много компонентов, либо если сам проект представляет собой библиотеку компонентов, которые в будущем будут интегрироваться в другие проекты и чтобы избежать возможных конфликтов стилей, модульные стили будут отличным решением. В остальных же случаях я предпочту использовать БЭМ, так как если где-то что-то начнет пересекаться и мешать друг другу, то это будет сигналом о том, что пора переработать структуру разметки и что-то объединить, что-то унифицировать, чтобы переиспользовать один и тот же код.
Привет! Подскажи, пожалуйста, где можно поменять настройки развертывания элементов с помощью таба? У меня стоит emmet на vs code. Хочу ускорить верстку html. Допустим при img у меня стандартно разворачивается только: src="" alt="", но я хочу сделать так, чтобы добавлялись сразу width и height. Чет туплю и не понимаю куда смотреть. Сниппет создавать или шо...
Привет! Я только в WebStorm знаю как это настроить. Для VSCode я бы гуглил так: vscode custom abbreviation snippets По первой ссылке на smashingmagazine есть инструкция.
Так просто визуально проще воспринимается. Первый импорт - для файлов, которые есть буквально в каждом проекте. Второй - только для бэм-блоков, которые в каждом проекте разные.
Такая проблема у меня почему-то не работают переменные в которых лежит бордер транзишн и тд, переменные с цветами работают нормально. Подскажите решение, пожалуйста.
Привет! Помоги настроить html.json сниппет. решил сделать кастомный как у тебя. При написании тега Img через точку с названием класса, структура не разворачивается как надо "Image tag with Dynamic Attributes": { "prefix": "img", "body": "", "description": "Image tag with optional class" }
Привет! Стрелку нужно было добавлять через разметку и тег в частности, чтобы реализовать смену цвета при наведении на кнопку, внутри которой иконка стрелки находится. А картинку карточки добавляем также через разметку, через , чтобы на адаптиве было удобно всё позиционировать. Если бы делали через CSS и background-image, то было бы весьма проблематично.
@@AleksanderLamkov А, вон в чем задумка. Я просто делаю вне видео и после смотрю как реализуешь тот или иной блок, если возникают какие-то сомнение в написании кода) Спасибо за ответ!
@@AleksanderLamkov И в дополнение хотел спросить. Пишу на css без пре-процессора Добавляя иконку, у тебя цвет стрелки черный, я же добавляю, у меня цвет зеленый. Ты меняешь цвет обращаясь к svg у меня смена получается только к обращению path .wrapper-icon svg path{ fill: #fff; } Почему так?
В начале мастер-класса мы подключали нормализацию стилей (ссылка на этот файл в описании под видео), в нём есть такие правила: svg *[fill] { fill: currentColor } svg *[stroke] { stroke: currentColor } За счет этого цвет внутренностей svg перекрашивается в значение свойства color, которое наследуется от родительского элемента.
📌 Друзья, в телеграмме у нас есть канал и отдельный чат, где вы можете задать вопрос по фронтенд-разработке и вам постараются помочь:
💬 Чат: t.me/friendlyFrontendChat
ℹ Основной канал: t.me/friendlyFrontend
Если вам это интересно, присоединяйтесь, задавайте вопросы и помогайте другим 🙂
Чат это конечно хорошо, но чем больше людей в чате, тем сложнее отслеживать вопросы по конкретным темам, можно перевести чат в группу и там добавить несколько чатов по отдельной тематике, так люди смогут писать вопросы в конкретных чатах-подтемах
Привет! Соглашусь. В ближайшие пару недель переведу чат в формат сообщества с топиками. Давно напрашивается такой формат. Спасибо!
@@AleksanderLamkov Спасибо за отклик👌
Здравствуйте спасибо болшое за урок , подскажите пожалуйста как учить методом повторения ? Спасибо
Смотришь урок до момента, когда автор начинает реализовывать какой-то блок на странице, ставишь паузу, пробуешь реализовать самостоятельно, затем продолжаешь просмотр видео и сравниваешь код из видео с тем, что ты написал, ищешь минусы и плюсы, делаешь для себя выводы и по такой же схеме двигаешься дальше.
Спасибо огромное за уроки! Ценнейший материал, даже на англоговорящем Ютубе ему нет ровни! Я очень рада, что учу прямо в то же время, что вы выпускает ролики. Мотивирует! ❤
Очень полезный контент, пересмотрел все твои видео с самого начала, верстал предыдущий сайт вместе с тобой, даже купил ещё один монитор, чтобы было удобнее и быстрее верстать 😂 многих смотрел и вот ты единичный случий, когда обьясняешь именно как правильно делать.
Тоже думаю взять себе ещё 2 монитора, полезная вещь
Я взял второй монитор к ноутбуку, очень удобно. На большом моне работаю, на моне ноута все инструменты или макет, или видео, короче все остальное.
Видео на 2 часа смотрел часов 10 (останавливался на каждой новой строчке кода, смотрел, что меняется, оставлял в проекте коммент и запускал дальше). Полет нормальный! Спасибо!
Прошло 3 месяца, как успехи ?))
@@alialiev4667 а у тебя как ;D
@@alialiev4667 прошло 6 месяцев умер на сво это мой друг 😢
Александр, ваши уроки - это божественная эссенция лучшего учебного материала и вашего опыта! Я прошел через курсы скилбокс, но там по верстке дали не больше половины того, что вы показали в этом уроке. С удовольствием впитываю все нюансы и тонкости верстки, которые вы рассказываете в процессе работы. Очень хорошо, что объясняете каждый блок кода, почему написали вот так и т.д. Это очень помогает понять множество вещей и увидеть картину в целом. Безмерно благодарен вам за ваш труд!
а ты после скиллбокса устроился куда то ?
@@MathInfo-ye1gf и да и нет) 2 недели отработал верстальщиком на ВордПресс, выперли за медленную работу. Похвалили конечно за грамотность, но им нужно было конвейер сайтов обслуживать, а ждать когда я научусь быстро работать не захотели. Больше никуда не брали. Беру сейчас редкие заказы на фрилансе, накупил книг и читаю, практикуюсь по мере возможности.
Александр, спасибо за труды. Благодаря вам я здорово прокачал вёрстку, каждый день узнаю какие-то новые нюансы, подходы.
Преимущество вашего материала это тщательная подготовка текста, что делает его всеобьемлющим и исключает воду. Так же чувствуется, что код продакшн уровня. В свободном доступе такое найти очень сложно. Надеюсь увидеть такой же материал и по React, без воды, тудушек ,сразу и по возрослому))
теперь понятно откудя появился компонентный подход, разбивка стилей на блоки отличная тема. Много полезного узнал, благодарю.
Спасибо. С тобой классно разбираться в фронтенд-разработке. Желаю успехов с новыми видео.
Первая часть великолепна. Много нового узнал. А подход к структуре просто супер!
Аааааааа, я все повторяю, записываю, сохраняю в гисты какие-то рецепты, такой кайф!!! Оч много нового и передового! Решил в процессе обучения на другом курсе, подчерпнуть знаний у вас, так как начинается вёрстка в портфолио и хочется прям усовершенствоваться в вёрстке. Спасибо! Щас отдохну немного и на вторую часть пойду)))
Бриллиант среди подобных видео по тематике! Спасибо за контент)
Очень классный урок! Интересно посмотреть. Узнал для себя много нового. Спасибо
Саша, ОГРОМНОЕ СПАСИБО!!! Много полезного и нового узнал для себя
Лучше один раз увидеть,чем сто раз услышать.Все просто и понятно.
Это просто прекрасно! Спасибо за такой контент.
На 45:20 ты уменьшил кнопку без медиа запроса, значит не для планшета, а вообще. Не по макету получается. Править уже поздно, так для информации, тем кто будет верстать по видео.
искал этот комментарий :D Тоже подметил, что нужно было под медиа для таблеток это записать.
очень полезно по поводу файловопапочной структуре и в целом модульности =) давай такого еще и побольше ) еще бы по вьюшке такого =) реакт кажется более сложным)
Буквально завтра утром выходит новый, третий мастер-класс - там всего будет ещё больше и круче)
Только начал смотреть, уже много полезного узнал. Большое спасибо)
Давно так вкусно не смотрел. Спасибо 👍
Спасибо за видео! Скорее бы уже джаваскрипт и фреймворки, хтмл и цсс все такие быстро осваиваются 😊
Контент топ, вставки, зум кода и тд, очень удобно
Отличное видео, благодарю за труд. Вынес для себя несколько очень полезных моментов, вспомнил как вообще верстать спустя несколько лет простоя, но вместе с этим возникло несколько вопросов, скорее касательно подготовки проекта:
Почему в _variables используются не переменные в стиле scss, т.е. через $, а стандартные переменные css, через -- в root?
Как была выведена формула в миксине fluid-text? Очень полезно при адаптации, но хотелось бы узнать про нее подробнее, и узнать есть ли еще подобные формулы?
Адаптацию стоит проводить под строгие значения, т.е. под 1280, 1024, 768 и т.д., или стоит подходить более универсально, т.е. просто сужать экран, отслеживать на каких значениях ширины поехал тот или иной блок и исправлять его. Например, сужали страницу, обнаружили что на значении 859px съехал такой-то блок, создали media с этим значением и исправили. Относительно этого я гуглил те самые несколько лет назад, и мнения относительно вопроса расходились: одни адаптировали по конкретным значениям, другие просто сужали экран
Разве адаптацию нужно проводить не до 240px?
Привет! Спасибо за фидбек :)
По переменным - потому что CSS-переменные работают в рантайме, это зачастую удобнее, нежели использовать компилируемые переменные из Sass.
По формуле миксина - в clamp первым и последним аргументом ограничиваем диапазон минимума и максимума значения, а во втором аргументе рекомендуемое значение по формуле, которая переводит font-size из px в vw-единицу измерения, обычное деление на ширину макета и умножение на 100, чтобы получилось корректное значение.
По адаптации - никогда не надо плодить лишних уникальных медиазапросов, а то интерфейс будет слишком дерганным при сужении экрана. Берем за основу 3-4 контрольные точки (можно как у меня в этом мастер-классе, можно из сетки бутрстрапа), и когда при сужении, к примеру, ломается что-то на ширине 1111px, начинаем применять меры сильно заранее, на ширине ближайшего (!) бОльшего значения медиазапроса, max-width 1280px в моем случае.
Адаптировать нужно вплоть до 360px, экранов уже в глобальной статистике уже не существует. Номоводные раскладушки не в счет, там и долей процента пока нет.
@@AleksanderLamkov понял, спасибо за ваш ответ
Спасибо, посмотрим)
32:29 - а за чем дублировать меню? Если можно стилями, через медиа запросы с помощью позиционирования сделать мобильное меню. В чём преимущество или плюс такого подхода? Хотелось бы узнать)
Вообще, я хотел показать работу с прежде всего 😅
Ну а медиазапросами переделать разметку уже имеющегося десктопного меню можно, главное не пихать костыли с абсолютным позиционированием и точечным смещением.
@@AleksanderLamkov Угу. Если не менять позиционировнием меню, то как?) я только так делаю))
Доп. обертки добавлять и через display contents шаманить. Покажу подход этот в следующем МК, который в течение месяца выйдет.
53:07 Вы навели на cross-button в браузере и отобразилось окошко со стилями кнопки.. за счёт чего?
Режим выделения, включается кнопкой слева от кнопки эмуляции устройства и сочетанием клавиш Ctrl + Shift + C.
Александр, спасибо за Ваши уроки! Если будет возможность, покажите, пожалуйста, верстку интернет-магазина с фильтрами товаров, сложным меню и прочими наворотами )
Привет, спасибо за фидбек! :) После курса по JavaScript обязательно будет верстка с подобными сложными элементами интерфейса.
Подскажите, зачем писать ul > li > а, если все равно потом list-style: none. Почему нельзя использовать сразу ссылки. Сделал их флекс-элементами и делай с ними что хочешь?
Привет! Однотипные элементы стоит помещать в списки для улучшения семантики и доступности (пользователь скринридера получит информацию о том, сколько элементов со ссылками в списке, и у него будет возможность пропустить зачитывание всего списка).
@@AleksanderLamkov Ясно, про семантику я и не подумал. Спасибо за ответ!
Огромное спасибо за качественный контент,теперь использую твои техники в своих работах
Как раз можно закрыть пару пробелов, спасибо за видео, сегодня вечером будет чем заняться!
При использовании Vite получаю предупреждение о депрецированности @import в SCSS: Deprecation Warning: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.. Когда я заменяю @import на @use в styles.scss, возникает проблема: в файле utils миксины, такие как mobile и mobile-above, становятся недоступными, и появляется ошибка Undefined mixin. Как правильно использовать @use или @forward, чтобы миксины были доступны в других SCSS файлах?
Так... Объясню, как я в новом мастер-классе организовал всё через use и forward.
1. В папке styles создал папку helpers.
2. В папке helpers у меня лежат файлы _media.scss, _mixins.scss и _index.scss (названия с нижним подчеркиванием в начале, это важно).
3. В файле _index.scss следующее:
@forward 'media';
@forward 'mixins';
4. Пример использования миксинов и миксинов медиазапросов в файле styles/_globals.scss:
@use 'helpers' as *;
body {
@include fluid-text(18, 14);
@include tablet {
background-color: red;
}
}
5. Пример использования в файле styles/blocks/_button.scss:
@use '../helpers' as *;
.button {
@include flex-center(true);
}
@@AleksanderLamkov Огромное спасибо. Столкнулся с этой же проблемой. Когда нам ждать новый курс по вёрстке,?)
Новый МК на канале будет в течение месяца. Сейчас занимаюсь монтажом.
1:33:25 почему нужно использовать &:not(:last-child) для отступов снизу? Такой же вопрос по поводу секшн хедер
Чтобы верстка была более надежная.
В реальных проектах бывает ситуация - через некоторое время по требованиям заказчика часть контента убирают, то есть удаляются элементы из разметки и если у элемента, находящегося до удаленного элемента, остались внешние отступы margin-bottom, то они будут лишними.
И вот в таких ситуациях комбинация псевдоклассов not last child позволяет избавиться от нежелательного отступа, когда элемент внезапно оказывается последним среди своих соседей, лежащих на одном уровне.
В миксине fluid-text устаревшее выражение, деление используется только с calc, в новой версии sass иначе работать не будет, лучше сразу привыкать писать по новому.
старое - font-size: clamp(#{$min}px, #{$max / 1440 * 100}vw, #{$max}px);
новое - font-size: clamp(#{$min}px, #{calc($max / 1440) * 100}vw, #{$max}px);
Если что, в следующую пятницу на моем канале выходит видео, где будет обновленная формула через rem и vw.
А в чем смысл миксинов @mixin reset-link, reset-button 14:30? Почему, например, не использовать класс .reset-link и .reset-button? Миксин же будет дублироваться к коде.
Писать каждый раз два класса в HTML-разметке вместо одного - неудобно. Лучше один раз вызвать миксин в CSS-коде.
@@AleksanderLamkov а почему тогда не пользуются @extend? При extend компиляция всех классов, в которых использовался extend пишется через запятую и подходит для данных примеров, а чем больше пишется миксинов, тем больше будет дублированного кода. Вот этот момент я не понимаю, как новичок.
Согласен, extend для финального кода был бы лучше, не подумал. Спасибо за наводку!
1:30:53 зачем создать отдельный файл под grid ? это же утилитарный класс, его можно задать в _utils.scss, или нет ?
Можно в utils. Просто стилей у этого класса довольно много, плюс есть внутренние grid__item элементы. Отдельный файл использован сугубо для декомпозиции и разгрузки utils.
мне понравились обе части! но заметила один нюнс( возможно это только у меня так в браузере отражается ?). при breakpoint 767px в header отражается и burger-button и само меню nav )
Это из-за нестандартной плотности пикселей твоего монитора. Забываю о том, что такой баг может у некоторых возникать. Тебе нужно вместо ровных значений 767 использовать 767.98 в медиазапросах и всё будет работать как надо.
@@AleksanderLamkov, благодарю за уточнение! Это огонёчки)
Понравилось!) Спасибо!!! Подписка, колокол!
На 35:59 класс mobile-overlay__close-button-wrapper а почему на элементе три дефиса ? я слышал что должно быть не больше двух
Да ну нет же каких-то строгих ограничений. БЭМ-методология не запрещает использовать такое количество слов в имени БЭМ-элемента.
@@AleksanderLamkov тогда супер, просто один блогер говорил не больше двух дефисов и всегда придерживался к этому
Это нормальная рекомендация, лучше действительно делать имена попроще, просто в некоторых местах (в частности в обсуждаемом месте) не обойтись.
Для чего делать такую вложенность?
первый секшен для отступов. А вот для чего оборачивать hero в section__body? Это не лишний контейнер?
Привет! Для консистентности. Чтобы секции были структурно похожи друг на друга.
В некоторых секциях есть section__header, а располагать иной БЭМ-блок на том же уровне - кажется мне не совсем правильным, поэтому добавляю новый БЭМ-элемент section__body и размещаю новый БЭМ-блок именно там.
@nderLamkov Прохожу курс по веб-программированию. Дошел до середины раздела Vue и понял, что у меня недостаточно базовых знаний HTML и CSS. Каждый день захожу на твой канал и изучаю материал. Прошло чуть больше недели, и я уже успел выучить курс по HTML и CSS +-БЭМ, а также реализовать первый макет. Сейчас повторяю второй макет.
Вот-вот дипломная работа (уже 4 курс). Тема веб-сайт (5страниц). Срочно нужно набрать скилл))
Спасибо за контент и отвтет
Оставлю тут коммент где побольше слов. Спасибо за серию видосов!
25:25, Саша почему ты не использовал миксину reset-link ?
Привет! Забыл, честно говоря :) Надо было добавить, согласен.
Отличный контент!
1:12:00
у меня вылезала ошибка, пока не изменил на @media (было @include)
готовый код:
@media desktop {
--section-padding-y: 50px;
}
@media mobile {
--section-padding-y: 30px;
}
Не должно быть такого... Это ведь у тебя не синтаксис Sass получился.
Подобный код валиден только с PostCSS-плагином postcss-custom-media.
@ спасибо щас поменяю
Здравствуйте, Александр, большое спасибо за мастер-класс. Хотелось бы увидеть урок по OpenGraph, PWA.
1:17:40 Должен ли появиться горизонтальный скролл? У меня появляется.
Скорее должен. У меня MacOS, а на этой ОС по умолчанию визуально отключены все скроллбары, поэтому на видео его и не видно.
Можно для всех остальных ОС дополнительно стилизовать скроллбар, чтобы он не выглядел так странно (как, например, на Windows).
В этом шортсе рассказывал, как это делается:
ua-cam.com/users/shortspgjRYNT2LQA
Спасибо за ваши видео! Это просто находка. Небольшой вопрос: почему вы используете CSS переменные, вместо SCSS переменных?
Вот мой недавний пост об этом:
t.me/friendlyFrontend/318
Спасибо за урок! Всегда повторяю за тобой. Подскажи, пожалуйста, такой момент: использую VS Code, если в разметке указать высоту лого 100, как указано у тебя, то она не будет изменяться в процессе, когда мы для планшетной и мобильной версии убавляем ширину до 144, 120 пикселей, высота остаётся без изменений, в итоге получается очень большой паддинг. Сейчас решением для себя увидел только выставить height:auto, либо же вовсе убрать height из разметки. Что скажешь? Спасибо заранее за ответ.
Привет! В разметке изображениям всегда нужно задавать атрибуты width и height (значения брать из десктопной версии макета), а в стилях обязательно нужно задать для всех img max-width 100%, чтобы ни одно изображение не выпирало за пределы родительского блока и height auto для сохранения пропорций.
@@AleksanderLamkov спасибо! тогда в каком месте в стилях лучше вставить height auto? в normalize.scss есть img, туда подойдет?
Да, можно в normalize.
Насчёт loading="lazy" для логотипа. Не нужно добавлять его тем картинкам, которые находятся в области изначальной видимости при загрузке страницы. Это ухудшит их время отрисовки.
Да, всё верно, спасибо за замечание!
P. S. В следующем мастер-классе (выйдет в течение пары недель) этот момент учёл 😅
Привет, когда прописываю например на 25:05 переменные var, не отображаются подсказки. Как это можно исправить ?
И когда делаю какой нибудь @include приходится импортить этот файл сверху другого scss файла
Какая у тебя IDE?
@@AleksanderLamkov vscode
Напиши в чат: t.me/friendlyFrontendChat
Там помогут.
У вас на канале есть видео «Пиксели не нужны» где в верстке в основном используются rem и em, а здесь только пиксели. Вопрос: как понять, когда использовать rem, em и px?
Можно всегда использовать rem и em. В новом мастер-классе покажу удобный подход.
1:44:30 У .banner__inner задан background-color: var(--color-gray) и на видео он отчётливо серый, но у .service-card (1 и 4 карточка) цвет такой же задан, но карточки на вид такого же белого цвета, как и фон страницы. Как так получилось?
Привет! Не понимаю о чем ты. На видео четко виден белый фон страницы и светло-серый фон у banner__inner и service-card 1 и 4.
У тебя иначе отображается? Может из-за монитора? Бывает так, что оттенки настолько малым отличаются, что на некоторых мониторах отличий не видно.
@@AleksanderLamkov да, открыл макет на другой машине и там всё норм. Это странно.
Привет !
Спасибо за контент, но у меня остался вопрос касаемо твоих миксинам по размерам экрана. Я ломаю голову над тем как изменить миксин. По факту на переходных точках 1 пиксель теряется и из-за этого выходит некрасиво
Привет! Почему теряется? Миксин mobile отвечает за диапазон 0-767px включительно, а mobile-above отвечает за 768px и выше. С остальными миксинами аналогично.
@@AleksanderLamkov Я отталкиваюсь от десктопа. Получается, что миксин работает до 1023 (не включительно) и от 1024
@@AleksanderLamkov код на кодпейн могу прислать
Под капотом миксина tablet конструкция "max-width: 1023px", которая отвечает за диапазон от 0 до 1023 пикселей включительно, а миксин tablet-above за диапазон от 1024px и выше.
Пришли. Не понимаю твою проблему.
я просто в шоке от твоего контента очень круто
На 35:36 почему не nav для меню ? это же навигация по сайту
Это было бы уже второе nav-меню в разметке. И так как оно буквально дублирует десктопную версию, решил сделать нейтральным дивом.
Но только сейчас подумал, что на мобилках основной будет скрыт и недоступен для скринридеров.
Действительно стоило и это второе дублирующее меню сделать через , ты прав.
@@AleksanderLamkov ничего страшного, мы же не роботы, что-то забываем, что-то не додумываем, главное что ты понял и дальше будешь делать лучше
Классный урок, просмотрел минут 15, спасибо, качество на высоте! Я уже не новичок в верстке, смотрю с целью обмена опытом. Сделаю 2 небольших заметки, может быть, кому-то пригодятся.
1) В последнее время я отказался от img { max-width: 100%; height: auto; ... } в reset или в normalize для тега img, так как нередко юзаю object-fit для картинок. Я бы это лучше вынес в утилити-класс типа .img-fluid, ну или в миксин.
2) Для того, чтобы сразу видеть все шрифты, заюзанные в макете, в Фигме есть классный плагин Font Fascia, рекомендую. Не придется прощелкивать текстовые элементы макета.
Спасибо за комментарий!
1. Я object-fit использую только в случаях, когда дизайнер мудрит с пропорциями изначальной картинки на адаптиве. Ну а в наличии max-height 100% и height auto глобально для всех img я не вижу ничего плохого. В каких случаях это может что-либо испортить? Не могу придумать.
2. Плагин Font Fascia хорош для идеальных макетов, где дизайнеры не мусорят, оставляя скрытые слои с альтернативными шрифтами. Раньше и я этим плагином пользовался, но когда плагин выдает два десятка шрифтов вместо двух действительно нужных - это не ок. Понимаю, проблема конкретного макета, но как показывает практика - дизайнеры редко встречаются педантичные, чаще это творческие люди без задродства на красоте "невидимых вещей", типа слоев, их компоновки и на их оправданном наличии в конечном макете :)
@@AleksanderLamkov Благодарю за ответ!
1) Вы пишете: "Я object-fit использую только в случаях, когда дизайнер мудрит..." - На реальных проектах есть более суровый парень, чем дизайнер - это Контент-менеджер заказчика :) Нет абсолютно никакой гарантии, что он загрузит картинки нужных пропорций и размеров. Тут и пригодится `object-fit: cover`, то есть в тех же случаях, что и `background-size: cover`, но когда нужен не фон, а именно `img`.
Пример: где-нибудь в одном месте поста картинка должна быть вписана в прямоугольный контейнер `.article__img-box { padding-bottom: 60%; } `, и она же в другом месте (в галерее этого поста) должна быть внутри квадратного контейнера `.article-gallery__img-box { padding-bottom: 100%; }`.
Да, если я делаю и фронт и бэк, то я могу сделать нарезку картинок на бэке при загрузке. Но если я не имею отношения к бэку? или вдруг дизайн поменялся? Перенарезать все картинки? поэтому я для страховки в любом случае вписываю картинки через object-fit: cover (если того требует макет, конечно).
Здесь как раз и мешает height: auto, так как для контейнера мы пишем типа `.article__img-box { padding-bottom: 60%; }` и утилити-класс `.img-cover-box { position: relative: overflow: hidden; }` , а для самой картинки пишем утилити-класс:
.img-cover {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
HTML получится такой:
2) "Плагин Font Fascia хорош для идеальных макетов" - он ведь показывает не только шрифты, но и под каждым шрифтом даёт кликабельный список элементов дизайна, выполненных этим шрифтом. Так что, даже в описанном вами случае, легче прокликать 20-30 сгруппированных списков, чем 200-300 элементов самого дизайна :)
P.S. Но всё это моё мнение, я ни в коем случае не претендую на истину в последней инстанции, а за видео-урок ещё раз благодарю. Обязательно пройду его полностью, чтобы увидеть ваши приемы работы.
UPD: в пункте 1) подправил классы, чтобы стало понятнее, если кто-то из начинающих вдруг читать будет :)
@aharito по 1-му пункту у меня ещё есть что сказать.
Если для в разметке добавлены атрибуты width и height, то независимо от того, какого размера и пропорций картинку загрузит контент-менеджер, она встанет в верстке как надо.
Если пропорции загруженного изображения не те, картинка исказится, это факт, но object-fit спасает и при этом не нужно задавать фиксированные ширину и / или высоту.
При max-width 100% и height auto размер итоговой картинки в интерфейсе будет вычислен на основе значений атрибутов width и height в разметке, но при этом ширина никогда не будет больше допустимых 100% от ширины родителя.
А вот на счет хака с padding-bottom 100% - от него можно отказаться в пользу свойства aspect-ratio, вот мой шортс про него:
ua-cam.com/users/shortsM-OcxRDB3bs
@@AleksanderLamkov Поэкпериментирую, спасибо.
А есть ли какое правило для группировки блоков scss или все кидается в одну папку? Тут страница простая, а в более сложных проектах где блоков может быть существенно больше и разобраться потом будет не реально сложно. :(
Привет! Можно дополнительно в blocks разделить файлы на две категории - ui и views, в ui располагать кнопки, поля ввода, модальные окна, селекты, аккордеоны, в общем - всё, что точно может повторяться на странице неоднократно, а во views помещать всё остальное.
А для более серьезных проектов (особенно SPA) есть feature-sliced.design/ru/
@@AleksanderLamkov Спасибо!
Спасибо большое за видео.
Подскажите как у вас работают сокращённые css через двоеточие, например mr:a ( margin-right: auto ). В Emmet такого нет. Пользуюсь sublime, неужели на все сниппеты писать?
Это, кажется, встроенная в IDE WebStorm функциональность. В VSCode тоже это «изкоробки». Для саблайма, увы, не подскажу, надо искать плагин, похоже…
насколько padding/margin-block актуальны? ранее встерчал только классический padding/Top/Left
Всегда их использую. Очень удобные. А ещё из той же оперы padding-inline, margin-inline, border-inline и border-block.
кто может подсказать почему у меня не сохраняются изменения если я создаю scss файл в папке style как на видео (в терминале выдает ошибку), а если я создаю файл изначально в самой папке проекта все сохраняется
Задай тут вопрос, кто-нибудь наверняка поможет:
t.me/friendlyFrontendChat
Спасибо большое за видео. Хотелось бы узнать ваше мнение про PWA насколько сейчас востребована технология и что ее ждет в будущем?
Привет! Возможности всё ещё сильно ограничены, но технология набирает популярность в связи с блокировками приложений в AppStore, многие банки свои веб-приложения дополнительно перевели на PWA. Наверняка в будущем её возможности будут расширяться.
Здравствуйте, подскажите зачем делать миксин "reset-link" и "reset-button", если можно просто добавить эти обнуления стилей по тегам в файле обнуления стилей "_normalize" ?
Обнулять стили кнопкам глобально по тегу button не очень хорошо. Лучше все же к классу button подвязаться. Ну а что касается ссылок - можно сделать и так, как ты предложил.
@AleksanderLamkov Понял, спасибо вам за ваши старания))
Александр, можно ли использовать к примеру файл _media.scss как шаблон-заготовку для других проэктов?
Конечно!
Приятно слушать, проф информация
Благодарю за видео, есть ещё вопрос. Хорошей практикой, вроде бы, считается "mobile-first". Здесь вы идете от обратного, от десктопа. Я в своей практической работе также зачастую иду от десктопа на запросах "max-width", но при этом испытываю чувство некоторого неудоства - типа делаю-то не по "best practices". Вопрос: насколько часто в своей реальной работе вы юзаете "mobile first" и если юзаете, то при каких условиях?
Не часто. Когда явно нужна необходимость работы какого-либо свойства только на определенных диапазонах а-ля 768px / 1024px и шире, в частности в утилитарных классах а-ля visible-mobile, visible-tablet.
@@AleksanderLamkov Простите за навязчивость, ещё вопрос: а почему? Можете сформулировать, почему чаще работаете в концепции "изящной деградации", по-простому "desktop first"? ведь все авторитеты говорят, что mobile-first рулит, потому что... (и тут 100 вполне резонных доводов).
Потому что мне «отсекать» проще, чем «наращивать».
Частый аргумент в пользу Mobile First - скорость загрузки на мобильных устройствах. Я не согласен с этим. Современные сайты страдают НЕ от количества медиазапросов, а от неоптимальной работы с медиаконтентом и скриптами. Поэтому не надо делать корнем всех проблем Desktop First. Это последнее, что губит сайт. Сначала нужно оптимизировать действительно важные вещи.
Считаю, что эти два подхода в принципе не нужно противопоставлять. Нужно использовать их одновременно в подходящих ситуациях.
@@AleksanderLamkov Благодарю. Думаю, что нужно разделять этап проектирования сайта/приложения и этап собственно написания CSS/HTML и прочего.
При проектировании - да, Mobile First скорее всего рулит, так как мобильных юзеров уже большинство, и UI в первую очередь нужно разрабатывать для них, а уже потом навешивать плюшки для больших экранов.
А когда мы по готовому дизайну кодим сайт, тут уже, действительно, как вы сказали - каждый юзает тот подход, что ему ближе, и противопоставлять их не нужно.
Подскажите, пишу в VScode, как настроить так что бы переменные появлялись в подсказках? может есть какое расширение, на подобие SCSS IntelliSense ( он почему то не работает)
Увы, про VSCode не подскажу, я WebStorm использую.
Задай свой вопрос в чате нашего коммьюнити, там тебе наверняка помогут:
t.me/friendlyFrontendChat
У меня SCSS IntelliSense в VSCode работает, возможно у вас настройки не те? там есть настройки Suggest Functions, Mixins и Vars, правда по дефолту они включены. В общем, проверьте settings для этого расширения. А вообще для SCSS юзаю этот самый SCSS IntelliSense и ещё пару: eCSStractor и Live Sass Compiler, если ещё не юзаете, очень рекомендую.
@@aharito Спасибо большое за ответ, помогли найти решение в чате канала. Помогло такое расширение как CSS Variable Autocomplete.
Да, eCSStractor и Live Sass Compiler использую)))
Вопрос: почему в миксине fluid-text мы юзаем 1440, а не 1240? Ведь экран ограничен контейнером, макс. ширина полотна 1240, и шрифт должен расти только до этого размера экрана?
Моя ошибка. Да, нужно 1240 указывать. Спасибо большое за замечание!
@@AleksanderLamkov Это вам спасибо за видео, смотрю с удовольствием.
@@AleksanderLamkov Кстати, насчет нижней границы то же самое. Ведь шрифт становится минимальным на определённом размере экрана и далее не уменьшается. Строго говоря, размер шрифта между мин. и макс. размерами должен изменяться пропорционально размеру экрана между мин. и макс. размерами. Получится что-то типа такого:
// $property - св-во, напр. font-size
// $maxSize, $minSize - макс. и мин. знач-я св-ва
// $maxWidth, $minWidth - макс. и мин. ширина экрана
@mixin adaptivePropFluid($property, $minSize, $maxSize, $minWidth, $maxWidth) {
$deltaSize: $maxSize - $minSize;
$deltaWidth: $maxWidth - $minWidth;
#{$property}: clamp(
#{$minSize}px,
calc(#{$minSize}px + #{$deltaSize} * ((100vw - #{$minWidth}px) / #{$deltaWidth})),
#{$maxSize}px
);
}
Да, интересные мысли, спасибо!
Кстати, в последнем видео я предлагаю другую формулу, улучшенную, на основе комбинации rem и vw:
ua-cam.com/video/6l6IJLlSoLo/v-deo.html
Вот там вроде бы нет проблемы пропорционального изменения значения.
@@AleksanderLamkov Я ещё до него не дошёл, обязательно посмотрю ))
За счёт чего выравнивается код html ? Я использую Prettier но почему-то он не выравнивает html.. Как настроить?
В WebStorm пункт Reformat Code в меню. В VSCode тоже должно быть нечто подобное.
Александр. Просматривая данный ролик, обратил внимание на то, что в утилитах, вы неоднократно использовали "!important", да бы перебить все погрешности при каскаде стилей. Разве это не считается плохим тоном в современной верстке?
Благодарю за ответ!
Для утилитарных классов !important нужен, без него не обойтись. Это, пожалуй, единственный сценарий использования этой механики, который нельзя назвать "плохим тоном" :)
Для кнопки в header медиазапрос для планшетной версии не добавлен. А ещё терминал vsc ругается на: font-size: clamp(#{$min}px, #{$max / 1440 * 100}vw, #{$max}px); Пишет, что использование символа "/" для деления вне функции calc() устарело и будет удалено в Dart Sass 2.0.0. Я то вообще такую конструкцию впервые вижу.
Привет! В каком плане «не добавлен»? Верстка на планшетной версии разве ломается?
А по поводу "/" - можно не обращать внимание. Sass v. 2 выйдет не скоро.
@@AleksanderLamkovстили для кнопки были добавлены без медиазапроса. Просто ты забыл @include tablet. Раз уж ты ответил, хочу сказать, что я учился на курсе, в котором ты был одним из наставников. По окончании курса я выпросил доступ к записям всех консультаций всех групп (где-то 7-9 групп в общем, точно не помню). Я пересмотрел все записи и могу сказать, что ты не зря канал создал. Консультации, которые ты вёл, были самыми содержательными и полезными. Жаль, что я не к тебе в группу попал тогда.
> Просто ты забыл @include tablet
Понял. Да, допустил ошибку. Спасибо, что поправил.
> Я пересмотрел все записи и могу сказать, что ты не зря канал создал. Консультации, которые ты вёл, были самыми содержательными и полезными.
Очень приятно слышать, что мои прошлые деяния всё ещё приносят людям пользу! О канале как раз начал думать в то время, когда наставничал на том курсе по фронтенду :)
user-scalable=no если не ошибаюсь уменьшает баллы accessibility и выводит в консоль предупреждение?
Этот параметр нужен для сайтов без адаптива, где на мобилке и десктопе открывается одинаковая десктопная версия. В таком случае на мобилке без возможности зума будет тяжко.
Валидатор же не определяет, есть ли на проверяемом сайте адаптив и подстраховывается, выводя такое предупреждение.
@AleksanderLamkov А как прикажите на телефоне изображение зазумить и рассмотреть? Открывать его в отдельной вкладке? За пользователя не нужно ничего решать. user-scalable=no является антипаттерном в доступности веб приложений и не стоит его показывать в обучающих видео. За него предупреждение будет не только в валидаторе, но и в lighthouse от гугла, ну и в самом chrome в ошибках будет.
Угу, вы правы. Учту в будущем. Спасибо!
после этого видео, опыт ++
Важно! Для лендигов это не нужно.
За урок, на больших проектах самое то, спасибо огромное❤️🔥
Ты имеешь ввиду начальные приготовления показанные в начале?
@@aliexpress2109 аха, если конечно там не будет 10 лендосов от одной компании - это стоит обсудить в начале проекта. А если один лендинг, то там это не особо нужно
Почему не сделать иконку стрелки перед Learn More через псевдоэлемент before?
Тогда невозможно будет без костылей повлиять на цвет иконки.
@@AleksanderLamkov точно, спасибо!
Александр, такой вопрос. В первом мастер классе, как я помню, мы в начале каждой секции ставили h1 и названием секции с классом visually-hidden для доступности. В этом мастер классе такого нет, хотя он более сложный. Насколько важно это делать?
В первом мастер-классе мы добавляли визуально скрытые заголовки уровня h2 в каждую секцию потому, что их не было по макету. Заголовок h1 был в разметке ровно один.
В макете этого мастер-класса заголовки у секций имеются и так. Поэтому для них visually-hidden не нужен.
@@AleksanderLamkov да, перепутал теги) Теперь понял, большое спасибо)
Модальные окна всегда нужно делать через dialog (корзины, формы регистрации в модалках и так далее) ? Через обычный div не очень будет ?
Не обязательно через dialog. Это достаточно новый тег и раньше делали на div. Так что ошибки никакой не будет.
@@AleksanderLamkov а WAI-ARIA не нужно делать ? Модалка открыта или закрыта, атрибуты состояние и так далее ?
классная тема это VsCode? а все услышал что вебшторм, расскажи как такую тему поставить? уж больно нравится
Привет! Oceanic Dark Theme: plugins.jetbrains.com/plugin/16506-oceanic-dark-theme
@@AleksanderLamkov о спасибо огромное! а чатгпт смотрю вкладка прикручивается отдельно или в виде плагина?
Это встроенная в WebStorm фича, отдельно ничего не ставил :)
@@AleksanderLamkov ок спасибо за фидбек! и спасибо за курсы!
можно ли использовать все эти миксины как базовая сборка для всех своих новичковых проектов?
Да, конечно. Только вот на канале в ближайший месяц будет ещё один мастер-класс. Там ещё круче сборка получится после начальной подготовки.
Привет, Александр. Видео как всегда - шикарно, спасибо за труд. Хотел спросить про переменные, есть ли какая-то задумка в использовании конкретно :root, а не scss переменных(через $), или это дело привычки? Поскольку на мой взгляд, запись через $($color), выглядит короче чем условная var(--color).
Привет! Спасибо за комментарий!
Отвечаю на вопрос.
Во-первых, не нужно путать :root {} и $ - это о разном.
:root {} - это обычный CSS-селектор, аналог селектора html {}, дающий доступ к , корневому элементу. В этом селекторе принято объявлять так называемые глобальные переменные, которые будут использоваться в стилях многих компонентов страницы.
$ - это синтаксис объявления (и по совместительству использования) Sass-переменной.
В CSS же переменные объявляются через двойной символ '-', а используются через функцию var().
Sass-переменные и CSS-переменные служат разным целям и они совершенно разные, не только в синтаксисе.
CSS-переменные работают в рантайме (во время обработки стилей браузером), а Sass-переменные после компиляции scss => css пропадают из финального файла, заменяются на конкретные значения.
CSS-переменными можно манипулировать через JS, а Sass - нет.
CSS-переменные подверженны всем принципам каскада, а в сочетании с работой в рантайме, можно творить очень классные штуки.
Приведу пример. Бывают ситуации, когда различным всплывающим менюшкам и модальным окнам нужно знать, какой высоты сейчас шапка страницы. Эта задача решается так: через JS получаем текущую высоту шапки, через JS в :root {} записываем новую глобальную CSS-переменную header-height, в которой будет соответствующее значение, затем эта переменная будет использована в CSS там, где требуется. А при ресайзе окна (изменении ширины в частности) через JS обновляем значение header-height, чтобы стили зависящих от шапки элементов своевременно обновились.
На Sass-переменных сделать это невозможно.
И темизация - большая и сложная механика, которую на Sass сделать можно, но так редко кто делает, обычно используются классические CSS-переменные, которые можно переопределять, в зависимости от наличия на или специального класса от темы.
Вообще, раньше CSS-переменных не было, поэтому все использовали Sass-переменные, сейчас же это не обязательно, лучше использовать нативный инструмент, а не надстройку.
Удобство синтаксиса - вопрос привычки. Когда нужна мощь нативных CSS-переменных (а это требуется почти всегда в реальных проектах), можно и нужно писать переменные через var, иного пути нет.
И последнее: Sass-переменные стоит использовать в Sass-синтакисе, а CSS - в CSS.
О чем это я.
В параметрах Sass-миксина без $ не обойтись, а в CSS-функции calc() можно смело использовать нативные var() переменные и это будет прекрасно работать.
@@AleksanderLamkov Благодарю за такой развернутый ответ :)
Вопрос, чего мы не используем reset? а только normalize? у меня просто проблема с list type пошла на лишка и а сылках
Мы используем кастомный нормалайз, про который объяснял в одном из первых уроков курса по CSS. Если у элементов в разметке есть классы (атрибут class), то нормалайз сбросит у таких элементов лишние отступы и маркеры (если речь идет про li). Ну а ссылкам даже reset ничего не делает, тут нужно точечно для каждого проекта прописать те стили, которые требуются по дизайну.
Подскажите, а почему в каждой секции отдельно прописывать container? Ведь ширина контентной части по макету одинаковая, не лучше ли было сделать один общий container и внутри него поместить секции?
Привычка.
Часто так бывало на работе, что какая-то из секций макета выбивается по ширине (например, добавляется фон на всю ширину экрана), а из-за ограничений родителя реализовать бы её уже не получилось.
Но ты прав, что для этого макета можно было бы и один раз применить container и не создавать лишних оберток.
@@AleksanderLamkov Спасибо за ответ. У меня еще один вопрос, у некоторых людей я видел margin заданный в %. Мне кажется использование margin в % сокращает количество медиа запросов и кода. Но я никогда не применял это в своей практике. Что можете посоветовать, стоит ли его применять и применяете ли вы это в своей практике.
Чисто в %? Странно. Ну или верстка получается «на глаз» и при определенных обстоятельствах всё съезжает, либо в CSS выверенные, но жуть какие неудобные дробные значения.
Лучший выбор - % или vw / vh в связке с функциями min, max и clamp. В таком случае действительно получится сэкономить медиазапросы.
Было про это отдельное видео на канале:
ua-cam.com/video/wLWO58PJFrE/v-deo.html
@@AleksanderLamkov Извините за банальный вопрос. Подскажите, почему в обнуляющем стиле вы установили margin-block: 0; только для тегов с классами? Просто у меня в коде попались некоторые теги без класса и я сначала не понял откуда взялся лишний margin. Пришлось немного изменить код.
:where(
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol,
dl
) {
margin-block: 0;
}
Наверно правильнее не допускать использования этих тегов без классов?
Не совсем. Наличие элементов p, ul, li и подобных БЕЗ классов допускается, но в местах разметки, которые впоследствии будут наполняться контент-менеджерами через wysiwyg-редакторы. Нагенерированные таким способом элементы будут в итоговой разметке без классов. И для них важно все же прописать какие-то внешние отступы, чтобы контент не слипался друг с другом.
Почему ты класс container задаешь тегу section? Обычно section остается на всю ширину. Или это было сделано специально, т.к цвет фона body и section один и тот же?
Угу, в макете нет ни одной секции с иным фоном, нежели белый цвет, потому не вижу смысла переносить контейнер в дополнительную внутреннюю обертку секции.
А для чего нужны миксины сброса (reset)? Если не ошибаюсь, сбросы для элементов прописываются в отдельном файле.
На всякий случай. Добавил по привычке. Вроде как в проекте так и не заюзали ни разу. Можно удалить.
P. S. Но в целом, они же не мешают, в финальный бандл CSS не попадут :)
Вопрос по нормализации, в вашем билде данного файла последний блок @media имеет строчку с transition duration 0.01s !important, что в итоге сказывается на анимации тк перебивает длительность анимации через константу заданную в variables, но у вас при создании анимации константа работает, как так получается? 🧐
Привет! Длительность перехода в 0.01s включается только в режиме пониженных движений (меидиазапрос prefers-reduced-motion: reduce). Это нужно для пользователей, у которых включены специальные настройки на компьютере или в самом браузере. Если у тебя также, то посмотри следующее: при открытом девтулз жмакни Ctrl + Shift + P, введи в открывшемся терминале Rendering, далее на этой новой панели найди пункт Emulations и подпункт prefers reduced motion, там скорее всего стоит нестандартное значение reduced, нужно его отключить. И тогда медиазапрос с 0.01s срабатывать не будет.
Почему не навесил утилитарный класс container на body?
В таком случае не получилось бы без костылей реализовать адаптивную версию футера.
Спасибо за такое полезное видео! Подскажите, окуда берется формула для динамического шрифта? И ещё, почему для размера шрифта используются px а не rem?
Привет!
Формула простая: берем значение в пикселях из десктопной версии макета, делим на ширину контентной части и умножаем на 100, чтобы по итогу перевести всё во вьюпорт-единицы vw.
rem принципиально не использую, так как многие новички допускают ситуацию, когда слишком маленький размер шрифта на мобильной версии по итогу становится гораздо меньше рекомендуемых 14px
Функция clamp с мин-макс ограничениями гораздо безопаснее. Сложнее выстрелить себе в ногу при адаптации.
@@AleksanderLamkov Спасибо за ответ! Мне было интересно, откуда именно это формула, так как на сайтах вроде css-tricks приведена совсем другая формула для динамического шрифта
Формул много, и я не все бы смог объяснить, с формулой "px => vw" разобраться проще всего, на мой взгляд.
@@AleksanderLamkov Спасибо огромное за ответ!
Вот бы урок по Dialog! Вопрос только, меню закрывается только по клику на close-button, а как сделать и при клике на ссылки в меню?
или придется вешать на внутренние ссылки доп onclick с закрытием окна
Да, только с дополнительным onclick на сами ссылки :(
Про урок по dialog - хорошая идея. Только там без JS скудная версия получается. Хочу после курса по JS сделать гайды по всем популярным UI компонентам.
@@AleksanderLamkov Отлично! Буду ждать, я как раз js смотрю и познаю. По css очень много фишек полезных узнал и применяю в данный момент ;)
Большое спасибо за видео!
Вопрос: а разве можно по БЭМ давать верхний отступ блоку header?
Привет! Спасибо за фидбек :) Верхний внутренний (!) отступ padding-top задавать БЭМ-блокам можно. Нельзя задавать внешние отступы margin.
Подскажите, почему используете скрытый span, а не атрибут aria-label?
Привет! Некоторые скринридеры не дружат с автопереводом значений атрибутов на язык пользователя. С визуально скрытым элементом будет надежнее.
А можете скинуть ссылку на первый мастер-класс?
Ссылки на плейлисты обоих мастер-классов есть в описании под каждым видео канала.
Верстка Kropp Fitness (HTML, CSS)
ua-cam.com/play/PL0MUAHwery4rqkzKF1mDBCIH_eZgjY6uN.html
Спасибо за контент. Использование методологии бэм в проекте с ванильном js еще вроде понятно. Но когда проект пишется на фреймворке(библиотеке) +scss если ли смысл в бэм? Тогда как в таком случае обычно проект делится на компоненты, у которых стили в отдельном файле slyle.module.scss и при сборке проекта названия стилей меняется везде.
Привет! Модульные стили и БЭМ плохо совместимы, нужно выбрать что-то одно.
Модульные стили стоит использовать в тех проектах, где либо слишком много компонентов, либо если сам проект представляет собой библиотеку компонентов, которые в будущем будут интегрироваться в другие проекты и чтобы избежать возможных конфликтов стилей, модульные стили будут отличным решением.
В остальных же случаях я предпочту использовать БЭМ, так как если где-то что-то начнет пересекаться и мешать друг другу, то это будет сигналом о том, что пора переработать структуру разметки и что-то объединить, что-то унифицировать, чтобы переиспользовать один и тот же код.
Есть ли в бесплатной версии фигмы получить информацию о радиусах, тенях, градиентах? спасибо
Да, посмотри это:
Figma • Инспектирование стилей без DevMode • Плагин Inspect Styles
ua-cam.com/users/shortsWVpYkW-Ktto?feature=share
@@AleksanderLamkov Спасибо Александр
Это прекрасно
Привет!
Подскажи, пожалуйста, где можно поменять настройки развертывания элементов с помощью таба? У меня стоит emmet на vs code. Хочу ускорить верстку html. Допустим при img у меня стандартно разворачивается только: src="" alt="", но я хочу сделать так, чтобы добавлялись сразу width и height.
Чет туплю и не понимаю куда смотреть. Сниппет создавать или шо...
Привет! Я только в WebStorm знаю как это настроить. Для VSCode я бы гуглил так: vscode custom abbreviation snippets
По первой ссылке на smashingmagazine есть инструкция.
Почему файлы в @import 'blocks/ ; подключаются отдельным импортом а не первый импорт дописываются? Чем оправдано? в чём риски?
Так просто визуально проще воспринимается.
Первый импорт - для файлов, которые есть буквально в каждом проекте.
Второй - только для бэм-блоков, которые в каждом проекте разные.
@@AleksanderLamkov Спасибо
шикарноб
Такая проблема у меня почему-то не работают переменные в которых лежит бордер транзишн и тд, переменные с цветами работают нормально. Подскажите решение, пожалуйста.
Извиняюсь, забыл вар поставить, но с транзишн проблема, когда мы прописали свойство инхерит в меню-линк, задержка не появилась
Привет! Напиши о проблеме подробнее в чат: t.me/friendlyFrontendChat
Можешь сразу показать свой код.
Привет! Помоги настроить html.json сниппет. решил сделать кастомный как у тебя. При написании тега Img через точку с названием класса, структура не разворачивается как надо
"Image tag with Dynamic Attributes": {
"prefix": "img",
"body": "",
"description": "Image tag with optional class"
}
Привет! Напиши сюда, тебе помогут:
t.me/friendlyFrontendChat
оч здорово и полезно
Возник закономерный вопрос.
service-card
Почему arrow добавил в html, а картинку добавил через тег img?
Какое в этом преимущество?
Привет! Стрелку нужно было добавлять через разметку и тег в частности, чтобы реализовать смену цвета при наведении на кнопку, внутри которой иконка стрелки находится.
А картинку карточки добавляем также через разметку, через , чтобы на адаптиве было удобно всё позиционировать. Если бы делали через CSS и background-image, то было бы весьма проблематично.
@@AleksanderLamkov А, вон в чем задумка. Я просто делаю вне видео и после смотрю как реализуешь тот или иной блок, если возникают какие-то сомнение в написании кода) Спасибо за ответ!
@@AleksanderLamkov И в дополнение хотел спросить.
Пишу на css без пре-процессора
Добавляя иконку, у тебя цвет стрелки черный, я же добавляю, у меня цвет зеленый.
Ты меняешь цвет обращаясь к svg у меня смена получается только к обращению path
.wrapper-icon svg path{
fill: #fff;
}
Почему так?
В начале мастер-класса мы подключали нормализацию стилей (ссылка на этот файл в описании под видео), в нём есть такие правила:
svg *[fill] { fill: currentColor }
svg *[stroke] { stroke: currentColor }
За счет этого цвет внутренностей svg перекрашивается в значение свойства color, которое наследуется от родительского элемента.
@@AleksanderLamkov а вон что, все понял, спасибо, тогда двигаюсь правильно😄
Привет, а что за тема стоит для редактора? Спасибо
Привет! Oceanic Dark Theme: plugins.jetbrains.com/plugin/16506-oceanic-dark-theme