Вёрстка сайта с 0 до результата | HTML, SCSS, БЭМ - Подробное ПОШАГОВОЕ объяснение | Часть 1

[@AleksanderLamkov]

📌 Друзья, в телеграмме у нас есть канал и отдельный чат, где вы можете задать вопрос по фронтенд-разработке и вам постараются помочь: 💬 Чат: t.me/friendlyFrontendChat ℹ Основной канал: t.me/friendlyFrontend Если вам это интересно, присоединяйтесь, задавайте вопросы и помогайте другим 🙂

[@biscvie]

Чат это конечно хорошо, но чем больше людей в чате, тем сложнее отслеживать вопросы по конкретным темам, можно перевести чат в группу и там добавить несколько чатов по отдельной тематике, так люди смогут писать вопросы в конкретных чатах-подтемах

[@AleksanderLamkov]

Привет! Соглашусь. В ближайшие пару недель переведу чат в формат сообщества с топиками. Давно напрашивается такой формат. Спасибо!

[@biscvie]

@@AleksanderLamkov Спасибо за отклик👌

[@MeMe-ge2fm]

Здравствуйте спасибо болшое за урок , подскажите пожалуйста как учить методом повторения ? Спасибо

[@AleksanderLamkov]

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

[@polka.dot.]

Спасибо огромное за уроки! Ценнейший материал, даже на англоговорящем Ютубе ему нет ровни! Я очень рада, что учу прямо в то же время, что вы выпускает ролики. Мотивирует! ❤

[@ArtemAtari]

Видео на 2 часа смотрел часов 10 (останавливался на каждой новой строчке кода, смотрел, что меняется, оставлял в проекте коммент и запускал дальше). Полет нормальный! Спасибо!

[@alialiev4667]

Прошло 3 месяца, как успехи ?))

[@peopllops825]

@@alialiev4667 а у тебя как ;D

[@artur_interes]

Очень полезный контент, пересмотрел все твои видео с самого начала, верстал предыдущий сайт вместе с тобой, даже купил ещё один монитор, чтобы было удобнее и быстрее верстать 😂 многих смотрел и вот ты единичный случий, когда обьясняешь именно как правильно делать.

[@РыбалкасАнтономМальцевым]

Тоже думаю взять себе ещё 2 монитора, полезная вещь

[@placid3495]

Я взял второй монитор к ноутбуку, очень удобно. На большом моне работаю, на моне ноута все инструменты или макет, или видео, короче все остальное.

[@kaiju668]

теперь понятно откудя появился компонентный подход, разбивка стилей на блоки отличная тема. Много полезного узнал, благодарю.

[@МаксимСотников-ю9у]

Александр, спасибо за труды. Благодаря вам я здорово прокачал вёрстку, каждый день узнаю какие-то новые нюансы, подходы. Преимущество вашего материала это тщательная подготовка текста, что делает его всеобьемлющим и исключает воду. Так же чувствуется, что код продакшн уровня. В свободном доступе такое найти очень сложно. Надеюсь увидеть такой же материал и по React, без воды, тудушек ,сразу и по возрослому))

[@placid3495]

Александр, ваши уроки - это божественная эссенция лучшего учебного материала и вашего опыта! Я прошел через курсы скилбокс, но там по верстке дали не больше половины того, что вы показали в этом уроке. С удовольствием впитываю все нюансы и тонкости верстки, которые вы рассказываете в процессе работы. Очень хорошо, что объясняете каждый блок кода, почему написали вот так и т.д. Это очень помогает понять множество вещей и увидеть картину в целом. Безмерно благодарен вам за ваш труд!

[@MathInfo-ye1gf]

а ты после скиллбокса устроился куда то ?

[@placid3495]

@@MathInfo-ye1gf и да и нет) 2 недели отработал верстальщиком на ВордПресс, выперли за медленную работу. Похвалили конечно за грамотность, но им нужно было конвейер сайтов обслуживать, а ждать когда я научусь быстро работать не захотели. Больше никуда не брали. Беру сейчас редкие заказы на фрилансе, накупил книг и читаю, практикуюсь по мере возможности.

[@iuliiapankevych547]

Спасибо. С тобой классно разбираться в фронтенд-разработке. Желаю успехов с новыми видео.

[@LAMit]

Первая часть великолепна. Много нового узнал. А подход к структуре просто супер!

[@ivenzo]

Аааааааа, я все повторяю, записываю, сохраняю в гисты какие-то рецепты, такой кайф!!! Оч много нового и передового! Решил в процессе обучения на другом курсе, подчерпнуть знаний у вас, так как начинается вёрстка в портфолио и хочется прям усовершенствоваться в вёрстке. Спасибо! Щас отдохну немного и на вторую часть пойду)))

[@Airat935]

Саша, ОГРОМНОЕ СПАСИБО!!! Много полезного и нового узнал для себя

[@ajoq]

Бриллиант среди подобных видео по тематике! Спасибо за контент)

[@cryfos]

Очень классный урок! Интересно посмотреть. Узнал для себя много нового. Спасибо

[@mourat9833]

На 45:20 ты уменьшил кнопку без медиа запроса, значит не для планшета, а вообще. Не по макету получается. Править уже поздно, так для информации, тем кто будет верстать по видео.

[@Jonatarion]

искал этот комментарий :D Тоже подметил, что нужно было под медиа для таблеток это записать.

[@Michaelmoises-r4v]

Лучше один раз увидеть,чем сто раз услышать.Все просто и понятно.

[@prodzaha]

Это просто прекрасно! Спасибо за такой контент.

[@SkarkS]

Как раз можно закрыть пару пробелов, спасибо за видео, сегодня вечером будет чем заняться!

[@yuritian8830]

32:29 - а за чем дублировать меню? Если можно стилями, через медиа запросы с помощью позиционирования сделать мобильное меню. В чём преимущество или плюс такого подхода? Хотелось бы узнать)

[@AleksanderLamkov]

Вообще, я хотел показать работу с прежде всего 😅 Ну а медиазапросами переделать разметку уже имеющегося десктопного меню можно, главное не пихать костыли с абсолютным позиционированием и точечным смещением.

[@yuritian8830]

@@AleksanderLamkov Угу. Если не менять позиционировнием меню, то как?) я только так делаю))

[@AleksanderLamkov]

Доп. обертки добавлять и через display contents шаманить. Покажу подход этот в следующем МК, который в течение месяца выйдет.

[@Kotovar]

