📌 Друзья, в телеграмме у нас есть канал и отдельный чат, где вы можете задать вопрос по фронтенд-разработке и вам постараются помочь: 💬 Чат: t.me/friendlyFrontendChat ℹ Основной канал: t.me/friendlyFrontend Если вам это интересно, присоединяйтесь, задавайте вопросы и помогайте другим 🙂
Чат это конечно хорошо, но чем больше людей в чате, тем сложнее отслеживать вопросы по конкретным темам, можно перевести чат в группу и там добавить несколько чатов по отдельной тематике, так люди смогут писать вопросы в конкретных чатах-подтемах
Видео на 2 часа смотрел часов 10 (останавливался на каждой новой строчке кода, смотрел, что меняется, оставлял в проекте коммент и запускал дальше). Полет нормальный! Спасибо!
Александр, спасибо за труды. Благодаря вам я здорово прокачал вёрстку, каждый день узнаю какие-то новые нюансы, подходы. Преимущество вашего материала это тщательная подготовка текста, что делает его всеобьемлющим и исключает воду. Так же чувствуется, что код продакшн уровня. В свободном доступе такое найти очень сложно. Надеюсь увидеть такой же материал и по React, без воды, тудушек ,сразу и по возрослому))
Спасибо огромное за уроки! Ценнейший материал, даже на англоговорящем Ютубе ему нет ровни! Я очень рада, что учу прямо в то же время, что вы выпускает ролики. Мотивирует! ❤
Очень полезный контент, пересмотрел все твои видео с самого начала, верстал предыдущий сайт вместе с тобой, даже купил ещё один монитор, чтобы было удобнее и быстрее верстать 😂 многих смотрел и вот ты единичный случий, когда обьясняешь именно как правильно делать.
Александр, ваши уроки - это божественная эссенция лучшего учебного материала и вашего опыта! Я прошел через курсы скилбокс, но там по верстке дали не больше половины того, что вы показали в этом уроке. С удовольствием впитываю все нюансы и тонкости верстки, которые вы рассказываете в процессе работы. Очень хорошо, что объясняете каждый блок кода, почему написали вот так и т.д. Это очень помогает понять множество вещей и увидеть картину в целом. Безмерно благодарен вам за ваш труд!
@@MathInfo-ye1gf и да и нет) 2 недели отработал верстальщиком на ВордПресс, выперли за медленную работу. Похвалили конечно за грамотность, но им нужно было конвейер сайтов обслуживать, а ждать когда я научусь быстро работать не захотели. Больше никуда не брали. Беру сейчас редкие заказы на фрилансе, накупил книг и читаю, практикуюсь по мере возможности.
На 45:20 ты уменьшил кнопку без медиа запроса, значит не для планшета, а вообще. Не по макету получается. Править уже поздно, так для информации, тем кто будет верстать по видео.
Отличное видео, благодарю за труд. Вынес для себя несколько очень полезных моментов, вспомнил как вообще верстать спустя несколько лет простоя, но вместе с этим возникло несколько вопросов, скорее касательно подготовки проекта: Почему в _variables используются не переменные в стиле scss, т.е. через $, а стандартные переменные css, через -- в root? Как была выведена формула в миксине fluid-text? Очень полезно при адаптации, но хотелось бы узнать про нее подробнее, и узнать есть ли еще подобные формулы? Адаптацию стоит проводить под строгие значения, т.е. под 1280, 1024, 768 и т.д., или стоит подходить более универсально, т.е. просто сужать экран, отслеживать на каких значениях ширины поехал тот или иной блок и исправлять его. Например, сужали страницу, обнаружили что на значении 859px съехал такой-то блок, создали media с этим значением и исправили. Относительно этого я гуглил те самые несколько лет назад, и мнения относительно вопроса расходились: одни адаптировали по конкретным значениям, другие просто сужали экран Разве адаптацию нужно проводить не до 240px?
Привет! Спасибо за фидбек :) По переменным - потому что CSS-переменные работают в рантайме, это зачастую удобнее, нежели использовать компилируемые переменные из Sass. По формуле миксина - в clamp первым и последним аргументом ограничиваем диапазон минимума и максимума значения, а во втором аргументе рекомендуемое значение по формуле, которая переводит font-size из px в vw-единицу измерения, обычное деление на ширину макета и умножение на 100, чтобы получилось корректное значение. По адаптации - никогда не надо плодить лишних уникальных медиазапросов, а то интерфейс будет слишком дерганным при сужении экрана. Берем за основу 3-4 контрольные точки (можно как у меня в этом мастер-классе, можно из сетки бутрстрапа), и когда при сужении, к примеру, ломается что-то на ширине 1111px, начинаем применять меры сильно заранее, на ширине ближайшего (!) бОльшего значения медиазапроса, max-width 1280px в моем случае. Адаптировать нужно вплоть до 360px, экранов уже в глобальной статистике уже не существует. Номоводные раскладушки не в счет, там и долей процента пока нет.
Александр, спасибо за Ваши уроки! Если будет возможность, покажите, пожалуйста, верстку интернет-магазина с фильтрами товаров, сложным меню и прочими наворотами )
Урок крутой, одна проблема 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); 😭а без нее ни как.
Подскажите, зачем писать ul > li > а, если все равно потом list-style: none. Почему нельзя использовать сразу ссылки. Сделал их флекс-элементами и делай с ними что хочешь?
Привет! Однотипные элементы стоит помещать в списки для улучшения семантики и доступности (пользователь скринридера получит информацию о том, сколько элементов со ссылками в списке, и у него будет возможность пропустить зачитывание всего списка).
Привет! Для консистентности. Чтобы секции были структурно похожи друг на друга. В некоторых секциях есть section__header, а располагать иной БЭМ-блок на том же уровне - кажется мне не совсем правильным, поэтому добавляю новый БЭМ-элемент section__body и размещаю новый БЭМ-блок именно там.
@nderLamkov Прохожу курс по веб-программированию. Дошел до середины раздела Vue и понял, что у меня недостаточно базовых знаний HTML и CSS. Каждый день захожу на твой канал и изучаю материал. Прошло чуть больше недели, и я уже успел выучить курс по HTML и CSS +-БЭМ, а также реализовать первый макет. Сейчас повторяю второй макет. Вот-вот дипломная работа (уже 4 курс). Тема веб-сайт (5страниц). Срочно нужно набрать скилл)) Спасибо за контент и отвтет
@@aliexpress2109 аха, если конечно там не будет 10 лендосов от одной компании - это стоит обсудить в начале проекта. А если один лендинг, то там это не особо нужно
мне понравились обе части! но заметила один нюнс( возможно это только у меня так в браузере отражается ?). при breakpoint 767px в header отражается и burger-button и само меню nav )
Это из-за нестандартной плотности пикселей твоего монитора. Забываю о том, что такой баг может у некоторых возникать. Тебе нужно вместо ровных значений 767 использовать 767.98 в медиазапросах и всё будет работать как надо.
Привет ! Спасибо за контент, но у меня остался вопрос касаемо твоих миксинам по размерам экрана. Я ломаю голову над тем как изменить миксин. По факту на переходных точках 1 пиксель теряется и из-за этого выходит некрасиво
Привет! Почему теряется? Миксин mobile отвечает за диапазон 0-767px включительно, а mobile-above отвечает за 768px и выше. С остальными миксинами аналогично.
Под капотом миксина tablet конструкция "max-width: 1023px", которая отвечает за диапазон от 0 до 1023 пикселей включительно, а миксин tablet-above за диапазон от 1024px и выше.
Привет! Возможности всё ещё сильно ограничены, но технология набирает популярность в связи с блокировками приложений в AppStore, многие банки свои веб-приложения дополнительно перевели на PWA. Наверняка в будущем её возможности будут расширяться.
А есть ли какое правило для группировки блоков scss или все кидается в одну папку? Тут страница простая, а в более сложных проектах где блоков может быть существенно больше и разобраться потом будет не реально сложно. :(
Привет! Можно дополнительно в blocks разделить файлы на две категории - ui и views, в ui располагать кнопки, поля ввода, модальные окна, селекты, аккордеоны, в общем - всё, что точно может повторяться на странице неоднократно, а во views помещать всё остальное. А для более серьезных проектов (особенно SPA) есть feature-sliced.design/ru/
Привет, Александр. Видео как всегда - шикарно, спасибо за труд. Хотел спросить про переменные, есть ли какая-то задумка в использовании конкретно :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() переменные и это будет прекрасно работать.
Спасибо за контент. Использование методологии бэм в проекте с ванильном js еще вроде понятно. Но когда проект пишется на фреймворке(библиотеке) +scss если ли смысл в бэм? Тогда как в таком случае обычно проект делится на компоненты, у которых стили в отдельном файле slyle.module.scss и при сборке проекта названия стилей меняется везде.
Привет! Модульные стили и БЭМ плохо совместимы, нужно выбрать что-то одно. Модульные стили стоит использовать в тех проектах, где либо слишком много компонентов, либо если сам проект представляет собой библиотеку компонентов, которые в будущем будут интегрироваться в другие проекты и чтобы избежать возможных конфликтов стилей, модульные стили будут отличным решением. В остальных же случаях я предпочту использовать БЭМ, так как если где-то что-то начнет пересекаться и мешать друг другу, то это будет сигналом о том, что пора переработать структуру разметки и что-то объединить, что-то унифицировать, чтобы переиспользовать один и тот же код.
Нет ли идеи реализовать плейлист с реализацией самый типичных UI элементов, может быть на чистом жс , или не на на чистом? И потихоньку его заполнять. Мне кажется зайдет. Такого контента вроде бы много на Ютубе , однако реализации прям правильной, красивой , от ВК разработчика 😉 не сыскать, лишь фрилансеры и ТД , либо реализации слишком прям лёгкие и топорные , которые никому не нужны и не встречаются на реальных сайтах в жизни. Аля сладер , выпадашки, кастомные селекты чекбоксы или радиокнопки и ТД и тп. Так сказать как полагается вот прям , с доступностью и ТД)) вдруг зайдет комунити😊
На всякий случай. Добавил по привычке. Вроде как в проекте так и не заюзали ни разу. Можно удалить. P. S. Но в целом, они же не мешают, в финальный бандл CSS не попадут :)
Чтобы верстка была более надежная. В реальных проектах бывает ситуация - через некоторое время по требованиям заказчика часть контента убирают, то есть удаляются элементы из разметки и если у элемента, находящегося до удаленного элемента, остались внешние отступы margin-bottom, то они будут лишними. И вот в таких ситуациях комбинация псевдоклассов not last child позволяет избавиться от нежелательного отступа, когда элемент внезапно оказывается последним среди своих соседей, лежащих на одном уровне.
Александр, такой вопрос. В первом мастер классе, как я помню, мы в начале каждой секции ставили h1 и названием секции с классом visually-hidden для доступности. В этом мастер классе такого нет, хотя он более сложный. Насколько важно это делать?
В первом мастер-классе мы добавляли визуально скрытые заголовки уровня h2 в каждую секцию потому, что их не было по макету. Заголовок h1 был в разметке ровно один. В макете этого мастер-класса заголовки у секций имеются и так. Поэтому для них visually-hidden не нужен.
1. У кнопок cursor: pointer не прописан; 2. У черных кнопок состояние фокуса не различимо; 3. Радио кнопки с клавиатуры не доступны вообще; 4. Для изображений на первом экране не нужно прописывать loading="lazy", сразу же lighthouse выдаст предупреждение, да и не логично то. 5. Зачем задавать фиксированную высоту кнопкам, инпутам, ссылкам, если есть вертикальные паддинги для этого?
1. И не нужен. См. medium.com/simple-human/buttons-shouldnt-have-a-hand-cursor-b11e99ca374b 2. Не учел, спасибо за правку. 3. Не учел, нужно доработать, спасибо. 4. В таком случае, если секции в будущем поменяют свое расположение, то придется и loading вручную добавлять, так что проще сделать это сразу же. Ну и при загрузке страницы такое изображение разве не сразу будет загружаться при его текущей позиции относительно вьюпорта?
5. В таком случае для корректного расчета правильной высоты по макету придется ориентироваться на интерлиньяж, а шрифты - весьма непостоянная вещь. Как минимум они могут рендерится иначе, нежели чем в фигме, а как максимум - могут не прогрузиться мгновенно и произойдет скачек интерфейса из-за задействованных на мгновение резервных шрифтов. Поэтому безопаснее задать фиксированные высоты.
@@AleksanderLamkov У изображений с loading="lazy" приоритет низкий, поэтому разница будет. Ну и на параметре LCP естественно отразиться. Логотип и секция hero врядли поменяют расположение. Если поменяют, то тогда придется решать этот вопрос. И плюс карточки (которые с услугами) должны быть желательно кликабельны полностью, ну или хотя бы изображение.
@@AleksanderLamkov Утверждать о ненужности cursor pointer по одной статье из 2016 года от неизвестного автора сомнительно. Да и хотелось бы увидеть пример какого-нибудь крупного сайта с отсутствующим cursor pointer на кнопках.
Спасибо за урок! Всегда повторяю за тобой. Подскажи, пожалуйста, такой момент: использую VS Code, если в разметке указать высоту лого 100, как указано у тебя, то она не будет изменяться в процессе, когда мы для планшетной и мобильной версии убавляем ширину до 144, 120 пикселей, высота остаётся без изменений, в итоге получается очень большой паддинг. Сейчас решением для себя увидел только выставить height:auto, либо же вовсе убрать height из разметки. Что скажешь? Спасибо заранее за ответ.
Привет! В разметке изображениям всегда нужно задавать атрибуты width и height (значения брать из десктопной версии макета), а в стилях обязательно нужно задать для всех img max-width 100%, чтобы ни одно изображение не выпирало за пределы родительского блока и height auto для сохранения пропорций.
я прописал в HTML.json, чтоб при развертывании img ему добавлялись не только класс и src, но и width, height, load=lazy, по умолчанию, как у тебя в видео. Но это работает, только если пишешь просто img и жмёшь таб. Если же писать img.header__img, то есть сразу класс добавлять, то в этом случае класс добавляется, но выводятся только класс и src, как по умолчанию.... А у тебя выводится и при использовании emmet - как это сделать?) ЗЫ: контент великолепный - поглощаю весь и с удовольствием, спасибо большое!!!
Привет! У меня WebStorm, там сниппеты настраивал. Как в VSCode настроить не знаю, но предлагаю тебе написать нам в чат, там помогут: t.me/friendlyFrontendChat
Этот параметр нужен для сайтов без адаптива, где на мобилке и десктопе открывается одинаковая десктопная версия. В таком случае на мобилке без возможности зума будет тяжко. Валидатор же не определяет, есть ли на проверяемом сайте адаптив и подстраховывается, выводя такое предупреждение.
@AleksanderLamkov А как прикажите на телефоне изображение зазумить и рассмотреть? Открывать его в отдельной вкладке? За пользователя не нужно ничего решать. user-scalable=no является антипаттерном в доступности веб приложений и не стоит его показывать в обучающих видео. За него предупреждение будет не только в валидаторе, но и в lighthouse от гугла, ну и в самом chrome в ошибках будет.
Спасибо за такое полезное видео! Подскажите, окуда берется формула для динамического шрифта? И ещё, почему для размера шрифта используются px а не rem?
Привет! Формула простая: берем значение в пикселях из десктопной версии макета, делим на ширину контентной части и умножаем на 100, чтобы по итогу перевести всё во вьюпорт-единицы vw. rem принципиально не использую, так как многие новички допускают ситуацию, когда слишком маленький размер шрифта на мобильной версии по итогу становится гораздо меньше рекомендуемых 14px Функция clamp с мин-макс ограничениями гораздо безопаснее. Сложнее выстрелить себе в ногу при адаптации.
@@AleksanderLamkov Спасибо за ответ! Мне было интересно, откуда именно это формула, так как на сайтах вроде css-tricks приведена совсем другая формула для динамического шрифта
Все отлично и замечательно! Но можно скинуть шаблон файловой системы, которая используются в каждом проекте? А то каждый раз создавать, настраивать, подбирать не очень, а у тебя думаю уже есть готовый шаблон файловой системы)
@@AleksanderLamkov подготовка файлов занимает очень много времени, также некоторый код повторяется от проекта к проекту миксины, глобальные стили и тд. По этому подумал что есть готовый шаблон. Да, код есть, за него спасибо! Вроде вытащил из него все что нужно, но не очень уверен, из-за отсутствия опыта.
Скорее должен. У меня MacOS, а на этой ОС по умолчанию визуально отключены все скроллбары, поэтому на видео его и не видно. Можно для всех остальных ОС дополнительно стилизовать скроллбар, чтобы он не выглядел так странно (как, например, на Windows). В этом шортсе рассказывал, как это делается: ruclips.net/user/shortspgjRYNT2LQA
Это считается нормальным повторять разметку навигации для мобилки, и отдельно ее стилизовать со своими классами ? Имею в виду ситуации, когда бургер меню делается силами JS, а не через dialog. Или все же стоит переделывать стили уже имеющегося меню в десктоп раскладке ? Повторение одно и то же не считается ошибкой ? Читал , что якобы не надо дублировать , кроме тех ситуаций , когда некуда деваться , либо там появляются совсем другие элементы , либо слишком геморно с порядком элементов играться. )
Можно в utils. Просто стилей у этого класса довольно много, плюс есть внутренние grid__item элементы. Отдельный файл использован сугубо для декомпозиции и разгрузки utils.
Есть момент еще. например в блоке сервис есть карточки с разным дизайном. и ты их перекрашиваешь добавляя модификаторы. но вот на бэкенде (условно битрикс) придётся делать дополнительные манипуляции. т.к. это news-list список с услугами (массив данны) то нужно будет сделать воозможность указывать модификаторы. проще на мой взглят сделать через nth child управлять стилёми без вмешательства в дом дерево (не добавляя дополнительные классы)
Спорный вопрос. Я год работал с битриксом, нашим бэкендерам было вполне ок сделать модификаторы, чтобы цеплять в разметке классы. Заказчик планировал сам менять их через CMS.
Понял. Просто заметил на практике лучше максимально избегать нагрузки дом дерева лишними классами . И стараться делать изменение через css. И при правках лучше мало ли цвет поменяется, модификатор тоже нужно будет (желательно) переименовывать
Да, только с дополнительным onclick на сами ссылки :( Про урок по dialog - хорошая идея. Только там без JS скудная версия получается. Хочу после курса по JS сделать гайды по всем популярным UI компонентам.
Привет! Это работает за счёт обёртки над разметкой кнопки закрытия. То есть нажатие на кнопку триггерит «отправку» этой самой формы, а за счет атрибута method dialog закрывается тот , в котором размещен этот самый элемент .
Такая проблема у меня почему-то не работают переменные в которых лежит бордер транзишн и тд, переменные с цветами работают нормально. Подскажите решение, пожалуйста.
Привет! Помоги настроить html.json сниппет. решил сделать кастомный как у тебя. При написании тега Img через точку с названием класса, структура не разворачивается как надо "Image tag with Dynamic Attributes": { "prefix": "img", "body": "", "description": "Image tag with optional class" }
Почему ты класс container задаешь тегу section? Обычно section остается на всю ширину. Или это было сделано специально, т.к цвет фона body и section один и тот же?
Угу, в макете нет ни одной секции с иным фоном, нежели белый цвет, потому не вижу смысла переносить контейнер в дополнительную внутреннюю обертку секции.
Подскажите, а почему в каждой секции отдельно прописывать container? Ведь ширина контентной части по макету одинаковая, не лучше ли было сделать один общий container и внутри него поместить секции?
Привычка. Часто так бывало на работе, что какая-то из секций макета выбивается по ширине (например, добавляется фон на всю ширину экрана), а из-за ограничений родителя реализовать бы её уже не получилось. Но ты прав, что для этого макета можно было бы и один раз применить container и не создавать лишних оберток.
@@AleksanderLamkov Спасибо за ответ. У меня еще один вопрос, у некоторых людей я видел margin заданный в %. Мне кажется использование margin в % сокращает количество медиа запросов и кода. Но я никогда не применял это в своей практике. Что можете посоветовать, стоит ли его применять и применяете ли вы это в своей практике.
Чисто в %? Странно. Ну или верстка получается «на глаз» и при определенных обстоятельствах всё съезжает, либо в CSS выверенные, но жуть какие неудобные дробные значения. Лучший выбор - % или vw / vh в связке с функциями min, max и clamp. В таком случае действительно получится сэкономить медиазапросы. Было про это отдельное видео на канале: ruclips.net/video/wLWO58PJFrE/видео.html
@@AleksanderLamkov Извините за банальный вопрос. Подскажите, почему в обнуляющем стиле вы установили margin-block: 0; только для тегов с классами? Просто у меня в коде попались некоторые теги без класса и я сначала не понял откуда взялся лишний margin. Пришлось немного изменить код. :where( h1, h2, h3, h4, h5, h6, p, ul, ol, dl ) { margin-block: 0; } Наверно правильнее не допускать использования этих тегов без классов?
Не совсем. Наличие элементов p, ul, li и подобных БЕЗ классов допускается, но в местах разметки, которые впоследствии будут наполняться контент-менеджерами через wysiwyg-редакторы. Нагенерированные таким способом элементы будут в итоговой разметке без классов. И для них важно все же прописать какие-то внешние отступы, чтобы контент не слипался друг с другом.
Мы используем кастомный нормалайз, про который объяснял в одном из первых уроков курса по CSS. Если у элементов в разметке есть классы (атрибут class), то нормалайз сбросит у таких элементов лишние отступы и маркеры (если речь идет про li). Ну а ссылкам даже reset ничего не делает, тут нужно точечно для каждого проекта прописать те стили, которые требуются по дизайну.
Вопрос по нормализации, в вашем билде данного файла последний блок @media имеет строчку с transition duration 0.01s !important, что в итоге сказывается на анимации тк перебивает длительность анимации через константу заданную в variables, но у вас при создании анимации константа работает, как так получается? 🧐
Привет! Длительность перехода в 0.01s включается только в режиме пониженных движений (меидиазапрос prefers-reduced-motion: reduce). Это нужно для пользователей, у которых включены специальные настройки на компьютере или в самом браузере. Если у тебя также, то посмотри следующее: при открытом девтулз жмакни Ctrl + Shift + P, введи в открывшемся терминале Rendering, далее на этой новой панели найди пункт Emulations и подпункт prefers reduced motion, там скорее всего стоит нестандартное значение reduced, нужно его отключить. И тогда медиазапрос с 0.01s срабатывать не будет.
Не могу понять - почему у меня Close navigation menu продолжает торчать и в мобильной и большой версии а у Вас нет. Что я не удалил или не правильно написал?
Привет! Подскажи, пожалуйста, где можно поменять настройки развертывания элементов с помощью таба? У меня стоит emmet на vs code. Хочу ускорить верстку html. Допустим при img у меня стандартно разворачивается только: src="" alt="", но я хочу сделать так, чтобы добавлялись сразу width и height. Чет туплю и не понимаю куда смотреть. Сниппет создавать или шо...
Привет! Я только в WebStorm знаю как это настроить. Для VSCode я бы гуглил так: vscode custom abbreviation snippets По первой ссылке на smashingmagazine есть инструкция.
А почему бургер-меню реализовали таким способом? Почему бы просто не делать так: для nav position: fixed, убрать в сторону, а при нажатии на кнопку чтоб выезжала. И с дизайном кнопки было бы проще, просто анимацией палочки скосить и не нужно делать вторую, подгонять ее на то же место и тд. Toggle класса при клике через js написать и все. Для избежания программирования? Или есть другое объяснение?
Привет! В этом мастер-классе принципиально не используем JS за исключением инлайнового обработчика onclick="mobileOverlay.showModal()" Да и решений одной и той же задачи же миллион, так что сложно сказать "почему сделал именно так". Ну и всё же мне хотелось показать взаимодействие с , а не банальный classList.toggle.
не легче селекторы прописывать полностью без &. Смотрел как то много инфы по этому поводу где говорилось что когда пишешь селекторы полностью, их потом проще искать
Так просто визуально проще воспринимается. Первый импорт - для файлов, которые есть буквально в каждом проекте. Второй - только для бэм-блоков, которые в каждом проекте разные.
1:44:30 У .banner__inner задан background-color: var(--color-gray) и на видео он отчётливо серый, но у .service-card (1 и 4 карточка) цвет такой же задан, но карточки на вид такого же белого цвета, как и фон страницы. Как так получилось?
Привет! Не понимаю о чем ты. На видео четко виден белый фон страницы и светло-серый фон у banner__inner и service-card 1 и 4. У тебя иначе отображается? Может из-за монитора? Бывает так, что оттенки настолько малым отличаются, что на некоторых мониторах отличий не видно.
Александр, на ширине 767px появляется кнопка открытия меню, но основное меню исчезает только на 766px, в итоге на 767px сразу два меню, основное и то что открывается бургер-кнопкой (на Вашем сайте портфолио тоже самое). Это нормально? Не будет на каком-нибудь планшете сразу два меню?
Привет! Сейчас нет возможности проверить, но вроде бы такой проблемы быть не должно. Мы ведь манипулировали утилитарными классами hidden-mobile и visible-mobile, внутри которых была привязка к медиазапросам (max-width: 767px) и (min-width: 768px). То есть на ширине экрана 767px основное меню должно исчезать, а бургер-кнопка появляться. Могу предположить, что у тебя экран с нестандартной плотностью пикселей и в таком случае нужно доработать значение в медиазапросе max-width 767, заменить число на дробное 767.98.
Привет! Стрелку нужно было добавлять через разметку и тег в частности, чтобы реализовать смену цвета при наведении на кнопку, внутри которой иконка стрелки находится. А картинку карточки добавляем также через разметку, через , чтобы на адаптиве было удобно всё позиционировать. Если бы делали через CSS и background-image, то было бы весьма проблематично.
@@AleksanderLamkov А, вон в чем задумка. Я просто делаю вне видео и после смотрю как реализуешь тот или иной блок, если возникают какие-то сомнение в написании кода) Спасибо за ответ!
@@AleksanderLamkov И в дополнение хотел спросить. Пишу на css без пре-процессора Добавляя иконку, у тебя цвет стрелки черный, я же добавляю, у меня цвет зеленый. Ты меняешь цвет обращаясь к svg у меня смена получается только к обращению path .wrapper-icon svg path{ fill: #fff; } Почему так?
В начале мастер-класса мы подключали нормализацию стилей (ссылка на этот файл в описании под видео), в нём есть такие правила: svg *[fill] { fill: currentColor } svg *[stroke] { stroke: currentColor } За счет этого цвет внутренностей svg перекрашивается в значение свойства color, которое наследуется от родительского элемента.
Это было бы уже второе nav-меню в разметке. И так как оно буквально дублирует десктопную версию, решил сделать нейтральным дивом. Но только сейчас подумал, что на мобилках основной будет скрыт и недоступен для скринридеров. Действительно стоило и это второе дублирующее меню сделать через , ты прав.
Для кнопки в 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 Понял. Да, допустил ошибку. Спасибо, что поправил. > Я пересмотрел все записи и могу сказать, что ты не зря канал создал. Консультации, которые ты вёл, были самыми содержательными и полезными. Очень приятно слышать, что мои прошлые деяния всё ещё приносят людям пользу! О канале как раз начал думать в то время, когда наставничал на том курсе по фронтенду :)
Привет! Как минимум потому, что детали иконки нужно было анимировать при нажатии. Ну и в целом это полезная для новичков практика - нарисовать нечто подобное на CSS.
📌 Друзья, в телеграмме у нас есть канал и отдельный чат, где вы можете задать вопрос по фронтенд-разработке и вам постараются помочь:
💬 Чат: t.me/friendlyFrontendChat
ℹ Основной канал: t.me/friendlyFrontend
Если вам это интересно, присоединяйтесь, задавайте вопросы и помогайте другим 🙂
Чат это конечно хорошо, но чем больше людей в чате, тем сложнее отслеживать вопросы по конкретным темам, можно перевести чат в группу и там добавить несколько чатов по отдельной тематике, так люди смогут писать вопросы в конкретных чатах-подтемах
Привет! Соглашусь. В ближайшие пару недель переведу чат в формат сообщества с топиками. Давно напрашивается такой формат. Спасибо!
@@AleksanderLamkov Спасибо за отклик👌
Видео на 2 часа смотрел часов 10 (останавливался на каждой новой строчке кода, смотрел, что меняется, оставлял в проекте коммент и запускал дальше). Полет нормальный! Спасибо!
Прошло 3 месяца, как успехи ?))
Александр, спасибо за труды. Благодаря вам я здорово прокачал вёрстку, каждый день узнаю какие-то новые нюансы, подходы.
Преимущество вашего материала это тщательная подготовка текста, что делает его всеобьемлющим и исключает воду. Так же чувствуется, что код продакшн уровня. В свободном доступе такое найти очень сложно. Надеюсь увидеть такой же материал и по React, без воды, тудушек ,сразу и по возрослому))
Спасибо огромное за уроки! Ценнейший материал, даже на англоговорящем Ютубе ему нет ровни! Я очень рада, что учу прямо в то же время, что вы выпускает ролики. Мотивирует! ❤
Очень полезный контент, пересмотрел все твои видео с самого начала, верстал предыдущий сайт вместе с тобой, даже купил ещё один монитор, чтобы было удобнее и быстрее верстать 😂 многих смотрел и вот ты единичный случий, когда обьясняешь именно как правильно делать.
Тоже думаю взять себе ещё 2 монитора, полезная вещь
Я взял второй монитор к ноутбуку, очень удобно. На большом моне работаю, на моне ноута все инструменты или макет, или видео, короче все остальное.
Бриллиант среди подобных видео по тематике! Спасибо за контент)
теперь понятно откудя появился компонентный подход, разбивка стилей на блоки отличная тема. Много полезного узнал, благодарю.
Лучше один раз увидеть,чем сто раз услышать.Все просто и понятно.
Александр, ваши уроки - это божественная эссенция лучшего учебного материала и вашего опыта! Я прошел через курсы скилбокс, но там по верстке дали не больше половины того, что вы показали в этом уроке. С удовольствием впитываю все нюансы и тонкости верстки, которые вы рассказываете в процессе работы. Очень хорошо, что объясняете каждый блок кода, почему написали вот так и т.д. Это очень помогает понять множество вещей и увидеть картину в целом. Безмерно благодарен вам за ваш труд!
а ты после скиллбокса устроился куда то ?
@@MathInfo-ye1gf и да и нет) 2 недели отработал верстальщиком на ВордПресс, выперли за медленную работу. Похвалили конечно за грамотность, но им нужно было конвейер сайтов обслуживать, а ждать когда я научусь быстро работать не захотели. Больше никуда не брали. Беру сейчас редкие заказы на фрилансе, накупил книг и читаю, практикуюсь по мере возможности.
Как раз можно закрыть пару пробелов, спасибо за видео, сегодня вечером будет чем заняться!
На 45:20 ты уменьшил кнопку без медиа запроса, значит не для планшета, а вообще. Не по макету получается. Править уже поздно, так для информации, тем кто будет верстать по видео.
искал этот комментарий :D Тоже подметил, что нужно было под медиа для таблеток это записать.
Саша, ОГРОМНОЕ СПАСИБО!!! Много полезного и нового узнал для себя
Очень классный урок! Интересно посмотреть. Узнал для себя много нового. Спасибо
Это просто прекрасно! Спасибо за такой контент.
Отличное видео, благодарю за труд. Вынес для себя несколько очень полезных моментов, вспомнил как вообще верстать спустя несколько лет простоя, но вместе с этим возникло несколько вопросов, скорее касательно подготовки проекта:
Почему в _variables используются не переменные в стиле scss, т.е. через $, а стандартные переменные css, через -- в root?
Как была выведена формула в миксине fluid-text? Очень полезно при адаптации, но хотелось бы узнать про нее подробнее, и узнать есть ли еще подобные формулы?
Адаптацию стоит проводить под строгие значения, т.е. под 1280, 1024, 768 и т.д., или стоит подходить более универсально, т.е. просто сужать экран, отслеживать на каких значениях ширины поехал тот или иной блок и исправлять его. Например, сужали страницу, обнаружили что на значении 859px съехал такой-то блок, создали media с этим значением и исправили. Относительно этого я гуглил те самые несколько лет назад, и мнения относительно вопроса расходились: одни адаптировали по конкретным значениям, другие просто сужали экран
Разве адаптацию нужно проводить не до 240px?
Привет! Спасибо за фидбек :)
По переменным - потому что CSS-переменные работают в рантайме, это зачастую удобнее, нежели использовать компилируемые переменные из Sass.
По формуле миксина - в clamp первым и последним аргументом ограничиваем диапазон минимума и максимума значения, а во втором аргументе рекомендуемое значение по формуле, которая переводит font-size из px в vw-единицу измерения, обычное деление на ширину макета и умножение на 100, чтобы получилось корректное значение.
По адаптации - никогда не надо плодить лишних уникальных медиазапросов, а то интерфейс будет слишком дерганным при сужении экрана. Берем за основу 3-4 контрольные точки (можно как у меня в этом мастер-классе, можно из сетки бутрстрапа), и когда при сужении, к примеру, ломается что-то на ширине 1111px, начинаем применять меры сильно заранее, на ширине ближайшего (!) бОльшего значения медиазапроса, max-width 1280px в моем случае.
Адаптировать нужно вплоть до 360px, экранов уже в глобальной статистике уже не существует. Номоводные раскладушки не в счет, там и долей процента пока нет.
@@AleksanderLamkov понял, спасибо за ваш ответ
Спасибо за видео! Скорее бы уже джаваскрипт и фреймворки, хтмл и цсс все такие быстро осваиваются 😊
Александр, спасибо за Ваши уроки! Если будет возможность, покажите, пожалуйста, верстку интернет-магазина с фильтрами товаров, сложным меню и прочими наворотами )
Привет, спасибо за фидбек! :) После курса по JavaScript обязательно будет верстка с подобными сложными элементами интерфейса.
Оставлю тут коммент где побольше слов. Спасибо за серию видосов!
Контент топ, вставки, зум кода и тд, очень удобно
Только начал смотреть, уже много полезного узнал. Большое спасибо)
Давно так вкусно не смотрел. Спасибо 👍
Огромное спасибо за качественный контент,теперь использую твои техники в своих работах
после этого видео, опыт ++
Спасибо, посмотрим)
Здравствуйте, Александр, большое спасибо за мастер-класс. Хотелось бы увидеть урок по OpenGraph, PWA.
Урок крутой, одна проблема 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 Спасибо огромное за твою помощь, все работает!!!
Подскажите, зачем писать ul > li > а, если все равно потом list-style: none. Почему нельзя использовать сразу ссылки. Сделал их флекс-элементами и делай с ними что хочешь?
Привет! Однотипные элементы стоит помещать в списки для улучшения семантики и доступности (пользователь скринридера получит информацию о том, сколько элементов со ссылками в списке, и у него будет возможность пропустить зачитывание всего списка).
@@AleksanderLamkov Ясно, про семантику я и не подумал. Спасибо за ответ!
Понравилось!) Спасибо!!! Подписка, колокол!
Для чего делать такую вложенность?
первый секшен для отступов. А вот для чего оборачивать hero в section__body? Это не лишний контейнер?
Привет! Для консистентности. Чтобы секции были структурно похожи друг на друга.
В некоторых секциях есть section__header, а располагать иной БЭМ-блок на том же уровне - кажется мне не совсем правильным, поэтому добавляю новый БЭМ-элемент section__body и размещаю новый БЭМ-блок именно там.
@nderLamkov Прохожу курс по веб-программированию. Дошел до середины раздела Vue и понял, что у меня недостаточно базовых знаний HTML и CSS. Каждый день захожу на твой канал и изучаю материал. Прошло чуть больше недели, и я уже успел выучить курс по HTML и CSS +-БЭМ, а также реализовать первый макет. Сейчас повторяю второй макет.
Вот-вот дипломная работа (уже 4 курс). Тема веб-сайт (5страниц). Срочно нужно набрать скилл))
Спасибо за контент и отвтет
Отличный контент!
я просто в шоке от твоего контента очень круто
Спасибо за знания
Спасибо большое за видео.
Коммент в поддержку
Важно! Для лендигов это не нужно.
За урок, на больших проектах самое то, спасибо огромное❤️🔥
Ты имеешь ввиду начальные приготовления показанные в начале?
@@aliexpress2109 аха, если конечно там не будет 10 лендосов от одной компании - это стоит обсудить в начале проекта. А если один лендинг, то там это не особо нужно
Приятно слушать, проф информация
мне понравились обе части! но заметила один нюнс( возможно это только у меня так в браузере отражается ?). при breakpoint 767px в header отражается и burger-button и само меню nav )
Это из-за нестандартной плотности пикселей твоего монитора. Забываю о том, что такой баг может у некоторых возникать. Тебе нужно вместо ровных значений 767 использовать 767.98 в медиазапросах и всё будет работать как надо.
@@AleksanderLamkov, благодарю за уточнение! Это огонёчки)
Привет !
Спасибо за контент, но у меня остался вопрос касаемо твоих миксинам по размерам экрана. Я ломаю голову над тем как изменить миксин. По факту на переходных точках 1 пиксель теряется и из-за этого выходит некрасиво
Привет! Почему теряется? Миксин mobile отвечает за диапазон 0-767px включительно, а mobile-above отвечает за 768px и выше. С остальными миксинами аналогично.
@@AleksanderLamkov Я отталкиваюсь от десктопа. Получается, что миксин работает до 1023 (не включительно) и от 1024
@@AleksanderLamkov код на кодпейн могу прислать
Под капотом миксина tablet конструкция "max-width: 1023px", которая отвечает за диапазон от 0 до 1023 пикселей включительно, а миксин tablet-above за диапазон от 1024px и выше.
Пришли. Не понимаю твою проблему.
Спасибо большое за видео. Хотелось бы узнать ваше мнение про PWA насколько сейчас востребована технология и что ее ждет в будущем?
Привет! Возможности всё ещё сильно ограничены, но технология набирает популярность в связи с блокировками приложений в AppStore, многие банки свои веб-приложения дополнительно перевели на PWA. Наверняка в будущем её возможности будут расширяться.
Супер!!! Лайк!!!
А есть ли какое правило для группировки блоков scss или все кидается в одну папку? Тут страница простая, а в более сложных проектах где блоков может быть существенно больше и разобраться потом будет не реально сложно. :(
Привет! Можно дополнительно в blocks разделить файлы на две категории - ui и views, в ui располагать кнопки, поля ввода, модальные окна, селекты, аккордеоны, в общем - всё, что точно может повторяться на странице неоднократно, а во views помещать всё остальное.
А для более серьезных проектов (особенно SPA) есть feature-sliced.design/ru/
@@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 Благодарю за такой развернутый ответ :)
Спасибо за контент. Использование методологии бэм в проекте с ванильном js еще вроде понятно. Но когда проект пишется на фреймворке(библиотеке) +scss если ли смысл в бэм? Тогда как в таком случае обычно проект делится на компоненты, у которых стили в отдельном файле slyle.module.scss и при сборке проекта названия стилей меняется везде.
Привет! Модульные стили и БЭМ плохо совместимы, нужно выбрать что-то одно.
Модульные стили стоит использовать в тех проектах, где либо слишком много компонентов, либо если сам проект представляет собой библиотеку компонентов, которые в будущем будут интегрироваться в другие проекты и чтобы избежать возможных конфликтов стилей, модульные стили будут отличным решением.
В остальных же случаях я предпочту использовать БЭМ, так как если где-то что-то начнет пересекаться и мешать друг другу, то это будет сигналом о том, что пора переработать структуру разметки и что-то объединить, что-то унифицировать, чтобы переиспользовать один и тот же код.
Это прекрасно
Нет ли идеи реализовать плейлист с реализацией самый типичных UI элементов, может быть на чистом жс , или не на на чистом? И потихоньку его заполнять. Мне кажется зайдет. Такого контента вроде бы много на Ютубе , однако реализации прям правильной, красивой , от ВК разработчика 😉 не сыскать, лишь фрилансеры и ТД , либо реализации слишком прям лёгкие и топорные , которые никому не нужны и не встречаются на реальных сайтах в жизни. Аля сладер , выпадашки, кастомные селекты чекбоксы или радиокнопки и ТД и тп. Так сказать как полагается вот прям , с доступностью и ТД)) вдруг зайдет комунити😊
Да, так и планирую, как только с курсом по JS разберусь :)
оч здорово и полезно
А для чего нужны миксины сброса (reset)? Если не ошибаюсь, сбросы для элементов прописываются в отдельном файле.
На всякий случай. Добавил по привычке. Вроде как в проекте так и не заюзали ни разу. Можно удалить.
P. S. Но в целом, они же не мешают, в финальный бандл CSS не попадут :)
шикарноб
1:33:25 почему нужно использовать &:not(:last-child) для отступов снизу? Такой же вопрос по поводу секшн хедер
Чтобы верстка была более надежная.
В реальных проектах бывает ситуация - через некоторое время по требованиям заказчика часть контента убирают, то есть удаляются элементы из разметки и если у элемента, находящегося до удаленного элемента, остались внешние отступы margin-bottom, то они будут лишними.
И вот в таких ситуациях комбинация псевдоклассов not last child позволяет избавиться от нежелательного отступа, когда элемент внезапно оказывается последним среди своих соседей, лежащих на одном уровне.
Александр, такой вопрос. В первом мастер классе, как я помню, мы в начале каждой секции ставили h1 и названием секции с классом visually-hidden для доступности. В этом мастер классе такого нет, хотя он более сложный. Насколько важно это делать?
В первом мастер-классе мы добавляли визуально скрытые заголовки уровня h2 в каждую секцию потому, что их не было по макету. Заголовок h1 был в разметке ровно один.
В макете этого мастер-класса заголовки у секций имеются и так. Поэтому для них visually-hidden не нужен.
@@AleksanderLamkov да, перепутал теги) Теперь понял, большое спасибо)
На 21 секунде после ряда непонятных словосочетаний пошел продолжать смотреть курс по HTML 😅
1. У кнопок cursor: pointer не прописан;
2. У черных кнопок состояние фокуса не различимо;
3. Радио кнопки с клавиатуры не доступны вообще;
4. Для изображений на первом экране не нужно прописывать loading="lazy", сразу же lighthouse выдаст предупреждение, да и не логично то.
5. Зачем задавать фиксированную высоту кнопкам, инпутам, ссылкам, если есть вертикальные паддинги для этого?
1. И не нужен. См. medium.com/simple-human/buttons-shouldnt-have-a-hand-cursor-b11e99ca374b
2. Не учел, спасибо за правку.
3. Не учел, нужно доработать, спасибо.
4. В таком случае, если секции в будущем поменяют свое расположение, то придется и loading вручную добавлять, так что проще сделать это сразу же. Ну и при загрузке страницы такое изображение разве не сразу будет загружаться при его текущей позиции относительно вьюпорта?
5. В таком случае для корректного расчета правильной высоты по макету придется ориентироваться на интерлиньяж, а шрифты - весьма непостоянная вещь. Как минимум они могут рендерится иначе, нежели чем в фигме, а как максимум - могут не прогрузиться мгновенно и произойдет скачек интерфейса из-за задействованных на мгновение резервных шрифтов. Поэтому безопаснее задать фиксированные высоты.
@@AleksanderLamkov У изображений с loading="lazy" приоритет низкий, поэтому разница будет. Ну и на параметре LCP естественно отразиться. Логотип и секция hero врядли поменяют расположение. Если поменяют, то тогда придется решать этот вопрос. И плюс карточки (которые с услугами) должны быть желательно кликабельны полностью, ну или хотя бы изображение.
@@AleksanderLamkov Утверждать о ненужности cursor pointer по одной статье из 2016 года от неизвестного автора сомнительно. Да и хотелось бы увидеть пример какого-нибудь крупного сайта с отсутствующим cursor pointer на кнопках.
Понял, спасибо за пояснение! Учту в будущем.
Спасибо за урок! Всегда повторяю за тобой. Подскажи, пожалуйста, такой момент: использую VS Code, если в разметке указать высоту лого 100, как указано у тебя, то она не будет изменяться в процессе, когда мы для планшетной и мобильной версии убавляем ширину до 144, 120 пикселей, высота остаётся без изменений, в итоге получается очень большой паддинг. Сейчас решением для себя увидел только выставить height:auto, либо же вовсе убрать height из разметки. Что скажешь? Спасибо заранее за ответ.
Привет! В разметке изображениям всегда нужно задавать атрибуты width и height (значения брать из десктопной версии макета), а в стилях обязательно нужно задать для всех img max-width 100%, чтобы ни одно изображение не выпирало за пределы родительского блока и height auto для сохранения пропорций.
@@AleksanderLamkov спасибо! тогда в каком месте в стилях лучше вставить height auto? в normalize.scss есть img, туда подойдет?
Да, можно в normalize.
я прописал в HTML.json, чтоб при развертывании img ему добавлялись не только класс и src, но и width, height, load=lazy, по умолчанию, как у тебя в видео.
Но это работает, только если пишешь просто img и жмёшь таб.
Если же писать img.header__img, то есть сразу класс добавлять, то в этом случае класс добавляется, но выводятся только класс и src, как по умолчанию.... А у тебя выводится и при использовании emmet - как это сделать?)
ЗЫ: контент великолепный - поглощаю весь и с удовольствием, спасибо большое!!!
Привет! У меня WebStorm, там сниппеты настраивал. Как в VSCode настроить не знаю, но предлагаю тебе написать нам в чат, там помогут:
t.me/friendlyFrontendChat
Большое спасибо за видео!
Вопрос: а разве можно по БЭМ давать верхний отступ блоку header?
Привет! Спасибо за фидбек :) Верхний внутренний (!) отступ padding-top задавать БЭМ-блокам можно. Нельзя задавать внешние отступы margin.
user-scalable=no если не ошибаюсь уменьшает баллы accessibility и выводит в консоль предупреждение?
Этот параметр нужен для сайтов без адаптива, где на мобилке и десктопе открывается одинаковая десктопная версия. В таком случае на мобилке без возможности зума будет тяжко.
Валидатор же не определяет, есть ли на проверяемом сайте адаптив и подстраховывается, выводя такое предупреждение.
@AleksanderLamkov А как прикажите на телефоне изображение зазумить и рассмотреть? Открывать его в отдельной вкладке? За пользователя не нужно ничего решать. user-scalable=no является антипаттерном в доступности веб приложений и не стоит его показывать в обучающих видео. За него предупреждение будет не только в валидаторе, но и в lighthouse от гугла, ну и в самом chrome в ошибках будет.
Угу, вы правы. Учту в будущем. Спасибо!
Почему не сделать иконку стрелки перед Learn More через псевдоэлемент before?
Тогда невозможно будет без костылей повлиять на цвет иконки.
@@AleksanderLamkov точно, спасибо!
Почему не навесил утилитарный класс container на body?
В таком случае не получилось бы без костылей реализовать адаптивную версию футера.
Спасибо за такое полезное видео! Подскажите, окуда берется формула для динамического шрифта? И ещё, почему для размера шрифта используются px а не rem?
Привет!
Формула простая: берем значение в пикселях из десктопной версии макета, делим на ширину контентной части и умножаем на 100, чтобы по итогу перевести всё во вьюпорт-единицы vw.
rem принципиально не использую, так как многие новички допускают ситуацию, когда слишком маленький размер шрифта на мобильной версии по итогу становится гораздо меньше рекомендуемых 14px
Функция clamp с мин-макс ограничениями гораздо безопаснее. Сложнее выстрелить себе в ногу при адаптации.
@@AleksanderLamkov Спасибо за ответ! Мне было интересно, откуда именно это формула, так как на сайтах вроде css-tricks приведена совсем другая формула для динамического шрифта
Формул много, и я не все бы смог объяснить, с формулой "px => vw" разобраться проще всего, на мой взгляд.
@@AleksanderLamkov Спасибо огромное за ответ!
Все отлично и замечательно!
Но можно скинуть шаблон файловой системы, которая используются в каждом проекте?
А то каждый раз создавать, настраивать, подбирать не очень, а у тебя думаю уже есть готовый шаблон файловой системы)
Не понимаю о чем речь. Весь исходный код проекта есть в репозитории гитхаба, ссылка на него в описании под видео.
@@AleksanderLamkov подготовка файлов занимает очень много времени, также некоторый код повторяется от проекта к проекту миксины, глобальные стили и тд. По этому подумал что есть готовый шаблон. Да, код есть, за него спасибо! Вроде вытащил из него все что нужно, но не очень уверен, из-за отсутствия опыта.
«Стартовый шаблон» подготовлю в ближайший месяц-два, перед тем, как следующим мастер-классом займусь. Спасибо за идею!
@@AleksanderLamkov тебе спасибо!
1:17:40 Должен ли появиться горизонтальный скролл? У меня появляется.
Скорее должен. У меня MacOS, а на этой ОС по умолчанию визуально отключены все скроллбары, поэтому на видео его и не видно.
Можно для всех остальных ОС дополнительно стилизовать скроллбар, чтобы он не выглядел так странно (как, например, на Windows).
В этом шортсе рассказывал, как это делается:
ruclips.net/user/shortspgjRYNT2LQA
Привет, а что за тема стоит для редактора? Спасибо
Привет! Oceanic Dark Theme: plugins.jetbrains.com/plugin/16506-oceanic-dark-theme
Александр, можно ли использовать к примеру файл _media.scss как шаблон-заготовку для других проэктов?
Конечно!
классная тема это VsCode? а все услышал что вебшторм, расскажи как такую тему поставить? уж больно нравится
Привет! Oceanic Dark Theme: plugins.jetbrains.com/plugin/16506-oceanic-dark-theme
@@AleksanderLamkov о спасибо огромное! а чатгпт смотрю вкладка прикручивается отдельно или в виде плагина?
Это встроенная в WebStorm фича, отдельно ничего не ставил :)
@@AleksanderLamkov ок спасибо за фидбек! и спасибо за курсы!
Это считается нормальным повторять разметку навигации для мобилки, и отдельно ее стилизовать со своими классами ? Имею в виду ситуации, когда бургер меню делается силами JS, а не через dialog. Или все же стоит переделывать стили уже имеющегося меню в десктоп раскладке ? Повторение одно и то же не считается ошибкой ? Читал , что якобы не надо дублировать , кроме тех ситуаций , когда некуда деваться , либо там появляются совсем другие элементы , либо слишком геморно с порядком элементов играться. )
Всё верно говоришь. Лучше не дублировать, а переделывать имеющееся. Но иногда выхода и правда нет.
1:30:53 зачем создать отдельный файл под grid ? это же утилитарный класс, его можно задать в _utils.scss, или нет ?
Можно в utils. Просто стилей у этого класса довольно много, плюс есть внутренние grid__item элементы. Отдельный файл использован сугубо для декомпозиции и разгрузки utils.
Спасибо!
Есть момент еще. например в блоке сервис есть карточки с разным дизайном. и ты их перекрашиваешь добавляя модификаторы. но вот на бэкенде (условно битрикс) придётся делать дополнительные манипуляции. т.к. это news-list список с услугами (массив данны) то нужно будет сделать воозможность указывать модификаторы. проще на мой взглят сделать через nth child управлять стилёми без вмешательства в дом дерево (не добавляя дополнительные классы)
Спорный вопрос. Я год работал с битриксом, нашим бэкендерам было вполне ок сделать модификаторы, чтобы цеплять в разметке классы. Заказчик планировал сам менять их через CMS.
Но через nth-child тоже можно заморочиться, только кучу CSS-переменных пришлось бы прокидывать, но это тоже неплохой вариант.
Понял. Просто заметил на практике лучше максимально избегать нагрузки дом дерева лишними классами . И стараться делать изменение через css. И при правках лучше мало ли цвет поменяется, модификатор тоже нужно будет (желательно) переименовывать
Круто Круто
Вот бы урок по Dialog! Вопрос только, меню закрывается только по клику на close-button, а как сделать и при клике на ссылки в меню?
или придется вешать на внутренние ссылки доп onclick с закрытием окна
Да, только с дополнительным onclick на сами ссылки :(
Про урок по dialog - хорошая идея. Только там без JS скудная версия получается. Хочу после курса по JS сделать гайды по всем популярным UI компонентам.
@@AleksanderLamkov Отлично! Буду ждать, я как раз js смотрю и познаю. По css очень много фишек полезных узнал и применяю в данный момент ;)
25:25, Саша почему ты не использовал миксину reset-link ?
Привет! Забыл, честно говоря :) Надо было добавить, согласен.
можете объяснить как работает кнопка закрыть, я не понимаю как она закрывает бургер меню. Буду очень благодарен)
Привет! Это работает за счёт обёртки над разметкой кнопки закрытия. То есть нажатие на кнопку триггерит «отправку» этой самой формы, а за счет атрибута method dialog закрывается тот , в котором размещен этот самый элемент .
Такая проблема у меня почему-то не работают переменные в которых лежит бордер транзишн и тд, переменные с цветами работают нормально. Подскажите решение, пожалуйста.
Извиняюсь, забыл вар поставить, но с транзишн проблема, когда мы прописали свойство инхерит в меню-линк, задержка не появилась
Привет! Напиши о проблеме подробнее в чат: t.me/friendlyFrontendChat
Можешь сразу показать свой код.
Привет! Помоги настроить html.json сниппет. решил сделать кастомный как у тебя. При написании тега Img через точку с названием класса, структура не разворачивается как надо
"Image tag with Dynamic Attributes": {
"prefix": "img",
"body": "",
"description": "Image tag with optional class"
}
Привет! Напиши сюда, тебе помогут:
t.me/friendlyFrontendChat
Почему ты класс container задаешь тегу section? Обычно section остается на всю ширину. Или это было сделано специально, т.к цвет фона body и section один и тот же?
Угу, в макете нет ни одной секции с иным фоном, нежели белый цвет, потому не вижу смысла переносить контейнер в дополнительную внутреннюю обертку секции.
Подскажите, а почему в каждой секции отдельно прописывать container? Ведь ширина контентной части по макету одинаковая, не лучше ли было сделать один общий container и внутри него поместить секции?
Привычка.
Часто так бывало на работе, что какая-то из секций макета выбивается по ширине (например, добавляется фон на всю ширину экрана), а из-за ограничений родителя реализовать бы её уже не получилось.
Но ты прав, что для этого макета можно было бы и один раз применить container и не создавать лишних оберток.
@@AleksanderLamkov Спасибо за ответ. У меня еще один вопрос, у некоторых людей я видел margin заданный в %. Мне кажется использование margin в % сокращает количество медиа запросов и кода. Но я никогда не применял это в своей практике. Что можете посоветовать, стоит ли его применять и применяете ли вы это в своей практике.
Чисто в %? Странно. Ну или верстка получается «на глаз» и при определенных обстоятельствах всё съезжает, либо в CSS выверенные, но жуть какие неудобные дробные значения.
Лучший выбор - % или vw / vh в связке с функциями min, max и clamp. В таком случае действительно получится сэкономить медиазапросы.
Было про это отдельное видео на канале:
ruclips.net/video/wLWO58PJFrE/видео.html
@@AleksanderLamkov Извините за банальный вопрос. Подскажите, почему в обнуляющем стиле вы установили margin-block: 0; только для тегов с классами? Просто у меня в коде попались некоторые теги без класса и я сначала не понял откуда взялся лишний margin. Пришлось немного изменить код.
:where(
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol,
dl
) {
margin-block: 0;
}
Наверно правильнее не допускать использования этих тегов без классов?
Не совсем. Наличие элементов p, ul, li и подобных БЕЗ классов допускается, но в местах разметки, которые впоследствии будут наполняться контент-менеджерами через wysiwyg-редакторы. Нагенерированные таким способом элементы будут в итоговой разметке без классов. И для них важно все же прописать какие-то внешние отступы, чтобы контент не слипался друг с другом.
На 35:59 класс mobile-overlay__close-button-wrapper а почему на элементе три дефиса ? я слышал что должно быть не больше двух
Да ну нет же каких-то строгих ограничений. БЭМ-методология не запрещает использовать такое количество слов в имени БЭМ-элемента.
@@AleksanderLamkov тогда супер, просто один блогер говорил не больше двух дефисов и всегда придерживался к этому
Это нормальная рекомендация, лучше действительно делать имена попроще, просто в некоторых местах (в частности в обсуждаемом месте) не обойтись.
Модальные окна всегда нужно делать через dialog (корзины, формы регистрации в модалках и так далее) ? Через обычный div не очень будет ?
Не обязательно через dialog. Это достаточно новый тег и раньше делали на div. Так что ошибки никакой не будет.
@@AleksanderLamkov а WAI-ARIA не нужно делать ? Модалка открыта или закрыта, атрибуты состояние и так далее ?
Подскажите, почему используете скрытый span, а не атрибут aria-label?
Привет! Некоторые скринридеры не дружат с автопереводом значений атрибутов на язык пользователя. С визуально скрытым элементом будет надежнее.
Вопрос, чего мы не используем reset? а только normalize? у меня просто проблема с list type пошла на лишка и а сылках
Мы используем кастомный нормалайз, про который объяснял в одном из первых уроков курса по CSS. Если у элементов в разметке есть классы (атрибут class), то нормалайз сбросит у таких элементов лишние отступы и маркеры (если речь идет про li). Ну а ссылкам даже reset ничего не делает, тут нужно точечно для каждого проекта прописать те стили, которые требуются по дизайну.
Привет, когда прописываю например на 25:05 переменные var, не отображаются подсказки. Как это можно исправить ?
И когда делаю какой нибудь @include приходится импортить этот файл сверху другого scss файла
Какая у тебя IDE?
@@AleksanderLamkov vscode
Напиши в чат: t.me/friendlyFrontendChat
Там помогут.
Привет, как называется твой тема ?
Привет! Oceanic Dark Theme: plugins.jetbrains.com/plugin/16506-oceanic-dark-theme
Вопрос по нормализации, в вашем билде данного файла последний блок @media имеет строчку с transition duration 0.01s !important, что в итоге сказывается на анимации тк перебивает длительность анимации через константу заданную в variables, но у вас при создании анимации константа работает, как так получается? 🧐
Привет! Длительность перехода в 0.01s включается только в режиме пониженных движений (меидиазапрос prefers-reduced-motion: reduce). Это нужно для пользователей, у которых включены специальные настройки на компьютере или в самом браузере. Если у тебя также, то посмотри следующее: при открытом девтулз жмакни Ctrl + Shift + P, введи в открывшемся терминале Rendering, далее на этой новой панели найди пункт Emulations и подпункт prefers reduced motion, там скорее всего стоит нестандартное значение reduced, нужно его отключить. И тогда медиазапрос с 0.01s срабатывать не будет.
Не могу понять - почему у меня Close navigation menu продолжает торчать и в мобильной и большой версии а у Вас нет. Что я не удалил или не правильно написал?
Привет! Перепроверь свойства в классе visually-hidden. Или напиши в t.me/friendlyFrontendChat, там помогут.
Привет!
Подскажи, пожалуйста, где можно поменять настройки развертывания элементов с помощью таба? У меня стоит emmet на vs code. Хочу ускорить верстку html. Допустим при img у меня стандартно разворачивается только: src="" alt="", но я хочу сделать так, чтобы добавлялись сразу width и height.
Чет туплю и не понимаю куда смотреть. Сниппет создавать или шо...
Привет! Я только в WebStorm знаю как это настроить. Для VSCode я бы гуглил так: vscode custom abbreviation snippets
По первой ссылке на smashingmagazine есть инструкция.
А почему бургер-меню реализовали таким способом? Почему бы просто не делать так: для nav position: fixed, убрать в сторону, а при нажатии на кнопку чтоб выезжала. И с дизайном кнопки было бы проще, просто анимацией палочки скосить и не нужно делать вторую, подгонять ее на то же место и тд. Toggle класса при клике через js написать и все.
Для избежания программирования? Или есть другое объяснение?
Привет! В этом мастер-классе принципиально не используем JS за исключением инлайнового обработчика onclick="mobileOverlay.showModal()"
Да и решений одной и той же задачи же миллион, так что сложно сказать "почему сделал именно так".
Ну и всё же мне хотелось показать взаимодействие с , а не банальный classList.toggle.
@@AleksanderLamkov Понял, просто думал, что есть какой-то секрет, почему лучше так делать)
Есть ли в бесплатной версии фигмы получить информацию о радиусах, тенях, градиентах? спасибо
Да, посмотри это:
Figma • Инспектирование стилей без DevMode • Плагин Inspect Styles
ruclips.net/user/shortsWVpYkW-Ktto?feature=share
@@AleksanderLamkov Спасибо Александр
не легче селекторы прописывать полностью без &. Смотрел как то много инфы по этому поводу где говорилось что когда пишешь селекторы полностью, их потом проще искать
Зачем искать, если есть source-map’ы к CSS-файлам? В девтулз сразу видно название файла, номер строки и даже номер символа в строке.
Почему файлы в @import 'blocks/ ; подключаются отдельным импортом а не первый импорт дописываются? Чем оправдано? в чём риски?
Так просто визуально проще воспринимается.
Первый импорт - для файлов, которые есть буквально в каждом проекте.
Второй - только для бэм-блоков, которые в каждом проекте разные.
@@AleksanderLamkov Спасибо
1:44:30 У .banner__inner задан background-color: var(--color-gray) и на видео он отчётливо серый, но у .service-card (1 и 4 карточка) цвет такой же задан, но карточки на вид такого же белого цвета, как и фон страницы. Как так получилось?
Привет! Не понимаю о чем ты. На видео четко виден белый фон страницы и светло-серый фон у banner__inner и service-card 1 и 4.
У тебя иначе отображается? Может из-за монитора? Бывает так, что оттенки настолько малым отличаются, что на некоторых мониторах отличий не видно.
@@AleksanderLamkov да, открыл макет на другой машине и там всё норм. Это странно.
Забыл в секции hero изменить font-size для мобилок в hero__description (с 20 на 16) =)
Убираем залипающий hover эффект на мобилках - 20:00
Александр, на ширине 767px появляется кнопка открытия меню, но основное меню исчезает только на 766px, в итоге на 767px сразу два меню, основное и то что открывается бургер-кнопкой (на Вашем сайте портфолио тоже самое). Это нормально? Не будет на каком-нибудь планшете сразу два меню?
Привет! Сейчас нет возможности проверить, но вроде бы такой проблемы быть не должно. Мы ведь манипулировали утилитарными классами hidden-mobile и visible-mobile, внутри которых была привязка к медиазапросам (max-width: 767px) и (min-width: 768px). То есть на ширине экрана 767px основное меню должно исчезать, а бургер-кнопка появляться.
Могу предположить, что у тебя экран с нестандартной плотностью пикселей и в таком случае нужно доработать значение в медиазапросе max-width 767, заменить число на дробное 767.98.
@@AleksanderLamkov благодарю!
@@AleksanderLamkov да, похоже что дело в компьютере. Проверила на другом, все работает. Ещё раз, спасибо за ответ!
почему навигация на мобилке не обернута в nav, а в div?
Привет! Да, ты прав, стоит обернуть в nav, ведь основной nav полностью скрывается через display none.
Возник закономерный вопрос.
service-card
Почему arrow добавил в html, а картинку добавил через тег img?
Какое в этом преимущество?
Привет! Стрелку нужно было добавлять через разметку и тег в частности, чтобы реализовать смену цвета при наведении на кнопку, внутри которой иконка стрелки находится.
А картинку карточки добавляем также через разметку, через , чтобы на адаптиве было удобно всё позиционировать. Если бы делали через CSS и background-image, то было бы весьма проблематично.
@@AleksanderLamkov А, вон в чем задумка. Я просто делаю вне видео и после смотрю как реализуешь тот или иной блок, если возникают какие-то сомнение в написании кода) Спасибо за ответ!
@@AleksanderLamkov И в дополнение хотел спросить.
Пишу на css без пре-процессора
Добавляя иконку, у тебя цвет стрелки черный, я же добавляю, у меня цвет зеленый.
Ты меняешь цвет обращаясь к svg у меня смена получается только к обращению path
.wrapper-icon svg path{
fill: #fff;
}
Почему так?
В начале мастер-класса мы подключали нормализацию стилей (ссылка на этот файл в описании под видео), в нём есть такие правила:
svg *[fill] { fill: currentColor }
svg *[stroke] { stroke: currentColor }
За счет этого цвет внутренностей svg перекрашивается в значение свойства color, которое наследуется от родительского элемента.
@@AleksanderLamkov а вон что, все понял, спасибо, тогда двигаюсь правильно😄
На 35:36 почему не nav для меню ? это же навигация по сайту
Это было бы уже второе nav-меню в разметке. И так как оно буквально дублирует десктопную версию, решил сделать нейтральным дивом.
Но только сейчас подумал, что на мобилках основной будет скрыт и недоступен для скринридеров.
Действительно стоило и это второе дублирующее меню сделать через , ты прав.
@@AleksanderLamkov ничего страшного, мы же не роботы, что-то забываем, что-то не додумываем, главное что ты понял и дальше будешь делать лучше
ну это перфект
Что означает конструкция препроцессора @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;
}
}
Еще можешь посмотреть это видео на канале:
ruclips.net/video/pBSch5AsJWs/видео.html
@@AleksanderLamkov Спасибо
Для кнопки в 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
Понял. Да, допустил ошибку. Спасибо, что поправил.
> Я пересмотрел все записи и могу сказать, что ты не зря канал создал. Консультации, которые ты вёл, были самыми содержательными и полезными.
Очень приятно слышать, что мои прошлые деяния всё ещё приносят людям пользу! О канале как раз начал думать в то время, когда наставничал на том курсе по фронтенду :)
Здравствуйте, почему вы рисовали бургер, а не экспортировали его из макета как svg?
Привет! Как минимум потому, что детали иконки нужно было анимировать при нажатии. Ну и в целом это полезная для новичков практика - нарисовать нечто подобное на CSS.