📌 Друзья, в телеграмме у нас есть канал и отдельный чат, где вы можете задать вопрос по фронтенд-разработке и вам постараются помочь: 💬 Чат: t.me/friendlyFrontendChat ℹ Основной канал: t.me/friendlyFrontend Если вам это интересно, присоединяйтесь, задавайте вопросы и помогайте другим 🙂
Чат это конечно хорошо, но чем больше людей в чате, тем сложнее отслеживать вопросы по конкретным темам, можно перевести чат в группу и там добавить несколько чатов по отдельной тематике, так люди смогут писать вопросы в конкретных чатах-подтемах
Смотришь урок до момента, когда автор начинает реализовывать какой-то блок на странице, ставишь паузу, пробуешь реализовать самостоятельно, затем продолжаешь просмотр видео и сравниваешь код из видео с тем, что ты написал, ищешь минусы и плюсы, делаешь для себя выводы и по такой же схеме двигаешься дальше.
Спасибо огромное за уроки! Ценнейший материал, даже на англоговорящем Ютубе ему нет ровни! Я очень рада, что учу прямо в то же время, что вы выпускает ролики. Мотивирует! ❤
Видео на 2 часа смотрел часов 10 (останавливался на каждой новой строчке кода, смотрел, что меняется, оставлял в проекте коммент и запускал дальше). Полет нормальный! Спасибо!
Очень полезный контент, пересмотрел все твои видео с самого начала, верстал предыдущий сайт вместе с тобой, даже купил ещё один монитор, чтобы было удобнее и быстрее верстать 😂 многих смотрел и вот ты единичный случий, когда обьясняешь именно как правильно делать.
Александр, ваши уроки - это божественная эссенция лучшего учебного материала и вашего опыта! Я прошел через курсы скилбокс, но там по верстке дали не больше половины того, что вы показали в этом уроке. С удовольствием впитываю все нюансы и тонкости верстки, которые вы рассказываете в процессе работы. Очень хорошо, что объясняете каждый блок кода, почему написали вот так и т.д. Это очень помогает понять множество вещей и увидеть картину в целом. Безмерно благодарен вам за ваш труд!
@@MathInfo-ye1gf и да и нет) 2 недели отработал верстальщиком на ВордПресс, выперли за медленную работу. Похвалили конечно за грамотность, но им нужно было конвейер сайтов обслуживать, а ждать когда я научусь быстро работать не захотели. Больше никуда не брали. Беру сейчас редкие заказы на фрилансе, накупил книг и читаю, практикуюсь по мере возможности.
Александр, спасибо за труды. Благодаря вам я здорово прокачал вёрстку, каждый день узнаю какие-то новые нюансы, подходы. Преимущество вашего материала это тщательная подготовка текста, что делает его всеобьемлющим и исключает воду. Так же чувствуется, что код продакшн уровня. В свободном доступе такое найти очень сложно. Надеюсь увидеть такой же материал и по React, без воды, тудушек ,сразу и по возрослому))
Аааааааа, я все повторяю, записываю, сохраняю в гисты какие-то рецепты, такой кайф!!! Оч много нового и передового! Решил в процессе обучения на другом курсе, подчерпнуть знаний у вас, так как начинается вёрстка в портфолио и хочется прям усовершенствоваться в вёрстке. Спасибо! Щас отдохну немного и на вторую часть пойду)))
Александр, спасибо за Ваши уроки! Если будет возможность, покажите, пожалуйста, верстку интернет-магазина с фильтрами товаров, сложным меню и прочими наворотами )
@@aliexpress2109 аха, если конечно там не будет 10 лендосов от одной компании - это стоит обсудить в начале проекта. А если один лендинг, то там это не особо нужно
Отличное видео, благодарю за труд. Вынес для себя несколько очень полезных моментов, вспомнил как вообще верстать спустя несколько лет простоя, но вместе с этим возникло несколько вопросов, скорее касательно подготовки проекта: Почему в _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, экранов уже в глобальной статистике уже не существует. Номоводные раскладушки не в счет, там и долей процента пока нет.
Классный урок, просмотрел минут 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, вот мой шортс про него: th-cam.com/users/shortsM-OcxRDB3bs
На 45:20 ты уменьшил кнопку без медиа запроса, значит не для планшета, а вообще. Не по макету получается. Править уже поздно, так для информации, тем кто будет верстать по видео.
Подскажите, зачем писать ul > li > а, если все равно потом list-style: none. Почему нельзя использовать сразу ссылки. Сделал их флекс-элементами и делай с ними что хочешь?
Привет! Однотипные элементы стоит помещать в списки для улучшения семантики и доступности (пользователь скринридера получит информацию о том, сколько элементов со ссылками в списке, и у него будет возможность пропустить зачитывание всего списка).
Привет! Для консистентности. Чтобы секции были структурно похожи друг на друга. В некоторых секциях есть section__header, а располагать иной БЭМ-блок на том же уровне - кажется мне не совсем правильным, поэтому добавляю новый БЭМ-элемент section__body и размещаю новый БЭМ-блок именно там.
@nderLamkov Прохожу курс по веб-программированию. Дошел до середины раздела Vue и понял, что у меня недостаточно базовых знаний HTML и CSS. Каждый день захожу на твой канал и изучаю материал. Прошло чуть больше недели, и я уже успел выучить курс по HTML и CSS +-БЭМ, а также реализовать первый макет. Сейчас повторяю второй макет. Вот-вот дипломная работа (уже 4 курс). Тема веб-сайт (5страниц). Срочно нужно набрать скилл)) Спасибо за контент и отвтет
Привет! Возможности всё ещё сильно ограничены, но технология набирает популярность в связи с блокировками приложений в AppStore, многие банки свои веб-приложения дополнительно перевели на PWA. Наверняка в будущем её возможности будут расширяться.
При использовании 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); }
мне понравились обе части! но заметила один нюнс( возможно это только у меня так в браузере отражается ?). при breakpoint 767px в header отражается и burger-button и само меню nav )
Это из-за нестандартной плотности пикселей твоего монитора. Забываю о том, что такой баг может у некоторых возникать. Тебе нужно вместо ровных значений 767 использовать 767.98 в медиазапросах и всё будет работать как надо.
Привет, Александр. Видео как всегда - шикарно, спасибо за труд. Хотел спросить про переменные, есть ли какая-то задумка в использовании конкретно :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 подготовка файлов занимает очень много времени, также некоторый код повторяется от проекта к проекту миксины, глобальные стили и тд. По этому подумал что есть готовый шаблон. Да, код есть, за него спасибо! Вроде вытащил из него все что нужно, но не очень уверен, из-за отсутствия опыта.
@@AleksanderLamkov Видел как один ютубер создавал репозиторий, как вы, собственно, но он для 'стартового шаблона' оставлял коммит и потом когда доделал проект, оставил еще коммит, как финальной версии. Получались 2 коммита: 1. C стартовым шаблоном чтобы скачать и начать по видео практиковаться 2. С финальным кодом И в описании были ссылки на нужные коммиты. Возможно, вам такая реализация понравится.
32:29 - а за чем дублировать меню? Если можно стилями, через медиа запросы с помощью позиционирования сделать мобильное меню. В чём преимущество или плюс такого подхода? Хотелось бы узнать)
Вообще, я хотел показать работу с прежде всего 😅 Ну а медиазапросами переделать разметку уже имеющегося десктопного меню можно, главное не пихать костыли с абсолютным позиционированием и точечным смещением.
Нет ли идеи реализовать плейлист с реализацией самый типичных UI элементов, может быть на чистом жс , или не на на чистом? И потихоньку его заполнять. Мне кажется зайдет. Такого контента вроде бы много на Ютубе , однако реализации прям правильной, красивой , от ВК разработчика 😉 не сыскать, лишь фрилансеры и ТД , либо реализации слишком прям лёгкие и топорные , которые никому не нужны и не встречаются на реальных сайтах в жизни. Аля сладер , выпадашки, кастомные селекты чекбоксы или радиокнопки и ТД и тп. Так сказать как полагается вот прям , с доступностью и ТД)) вдруг зайдет комунити😊
Есть момент еще. например в блоке сервис есть карточки с разным дизайном. и ты их перекрашиваешь добавляя модификаторы. но вот на бэкенде (условно битрикс) придётся делать дополнительные манипуляции. т.к. это news-list список с услугами (массив данны) то нужно будет сделать воозможность указывать модификаторы. проще на мой взглят сделать через nth child управлять стилёми без вмешательства в дом дерево (не добавляя дополнительные классы)
Спорный вопрос. Я год работал с битриксом, нашим бэкендерам было вполне ок сделать модификаторы, чтобы цеплять в разметке классы. Заказчик планировал сам менять их через CMS.
Понял. Просто заметил на практике лучше максимально избегать нагрузки дом дерева лишними классами . И стараться делать изменение через css. И при правках лучше мало ли цвет поменяется, модификатор тоже нужно будет (желательно) переименовывать
Спасибо за такое полезное видео! Подскажите, окуда берется формула для динамического шрифта? И ещё, почему для размера шрифта используются px а не rem?
Привет! Формула простая: берем значение в пикселях из десктопной версии макета, делим на ширину контентной части и умножаем на 100, чтобы по итогу перевести всё во вьюпорт-единицы vw. rem принципиально не использую, так как многие новички допускают ситуацию, когда слишком маленький размер шрифта на мобильной версии по итогу становится гораздо меньше рекомендуемых 14px Функция clamp с мин-макс ограничениями гораздо безопаснее. Сложнее выстрелить себе в ногу при адаптации.
@@AleksanderLamkov Спасибо за ответ! Мне было интересно, откуда именно это формула, так как на сайтах вроде css-tricks приведена совсем другая формула для динамического шрифта
я прописал в HTML.json, чтоб при развертывании img ему добавлялись не только класс и src, но и width, height, load=lazy, по умолчанию, как у тебя в видео. Но это работает, только если пишешь просто img и жмёшь таб. Если же писать img.header__img, то есть сразу класс добавлять, то в этом случае класс добавляется, но выводятся только класс и src, как по умолчанию.... А у тебя выводится и при использовании emmet - как это сделать?) ЗЫ: контент великолепный - поглощаю весь и с удовольствием, спасибо большое!!!
Привет! У меня WebStorm, там сниппеты настраивал. Как в VSCode настроить не знаю, но предлагаю тебе написать нам в чат, там помогут: t.me/friendlyFrontendChat
@@LAMit в vsCode можно делать снипеты в JSON, но как писал выше, есть определенные ограничения. Так как в видосе не развертывается. Возможно webstorm более гибкий в этом плане
Для кнопки в 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 Понял. Да, допустил ошибку. Спасибо, что поправил. > Я пересмотрел все записи и могу сказать, что ты не зря канал создал. Консультации, которые ты вёл, были самыми содержательными и полезными. Очень приятно слышать, что мои прошлые деяния всё ещё приносят людям пользу! О канале как раз начал думать в то время, когда наставничал на том курсе по фронтенду :)
Спасибо за урок! Всегда повторяю за тобой. Подскажи, пожалуйста, такой момент: использую VS Code, если в разметке указать высоту лого 100, как указано у тебя, то она не будет изменяться в процессе, когда мы для планшетной и мобильной версии убавляем ширину до 144, 120 пикселей, высота остаётся без изменений, в итоге получается очень большой паддинг. Сейчас решением для себя увидел только выставить height:auto, либо же вовсе убрать height из разметки. Что скажешь? Спасибо заранее за ответ.
Привет! В разметке изображениям всегда нужно задавать атрибуты width и height (значения брать из десктопной версии макета), а в стилях обязательно нужно задать для всех img max-width 100%, чтобы ни одно изображение не выпирало за пределы родительского блока и height auto для сохранения пропорций.
А есть ли какое правило для группировки блоков scss или все кидается в одну папку? Тут страница простая, а в более сложных проектах где блоков может быть существенно больше и разобраться потом будет не реально сложно. :(
Привет! Можно дополнительно в blocks разделить файлы на две категории - ui и views, в ui располагать кнопки, поля ввода, модальные окна, селекты, аккордеоны, в общем - всё, что точно может повторяться на странице неоднократно, а во views помещать всё остальное. А для более серьезных проектов (особенно SPA) есть feature-sliced.design/ru/
Привет ! Спасибо за контент, но у меня остался вопрос касаемо твоих миксинам по размерам экрана. Я ломаю голову над тем как изменить миксин. По факту на переходных точках 1 пиксель теряется и из-за этого выходит некрасиво
Привет! Почему теряется? Миксин mobile отвечает за диапазон 0-767px включительно, а mobile-above отвечает за 768px и выше. С остальными миксинами аналогично.
Под капотом миксина tablet конструкция "max-width: 1023px", которая отвечает за диапазон от 0 до 1023 пикселей включительно, а миксин tablet-above за диапазон от 1024px и выше.
Александр. Просматривая данный ролик, обратил внимание на то, что в утилитах, вы неоднократно использовали "!important", да бы перебить все погрешности при каскаде стилей. Разве это не считается плохим тоном в современной верстке? Благодарю за ответ!
Для утилитарных классов !important нужен, без него не обойтись. Это, пожалуй, единственный сценарий использования этой механики, который нельзя назвать "плохим тоном" :)
Чтобы верстка была более надежная. В реальных проектах бывает ситуация - через некоторое время по требованиям заказчика часть контента убирают, то есть удаляются элементы из разметки и если у элемента, находящегося до удаленного элемента, остались внешние отступы margin-bottom, то они будут лишними. И вот в таких ситуациях комбинация псевдоклассов not last child позволяет избавиться от нежелательного отступа, когда элемент внезапно оказывается последним среди своих соседей, лежащих на одном уровне.
Этот параметр нужен для сайтов без адаптива, где на мобилке и десктопе открывается одинаковая десктопная версия. В таком случае на мобилке без возможности зума будет тяжко. Валидатор же не определяет, есть ли на проверяемом сайте адаптив и подстраховывается, выводя такое предупреждение.
@AleksanderLamkov А как прикажите на телефоне изображение зазумить и рассмотреть? Открывать его в отдельной вкладке? За пользователя не нужно ничего решать. user-scalable=no является антипаттерном в доступности веб приложений и не стоит его показывать в обучающих видео. За него предупреждение будет не только в валидаторе, но и в lighthouse от гугла, ну и в самом chrome в ошибках будет.
Можно в utils. Просто стилей у этого класса довольно много, плюс есть внутренние grid__item элементы. Отдельный файл использован сугубо для декомпозиции и разгрузки utils.
Ссылки на плейлисты обоих мастер-классов есть в описании под каждым видео канала. Верстка Kropp Fitness (HTML, CSS) th-cam.com/play/PL0MUAHwery4rqkzKF1mDBCIH_eZgjY6uN.html
Урок крутой, одна проблема 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); 😭а без нее ни как.
Спасибо за контент. Использование методологии бэм в проекте с ванильном js еще вроде понятно. Но когда проект пишется на фреймворке(библиотеке) +scss если ли смысл в бэм? Тогда как в таком случае обычно проект делится на компоненты, у которых стили в отдельном файле slyle.module.scss и при сборке проекта названия стилей меняется везде.
Привет! Модульные стили и БЭМ плохо совместимы, нужно выбрать что-то одно. Модульные стили стоит использовать в тех проектах, где либо слишком много компонентов, либо если сам проект представляет собой библиотеку компонентов, которые в будущем будут интегрироваться в другие проекты и чтобы избежать возможных конфликтов стилей, модульные стили будут отличным решением. В остальных же случаях я предпочту использовать БЭМ, так как если где-то что-то начнет пересекаться и мешать друг другу, то это будет сигналом о том, что пора переработать структуру разметки и что-то объединить, что-то унифицировать, чтобы переиспользовать один и тот же код.
На всякий случай. Добавил по привычке. Вроде как в проекте так и не заюзали ни разу. Можно удалить. P. S. Но в целом, они же не мешают, в финальный бандл CSS не попадут :)
А в чем смысл миксинов @mixin reset-link, reset-button 14:30? Почему, например, не использовать класс .reset-link и .reset-button? Миксин же будет дублироваться к коде.
@@AleksanderLamkov а почему тогда не пользуются @extend? При extend компиляция всех классов, в которых использовался extend пишется через запятую и подходит для данных примеров, а чем больше пишется миксинов, тем больше будет дублированного кода. Вот этот момент я не понимаю, как новичок.
Подскажите как у вас работают сокращённые css через двоеточие, например mr:a ( margin-right: auto ). В Emmet такого нет. Пользуюсь sublime, неужели на все сниппеты писать?
Скорее должен. У меня MacOS, а на этой ОС по умолчанию визуально отключены все скроллбары, поэтому на видео его и не видно. Можно для всех остальных ОС дополнительно стилизовать скроллбар, чтобы он не выглядел так странно (как, например, на Windows). В этом шортсе рассказывал, как это делается: th-cam.com/users/shortspgjRYNT2LQA
Подскажите, пишу в 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 использую)))
Мы используем кастомный нормалайз, про который объяснял в одном из первых уроков курса по CSS. Если у элементов в разметке есть классы (атрибут class), то нормалайз сбросит у таких элементов лишние отступы и маркеры (если речь идет про li). Ну а ссылкам даже reset ничего не делает, тут нужно точечно для каждого проекта прописать те стили, которые требуются по дизайну.
Да, только с дополнительным onclick на сами ссылки :( Про урок по dialog - хорошая идея. Только там без JS скудная версия получается. Хочу после курса по JS сделать гайды по всем популярным UI компонентам.
Это было бы уже второе nav-меню в разметке. И так как оно буквально дублирует десктопную версию, решил сделать нейтральным дивом. Но только сейчас подумал, что на мобилках основной будет скрыт и недоступен для скринридеров. Действительно стоило и это второе дублирующее меню сделать через , ты прав.
Вопрос по нормализации, в вашем билде данного файла последний блок @media имеет строчку с transition duration 0.01s !important, что в итоге сказывается на анимации тк перебивает длительность анимации через константу заданную в variables, но у вас при создании анимации константа работает, как так получается? 🧐
Привет! Длительность перехода в 0.01s включается только в режиме пониженных движений (меидиазапрос prefers-reduced-motion: reduce). Это нужно для пользователей, у которых включены специальные настройки на компьютере или в самом браузере. Если у тебя также, то посмотри следующее: при открытом девтулз жмакни Ctrl + Shift + P, введи в открывшемся терминале Rendering, далее на этой новой панели найди пункт Emulations и подпункт prefers reduced motion, там скорее всего стоит нестандартное значение reduced, нужно его отключить. И тогда медиазапрос с 0.01s срабатывать не будет.
не легче селекторы прописывать полностью без &. Смотрел как то много инфы по этому поводу где говорилось что когда пишешь селекторы полностью, их потом проще искать
Так просто визуально проще воспринимается. Первый импорт - для файлов, которые есть буквально в каждом проекте. Второй - только для бэм-блоков, которые в каждом проекте разные.
Привет! Это работает за счёт обёртки над разметкой кнопки закрытия. То есть нажатие на кнопку триггерит «отправку» этой самой формы, а за счет атрибута method dialog закрывается тот , в котором размещен этот самый элемент .
А почему бургер-меню реализовали таким способом? Почему бы просто не делать так: для nav position: fixed, убрать в сторону, а при нажатии на кнопку чтоб выезжала. И с дизайном кнопки было бы проще, просто анимацией палочки скосить и не нужно делать вторую, подгонять ее на то же место и тд. Toggle класса при клике через js написать и все. Для избежания программирования? Или есть другое объяснение?
Привет! В этом мастер-классе принципиально не используем JS за исключением инлайнового обработчика onclick="mobileOverlay.showModal()" Да и решений одной и той же задачи же миллион, так что сложно сказать "почему сделал именно так". Ну и всё же мне хотелось показать взаимодействие с , а не банальный classList.toggle.
Почему ты класс container задаешь тегу section? Обычно section остается на всю ширину. Или это было сделано специально, т.к цвет фона body и section один и тот же?
Угу, в макете нет ни одной секции с иным фоном, нежели белый цвет, потому не вижу смысла переносить контейнер в дополнительную внутреннюю обертку секции.
Александр, такой вопрос. В первом мастер классе, как я помню, мы в начале каждой секции ставили h1 и названием секции с классом visually-hidden для доступности. В этом мастер классе такого нет, хотя он более сложный. Насколько важно это делать?
В первом мастер-классе мы добавляли визуально скрытые заголовки уровня h2 в каждую секцию потому, что их не было по макету. Заголовок h1 был в разметке ровно один. В макете этого мастер-класса заголовки у секций имеются и так. Поэтому для них visually-hidden не нужен.
Привет! Подскажи, пожалуйста, где можно поменять настройки развертывания элементов с помощью таба? У меня стоит emmet на vs code. Хочу ускорить верстку html. Допустим при img у меня стандартно разворачивается только: src="" alt="", но я хочу сделать так, чтобы добавлялись сразу width и height. Чет туплю и не понимаю куда смотреть. Сниппет создавать или шо...
Привет! Я только в WebStorm знаю как это настроить. Для VSCode я бы гуглил так: vscode custom abbreviation snippets По первой ссылке на smashingmagazine есть инструкция.
Не могу понять - почему у меня Close navigation menu продолжает торчать и в мобильной и большой версии а у Вас нет. Что я не удалил или не правильно написал?
Привет! Помоги настроить html.json сниппет. решил сделать кастомный как у тебя. При написании тега Img через точку с названием класса, структура не разворачивается как надо "Image tag with Dynamic Attributes": { "prefix": "img", "body": "", "description": "Image tag with optional class" }
📌 Друзья, в телеграмме у нас есть канал и отдельный чат, где вы можете задать вопрос по фронтенд-разработке и вам постараются помочь:
💬 Чат: t.me/friendlyFrontendChat
ℹ Основной канал: t.me/friendlyFrontend
Если вам это интересно, присоединяйтесь, задавайте вопросы и помогайте другим 🙂
Чат это конечно хорошо, но чем больше людей в чате, тем сложнее отслеживать вопросы по конкретным темам, можно перевести чат в группу и там добавить несколько чатов по отдельной тематике, так люди смогут писать вопросы в конкретных чатах-подтемах
Привет! Соглашусь. В ближайшие пару недель переведу чат в формат сообщества с топиками. Давно напрашивается такой формат. Спасибо!
@@AleksanderLamkov Спасибо за отклик👌
Здравствуйте спасибо болшое за урок , подскажите пожалуйста как учить методом повторения ? Спасибо
Смотришь урок до момента, когда автор начинает реализовывать какой-то блок на странице, ставишь паузу, пробуешь реализовать самостоятельно, затем продолжаешь просмотр видео и сравниваешь код из видео с тем, что ты написал, ищешь минусы и плюсы, делаешь для себя выводы и по такой же схеме двигаешься дальше.
Спасибо огромное за уроки! Ценнейший материал, даже на англоговорящем Ютубе ему нет ровни! Я очень рада, что учу прямо в то же время, что вы выпускает ролики. Мотивирует! ❤
Видео на 2 часа смотрел часов 10 (останавливался на каждой новой строчке кода, смотрел, что меняется, оставлял в проекте коммент и запускал дальше). Полет нормальный! Спасибо!
Прошло 3 месяца, как успехи ?))
Очень полезный контент, пересмотрел все твои видео с самого начала, верстал предыдущий сайт вместе с тобой, даже купил ещё один монитор, чтобы было удобнее и быстрее верстать 😂 многих смотрел и вот ты единичный случий, когда обьясняешь именно как правильно делать.
Тоже думаю взять себе ещё 2 монитора, полезная вещь
Я взял второй монитор к ноутбуку, очень удобно. На большом моне работаю, на моне ноута все инструменты или макет, или видео, короче все остальное.
теперь понятно откудя появился компонентный подход, разбивка стилей на блоки отличная тема. Много полезного узнал, благодарю.
Александр, ваши уроки - это божественная эссенция лучшего учебного материала и вашего опыта! Я прошел через курсы скилбокс, но там по верстке дали не больше половины того, что вы показали в этом уроке. С удовольствием впитываю все нюансы и тонкости верстки, которые вы рассказываете в процессе работы. Очень хорошо, что объясняете каждый блок кода, почему написали вот так и т.д. Это очень помогает понять множество вещей и увидеть картину в целом. Безмерно благодарен вам за ваш труд!
а ты после скиллбокса устроился куда то ?
@@MathInfo-ye1gf и да и нет) 2 недели отработал верстальщиком на ВордПресс, выперли за медленную работу. Похвалили конечно за грамотность, но им нужно было конвейер сайтов обслуживать, а ждать когда я научусь быстро работать не захотели. Больше никуда не брали. Беру сейчас редкие заказы на фрилансе, накупил книг и читаю, практикуюсь по мере возможности.
Первая часть великолепна. Много нового узнал. А подход к структуре просто супер!
Александр, спасибо за труды. Благодаря вам я здорово прокачал вёрстку, каждый день узнаю какие-то новые нюансы, подходы.
Преимущество вашего материала это тщательная подготовка текста, что делает его всеобьемлющим и исключает воду. Так же чувствуется, что код продакшн уровня. В свободном доступе такое найти очень сложно. Надеюсь увидеть такой же материал и по React, без воды, тудушек ,сразу и по возрослому))
Аааааааа, я все повторяю, записываю, сохраняю в гисты какие-то рецепты, такой кайф!!! Оч много нового и передового! Решил в процессе обучения на другом курсе, подчерпнуть знаний у вас, так как начинается вёрстка в портфолио и хочется прям усовершенствоваться в вёрстке. Спасибо! Щас отдохну немного и на вторую часть пойду)))
Лучше один раз увидеть,чем сто раз услышать.Все просто и понятно.
Бриллиант среди подобных видео по тематике! Спасибо за контент)
Очень классный урок! Интересно посмотреть. Узнал для себя много нового. Спасибо
Как раз можно закрыть пару пробелов, спасибо за видео, сегодня вечером будет чем заняться!
Саша, ОГРОМНОЕ СПАСИБО!!! Много полезного и нового узнал для себя
Спасибо за видео! Скорее бы уже джаваскрипт и фреймворки, хтмл и цсс все такие быстро осваиваются 😊
после этого видео, опыт ++
Оставлю тут коммент где побольше слов. Спасибо за серию видосов!
Александр, спасибо за Ваши уроки! Если будет возможность, покажите, пожалуйста, верстку интернет-магазина с фильтрами товаров, сложным меню и прочими наворотами )
Привет, спасибо за фидбек! :) После курса по JavaScript обязательно будет верстка с подобными сложными элементами интерфейса.
Это просто прекрасно! Спасибо за такой контент.
Только начал смотреть, уже много полезного узнал. Большое спасибо)
Важно! Для лендигов это не нужно.
За урок, на больших проектах самое то, спасибо огромное❤️🔥
Ты имеешь ввиду начальные приготовления показанные в начале?
@@aliexpress2109 аха, если конечно там не будет 10 лендосов от одной компании - это стоит обсудить в начале проекта. А если один лендинг, то там это не особо нужно
Отличное видео, благодарю за труд. Вынес для себя несколько очень полезных моментов, вспомнил как вообще верстать спустя несколько лет простоя, но вместе с этим возникло несколько вопросов, скорее касательно подготовки проекта:
Почему в _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 понял, спасибо за ваш ответ
Контент топ, вставки, зум кода и тд, очень удобно
Огромное спасибо за качественный контент,теперь использую твои техники в своих работах
Здравствуйте, Александр, большое спасибо за мастер-класс. Хотелось бы увидеть урок по OpenGraph, PWA.
Спасибо за ваши видео! Это просто находка. Небольшой вопрос: почему вы используете CSS переменные, вместо SCSS переменных?
Вот мой недавний пост об этом:
t.me/friendlyFrontend/318
Давно так вкусно не смотрел. Спасибо 👍
Спасибо, посмотрим)
Классный урок, просмотрел минут 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, вот мой шортс про него:
th-cam.com/users/shortsM-OcxRDB3bs
@@AleksanderLamkov Поэкпериментирую, спасибо.
На 45:20 ты уменьшил кнопку без медиа запроса, значит не для планшета, а вообще. Не по макету получается. Править уже поздно, так для информации, тем кто будет верстать по видео.
искал этот комментарий :D Тоже подметил, что нужно было под медиа для таблеток это записать.
я просто в шоке от твоего контента очень круто
Подскажите, зачем писать ul > li > а, если все равно потом list-style: none. Почему нельзя использовать сразу ссылки. Сделал их флекс-элементами и делай с ними что хочешь?
Привет! Однотипные элементы стоит помещать в списки для улучшения семантики и доступности (пользователь скринридера получит информацию о том, сколько элементов со ссылками в списке, и у него будет возможность пропустить зачитывание всего списка).
@@AleksanderLamkov Ясно, про семантику я и не подумал. Спасибо за ответ!
Понравилось!) Спасибо!!! Подписка, колокол!
Для чего делать такую вложенность?
первый секшен для отступов. А вот для чего оборачивать hero в section__body? Это не лишний контейнер?
Привет! Для консистентности. Чтобы секции были структурно похожи друг на друга.
В некоторых секциях есть section__header, а располагать иной БЭМ-блок на том же уровне - кажется мне не совсем правильным, поэтому добавляю новый БЭМ-элемент section__body и размещаю новый БЭМ-блок именно там.
@nderLamkov Прохожу курс по веб-программированию. Дошел до середины раздела Vue и понял, что у меня недостаточно базовых знаний HTML и CSS. Каждый день захожу на твой канал и изучаю материал. Прошло чуть больше недели, и я уже успел выучить курс по HTML и CSS +-БЭМ, а также реализовать первый макет. Сейчас повторяю второй макет.
Вот-вот дипломная работа (уже 4 курс). Тема веб-сайт (5страниц). Срочно нужно набрать скилл))
Спасибо за контент и отвтет
Спасибо большое за видео. Хотелось бы узнать ваше мнение про PWA насколько сейчас востребована технология и что ее ждет в будущем?
Привет! Возможности всё ещё сильно ограничены, но технология набирает популярность в связи с блокировками приложений в AppStore, многие банки свои веб-приложения дополнительно перевели на PWA. Наверняка в будущем её возможности будут расширяться.
Приятно слушать, проф информация
Спасибо большое за видео.
Отличный контент!
При использовании 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 Огромное спасибо. Столкнулся с этой же проблемой. Когда нам ждать новый курс по вёрстке,?)
Новый МК на канале будет в течение месяца. Сейчас занимаюсь монтажом.
мне понравились обе части! но заметила один нюнс( возможно это только у меня так в браузере отражается ?). при breakpoint 767px в header отражается и burger-button и само меню nav )
Это из-за нестандартной плотности пикселей твоего монитора. Забываю о том, что такой баг может у некоторых возникать. Тебе нужно вместо ровных значений 767 использовать 767.98 в медиазапросах и всё будет работать как надо.
@@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 Благодарю за такой развернутый ответ :)
Все отлично и замечательно!
Но можно скинуть шаблон файловой системы, которая используются в каждом проекте?
А то каждый раз создавать, настраивать, подбирать не очень, а у тебя думаю уже есть готовый шаблон файловой системы)
Не понимаю о чем речь. Весь исходный код проекта есть в репозитории гитхаба, ссылка на него в описании под видео.
@@AleksanderLamkov подготовка файлов занимает очень много времени, также некоторый код повторяется от проекта к проекту миксины, глобальные стили и тд. По этому подумал что есть готовый шаблон. Да, код есть, за него спасибо! Вроде вытащил из него все что нужно, но не очень уверен, из-за отсутствия опыта.
«Стартовый шаблон» подготовлю в ближайший месяц-два, перед тем, как следующим мастер-классом займусь. Спасибо за идею!
@@AleksanderLamkov тебе спасибо!
@@AleksanderLamkov Видел как один ютубер создавал репозиторий, как вы, собственно, но он для 'стартового шаблона' оставлял коммит и потом когда доделал проект, оставил еще коммит, как финальной версии. Получались 2 коммита:
1. C стартовым шаблоном чтобы скачать и начать по видео практиковаться
2. С финальным кодом
И в описании были ссылки на нужные коммиты.
Возможно, вам такая реализация понравится.
Спасибо за знания
На 21 секунде после ряда непонятных словосочетаний пошел продолжать смотреть курс по HTML 😅
оч здорово и полезно
32:29 - а за чем дублировать меню? Если можно стилями, через медиа запросы с помощью позиционирования сделать мобильное меню. В чём преимущество или плюс такого подхода? Хотелось бы узнать)
Вообще, я хотел показать работу с прежде всего 😅
Ну а медиазапросами переделать разметку уже имеющегося десктопного меню можно, главное не пихать костыли с абсолютным позиционированием и точечным смещением.
@@AleksanderLamkov Угу. Если не менять позиционировнием меню, то как?) я только так делаю))
Доп. обертки добавлять и через display contents шаманить. Покажу подход этот в следующем МК, который в течение месяца выйдет.
Нет ли идеи реализовать плейлист с реализацией самый типичных UI элементов, может быть на чистом жс , или не на на чистом? И потихоньку его заполнять. Мне кажется зайдет. Такого контента вроде бы много на Ютубе , однако реализации прям правильной, красивой , от ВК разработчика 😉 не сыскать, лишь фрилансеры и ТД , либо реализации слишком прям лёгкие и топорные , которые никому не нужны и не встречаются на реальных сайтах в жизни. Аля сладер , выпадашки, кастомные селекты чекбоксы или радиокнопки и ТД и тп. Так сказать как полагается вот прям , с доступностью и ТД)) вдруг зайдет комунити😊
Да, так и планирую, как только с курсом по JS разберусь :)
Коммент в поддержку
Наткнулся на этот макет еще до этого ролика. Мне интересно, его выбрали т.к. он популярный или он популярный потому что его выбрали? =)
Я наткнулся на него в Figma Community, он не был сильно популярным год назад.
Есть момент еще. например в блоке сервис есть карточки с разным дизайном. и ты их перекрашиваешь добавляя модификаторы. но вот на бэкенде (условно битрикс) придётся делать дополнительные манипуляции. т.к. это news-list список с услугами (массив данны) то нужно будет сделать воозможность указывать модификаторы. проще на мой взглят сделать через nth child управлять стилёми без вмешательства в дом дерево (не добавляя дополнительные классы)
Спорный вопрос. Я год работал с битриксом, нашим бэкендерам было вполне ок сделать модификаторы, чтобы цеплять в разметке классы. Заказчик планировал сам менять их через CMS.
Но через nth-child тоже можно заморочиться, только кучу CSS-переменных пришлось бы прокидывать, но это тоже неплохой вариант.
Понял. Просто заметил на практике лучше максимально избегать нагрузки дом дерева лишними классами . И стараться делать изменение через css. И при правках лучше мало ли цвет поменяется, модификатор тоже нужно будет (желательно) переименовывать
Большое спасибо за видео!
Вопрос: а разве можно по БЭМ давать верхний отступ блоку header?
Привет! Спасибо за фидбек :) Верхний внутренний (!) отступ padding-top задавать БЭМ-блокам можно. Нельзя задавать внешние отступы margin.
Спасибо за такое полезное видео! Подскажите, окуда берется формула для динамического шрифта? И ещё, почему для размера шрифта используются px а не rem?
Привет!
Формула простая: берем значение в пикселях из десктопной версии макета, делим на ширину контентной части и умножаем на 100, чтобы по итогу перевести всё во вьюпорт-единицы vw.
rem принципиально не использую, так как многие новички допускают ситуацию, когда слишком маленький размер шрифта на мобильной версии по итогу становится гораздо меньше рекомендуемых 14px
Функция clamp с мин-макс ограничениями гораздо безопаснее. Сложнее выстрелить себе в ногу при адаптации.
@@AleksanderLamkov Спасибо за ответ! Мне было интересно, откуда именно это формула, так как на сайтах вроде css-tricks приведена совсем другая формула для динамического шрифта
Формул много, и я не все бы смог объяснить, с формулой "px => vw" разобраться проще всего, на мой взгляд.
@@AleksanderLamkov Спасибо огромное за ответ!
я прописал в HTML.json, чтоб при развертывании img ему добавлялись не только класс и src, но и width, height, load=lazy, по умолчанию, как у тебя в видео.
Но это работает, только если пишешь просто img и жмёшь таб.
Если же писать img.header__img, то есть сразу класс добавлять, то в этом случае класс добавляется, но выводятся только класс и src, как по умолчанию.... А у тебя выводится и при использовании emmet - как это сделать?)
ЗЫ: контент великолепный - поглощаю весь и с удовольствием, спасибо большое!!!
Привет! У меня WebStorm, там сниппеты настраивал. Как в VSCode настроить не знаю, но предлагаю тебе написать нам в чат, там помогут:
t.me/friendlyFrontendChat
Нашел ответ на свой вопрос?
@@LAMit в vsCode можно делать снипеты в JSON, но как писал выше, есть определенные ограничения. Так как в видосе не развертывается.
Возможно webstorm более гибкий в этом плане
Это прекрасно
Для кнопки в 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
Понял. Да, допустил ошибку. Спасибо, что поправил.
> Я пересмотрел все записи и могу сказать, что ты не зря канал создал. Консультации, которые ты вёл, были самыми содержательными и полезными.
Очень приятно слышать, что мои прошлые деяния всё ещё приносят людям пользу! О канале как раз начал думать в то время, когда наставничал на том курсе по фронтенду :)
Спасибо за урок! Всегда повторяю за тобой. Подскажи, пожалуйста, такой момент: использую VS Code, если в разметке указать высоту лого 100, как указано у тебя, то она не будет изменяться в процессе, когда мы для планшетной и мобильной версии убавляем ширину до 144, 120 пикселей, высота остаётся без изменений, в итоге получается очень большой паддинг. Сейчас решением для себя увидел только выставить height:auto, либо же вовсе убрать height из разметки. Что скажешь? Спасибо заранее за ответ.
Привет! В разметке изображениям всегда нужно задавать атрибуты width и height (значения брать из десктопной версии макета), а в стилях обязательно нужно задать для всех img max-width 100%, чтобы ни одно изображение не выпирало за пределы родительского блока и height auto для сохранения пропорций.
@@AleksanderLamkov спасибо! тогда в каком месте в стилях лучше вставить height auto? в normalize.scss есть img, туда подойдет?
Да, можно в normalize.
Супер!!! Лайк!!!
25:25, Саша почему ты не использовал миксину reset-link ?
Привет! Забыл, честно говоря :) Надо было добавить, согласен.
А есть ли какое правило для группировки блоков scss или все кидается в одну папку? Тут страница простая, а в более сложных проектах где блоков может быть существенно больше и разобраться потом будет не реально сложно. :(
Привет! Можно дополнительно в blocks разделить файлы на две категории - ui и views, в ui располагать кнопки, поля ввода, модальные окна, селекты, аккордеоны, в общем - всё, что точно может повторяться на странице неоднократно, а во views помещать всё остальное.
А для более серьезных проектов (особенно SPA) есть feature-sliced.design/ru/
@@AleksanderLamkov Спасибо!
Привет !
Спасибо за контент, но у меня остался вопрос касаемо твоих миксинам по размерам экрана. Я ломаю голову над тем как изменить миксин. По факту на переходных точках 1 пиксель теряется и из-за этого выходит некрасиво
Привет! Почему теряется? Миксин mobile отвечает за диапазон 0-767px включительно, а mobile-above отвечает за 768px и выше. С остальными миксинами аналогично.
@@AleksanderLamkov Я отталкиваюсь от десктопа. Получается, что миксин работает до 1023 (не включительно) и от 1024
@@AleksanderLamkov код на кодпейн могу прислать
Под капотом миксина tablet конструкция "max-width: 1023px", которая отвечает за диапазон от 0 до 1023 пикселей включительно, а миксин tablet-above за диапазон от 1024px и выше.
Пришли. Не понимаю твою проблему.
можно ли использовать все эти миксины как базовая сборка для всех своих новичковых проектов?
Да, конечно. Только вот на канале в ближайший месяц будет ещё один мастер-класс. Там ещё круче сборка получится после начальной подготовки.
Александр. Просматривая данный ролик, обратил внимание на то, что в утилитах, вы неоднократно использовали "!important", да бы перебить все погрешности при каскаде стилей. Разве это не считается плохим тоном в современной верстке?
Благодарю за ответ!
Для утилитарных классов !important нужен, без него не обойтись. Это, пожалуй, единственный сценарий использования этой механики, который нельзя назвать "плохим тоном" :)
1:33:25 почему нужно использовать &:not(:last-child) для отступов снизу? Такой же вопрос по поводу секшн хедер
Чтобы верстка была более надежная.
В реальных проектах бывает ситуация - через некоторое время по требованиям заказчика часть контента убирают, то есть удаляются элементы из разметки и если у элемента, находящегося до удаленного элемента, остались внешние отступы margin-bottom, то они будут лишними.
И вот в таких ситуациях комбинация псевдоклассов not last child позволяет избавиться от нежелательного отступа, когда элемент внезапно оказывается последним среди своих соседей, лежащих на одном уровне.
классная тема это VsCode? а все услышал что вебшторм, расскажи как такую тему поставить? уж больно нравится
Привет! Oceanic Dark Theme: plugins.jetbrains.com/plugin/16506-oceanic-dark-theme
@@AleksanderLamkov о спасибо огромное! а чатгпт смотрю вкладка прикручивается отдельно или в виде плагина?
Это встроенная в WebStorm фича, отдельно ничего не ставил :)
@@AleksanderLamkov ок спасибо за фидбек! и спасибо за курсы!
Почему не сделать иконку стрелки перед Learn More через псевдоэлемент before?
Тогда невозможно будет без костылей повлиять на цвет иконки.
@@AleksanderLamkov точно, спасибо!
Почему не навесил утилитарный класс container на body?
В таком случае не получилось бы без костылей реализовать адаптивную версию футера.
Привет, а что за тема стоит для редактора? Спасибо
Привет! Oceanic Dark Theme: plugins.jetbrains.com/plugin/16506-oceanic-dark-theme
Александр, можно ли использовать к примеру файл _media.scss как шаблон-заготовку для других проэктов?
Конечно!
ну это перфект
user-scalable=no если не ошибаюсь уменьшает баллы accessibility и выводит в консоль предупреждение?
Этот параметр нужен для сайтов без адаптива, где на мобилке и десктопе открывается одинаковая десктопная версия. В таком случае на мобилке без возможности зума будет тяжко.
Валидатор же не определяет, есть ли на проверяемом сайте адаптив и подстраховывается, выводя такое предупреждение.
@AleksanderLamkov А как прикажите на телефоне изображение зазумить и рассмотреть? Открывать его в отдельной вкладке? За пользователя не нужно ничего решать. user-scalable=no является антипаттерном в доступности веб приложений и не стоит его показывать в обучающих видео. За него предупреждение будет не только в валидаторе, но и в lighthouse от гугла, ну и в самом chrome в ошибках будет.
Угу, вы правы. Учту в будущем. Спасибо!
1:30:53 зачем создать отдельный файл под grid ? это же утилитарный класс, его можно задать в _utils.scss, или нет ?
Можно в utils. Просто стилей у этого класса довольно много, плюс есть внутренние grid__item элементы. Отдельный файл использован сугубо для декомпозиции и разгрузки utils.
А можете скинуть ссылку на первый мастер-класс?
Ссылки на плейлисты обоих мастер-классов есть в описании под каждым видео канала.
Верстка Kropp Fitness (HTML, CSS)
th-cam.com/play/PL0MUAHwery4rqkzKF1mDBCIH_eZgjY6uN.html
Урок крутой, одна проблема 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); 😭а без нее ни как.
Нужно заменить второй аргумент и использовать calc:
clamp(
#{$min}px,
#{calc($max / 1440) * 100}vw,
#{$max}px
)
@@AleksanderLamkov Спасибо огромное за твою помощь, все работает!!!
Спасибо за контент. Использование методологии бэм в проекте с ванильном js еще вроде понятно. Но когда проект пишется на фреймворке(библиотеке) +scss если ли смысл в бэм? Тогда как в таком случае обычно проект делится на компоненты, у которых стили в отдельном файле slyle.module.scss и при сборке проекта названия стилей меняется везде.
Привет! Модульные стили и БЭМ плохо совместимы, нужно выбрать что-то одно.
Модульные стили стоит использовать в тех проектах, где либо слишком много компонентов, либо если сам проект представляет собой библиотеку компонентов, которые в будущем будут интегрироваться в другие проекты и чтобы избежать возможных конфликтов стилей, модульные стили будут отличным решением.
В остальных же случаях я предпочту использовать БЭМ, так как если где-то что-то начнет пересекаться и мешать друг другу, то это будет сигналом о том, что пора переработать структуру разметки и что-то объединить, что-то унифицировать, чтобы переиспользовать один и тот же код.
Привет, как называется твой тема ?
Привет! Oceanic Dark Theme: plugins.jetbrains.com/plugin/16506-oceanic-dark-theme
шикарноб
Есть ли в бесплатной версии фигмы получить информацию о радиусах, тенях, градиентах? спасибо
Да, посмотри это:
Figma • Инспектирование стилей без DevMode • Плагин Inspect Styles
th-cam.com/users/shortsWVpYkW-Ktto?feature=share
@@AleksanderLamkov Спасибо Александр
Подскажите, почему используете скрытый span, а не атрибут aria-label?
Привет! Некоторые скринридеры не дружат с автопереводом значений атрибутов на язык пользователя. С визуально скрытым элементом будет надежнее.
А для чего нужны миксины сброса (reset)? Если не ошибаюсь, сбросы для элементов прописываются в отдельном файле.
На всякий случай. Добавил по привычке. Вроде как в проекте так и не заюзали ни разу. Можно удалить.
P. S. Но в целом, они же не мешают, в финальный бандл CSS не попадут :)
А в чем смысл миксинов @mixin reset-link, reset-button 14:30? Почему, например, не использовать класс .reset-link и .reset-button? Миксин же будет дублироваться к коде.
Писать каждый раз два класса в HTML-разметке вместо одного - неудобно. Лучше один раз вызвать миксин в CSS-коде.
@@AleksanderLamkov а почему тогда не пользуются @extend? При extend компиляция всех классов, в которых использовался extend пишется через запятую и подходит для данных примеров, а чем больше пишется миксинов, тем больше будет дублированного кода. Вот этот момент я не понимаю, как новичок.
Согласен, extend для финального кода был бы лучше, не подумал. Спасибо за наводку!
Подскажите как у вас работают сокращённые css через двоеточие, например mr:a ( margin-right: auto ). В Emmet такого нет. Пользуюсь sublime, неужели на все сниппеты писать?
Это, кажется, встроенная в IDE WebStorm функциональность. В VSCode тоже это «изкоробки». Для саблайма, увы, не подскажу, надо искать плагин, похоже…
1:17:40 Должен ли появиться горизонтальный скролл? У меня появляется.
Скорее должен. У меня MacOS, а на этой ОС по умолчанию визуально отключены все скроллбары, поэтому на видео его и не видно.
Можно для всех остальных ОС дополнительно стилизовать скроллбар, чтобы он не выглядел так странно (как, например, на Windows).
В этом шортсе рассказывал, как это делается:
th-cam.com/users/shortspgjRYNT2LQA
Подскажите, пишу в 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 использую)))
Вопрос, чего мы не используем reset? а только normalize? у меня просто проблема с list type пошла на лишка и а сылках
Мы используем кастомный нормалайз, про который объяснял в одном из первых уроков курса по CSS. Если у элементов в разметке есть классы (атрибут class), то нормалайз сбросит у таких элементов лишние отступы и маркеры (если речь идет про li). Ну а ссылкам даже reset ничего не делает, тут нужно точечно для каждого проекта прописать те стили, которые требуются по дизайну.
Вот бы урок по Dialog! Вопрос только, меню закрывается только по клику на close-button, а как сделать и при клике на ссылки в меню?
или придется вешать на внутренние ссылки доп onclick с закрытием окна
Да, только с дополнительным onclick на сами ссылки :(
Про урок по dialog - хорошая идея. Только там без JS скудная версия получается. Хочу после курса по JS сделать гайды по всем популярным UI компонентам.
@@AleksanderLamkov Отлично! Буду ждать, я как раз js смотрю и познаю. По css очень много фишек полезных узнал и применяю в данный момент ;)
На 35:36 почему не nav для меню ? это же навигация по сайту
Это было бы уже второе nav-меню в разметке. И так как оно буквально дублирует десктопную версию, решил сделать нейтральным дивом.
Но только сейчас подумал, что на мобилках основной будет скрыт и недоступен для скринридеров.
Действительно стоило и это второе дублирующее меню сделать через , ты прав.
@@AleksanderLamkov ничего страшного, мы же не роботы, что-то забываем, что-то не додумываем, главное что ты понял и дальше будешь делать лучше
Вопрос по нормализации, в вашем билде данного файла последний блок @media имеет строчку с transition duration 0.01s !important, что в итоге сказывается на анимации тк перебивает длительность анимации через константу заданную в variables, но у вас при создании анимации константа работает, как так получается? 🧐
Привет! Длительность перехода в 0.01s включается только в режиме пониженных движений (меидиазапрос prefers-reduced-motion: reduce). Это нужно для пользователей, у которых включены специальные настройки на компьютере или в самом браузере. Если у тебя также, то посмотри следующее: при открытом девтулз жмакни Ctrl + Shift + P, введи в открывшемся терминале Rendering, далее на этой новой панели найди пункт Emulations и подпункт prefers reduced motion, там скорее всего стоит нестандартное значение reduced, нужно его отключить. И тогда медиазапрос с 0.01s срабатывать не будет.
не легче селекторы прописывать полностью без &. Смотрел как то много инфы по этому поводу где говорилось что когда пишешь селекторы полностью, их потом проще искать
Зачем искать, если есть source-map’ы к CSS-файлам? В девтулз сразу видно название файла, номер строки и даже номер символа в строке.
Модальные окна всегда нужно делать через dialog (корзины, формы регистрации в модалках и так далее) ? Через обычный div не очень будет ?
Не обязательно через dialog. Это достаточно новый тег и раньше делали на div. Так что ошибки никакой не будет.
@@AleksanderLamkov а WAI-ARIA не нужно делать ? Модалка открыта или закрыта, атрибуты состояние и так далее ?
Почему файлы в @import 'blocks/ ; подключаются отдельным импортом а не первый импорт дописываются? Чем оправдано? в чём риски?
Так просто визуально проще воспринимается.
Первый импорт - для файлов, которые есть буквально в каждом проекте.
Второй - только для бэм-блоков, которые в каждом проекте разные.
@@AleksanderLamkov Спасибо
можете объяснить как работает кнопка закрыть, я не понимаю как она закрывает бургер меню. Буду очень благодарен)
Привет! Это работает за счёт обёртки над разметкой кнопки закрытия. То есть нажатие на кнопку триггерит «отправку» этой самой формы, а за счет атрибута method dialog закрывается тот , в котором размещен этот самый элемент .
А почему бургер-меню реализовали таким способом? Почему бы просто не делать так: для nav position: fixed, убрать в сторону, а при нажатии на кнопку чтоб выезжала. И с дизайном кнопки было бы проще, просто анимацией палочки скосить и не нужно делать вторую, подгонять ее на то же место и тд. Toggle класса при клике через js написать и все.
Для избежания программирования? Или есть другое объяснение?
Привет! В этом мастер-классе принципиально не используем JS за исключением инлайнового обработчика onclick="mobileOverlay.showModal()"
Да и решений одной и той же задачи же миллион, так что сложно сказать "почему сделал именно так".
Ну и всё же мне хотелось показать взаимодействие с , а не банальный classList.toggle.
@@AleksanderLamkov Понял, просто думал, что есть какой-то секрет, почему лучше так делать)
На 35:59 класс mobile-overlay__close-button-wrapper а почему на элементе три дефиса ? я слышал что должно быть не больше двух
Да ну нет же каких-то строгих ограничений. БЭМ-методология не запрещает использовать такое количество слов в имени БЭМ-элемента.
@@AleksanderLamkov тогда супер, просто один блогер говорил не больше двух дефисов и всегда придерживался к этому
Это нормальная рекомендация, лучше действительно делать имена попроще, просто в некоторых местах (в частности в обсуждаемом месте) не обойтись.
Почему ты класс container задаешь тегу section? Обычно section остается на всю ширину. Или это было сделано специально, т.к цвет фона body и section один и тот же?
Угу, в макете нет ни одной секции с иным фоном, нежели белый цвет, потому не вижу смысла переносить контейнер в дополнительную внутреннюю обертку секции.
Что означает конструкция препроцессора @content ?
Разворачивает в тело миксина то, что передается при его использовании.
Миксин:
@mixin desktop {
@media (max-width: 1000px) {
@content;
}
}
При таком использовании:
.element {
width: 100px;
@include desktop {
width: 50px;
font-size: 12px;
}
}
После компиляции scss => css преобразуется в такой код:
.element {
width: 100px;
}
@media (max-width: 1000px) {
.element {
width: 50px;
font-size: 12px;
}
}
Еще можешь посмотреть это видео на канале:
th-cam.com/video/pBSch5AsJWs/w-d-xo.html
@@AleksanderLamkov Спасибо
Александр, такой вопрос. В первом мастер классе, как я помню, мы в начале каждой секции ставили h1 и названием секции с классом visually-hidden для доступности. В этом мастер классе такого нет, хотя он более сложный. Насколько важно это делать?
В первом мастер-классе мы добавляли визуально скрытые заголовки уровня h2 в каждую секцию потому, что их не было по макету. Заголовок h1 был в разметке ровно один.
В макете этого мастер-класса заголовки у секций имеются и так. Поэтому для них visually-hidden не нужен.
@@AleksanderLamkov да, перепутал теги) Теперь понял, большое спасибо)
Привет!
Подскажи, пожалуйста, где можно поменять настройки развертывания элементов с помощью таба? У меня стоит emmet на vs code. Хочу ускорить верстку html. Допустим при img у меня стандартно разворачивается только: src="" alt="", но я хочу сделать так, чтобы добавлялись сразу width и height.
Чет туплю и не понимаю куда смотреть. Сниппет создавать или шо...
Привет! Я только в WebStorm знаю как это настроить. Для VSCode я бы гуглил так: vscode custom abbreviation snippets
По первой ссылке на smashingmagazine есть инструкция.
Не могу понять - почему у меня Close navigation menu продолжает торчать и в мобильной и большой версии а у Вас нет. Что я не удалил или не правильно написал?
Привет! Перепроверь свойства в классе visually-hidden. Или напиши в t.me/friendlyFrontendChat, там помогут.
почему навигация на мобилке не обернута в nav, а в div?
Привет! Да, ты прав, стоит обернуть в nav, ведь основной nav полностью скрывается через display none.
Привет! Помоги настроить html.json сниппет. решил сделать кастомный как у тебя. При написании тега Img через точку с названием класса, структура не разворачивается как надо
"Image tag with Dynamic Attributes": {
"prefix": "img",
"body": "",
"description": "Image tag with optional class"
}
Привет! Напиши сюда, тебе помогут:
t.me/friendlyFrontendChat