Только начал смотреть, уже много полезного узнал. Большое спасибо)

[@Zhenkaaf]

53:07 Вы навели на cross-button в браузере и отобразилось окошко со стилями кнопки.. за счёт чего?

[@AleksanderLamkov]

Режим выделения, включается кнопкой слева от кнопки эмуляции устройства и сочетанием клавиш Ctrl + Shift + C.

[@hattori3683]

Спасибо за видео! Скорее бы уже джаваскрипт и фреймворки, хтмл и цсс все такие быстро осваиваются 😊

[@Rostyagai-dev]

1:33:25 почему нужно использовать &:not(:last-child) для отступов снизу? Такой же вопрос по поводу секшн хедер

[@AleksanderLamkov]

Чтобы верстка была более надежная. В реальных проектах бывает ситуация - через некоторое время по требованиям заказчика часть контента убирают, то есть удаляются элементы из разметки и если у элемента, находящегося до удаленного элемента, остались внешние отступы margin-bottom, то они будут лишними. И вот в таких ситуациях комбинация псевдоклассов not last child позволяет избавиться от нежелательного отступа, когда элемент внезапно оказывается последним среди своих соседей, лежащих на одном уровне.

[@mourat9833]

Давно так вкусно не смотрел. Спасибо 👍

[@Quantum-o5f]

Контент топ, вставки, зум кода и тд, очень удобно

[@silent-do]

Подскажите, зачем писать ul > li > а, если все равно потом list-style: none. Почему нельзя использовать сразу ссылки. Сделал их флекс-элементами и делай с ними что хочешь?

[@AleksanderLamkov]

Привет! Однотипные элементы стоит помещать в списки для улучшения семантики и доступности (пользователь скринридера получит информацию о том, сколько элементов со ссылками в списке, и у него будет возможность пропустить зачитывание всего списка).

[@silent-do]

@@AleksanderLamkov Ясно, про семантику я и не подумал. Спасибо за ответ!

[@ДенисБерезюк-ч3ш]

1:30:53 зачем создать отдельный файл под grid ? это же утилитарный класс, его можно задать в _utils.scss, или нет ?

[@AleksanderLamkov]

Можно в utils. Просто стилей у этого класса довольно много, плюс есть внутренние grid__item элементы. Отдельный файл использован сугубо для декомпозиции и разгрузки utils.

[@sl1zness]

Отличное видео, благодарю за труд. Вынес для себя несколько очень полезных моментов, вспомнил как вообще верстать спустя несколько лет простоя, но вместе с этим возникло несколько вопросов, скорее касательно подготовки проекта: Почему в _variables используются не переменные в стиле scss, т.е. через $, а стандартные переменные css, через -- в root? Как была выведена формула в миксине fluid-text? Очень полезно при адаптации, но хотелось бы узнать про нее подробнее, и узнать есть ли еще подобные формулы? Адаптацию стоит проводить под строгие значения, т.е. под 1280, 1024, 768 и т.д., или стоит подходить более универсально, т.е. просто сужать экран, отслеживать на каких значениях ширины поехал тот или иной блок и исправлять его. Например, сужали страницу, обнаружили что на значении 859px съехал такой-то блок, создали media с этим значением и исправили. Относительно этого я гуглил те самые несколько лет назад, и мнения относительно вопроса расходились: одни адаптировали по конкретным значениям, другие просто сужали экран Разве адаптацию нужно проводить не до 240px?

[@AleksanderLamkov]

Привет! Спасибо за фидбек :) По переменным - потому что CSS-переменные работают в рантайме, это зачастую удобнее, нежели использовать компилируемые переменные из Sass. По формуле миксина - в clamp первым и последним аргументом ограничиваем диапазон минимума и максимума значения, а во втором аргументе рекомендуемое значение по формуле, которая переводит font-size из px в vw-единицу измерения, обычное деление на ширину макета и умножение на 100, чтобы получилось корректное значение. По адаптации - никогда не надо плодить лишних уникальных медиазапросов, а то интерфейс будет слишком дерганным при сужении экрана. Берем за основу 3-4 контрольные точки (можно как у меня в этом мастер-классе, можно из сетки бутрстрапа), и когда при сужении, к примеру, ломается что-то на ширине 1111px, начинаем применять меры сильно заранее, на ширине ближайшего (!) бОльшего значения медиазапроса, max-width 1280px в моем случае. Адаптировать нужно вплоть до 360px, экранов уже в глобальной статистике уже не существует. Номоводные раскладушки не в счет, там и долей процента пока нет.

[@sl1zness]

@@AleksanderLamkov понял, спасибо за ваш ответ

[@РыбалкасАнтономМальцевым]

Спасибо, посмотрим)

[@kalts_daniil]

25:25, Саша почему ты не использовал миксину reset-link ?

[@AleksanderLamkov]

Привет! Забыл, честно говоря :) Надо было добавить, согласен.

[@andreiley7951]

А в чем смысл миксинов @mixin reset-link, reset-button 14:30? Почему, например, не использовать класс .reset-link и .reset-button? Миксин же будет дублироваться к коде.

[@AleksanderLamkov]

Писать каждый раз два класса в HTML-разметке вместо одного - неудобно. Лучше один раз вызвать миксин в CSS-коде.

[@andreiley7951]

@@AleksanderLamkov а почему тогда не пользуются @extend? При extend компиляция всех классов, в которых использовался extend пишется через запятую и подходит для данных примеров, а чем больше пишется миксинов, тем больше будет дублированного кода. Вот этот момент я не понимаю, как новичок.

[@AleksanderLamkov]

Согласен, extend для финального кода был бы лучше, не подумал. Спасибо за наводку!

[@ДенисБерезюк-ч3ш]

На 35:59 класс mobile-overlay__close-button-wrapper а почему на элементе три дефиса ? я слышал что должно быть не больше двух

[@AleksanderLamkov]

Да ну нет же каких-то строгих ограничений. БЭМ-методология не запрещает использовать такое количество слов в имени БЭМ-элемента.

[@ДенисБерезюк-ч3ш]

@@AleksanderLamkov тогда супер, просто один блогер говорил не больше двух дефисов и всегда придерживался к этому

[@AleksanderLamkov]

Это нормальная рекомендация, лучше действительно делать имена попроще, просто в некоторых местах (в частности в обсуждаемом месте) не обойтись.

[@Умарбек-Махмадиев]

после этого видео, опыт ++

[@Pavelius]

Огромное спасибо за качественный контент,теперь использую твои техники в своих работах

[@VldTim]

Оставлю тут коммент где побольше слов. Спасибо за серию видосов!

[@АлександрМелянюк-ц9ю]

Понравилось!) Спасибо!!! Подписка, колокол!

[@PalyufishkuRuSite]

Александр, спасибо за Ваши уроки! Если будет возможность, покажите, пожалуйста, верстку интернет-магазина с фильтрами товаров, сложным меню и прочими наворотами )

[@AleksanderLamkov]

Привет, спасибо за фидбек! :) После курса по JavaScript обязательно будет верстка с подобными сложными элементами интерфейса.

[@twintiblock9273]

Спасибо за ваши видео! Это просто находка. Небольшой вопрос: почему вы используете CSS переменные, вместо SCSS переменных?

[@AleksanderLamkov]

Вот мой недавний пост об этом: t.me/friendlyFrontend/318

[@Jonatarion]

1:17:40 Должен ли появиться горизонтальный скролл? У меня появляется.

[@AleksanderLamkov]

Скорее должен. У меня MacOS, а на этой ОС по умолчанию визуально отключены все скроллбары, поэтому на видео его и не видно. Можно для всех остальных ОС дополнительно стилизовать скроллбар, чтобы он не выглядел так странно (как, например, на Windows). В этом шортсе рассказывал, как это делается: kzbin.infopgjRYNT2LQA

[@АндрейШтольц-л4ю]

Отличный контент!

[@fott]

В миксине 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);

[@AleksanderLamkov]

Если что, в следующую пятницу на моем канале выходит видео, где будет обновленная формула через rem и vw.

[@mqzom_it]

я просто в шоке от твоего контента очень круто

[@ОльгаНикифорова-ю2ч]

Спасибо за урок! Всегда повторяю за тобой. Подскажи, пожалуйста, такой момент: использую VS Code, если в разметке указать высоту лого 100, как указано у тебя, то она не будет изменяться в процессе, когда мы для планшетной и мобильной версии убавляем ширину до 144, 120 пикселей, высота остаётся без изменений, в итоге получается очень большой паддинг. Сейчас решением для себя увидел только выставить height:auto, либо же вовсе убрать height из разметки. Что скажешь? Спасибо заранее за ответ.

[@AleksanderLamkov]

Привет! В разметке изображениям всегда нужно задавать атрибуты width и height (значения брать из десктопной версии макета), а в стилях обязательно нужно задать для всех img max-width 100%, чтобы ни одно изображение не выпирало за пределы родительского блока и height auto для сохранения пропорций.

[@ОльгаНикифорова-ю2ч]

@@AleksanderLamkov спасибо! тогда в каком месте в стилях лучше вставить height auto? в normalize.scss есть img, туда подойдет?

[@AleksanderLamkov]

Да, можно в normalize.

[@НурдаулетБагдаулетов-ц4з]

При использовании 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 файлах?

[@AleksanderLamkov]

Так... Объясню, как я в новом мастер-классе организовал всё через 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); }

[@Рыбак-с6к]

​@@AleksanderLamkov Огромное спасибо. Столкнулся с этой же проблемой. Когда нам ждать новый курс по вёрстке,?)

[@AleksanderLamkov]

Новый МК на канале будет в течение месяца. Сейчас занимаюсь монтажом.

[@mountaindeserver]

Здравствуйте, Александр, большое спасибо за мастер-класс. Хотелось бы увидеть урок по OpenGraph, PWA.

[@lawsonllka271]

Спасибо большое за видео. Хотелось бы узнать ваше мнение про PWA насколько сейчас востребована технология и что ее ждет в будущем?

[@AleksanderLamkov]

Привет! Возможности всё ещё сильно ограничены, но технология набирает популярность в связи с блокировками приложений в AppStore, многие банки свои веб-приложения дополнительно перевели на PWA. Наверняка в будущем её возможности будут расширяться.

[@alekssjeva951]

Насчёт loading="lazy" для логотипа. Не нужно добавлять его тем картинкам, которые находятся в области изначальной видимости при загрузке страницы. Это ухудшит их время отрисовки.

[@AleksanderLamkov]

Да, всё верно, спасибо за замечание! P. S. В следующем мастер-классе (выйдет в течение пары недель) этот момент учёл 😅

[@reiben7328]

1:44:30 У .banner__inner задан background-color: var(--color-gray) и на видео он отчётливо серый, но у .service-card (1 и 4 карточка) цвет такой же задан, но карточки на вид такого же белого цвета, как и фон страницы. Как так получилось?

[@AleksanderLamkov]

Привет! Не понимаю о чем ты. На видео четко виден белый фон страницы и светло-серый фон у banner__inner и service-card 1 и 4. У тебя иначе отображается? Может из-за монитора? Бывает так, что оттенки настолько малым отличаются, что на некоторых мониторах отличий не видно.

[@reiben7328]

@@AleksanderLamkov да, открыл макет на другой машине и там всё норм. Это странно.

[@aharito]

Классный урок, просмотрел минут 15, спасибо, качество на высоте! Я уже не новичок в верстке, смотрю с целью обмена опытом. Сделаю 2 небольших заметки, может быть, кому-то пригодятся. 1) В последнее время я отказался от img { max-width: 100%; height: auto; ... } в reset или в normalize для тега img, так как нередко юзаю object-fit для картинок. Я бы это лучше вынес в утилити-класс типа .img-fluid, ну или в миксин. 2) Для того, чтобы сразу видеть все шрифты, заюзанные в макете, в Фигме есть классный плагин Font Fascia, рекомендую. Не придется прощелкивать текстовые элементы макета.

[@AleksanderLamkov]

Спасибо за комментарий! 1. Я object-fit использую только в случаях, когда дизайнер мудрит с пропорциями изначальной картинки на адаптиве. Ну а в наличии max-height 100% и height auto глобально для всех img я не вижу ничего плохого. В каких случаях это может что-либо испортить? Не могу придумать. 2. Плагин Font Fascia хорош для идеальных макетов, где дизайнеры не мусорят, оставляя скрытые слои с альтернативными шрифтами. Раньше и я этим плагином пользовался, но когда плагин выдает два десятка шрифтов вместо двух действительно нужных - это не ок. Понимаю, проблема конкретного макета, но как показывает практика - дизайнеры редко встречаются педантичные, чаще это творческие люди без задродства на красоте "невидимых вещей", типа слоев, их компоновки и на их оправданном наличии в конечном макете :)

[@aharito]

@@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]

UPD: в пункте 1) подправил классы, чтобы стало понятнее, если кто-то из начинающих вдруг читать будет :)

[@AleksanderLamkov]

@aharito по 1-му пункту у меня ещё есть что сказать. Если для в разметке добавлены атрибуты width и height, то независимо от того, какого размера и пропорций картинку загрузит контент-менеджер, она встанет в верстке как надо. Если пропорции загруженного изображения не те, картинка исказится, это факт, но object-fit спасает и при этом не нужно задавать фиксированные ширину и / или высоту. При max-width 100% и height auto размер итоговой картинки в интерфейсе будет вычислен на основе значений атрибутов width и height в разметке, но при этом ширина никогда не будет больше допустимых 100% от ширины родителя. А вот на счет хака с padding-bottom 100% - от него можно отказаться в пользу свойства aspect-ratio, вот мой шортс про него: kzbin.infoM-OcxRDB3bs

[@aharito]

@@AleksanderLamkov Поэкпериментирую, спасибо.

[@endlessmoonlightonmonday8985]

мне понравились обе части! но заметила один нюнс( возможно это только у меня так в браузере отражается ?). при breakpoint 767px в header отражается и burger-button и само меню nav )

[@AleksanderLamkov]

Это из-за нестандартной плотности пикселей твоего монитора. Забываю о том, что такой баг может у некоторых возникать. Тебе нужно вместо ровных значений 767 использовать 767.98 в медиазапросах и всё будет работать как надо.

[@endlessmoonlightonmonday8985]

@@AleksanderLamkov, благодарю за уточнение! Это огонёчки)

[@ДенисБерезюк-ч3ш]

На 35:36 почему не nav для меню ? это же навигация по сайту

[@AleksanderLamkov]

Это было бы уже второе nav-меню в разметке. И так как оно буквально дублирует десктопную версию, решил сделать нейтральным дивом. Но только сейчас подумал, что на мобилках основной будет скрыт и недоступен для скринридеров. Действительно стоило и это второе дублирующее меню сделать через , ты прав.

[@ДенисБерезюк-ч3ш]

@@AleksanderLamkov ничего страшного, мы же не роботы, что-то забываем, что-то не додумываем, главное что ты понял и дальше будешь делать лучше

[@deniseagle]

Приятно слушать, проф информация

[@ВячеславСидоров-н5п]

Привет ! Спасибо за контент, но у меня остался вопрос касаемо твоих миксинам по размерам экрана. Я ломаю голову над тем как изменить миксин. По факту на переходных точках 1 пиксель теряется и из-за этого выходит некрасиво

[@AleksanderLamkov]

Привет! Почему теряется? Миксин mobile отвечает за диапазон 0-767px включительно, а mobile-above отвечает за 768px и выше. С остальными миксинами аналогично.

[@ВячеславСидоров-н5п]

@@AleksanderLamkov Я отталкиваюсь от десктопа. Получается, что миксин работает до 1023 (не включительно) и от 1024

[@ВячеславСидоров-н5п]

@@AleksanderLamkov код на кодпейн могу прислать

[@AleksanderLamkov]

Под капотом миксина tablet конструкция "max-width: 1023px", которая отвечает за диапазон от 0 до 1023 пикселей включительно, а миксин tablet-above за диапазон от 1024px и выше.

[@AleksanderLamkov]

Пришли. Не понимаю твою проблему.

[@aharito]

Благодарю за видео, есть ещё вопрос. Хорошей практикой, вроде бы, считается "mobile-first". Здесь вы идете от обратного, от десктопа. Я в своей практической работе также зачастую иду от десктопа на запросах "max-width", но при этом испытываю чувство некоторого неудоства - типа делаю-то не по "best practices". Вопрос: насколько часто в своей реальной работе вы юзаете "mobile first" и если юзаете, то при каких условиях?

[@AleksanderLamkov]

Не часто. Когда явно нужна необходимость работы какого-либо свойства только на определенных диапазонах а-ля 768px / 1024px и шире, в частности в утилитарных классах а-ля visible-mobile, visible-tablet.

[@aharito]

@@AleksanderLamkov Простите за навязчивость, ещё вопрос: а почему? Можете сформулировать, почему чаще работаете в концепции "изящной деградации", по-простому "desktop first"? ведь все авторитеты говорят, что mobile-first рулит, потому что... (и тут 100 вполне резонных доводов).

[@AleksanderLamkov]

Потому что мне «отсекать» проще, чем «наращивать». Частый аргумент в пользу Mobile First - скорость загрузки на мобильных устройствах. Я не согласен с этим. Современные сайты страдают НЕ от количества медиазапросов, а от неоптимальной работы с медиаконтентом и скриптами. Поэтому не надо делать корнем всех проблем Desktop First. Это последнее, что губит сайт. Сначала нужно оптимизировать действительно важные вещи. Считаю, что эти два подхода в принципе не нужно противопоставлять. Нужно использовать их одновременно в подходящих ситуациях.

[@aharito]

​@@AleksanderLamkov Благодарю. Думаю, что нужно разделять этап проектирования сайта/приложения и этап собственно написания CSS/HTML и прочего. При проектировании - да, Mobile First скорее всего рулит, так как мобильных юзеров уже большинство, и UI в первую очередь нужно разрабатывать для них, а уже потом навешивать плюшки для больших экранов. А когда мы по готовому дизайну кодим сайт, тут уже, действительно, как вы сказали - каждый юзает тот подход, что ему ближе, и противопоставлять их не нужно.

[@trimmtrabb7629]

У вас на канале есть видео «Пиксели не нужны» где в верстке в основном используются rem и em, а здесь только пиксели. Вопрос: как понять, когда использовать rem, em и px?

[@AleksanderLamkov]

Можно всегда использовать rem и em. В новом мастер-классе покажу удобный подход.

Спасибо большое за видео.

[@K0mariki]

Для чего делать такую вложенность? первый секшен для отступов. А вот для чего оборачивать hero в section__body? Это не лишний контейнер?

[@AleksanderLamkov]

Привет! Для консистентности. Чтобы секции были структурно похожи друг на друга. В некоторых секциях есть section__header, а располагать иной БЭМ-блок на том же уровне - кажется мне не совсем правильным, поэтому добавляю новый БЭМ-элемент section__body и размещаю новый БЭМ-блок именно там.

[@K0mariki]

​@nderLamkov Прохожу курс по веб-программированию. Дошел до середины раздела Vue и понял, что у меня недостаточно базовых знаний HTML и CSS. Каждый день захожу на твой канал и изучаю материал. Прошло чуть больше недели, и я уже успел выучить курс по HTML и CSS +-БЭМ, а также реализовать первый макет. Сейчас повторяю второй макет. Вот-вот дипломная работа (уже 4 курс). Тема веб-сайт (5страниц). Срочно нужно набрать скилл)) Спасибо за контент и отвтет

[@danyawyse1933]

Привет, когда прописываю например на 25:05 переменные var, не отображаются подсказки. Как это можно исправить ?

[@danyawyse1933]

И когда делаю какой нибудь @include приходится импортить этот файл сверху другого scss файла

[@AleksanderLamkov]

Какая у тебя IDE?

[@danyawyse1933]

@@AleksanderLamkov vscode

[@AleksanderLamkov]

Напиши в чат: t.me/friendlyFrontendChat Там помогут.

[@This_is_hellwood]

Александр. Просматривая данный ролик, обратил внимание на то, что в утилитах, вы неоднократно использовали "!important", да бы перебить все погрешности при каскаде стилей. Разве это не считается плохим тоном в современной верстке? Благодарю за ответ!

[@AleksanderLamkov]

Для утилитарных классов !important нужен, без него не обойтись. Это, пожалуй, единственный сценарий использования этой механики, который нельзя назвать "плохим тоном" :)

[@JakeJake-w7g]

Александр, можно ли использовать к примеру файл _media.scss как шаблон-заготовку для других проэктов?

[@AleksanderLamkov]

Конечно!

[@ЭлайтСолт]

А есть ли какое правило для группировки блоков scss или все кидается в одну папку? Тут страница простая, а в более сложных проектах где блоков может быть существенно больше и разобраться потом будет не реально сложно. :(

[@AleksanderLamkov]

Привет! Можно дополнительно в blocks разделить файлы на две категории - ui и views, в ui располагать кнопки, поля ввода, модальные окна, селекты, аккордеоны, в общем - всё, что точно может повторяться на странице неоднократно, а во views помещать всё остальное. А для более серьезных проектов (особенно SPA) есть feature-sliced.design/ru/

[@ЭлайтСолт]

@@AleksanderLamkov Спасибо!

[@Zhenkaaf]

насколько padding/margin-block актуальны? ранее встерчал только классический padding/Top/Left

[@AleksanderLamkov]

Всегда их использую. Очень удобные. А ещё из той же оперы padding-inline, margin-inline, border-inline и border-block.

[@linux_showcase]

классная тема это VsCode? а все услышал что вебшторм, расскажи как такую тему поставить? уж больно нравится

[@AleksanderLamkov]

Привет! Oceanic Dark Theme: plugins.jetbrains.com/plugin/16506-oceanic-dark-theme

[@linux_showcase]

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

[@AleksanderLamkov]

Это встроенная в WebStorm фича, отдельно ничего не ставил :)

[@linux_showcase]

@@AleksanderLamkov ок спасибо за фидбек! и спасибо за курсы!

[@qvadratkz]

Важно! Для лендигов это не нужно. За урок, на больших проектах самое то, спасибо огромное❤️‍🔥

[@aliexpress2109]

Ты имеешь ввиду начальные приготовления показанные в начале?

[@qvadratkz]

​​@@aliexpress2109 аха, если конечно там не будет 10 лендосов от одной компании - это стоит обсудить в начале проекта. А если один лендинг, то там это не особо нужно

[@jail_vladimirkiy-pz8sd]

Почему не сделать иконку стрелки перед Learn More через псевдоэлемент before?

[@AleksanderLamkov]

Тогда невозможно будет без костылей повлиять на цвет иконки.

[@jail_vladimirkiy-pz8sd]

@@AleksanderLamkov точно, спасибо!

[@rustamakhmetyanov4404]

user-scalable=no если не ошибаюсь уменьшает баллы accessibility и выводит в консоль предупреждение?

[@AleksanderLamkov]

Этот параметр нужен для сайтов без адаптива, где на мобилке и десктопе открывается одинаковая десктопная версия. В таком случае на мобилке без возможности зума будет тяжко. Валидатор же не определяет, есть ли на проверяемом сайте адаптив и подстраховывается, выводя такое предупреждение.

[@xdevelx]

@AleksanderLamkov А как прикажите на телефоне изображение зазумить и рассмотреть? Открывать его в отдельной вкладке? За пользователя не нужно ничего решать. user-scalable=no является антипаттерном в доступности веб приложений и не стоит его показывать в обучающих видео. За него предупреждение будет не только в валидаторе, но и в lighthouse от гугла, ну и в самом chrome в ошибках будет.

[@AleksanderLamkov]

Угу, вы правы. Учту в будущем. Спасибо!

[@Вадим-щ3ч4т]

Привет, Александр. Видео как всегда - шикарно, спасибо за труд. Хотел спросить про переменные, есть ли какая-то задумка в использовании конкретно :root, а не scss переменных(через $), или это дело привычки? Поскольку на мой взгляд, запись через $($color), выглядит короче чем условная var(--color).

[@AleksanderLamkov]

Привет! Спасибо за комментарий! Отвечаю на вопрос. Во-первых, не нужно путать :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, иного пути нет.

[@AleksanderLamkov]

И последнее: Sass-переменные стоит использовать в Sass-синтакисе, а CSS - в CSS. О чем это я. В параметрах Sass-миксина без $ не обойтись, а в CSS-функции calc() можно смело использовать нативные var() переменные и это будет прекрасно работать.

[@Вадим-щ3ч4т]

@@AleksanderLamkov Благодарю за такой развернутый ответ :)

[@tortik_0162]

Александр, такой вопрос. В первом мастер классе, как я помню, мы в начале каждой секции ставили h1 и названием секции с классом visually-hidden для доступности. В этом мастер классе такого нет, хотя он более сложный. Насколько важно это делать?

[@AleksanderLamkov]

В первом мастер-классе мы добавляли визуально скрытые заголовки уровня h2 в каждую секцию потому, что их не было по макету. Заголовок h1 был в разметке ровно один. В макете этого мастер-класса заголовки у секций имеются и так. Поэтому для них visually-hidden не нужен.

[@tortik_0162]

@@AleksanderLamkov да, перепутал теги) Теперь понял, большое спасибо)

[@reiben7328]

Для кнопки в header медиазапрос для планшетной версии не добавлен. А ещё терминал vsc ругается на: font-size: clamp(#{$min}px, #{$max / 1440 * 100}vw, #{$max}px); Пишет, что использование символа "/" для деления вне функции calc() устарело и будет удалено в Dart Sass 2.0.0. Я то вообще такую конструкцию впервые вижу.

[@AleksanderLamkov]

Привет! В каком плане «не добавлен»? Верстка на планшетной версии разве ломается? А по поводу "/" - можно не обращать внимание. Sass v. 2 выйдет не скоро.

[@reiben7328]

@@AleksanderLamkovстили для кнопки были добавлены без медиазапроса. Просто ты забыл @include tablet. Раз уж ты ответил, хочу сказать, что я учился на курсе, в котором ты был одним из наставников. По окончании курса я выпросил доступ к записям всех консультаций всех групп (где-то 7-9 групп в общем, точно не помню). Я пересмотрел все записи и могу сказать, что ты не зря канал создал. Консультации, которые ты вёл, были самыми содержательными и полезными. Жаль, что я не к тебе в группу попал тогда.

[@AleksanderLamkov]

> Просто ты забыл @include tablet Понял. Да, допустил ошибку. Спасибо, что поправил. > Я пересмотрел все записи и могу сказать, что ты не зря канал создал. Консультации, которые ты вёл, были самыми содержательными и полезными. Очень приятно слышать, что мои прошлые деяния всё ещё приносят людям пользу! О канале как раз начал думать в то время, когда наставничал на том курсе по фронтенду :)

[@Ekaterinn]

Спасибо за такое полезное видео! Подскажите, окуда берется формула для динамического шрифта? И ещё, почему для размера шрифта используются px а не rem?

[@AleksanderLamkov]

Привет! Формула простая: берем значение в пикселях из десктопной версии макета, делим на ширину контентной части и умножаем на 100, чтобы по итогу перевести всё во вьюпорт-единицы vw. rem принципиально не использую, так как многие новички допускают ситуацию, когда слишком маленький размер шрифта на мобильной версии по итогу становится гораздо меньше рекомендуемых 14px Функция clamp с мин-макс ограничениями гораздо безопаснее. Сложнее выстрелить себе в ногу при адаптации.

[@Ekaterinn]

@@AleksanderLamkov Спасибо за ответ! Мне было интересно, откуда именно это формула, так как на сайтах вроде css-tricks приведена совсем другая формула для динамического шрифта

[@AleksanderLamkov]

Формул много, и я не все бы смог объяснить, с формулой "px => vw" разобраться проще всего, на мой взгляд.

[@Ekaterinn]

@@AleksanderLamkov Спасибо огромное за ответ!

[@deniseagle]

Подскажите как у вас работают сокращённые css через двоеточие, например mr:a ( margin-right: auto ). В Emmet такого нет. Пользуюсь sublime, неужели на все сниппеты писать?

[@AleksanderLamkov]

Это, кажется, встроенная в IDE WebStorm функциональность. В VSCode тоже это «изкоробки». Для саблайма, увы, не подскажу, надо искать плагин, похоже…

[@ЭдуардУжинцев-ц9ч]

Здравствуйте, подскажите зачем делать миксин "reset-link" и "reset-button", если можно просто добавить эти обнуления стилей по тегам в файле обнуления стилей "_normalize" ?

[@AleksanderLamkov]

Обнулять стили кнопкам глобально по тегу button не очень хорошо. Лучше все же к классу button подвязаться. Ну а что касается ссылок - можно сделать и так, как ты предложил.

[@ЭдуардУжинцев-ц9ч]

@AleksanderLamkov Понял, спасибо вам за ваши старания))

[@aharito]

Вопрос: почему в миксине fluid-text мы юзаем 1440, а не 1240? Ведь экран ограничен контейнером, макс. ширина полотна 1240, и шрифт должен расти только до этого размера экрана?

[@AleksanderLamkov]

Моя ошибка. Да, нужно 1240 указывать. Спасибо большое за замечание!

[@aharito]

@@AleksanderLamkov Это вам спасибо за видео, смотрю с удовольствием.

[@aharito]

@@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 ); }

[@AleksanderLamkov]

Да, интересные мысли, спасибо! Кстати, в последнем видео я предлагаю другую формулу, улучшенную, на основе комбинации rem и vw: kzbin.info/www/bejne/bJ2Zen2CobiigtE Вот там вроде бы нет проблемы пропорционального изменения значения.

[@aharito]

@@AleksanderLamkov Я ещё до него не дошёл, обязательно посмотрю ))

[@ДенисБерезюк-ч3ш]

Модальные окна всегда нужно делать через dialog (корзины, формы регистрации в модалках и так далее) ? Через обычный div не очень будет ?

[@AleksanderLamkov]

Не обязательно через dialog. Это достаточно новый тег и раньше делали на div. Так что ошибки никакой не будет.

[@ДенисБерезюк-ч3ш]

@@AleksanderLamkov а WAI-ARIA не нужно делать ? Модалка открыта или закрыта, атрибуты состояние и так далее ?

[@Ґангсер]

можно ли использовать все эти миксины как базовая сборка для всех своих новичковых проектов?

[@AleksanderLamkov]

Да, конечно. Только вот на канале в ближайший месяц будет ещё один мастер-класс. Там ещё круче сборка получится после начальной подготовки.

[@РоманЧенский-щ2м]

Если у вас возникают проблемы с анимациями и переходами на сайте, это может быть связано с настройками вашей системы. Проверьте, включен ли параметр 'Уменьшить движение' в Windows или macOS. Если он включен, анимации могут отключаться для улучшения доступности. Чтобы решить проблему, просто выключите эту опцию в настройках системы. После этого анимации должны работать корректно.

[@Roman-P.]

Подскажите, а почему в каждой секции отдельно прописывать container? Ведь ширина контентной части по макету одинаковая, не лучше ли было сделать один общий container и внутри него поместить секции?

[@AleksanderLamkov]

Привычка. Часто так бывало на работе, что какая-то из секций макета выбивается по ширине (например, добавляется фон на всю ширину экрана), а из-за ограничений родителя реализовать бы её уже не получилось. Но ты прав, что для этого макета можно было бы и один раз применить container и не создавать лишних оберток.

[@Roman-P.]

@@AleksanderLamkov Спасибо за ответ. У меня еще один вопрос, у некоторых людей я видел margin заданный в %. Мне кажется использование margin в % сокращает количество медиа запросов и кода. Но я никогда не применял это в своей практике. Что можете посоветовать, стоит ли его применять и применяете ли вы это в своей практике.

[@AleksanderLamkov]

Чисто в %? Странно. Ну или верстка получается «на глаз» и при определенных обстоятельствах всё съезжает, либо в CSS выверенные, но жуть какие неудобные дробные значения. Лучший выбор - % или vw / vh в связке с функциями min, max и clamp. В таком случае действительно получится сэкономить медиазапросы. Было про это отдельное видео на канале: kzbin.info/www/bejne/rX26gGhuha95qKc

[@Roman-P.]

​@@AleksanderLamkov Извините за банальный вопрос. Подскажите, почему в обнуляющем стиле вы установили margin-block: 0; только для тегов с классами? Просто у меня в коде попались некоторые теги без класса и я сначала не понял откуда взялся лишний margin. Пришлось немного изменить код. :where( h1, h2, h3, h4, h5, h6, p, ul, ol, dl ) { margin-block: 0; } Наверно правильнее не допускать использования этих тегов без классов?

[@AleksanderLamkov]

Не совсем. Наличие элементов p, ul, li и подобных БЕЗ классов допускается, но в местах разметки, которые впоследствии будут наполняться контент-менеджерами через wysiwyg-редакторы. Нагенерированные таким способом элементы будут в итоговой разметке без классов. И для них важно все же прописать какие-то внешние отступы, чтобы контент не слипался друг с другом.

[@valsory]

Большое спасибо за видео! Вопрос: а разве можно по БЭМ давать верхний отступ блоку header?

[@AleksanderLamkov]

Привет! Спасибо за фидбек :) Верхний внутренний (!) отступ padding-top задавать БЭМ-блокам можно. Нельзя задавать внешние отступы margin.

[@arti532]

Вопрос по нормализации, в вашем билде данного файла последний блок @media имеет строчку с transition duration 0.01s !important, что в итоге сказывается на анимации тк перебивает длительность анимации через константу заданную в variables, но у вас при создании анимации константа работает, как так получается? 🧐

[@AleksanderLamkov]

Привет! Длительность перехода в 0.01s включается только в режиме пониженных движений (меидиазапрос prefers-reduced-motion: reduce). Это нужно для пользователей, у которых включены специальные настройки на компьютере или в самом браузере. Если у тебя также, то посмотри следующее: при открытом девтулз жмакни Ctrl + Shift + P, введи в открывшемся терминале Rendering, далее на этой новой панели найди пункт Emulations и подпункт prefers reduced motion, там скорее всего стоит нестандартное значение reduced, нужно его отключить. И тогда медиазапрос с 0.01s срабатывать не будет.

[@hyperpocket.]

Почему ты класс container задаешь тегу section? Обычно section остается на всю ширину. Или это было сделано специально, т.к цвет фона body и section один и тот же?

[@AleksanderLamkov]

Угу, в макете нет ни одной секции с иным фоном, нежели белый цвет, потому не вижу смысла переносить контейнер в дополнительную внутреннюю обертку секции.

[@_Snacker_]

А для чего нужны миксины сброса (reset)? Если не ошибаюсь, сбросы для элементов прописываются в отдельном файле.

[@AleksanderLamkov]

На всякий случай. Добавил по привычке. Вроде как в проекте так и не заюзали ни разу. Можно удалить. P. S. Но в целом, они же не мешают, в финальный бандл CSS не попадут :)

[@rustamakhmetyanov4404]

Спасибо за контент. Использование методологии бэм в проекте с ванильном js еще вроде понятно. Но когда проект пишется на фреймворке(библиотеке) +scss если ли смысл в бэм? Тогда как в таком случае обычно проект делится на компоненты, у которых стили в отдельном файле slyle.module.scss и при сборке проекта названия стилей меняется везде.

[@AleksanderLamkov]

Привет! Модульные стили и БЭМ плохо совместимы, нужно выбрать что-то одно. Модульные стили стоит использовать в тех проектах, где либо слишком много компонентов, либо если сам проект представляет собой библиотеку компонентов, которые в будущем будут интегрироваться в другие проекты и чтобы избежать возможных конфликтов стилей, модульные стили будут отличным решением. В остальных же случаях я предпочту использовать БЭМ, так как если где-то что-то начнет пересекаться и мешать друг другу, то это будет сигналом о том, что пора переработать структуру разметки и что-то объединить, что-то унифицировать, чтобы переиспользовать один и тот же код.

[@Zhenkaaf]

За счёт чего выравнивается код html ? Я использую Prettier но почему-то он не выравнивает html.. Как настроить?

[@AleksanderLamkov]

В WebStorm пункт Reformat Code в меню. В VSCode тоже должно быть нечто подобное.

[@НетамНездесь]

Подскажите, пишу в VScode, как настроить так что бы переменные появлялись в подсказках? может есть какое расширение, на подобие SCSS IntelliSense ( он почему то не работает)

[@AleksanderLamkov]

Увы, про VSCode не подскажу, я WebStorm использую. Задай свой вопрос в чате нашего коммьюнити, там тебе наверняка помогут: t.me/friendlyFrontendChat

[@aharito]

У меня SCSS IntelliSense в VSCode работает, возможно у вас настройки не те? там есть настройки Suggest Functions, Mixins и Vars, правда по дефолту они включены. В общем, проверьте settings для этого расширения. А вообще для SCSS юзаю этот самый SCSS IntelliSense и ещё пару: eCSStractor и Live Sass Compiler, если ещё не юзаете, очень рекомендую.

[@НетамНездесь]

@@aharito Спасибо большое за ответ, помогли найти решение в чате канала. Помогло такое расширение как CSS Variable Autocomplete. Да, eCSStractor и Live Sass Compiler использую)))

[@hyperpocket.]

Почему не навесил утилитарный класс container на body?

[@AleksanderLamkov]

В таком случае не получилось бы без костылей реализовать адаптивную версию футера.

[@OleksiiBaranovskyi]

Вопрос, чего мы не используем reset? а только normalize? у меня просто проблема с list type пошла на лишка и а сылках

[@AleksanderLamkov]

Мы используем кастомный нормалайз, про который объяснял в одном из первых уроков курса по CSS. Если у элементов в разметке есть классы (атрибут class), то нормалайз сбросит у таких элементов лишние отступы и маркеры (если речь идет про li). Ну а ссылкам даже reset ничего не делает, тут нужно точечно для каждого проекта прописать те стили, которые требуются по дизайну.

[@tempest7772]

А можете скинуть ссылку на первый мастер-класс?

[@AleksanderLamkov]

Ссылки на плейлисты обоих мастер-классов есть в описании под каждым видео канала. Верстка Kropp Fitness (HTML, CSS) kzbin.info/aero/PL0MUAHwery4rqkzKF1mDBCIH_eZgjY6uN

[@byGERart]

Вот бы урок по Dialog! Вопрос только, меню закрывается только по клику на close-button, а как сделать и при клике на ссылки в меню?

[@byGERart]

или придется вешать на внутренние ссылки доп onclick с закрытием окна

[@AleksanderLamkov]

Да, только с дополнительным onclick на сами ссылки :( Про урок по dialog - хорошая идея. Только там без JS скудная версия получается. Хочу после курса по JS сделать гайды по всем популярным UI компонентам.

[@byGERart]

@@AleksanderLamkov Отлично! Буду ждать, я как раз js смотрю и познаю. По css очень много фишек полезных узнал и применяю в данный момент ;)

[@maxet2374]

оч здорово и полезно

[@vladsambor2211]

Урок крутой, одна проблема Deprecation Warning: Using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0. И формула не работает: font-size: clamp(#{$min}px, #{$max / 1440 * 100}vw, #{$max}px); 😭а без нее ни как.

[@AleksanderLamkov]

Нужно заменить второй аргумент и использовать calc: clamp( #{$min}px, #{calc($max / 1440) * 100}vw, #{$max}px )

[@vladsambor2211]

@@AleksanderLamkov Спасибо огромное за твою помощь, все работает!!!

[@smotritelyoutube]

Супер!!! Лайк!!!

[@Павел-у1ч9к]

Подскажите, почему используете скрытый span, а не атрибут aria-label?

[@AleksanderLamkov]

Привет! Некоторые скринридеры не дружат с автопереводом значений атрибутов на язык пользователя. С визуально скрытым элементом будет надежнее.

[@ВиталийДавыдов-э4г]

Есть ли в бесплатной версии фигмы получить информацию о радиусах, тенях, градиентах? спасибо

[@AleksanderLamkov]

Да, посмотри это: Figma • Инспектирование стилей без DevMode • Плагин Inspect Styles kzbin.infoWVpYkW-Ktto?feature=share

[@ВиталийДавыдов-э4г]

@@AleksanderLamkov Спасибо Александр

[@АлександрСальников-с2ж]

Коммент в поддержку

[@ShocKKKKKKK]

Привет, а что за тема стоит для редактора? Спасибо

[@AleksanderLamkov]

Привет! Oceanic Dark Theme: plugins.jetbrains.com/plugin/16506-oceanic-dark-theme

[@BryanskyM]

Спасибо за знания

[@danyawyse1933]

не легче селекторы прописывать полностью без &. Смотрел как то много инфы по этому поводу где говорилось что когда пишешь селекторы полностью, их потом проще искать

[@AleksanderLamkov]

Зачем искать, если есть source-map’ы к CSS-файлам? В девтулз сразу видно название файла, номер строки и даже номер символа в строке.

[@ВячеславСидоров-н5п]

Привет! Подскажи, пожалуйста, где можно поменять настройки развертывания элементов с помощью таба? У меня стоит emmet на vs code. Хочу ускорить верстку html. Допустим при img у меня стандартно разворачивается только: src="" alt="", но я хочу сделать так, чтобы добавлялись сразу width и height. Чет туплю и не понимаю куда смотреть. Сниппет создавать или шо...

[@AleksanderLamkov]

Привет! Я только в WebStorm знаю как это настроить. Для VSCode я бы гуглил так: vscode custom abbreviation snippets По первой ссылке на smashingmagazine есть инструкция.

[@xvii5753]

А почему бургер-меню реализовали таким способом? Почему бы просто не делать так: для nav position: fixed, убрать в сторону, а при нажатии на кнопку чтоб выезжала. И с дизайном кнопки было бы проще, просто анимацией палочки скосить и не нужно делать вторую, подгонять ее на то же место и тд. Toggle класса при клике через js написать и все. Для избежания программирования? Или есть другое объяснение?

[@AleksanderLamkov]

Привет! В этом мастер-классе принципиально не используем JS за исключением инлайнового обработчика onclick="mobileOverlay.showModal()" Да и решений одной и той же задачи же миллион, так что сложно сказать "почему сделал именно так". Ну и всё же мне хотелось показать взаимодействие с , а не банальный classList.toggle.

[@xvii5753]

@@AleksanderLamkov Понял, просто думал, что есть какой-то секрет, почему лучше так делать)

[@beegoodb1213]

Привет! Помоги настроить html.json сниппет. решил сделать кастомный как у тебя. При написании тега Img через точку с названием класса, структура не разворачивается как надо "Image tag with Dynamic Attributes": { "prefix": "img", "body": "", "description": "Image tag with optional class" }

[@AleksanderLamkov]

Привет! Напиши сюда, тебе помогут: t.me/friendlyFrontendChat

[@ВасяВася-е7й6н]

Все отлично и замечательно! Но можно скинуть шаблон файловой системы, которая используются в каждом проекте? А то каждый раз создавать, настраивать, подбирать не очень, а у тебя думаю уже есть готовый шаблон файловой системы)

[@AleksanderLamkov]

Не понимаю о чем речь. Весь исходный код проекта есть в репозитории гитхаба, ссылка на него в описании под видео.

[@ВасяВася-е7й6н]

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

[@AleksanderLamkov]

«Стартовый шаблон» подготовлю в ближайший месяц-два, перед тем, как следующим мастер-классом займусь. Спасибо за идею!

[@ВасяВася-е7й6н]

@@AleksanderLamkov тебе спасибо!

[@the.lightfall]

@@AleksanderLamkov Видел как один ютубер создавал репозиторий, как вы, собственно, но он для 'стартового шаблона' оставлял коммит и потом когда доделал проект, оставил еще коммит, как финальной версии. Получались 2 коммита: 1. C стартовым шаблоном чтобы скачать и начать по видео практиковаться 2. С финальным кодом И в описании были ссылки на нужные коммиты. Возможно, вам такая реализация понравится.