#1 Адаптивная верстка сайта с нуля для начинающих | HTML, CSS, Figma практика | Анализ макета

[@AleksanderLamkov]

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

[@ВладиславМарюхин-э4с]

Спасибо большое проделанную работу! Объясняется очень грамотно, хоть и очень быстро. Для совсем нуба как я, приходится несколько раз пересматривать. Очень хочется видеть подобные мастер классы где подробно разжованно и по скорости не быстро))) Спасибо!

[@AleksanderLamkov]

Привет! Спасибо за обратную связь :) Про скорость - учту в будущих видео.

[@itobold]

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

[@Whynot-lx8nl]

Гений.... очень сильно жду 2 част, сильно удивлен почему у такого контента так мало сабов... Удачи!!!

[@K0mariki]

В Figma есть плагин "Inspect Styles", который является заменой режима разработчика, а также он показывает какие шрифты используются в макете. В элемент можно провалиться через все слои зажав левый ctrl.

[@ИванТуманов-е2ш]

Видео не для совсем новичков, но все равно ТОП! Автор отвечает на вопросы в комментариях, что дает дополнительную пользу. Лайк и подписка)

[@cheetprogram]

Я только начинаю верстать сайт, изучив html и css, и наткнулся на это видео, и здесь ты чётко и понятно объясняешь спс

[@sartjhon3300]

Ну чтож, слушать и смотреть приятно. Формат, конечно, ни разу не для новичков, скорее для уверенных середнячков, как раз стадия вылизывания кода

[@unlimitedgames8357]

все шикарно, спасибо за сжатый и полезный контент. Хотелось бы увидеть на практике адаптив с применением min, max, clamp

[@AleksanderLamkov]

Привет! В следующих секциях как раз применим min и clamp :)

[@НариманАскеров-х6и]

Спасибо за уроки! Приятно, что есть люди которые снимают такие видео и обучают других. Кстати через плагин в фигма Font Fascia можно сразу определить все шрифты

[@denisd3218]

Спасибо. Очень хорошая подача инфы без воды.

[@egorrublev5529]

Канал подача огонь, Большая тебе благадарность

[@Dreamer_78]

Очень понравилось! чувствуется профессионализм, спасибо большое

[@Tehnokrott]

Саша-красава! Даёшь мастер-класс по фигме со своими приёмчиками, хоткеями и обозначением нюансов!

[@AleksanderLamkov]

Так я же не дизайнер 😅 Максимум могу в видео накидать рекомендаций для дизайнера «чтобы разработчику было хорошо» 🙃

[@UmarUlbiev]

Спасибо за ролик и доходчивое объяснение, очень полезно когда начинаешь учится верстать.

[@OnlyProg-dm9gc]

Спасибо за видеоурок! 🙂 Не использовал css переменные до вашего ролика... А это настолько потрясающая вещь оказывается))

[@ЛисЛис-д8м]

Отличный канал, отлично объясняешь. У меня куплен курс в SkillFactory, но понимания по их "текстовому обучению" никакого. Спасибо тебе большое за работу!

[@dini9036]

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

[@ГуФаРиККоН]

До этого видео верстала страницы по урокам других авторов и думала, что хоть что-то понимаю... Наткнулась на Ваше видео и поняла, что не понимаю на самом деле ничего. Мало того, что скорость просто огромная и приходится ставить максимум на 0.75, так еще и куча вопросов по ходу верстки возникает - гуглить приходится постоянно. Тяжко, но полезно, лишним такой "опыт" не будет. Спасибо Вам за видео👍

[@AntonSchmidt-ik7qq]

Спасибо за контент , искал решения с SEO - оптимизацие и вот "как правильно прятать " огромное спасибо...

[@steiden1]

Спасибо за видео. Получил ответы на многие вопросы🔥

[@errxrcxde8265]

Очень полезный видос!!! Спасибо!

[@СергейЖелезняк-ч8я]

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

[@aLeKseU852]

Спасибо за контент! Посмотрел на твоем канале html курс, частично css. Пробую верстать аналогичный макет. В фигме только как я понял режим разработчика сейчас могут включить только платные подписчики

[@AleksanderLamkov]

Привет! Угу, дев-мод стал платным, но я советую приноровиться к режиму дизайнера, там не так сложно, мне он даже больше нравится. Ну а для конкретных CSS-свойств теней и градиентов есть различные плагины. Если нужно - напиши в телеграмм чате (ссылка под видео), тебе скинут ссылки.

[@andreymolokankin5634]

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

[@mouri_san]

круто, спасибо! переменные действительно удобно использовать

[@svitboomer8840]

Еееееее, Крутяк

[@progover24]

жду след урок

[@memasracing3681]

Александр огромный вам респект за проделанную работу! Жаль что в Figma режим разработчика стал платным(

[@AleksanderLamkov]

Если что, есть различные плагины, которые позволяют вытащить стили с элемента в формате CSS-свойств. Про один из таких давным давно снимал шортс: kzbin.infoWVpYkW-Ktto

[@dimasnytin]

Ждём 2 часть🎉

[@PavelChupryna]

Спасибо за курс. Ты крутой.)

[@idg817]

Спасибо, всё чётко и грамотно.

[@dimasnytin]

Спасибо большое за труд

[@АндрійЛємак]

ну мне зашел видео, все по делу, без воды, подача материала очень доходчива, голос конечно решает много, чуток не удобно что на иностранном языке, но это такое - терпимо. подписан - отслеживаю. Кстати что за тема редактора и шрифт? довольно удобно глазу. Еще вопрос от noob - у тебя тег img раскрылся очень удобно - это твой личный snippet или как ?

[@AleksanderLamkov]

Привет! Спасибо за обратную связь :) Тема - Oceanic Dark Theme Шрифт - JetBrains Mono

[@MauroCesario-o8d]

А как вы думаете, какие еще инструменты, кроме Figma, могут помочь в анализе макетов? я сам долго выбирал курсы по IT, рассматривал разные компании, но в итоге остановился на Skypro и не пожалел))

[@AleksanderLamkov]

Рекламщики Skypro, перестаньте спамить на моём канале, пожалуйста.

[@0percot926]

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

[@yygdr-]

Pixso

[@UmarUlbiev]

Вы смотрите туториалы из-за хорошего обучения?)

[@Bit_Maximum]

Спасибо!

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

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

[@alenache1]

огонь

[@orman4021]

Почему у такого канала так мало подписчиков? :) Спасибо за годный контент для начинающих. Сам пользуюсь WebStorm по студенческой подписке, не расскажешь, что за оформление ты используешь? В плане Color Scheme

[@AleksanderLamkov]

Привет! Спасибо за фидбек:) Тема - Oceanic Dark Theme: plugins.jetbrains.com/plugin/16506-oceanic-dark-theme

[@orman4021]

@@AleksanderLamkov Большое спасибо)

[@kiralatysheva6794]

Да, очень четко-структурированный материал. Большое спасибо. Если не секрет, где вы сами учились вёрстке, по каким материалам?

[@AleksanderLamkov]

Привет! В 2020-м смотрел “Фрилансер по жизни», делал практические задания на htmlbook.ru/practical, верстал рандомные макеты из фигмы, делал задачки в тренажерах htmlacademy по базовой подписке, ещё прочитал от корки до корки книги «Head First HTML» и «Большая книга CSS».

[@idknope111]

(20:23) Привет, при добавлении селектора hover к a, и при наведении на ссылку, у меня перекрашивается вся область нажатия (весь квадрат, с помощью которого мы увеличили область нажатия на эту же ссылку) UPD. Не понял, как это работает, но я написал код ещё раз, и всё заработало, но всё равно спасибо)

[@Alex-y3n9s]

Александр, спасибо за шикарные видео👍 На ближайшее время ваш контент-план примерно понятен. Если не секрет, какие планы далее? Js, React, Vue или все сразу?

[@AleksanderLamkov]

Привет! Спасибо за обратную связь! По плану будет JavaScript, средства автоматизации, потом React.

[@mushroom2267]

@@AleksanderLamkov ура ура ура!

[@Zhenkaaf]

22:55 button же по умолчанию inline-block ? размеры можно задавать без указания inline-flex ... Благодарю за уроки! Хорошее, детальное объяснение html и css !

[@AleksanderLamkov]

Размеры - можно, а вот центрирование по вертикали через align-items center возможно только при наличии у элемента display flex или inline-flex (ну или схожих грид-значений).

[@nixaristix1819]

@AlexanderLamkor, откуда у вас информация, что некоррекно добавлять к элементу button свойство cursor: pointer? 24:34

[@AleksanderLamkov]

Вот мой развернутый пост в моем телеграмм-канале: t.me/friendlyFrontend/323

[@nixaristix1819]

@@AleksanderLamkov Спасибо за ответ! Статью прочел и рад, что вы пришли к однозначному выводу, что все же курсор кнопке нужен.

[@kiralatysheva6794]

Что думаешь насчёт подключения шрифтов с помощью плагина google fonts (для vs code есть такой) ?

[@AleksanderLamkov]

Не работал с таким, пользуюсь IDE WebStorm. Если плагин генерирует font-face подключение, то способ будет неплохим :)

[@kiralatysheva6794]

@@AleksanderLamkov по завершении курса css, планируешь начать обучение джаваскрипту? если да, то до какого уровня? вообще какие планы по развитию канала? спасибо за ответы =)

[@AleksanderLamkov]

Курс по CSS уже закончен, а после этого мастер-класса будет БЭМ, препроцессоры стилей, возможно ещё один мастер-класс по верстке с применением этих знаний, а затем, собственно, курс по JS. Планирую в нём рассказать всё то, что пригодилось мне за последние годы работы, но без специфичных ситуативных API, которых в браузере буквально сотни.

[@kiralatysheva6794]

@@AleksanderLamkov очень круто! ваш канал для меня настоящее открытие! спасибо большое

[@offernity2707]

Александр, подскажите пожалуйста, почему на 22:23 свойство column-gap срабатывает а margin-right нет?

[@AleksanderLamkov]

Свойство column-gap применяется к флекс-контейнеру и "раздвигает" внутренние флекс-элементы, добавляя между ними пространство по горизонтали. Свойство margin-right добавляет элементу внешний отступ вправо. У header-menu-link дочерних элементов как таковых нет, но есть текстовое содержимое и псевдоэлемент after. А в такой ситуации, когда header-menu-link является флекс-контейнером, текстовое содержимое элемента и псевдоэлемент after являются как бы прямыми дочерними элементами флекс-контейнера, поэтому на них и действует column-gap. То есть такое: Клик .button { display: flex; column-gap: 10px } .button::after { /* стили иконки */ } То же самое, что и такое: Клик ... .button { display: flex; column-gap: 10px } .button__icon { /* стили иконки */ }

[@AleksanderLamkov]

Свойство margin-right, примененное к основному элементу (у которого есть псевдоэлемент after), добавило бы внешний отступ справа от псевдоэлемента after. См. упрощенный пример: codepen.io/aleksander-lamkov/pen/LYwVvZJ

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

Нормализация / обнуление делается под каждый проект отдельно в зависимости от особенностей проекта или в каждый проект вставляется стандартный набор селекторов\свойств? Я понял, это отдельная большая тема. Есть ли у Вас видео на эту тему?

[@AleksanderLamkov]

Можно смело использовать в каждом проекте. Видео на канале по этой теме вот: kzbin.info/www/bejne/d2W8Zomtjax6b8ksi=KEUl2ozTW8bRhBoj

[@KaTo_SV]

Спасибо большое за качественный контент! Один вопрос, может стоит обернуть в header-e все в контейнер и задать ограничения по ширине контента, что бы на мониторах в 2K кнопки не улетали по углам ?

[@AleksanderLamkov]

Ну, тут я бы спросил дизайнера, как он видит эту адаптацию под широкие экраны. Вообще, у нас же первая секция (баннер) ещё на всю ширину растягивается. Без растянутой шапки уже баннер будет выглядеть не так...

[@smotritelyoutube]

Только у меня вопрос касательно БЭМ, это просто так надо, что например селектор header-logo-icon пишется просто через дефис? Я думал что надо писать через 2 нижних подчеркивания типа header__logo, было бы круто услышать об этом (БЭМ) от Вас) А так все супер, пушка, ждем следующий урок!!!

[@AleksanderLamkov]

Привет! Этот проект делаем без БЭМ. Про эту методологию я сделаю отдельное видео и затем выпущу дополнительный мастер-класс.

[@Alex-y3n9s]

Я думаю, что для лендинга на 5 блоков вообще нет смысла заморачиваться над неймингом и использовать БЭМ (разве что по привычке). Если многостраничник, тогда да

[@АлексПол-б6к]

Немного непривычно что со старта испольовали Emmet, хотя до начала этого ролика он не рассматривался) пришлось параллельно изучить данную фичу) что в принципе и полезно

[@AleksanderLamkov]

Мне всегда казалось, что базовый синтаксис Emmet - что-то интуитивно понятное с первых часов написания HTML разметки. К тому же, в этом МК (да и в других, кстати, тоже) ничего сложнее связки «тег.класс» мы не используем 🙂

[@АлексПол-б6к]

@AleksanderLamkov именно! интуитивно понятно и "подстегнуло" выучить хотя бы базу. Спасибо за Ваш труд

[@liza_beg]

Спасибо! Очень полезно и понятно для новичка. Осталось несколько вопросов, подскажите, пожалуйста: 1. Почему padding-top для класса header задается только в медиазапросе? 2. Зачем свойство line-height кнопкам? 3. Почему max-width именно 1024px? Это какая-то общепринятая величина или "на глаз"?

[@AleksanderLamkov]

Привет! 1. Потому что на десктопной версии высота шапки (и соответственно отступ сверху) идёт за счёт фиксированной высоты у элементов header-menu-link. На max-width: 1024px ссылки из меню уходят на вторую строку, поэтому ориентироваться на их высоту мы уже не можем и чтобы header не слипался сверху с краями страницы, мы и задаем этот padding-top в медиазапросе. 2. Оно лишнее, согласен. Если мы задаем кнопкам height, то line-height фактически перестает действовать. 3. Общепринятых величин для медиазапросов нет, я опытным путем для себя определил некие диапазоны, что вот на 1023-1024 примерно начинается ширина для планшетов, на 767-768 уже мобилка. Можно также ориентироваться на getbootstrap.com/docs/5.0/layout/breakpoints/, но в целом это не принципиально, стандартов нет.

[@liza_beg]

@@AleksanderLamkov Все поняла. Спасибо большое!

[@Serega2831]

Александр вопрос. Я новичок и минут 20 не мог понять почему у меня не работает transition для ссылок. Зашел в dev tools и понял, что мешает transition-duration: 0.01ms !important в обнулении стилей. Как только выключил данную функцию все заработало. Эксперимента ради просто поставил после transition для ссылок !important и все так же заработало. Почему на видео работает все с таким набором обнуления стилей?)))

[@AleksanderLamkov]

Похоже, что у тебя в настройках браузера (или глобально в настройках операционной системы) стоит пункт «уменьшение количества анимаций» и из-за этого срабатывает медиазпрос prefers-reduced-motion в моем css normalize файле.

[@ЕленаГунина-ш6э]

Александр, уточните, пожалуйста, на 22:16 для класса is-current делаете отступ для кружка через colump-gap:7px, можно ли как альтернативу использовать margin-left: 7px ? Если нет, подскажите, в чем преимущество colump-gap? Еще вопрос, вы пишите селектор .header-menu-link.is-current::after, можно ли указать селектор просто .is-current::after ? Спасибо за ваши уроки.

[@AleksanderLamkov]

Преимущество column-gap в том, что отступ задается для родителя, а не для дочернего элемента. Это зачастую удобнее. А ещё, если вдруг одного из элементов флекс-контейнера не будет, то у единственного оставшегося дочернего элемента margin-left выполнял бы в таком случае лишнюю работу. Свойство column-gap получается универсальнее, т. к. оно добавляет отступы только, если дочерних элементов 2 и более штук. По поводу второго вопроса. Нет, селектор .is-current::after {} писать не стоит, т. к. is-current - класс-модификатор и в теории может повториться где-нибудь ещё, поэтому нужна конкретизация, привязка к header-menu-link.

[@ЕленаГунина-ш6э]

@@AleksanderLamkov Спасибо за ответ!

[@frodo5190]

Я ЛЮБЛЮ ТЕБЯ...

[@ВладЛитвин-с6д]

возможно многие знают, но лишним не будет, в редакторе vsCode с помощью плагина google fonts можно подключать шрифты прямо в код. так легче и быстрее

[@AleksanderLamkov]

Да, есть такой плагин, спасибо за комментарий! Но должен предупредить, что самый оптимальный способ шрифтов с точки зрения производительности - через font-face и обращение к локальным файлам. Как подключение через плагин работает - не помню.

[@evgenmarfel]

Есть плагин для фигма, который умеет показывать все шрифты и их начертания из макета. Ускоряет определение шрифтов . называется Font Fascia

[@AleksanderLamkov]

Привет! Как показывает практика, он схватывает все шрифты, в том числе шрифты из скрытых дизайнером слоев и те, которыми, к примеру, подписываются страницы макета. Чаще всего дизайнеры оставляют много мусора в макетах и плагин соберет всё что нужно и не нужно. Но если макет сделан аккуратно и подчищен от лишнего, то да, плагин крут. В любом случае, спасибо за комментарий!)

[@evgenmarfel]

@@AleksanderLamkov вот и идея для нового плагина, который показывает шрифты из открытых слоев

[@ВладимирПетров-т7ч]

Подскажите, в header при увеличении масштаба видно, что текст меню и кнопки book-button не совсем по центру высоты header. Как сделать точно по центру?

[@AleksanderLamkov]

Напиши о проблеме в чат коммьюнити, тебе помогут: t.me/friendlyFrontendChat

[@ВладимирПетров-т7ч]

Помог margin-top: 2px; - для меню

[@AleksanderLamkov]

Кажется, что можно без этого обойтись. Нет особого смысла пиксель-перфект делать.

[@user-itgen]

Спасибо вам за интересный практический урок. Можно спросить - почему вы полностью копируете и вставляете код из файла normalize, а не подключаете его в папке CSS, вместе с файлом style.css? Копировать и вставлять код этого файла чем-то лучше?

[@AleksanderLamkov]

Привет! Спасибо за обратную связь :) На самом деле особой разницы в способах подключения нормалайза нет, но если подключать отдельным файлом, в конечном приложении на сервер будет выполняться +1 запрос, из-за чего загрузка сайта в целом будет чуть медленнее. Но там такие крохи, что ими можно пренебречь. На этапе обучения тем более. Так что делай так, как тебе удобно.

[@IvanKeats-q3q]

15:25 16:50(17:10) 18:00 19:40 20:10 21:12 22:14 25:05 25:55 26:12 26:33 27:15 27:32 28:15(28:25) 29:03 29:15 30:25 31:45 31:57 32:09 32:35 33:10

[@АлександрБондарев-н5у]

Кто ты, Воин?))))

[@beetleGP]

Хэдеру лучше указать фиксированную ширину 1856рх. Иначе на больших экранах (больше 1920) шапка разъедется на всю ширину экрана. Я указал 1876 и паддинги по 10рх слева и справа.

[@AleksanderLamkov]

Max-width? Да, пригодился бы.

[@beetleGP]

@@AleksanderLamkov Так точно :)

[@dini9036]

18:26 а какая комбинация клавиш, для просмотра отступов? Никак не появляются красные рамки :(

[@AleksanderLamkov]

Левый alt вроде бы зажимаю.

[@АндрейМельниченко-б7п]

а почему нельзя экспортировать не код svg, а саму картинку в формате svg и потом использовать не код, а саму картинку

[@AleksanderLamkov]

Потому что нам нужно иметь возможность влиять на цвет иконки через CSS. А это со статичным файлом-картинкой сделать без выкрутасов не получится.

[@gamerstv9985]

Здравствуйте! Хотелось бы узнать у вас, почему cursor: pointer для кнопок считается некорректным UX-ом?

[@AleksanderLamkov]

Вот есть статья, раскрывающая эту тему: adamsilver.io/blog/buttons-shouldnt-have-a-hand-cursor/ Но я пересмотрел свой взгляд на этот вопрос. Пришел к выводу, что всё же надо кнопкам прописывать cursor pointer. К этому привыкло большинство пользователей веба.

[@gamerstv9985]

Спасибо вам за ответ!

[@hermaeuusmora]

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

[@AleksanderLamkov]

Значит что-то напутал в коде. Сверь с моим репозиторием по ссылке в описании.

[@fjarrling]

Привет, ранее посмотрел видео по БЭМ методологии, хочу уточнить почему не используется в этом курсе? Она вовсе необязательна получается?

[@AleksanderLamkov]

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

[@fjarrling]

@@AleksanderLamkov Спасибо большое за ответ! Жду с нетерпением следующего! С наступающим!

[@ShocKKKKKKK]

А что это за прога скриншотер у тебя такая, не подскажешь?) Спасибо)

[@AleksanderLamkov]

Привет! TeamPaper Snap.

[@offernity2707]

сейчас в бесплатной версии фигмы нет режима разработчика или я что-то делаю не так?

[@AleksanderLamkov]

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

[@evgeniy3370]

Perfect pixel -уже не канон ? Или где-то требуют его использование ?

[@AleksanderLamkov]

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

[@hyperpocket.]

23:51 почему у кнопки задана высота, если можно было padding по всем сторонам?

[@AleksanderLamkov]

Если задавать высоту кнопкам через вертикальные внутренние отступы, то чтобы высота соответствовала макету, нужно учитывать размер шрифта и указывать отступы по формуле ((height - font-size) / 2). Это - сложно. Гораздо удобнее и надежнее написать высоту через фиксированное значение для свойство height.

[@ВладЛитвин-с6д]

привет, вот интересует вопрос: можно ли создать переменную в которой будет 3 правила? мне нужно создать border цвет которого будет в градиенте, а создать его можно только с помощью свойств: border, border-image-source, border-image-slice. можно ли уместить эти 3 правила в одну переменную?

[@AleksanderLamkov]

Привет! Не получится. То, что ты описываешь, похоже на миксины из препроцессоров (SCSS, PostCSS, Less). В обычном же CSS я бы предложил просто создать утилитарный класс gradient-border и добавлять его тем элементам в разметке, где он нужен.

[@ВладЛитвин-с6д]

@@AleksanderLamkov Спасибо, я слышал когда то про миксины, но вылетело из головы. у тебя качественные уроки, продолжай в том же духе)

[@DSW-]

Просмотрел ваши видео с курсами по css html. Возможно так плохо смотрел и конспектировал, но вообще не понял про max-width: calc(var(--container-width) + var(container-padding-x) * 2). Почему --container-width не дает реальных 1300px ограничения контентной области? По функции calc понял, почитал, но почему именно 1300 + 15 * 2 = 1300 я не понимаю. Буду рад, если объхясните или прикрепите ссылки на статьи, где можно почитать почему так

[@AleksanderLamkov]

Привет! Всё дело в box-sizing. По умолчанию в браузере при задании ширины и внутренних горизонтальных отступов финальная ширина элемента будет равна сумме этих двух величин. То есть если задали width 1300px и padding-inline 15px, то финальная ширина элемента будет равна 1330px. Если же мы установим box-sizing как border-box (а это делают в 99.99% проектов), то при задании тех же самых значений (width 1300px и padding-inline 15px) финальная ширина элемента будет равна 1300px. А внутренние горизонтальные отступы будут «толкать» контент слева и справа на 15px с каждой стороны и по итогу сам контент будет ограничен шириной в 1270px. Чтобы при box-sizing border-box ширина, заданная в max-width, соответствовала значению ширины контента по макету, необходимо плюсовать в calc к container-width внутренние горизонтальные отступы с каждой стороны (container-padding-x * 2). Тут подробнее о box-sizing: kzbin.info/www/bejne/pYKnf4OEj5xlf8ksi=_XBV85Ab36VVfzYy

[@DSW-]

@@AleksanderLamkov Спасибо за подробный ответ, все понял)❤

[@it400]

Нашел удобный плагин в фигме, он отображает название и начертание сразу всех шрифтов используемых в макете, называется плагин Font Fascia

[@AleksanderLamkov]

* только учтите, что плагин покажет шрифты и из скрытых дизайнером слоев тоже А так да, полезный плагин, если пользоваться им с умом.

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

Вы ширину и высоту логотипа прописали прям в html а не в css, интересно, чем это обусловленно. Нет ли риска в последствии забыть где записаны параметры величины?

[@AleksanderLamkov]

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

[@aswarriorr]

Как то все иначе верстается , не как у всех)) . Это как один из вариантов верстки ? Урок интересный!

[@AleksanderLamkov]

А в чем именно иначе? Я сам еще 4 года назад смотрел много видео по верстке. Уже не особо помню, что там было в деталях, но моя нынешняя техника разработки не кардинально ведь отличается от того, что люди делали раньше. Просто больше думаю наперед, использую переменные, calc, современные единицы измерения.

[@aswarriorr]

@@AleksanderLamkov вот я об этом и говорю ,что все в основном используют другие методы ,без переменных и root. Начиная со шрифтов ,в основном через HTML ссылку вставляют ,сброс стилей через reset или narmolize. Я новичок и многое для меня еще не понятно ). Вас смотрю ,так как вы реально работаете ,а не просто впариваете курсы . Респект вам.

[@alialiev4667]

Можно использовать плагин «Font Fascia», показывает все используемые шрифты

[@AleksanderLamkov]

Да, но по крайней мере раньше с ним была проблема: он показывал в т. ч. шрифты со скрытых (невидимых) слоев. Дизайнеры, особенно начинающие, нередко оставляют в макете много результатов экспериментов, то есть мусора, а потом плагин выдает десяток семейств шрифтов, из которых реально в проекте требуется 1-2 😅

[@HungerGames911]

Подскажите , актуально ли верстать блоки используя position в наше время?

[@AleksanderLamkov]

Привет! Свойство position (и свойства top / right / bottom/ left) всегда предназначались для конкретных ситуаций: расположить элемент относительно одного из родительских элементов или же относительно всей страницы. Применять эти свойства нужно максимально осознанно, так как они выбивают элементы из потока документа. Я могу предположить, что такой вопрос возникает из-за свойств position, top, left, right, bottom, которые показывает Figma в правой колонке при анализе любого блока. Если так, то нет, на эти свойства мы никогда не обращаем внимания, в реальной верстке на уровне кода такое не используется.

[@HungerGames911]

@@AleksanderLamkov просто с помощью position легче как то размещать эл-ты зная сколько отступ от левого края от верха, например. С помощью флексов так же нельзя задать вроде-бы, что бы допустим логотип расположить с определенно заданными отступами

[@AleksanderLamkov]

Не стоит такое через position делать, лучше при необходимости задавать внутренние отступы padding родительской обертке.

[@HungerGames911]

@@AleksanderLamkov смотрите такой пример: у нас есть блок шириной 1000px , в нем есть допустим 1 логотип сверху блока, но он не по центру, что бы использовать justify-content, а допустим от левого края 400px располагается, вот как такой вопрос решить с помощь флекса, что бы не использовать position, потому что флекс поможет допустим по центру расположить, а паддинг 400пх тоже врядли сделаешь. Подскажите пожалуйста, если не сложно

[@AleksanderLamkov]

Любая верстка должна быть прежде всего адаптивной и если на макете мы видим элемент шириной 1000px и внутри него в 400px от левой границы располагается другой элемент, то я бы задал для этого внутреннего элемента margin-left: 40%, что будет равняться как раз 400px. Но такая ситуация в принципе очень редко может возникнуть. Если на уровне кода вместо костылей с фиксированными значениями в ущерб нескольким пикселям смещения можно использовать изящное решение в пару строк, то стоит этим воспользоваться. Макет нередко бывает кривым и неидеальным, где начинающий дизайнер "на глаз" делал центрирование элементов, но это ведь не значит, что на уровне кода нам нужно повторять все его ошибки.

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

Теперь, как известно, функция под кнопкой dev в figma стала платной. Есть ли альтернативные средства измерения растояния между элементами?

[@AleksanderLamkov]

Расстояния можно и в режиме дизайнера увидеть. А для конкретных CSS-свойств - плагин Inspect Styles.

[@MBa1201]

Привет! А как сделать так, чтобы при разворачиваии тега кнопкой Tab ее атрибуты были на разных строках и чтобы у одинарных тегов в конце был символ слеша?

[@AleksanderLamkov]

Привет! Это нужно сниппеты настроить. Напиши в чат, тебе помогут: t.me/friendlyFrontendChat

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

Вы начинаете с css а не с html -разметки, как большинство в видео. В чём преимущество?

[@AleksanderLamkov]

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

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

@@AleksanderLamkov Спасибо. Много того, что не дают на других видео-уроках . Интересно.

[@Tehnokrott]

Почему платную используешь, а не vscode?

[@AleksanderLamkov]

Для меня WebStorm намного удобнее. Как три года назад познакомился с этой IDE, так VSCode уже не могу нормально воспринимать.

[@РоманВолков-д9щ]

А зачем писать padding-inline когда можно написать padding:0px 26px; ? в этом есть какая то разница или можно писать так как мне удобно ?

[@AleksanderLamkov]

Это новый синтаксис и, на мой взгляд, более правильный. Зачем лишний раз сбрасывать вертикальные внутренние отступы в 0? Лучше точечно задать горизонтальные отступы отдельным свойством padding-inline.

[@volk_99]

Здравствуйте figma отображает css стили только в платной теперь версии и как оплатить?

[@AleksanderLamkov]

Можно использовать плагин Inspect Styles, снимал про это шортс: kzbin.infoWVpYkW-Ktto?si=m3ycNJCjhIgckmCb

[@volk_99]

Спасибо!

[@profesor2009]

Везде слышу что надо использовать препроцессоры а у вас css с переменными. Как понять когда что использовать? Говорят что просто css уже не используется

[@AleksanderLamkov]

Привет! Этот мастер-класс для новичков, в следующем уже используется препроцессор стилей Sass: kzbin.info/aero/PL0MUAHwery4rdZt-8E9p9zty2ZUCH6Ai3&si=JITgUcpklw4we2aU

[@ДенисДенис-ш6ю]

а почему нельзя подключать шрифт из самого google ? зачем их локально грузить ?

[@AleksanderLamkov]

Локально надежнее. Так у тебя посетитель сайта будет совершать запросы только к одному домену, к твоему.

[@alexander_stark]

Эммм.. 2:10 фонт фасция ? так же проще .. не?

[@AleksanderLamkov]

В данном случае этот плагин не поможет, только запутает, так как покажет десятки других семейств, используемых в макете. И зачастую в макетах дизайнеры не подчищают «экспериментальные» слои, а скрывают, но FontFacia покажет данные без разбора, в т. ч. и по этим скрытым слоям.

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

Какая польза скачивать шрифт а не подключать ссылку с гугл? исключить риск, что гугл рухнет?

[@AleksanderLamkov]

Привет! Чтобы не грузить ничего лишнего, чтобы грузился лишь нужный woff2 формат файла.

[@beetleGP]

Замена фигме- программа Pixso практически аналог фигме.

[@idcwhrejustfar]

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

[@AleksanderLamkov]

Какой у тебя браузер? Каким способом пытаешься открыть?

[@idcwhrejustfar]

@@AleksanderLamkov я про режим разработчика в фигме, забыл уточнить

[@AleksanderLamkov]

@user-sd1ig4sb3u вот тут рассказывал: Figma • Инспектирование стилей без DevMode • Плагин Inspect Styles kzbin.infoWVpYkW-Ktto?feature=share

[@aswarriorr]

Видео урок все же для середнячков ) . Не пойму ,почему добавляю svg (полосочки бургер) они у меня не отображаются . Все делаю как на видео ( .

[@AleksanderLamkov]

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

[@AleksanderLamkov]

Или скинь текущее состояние проекта архивом в телеграмме t.me/friendlyFrontendChat, я тебе помогу.

[@AleksanderLamkov]

Ну а про уровень необходимой подготовки перед этим мастер-классом - он соответствует моему контент-плану на канале, а именно - всем предыдущим видео, включая курсы HTML и CSS. Если смотреть всё последовательно, то особых сложностей возникнуть не должно.

[@aswarriorr]

@@AleksanderLamkov у меня отдельно ни как не выбираются эти полоски ,только целиком с кругом и квадратным серым фоном 🥴. Выбирать если что отдельные элементы в фигме,умею .

[@aswarriorr]

@@AleksanderLamkov сейчас кину. Благодарю

[@folumcs]

transition-duration не работает, даже в твоем проекте с гитхаба также

[@AleksanderLamkov]

Значит у тебя отрабатывает медиавыражение prefers-reduced motion reduce (настройки на устройстве, видимо, такие). Можем в этом убедиться: зайди на мой личный сайт - aleksanderlamkov.ru Там анимации видишь или всё резко появляется и не движется?

[@folumcs]

@@AleksanderLamkov Сверху на кнопках нет, да и впринципе на сайте нет плавности

[@AleksanderLamkov]

Значит точно у тебя что-то с настройками. А может это у тебя так режим энергосбережения отрабатывает? Ну, режет все анимации. Просто если так, то это не баг, а фича. Можешь в целом открыть девтулз и выделить какой-нибудь интерактивный элемент. Там в Styles найди свойства, действующие из-за сработавшего @media prefers-reduced-motion.

[@folumcs]

@@AleksanderLamkov Спасибо

[@asifabbasov3801]

container-padding-x это что означает?

[@AleksanderLamkov]

Привет! CSS-переменная со значением внутреннего отступа по оси Х, то есть по горизонтали, слева и справа, для утилитарного класса container. Этот класс используется для ограничения ширины контентной части и чтобы контент при сужении экрана не слипался с краями, нужно добавлять внутренние отступы слева и справа (padding-inline).

[@asifabbasov3801]

@@AleksanderLamkov спасибо

[@АндрійЛємак]

я сразу в ступоре - я нашел 5 шрифтов , почему без плагина на поиск шрифтов ?

[@AleksanderLamkov]

Потому что плагин находит все шрифты макета, в т. ч. из скрытых мусорных слоев, который оставил дизайнер пока творил. К тому же в этом макете аж 9 лендингов в одном месте, так что неудивительно, что найдено 5 разных шрифтов.

[@АндрійЛємак]

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

[@AleksanderLamkov]

Можешь подсказать какие именно? У меня сейчас нет возможности посмотреть макет детально с телефона. Я находил только два семейства - Heebo и Yantramanav. Heebo в двух начертаниях - light (300) и bold (700), а Yantramanav только bold (700). Может там новые появились? Автор макета мог что-то обновить.

[@АндрійЛємак]

@@AleksanderLamkov (div.gmnoprint , div.gm-style-cc - два элемента , div.gmnoprint ) Roboto Regular и Medium. Это на карте внизу мелким шрифтом - совсем незаметно, и вверху два слова Map + Satelite. Есть еще иконочные шрифты - но то другая история. Мне очень понравилась подача материала, сделал скорость воспроизведения чуток медленнее и все стало хорошо )))

[@AleksanderLamkov]

Шрифты с карты не нужно учитывать точно. Слой карты все равно выгружается как картинка. А иконочный шрифт - архаизм, нужно иконки делать как .

[@volkodav14.1]

24:38 почему cursor: pointer на кнопке это некорректный UX, когда почти все кнопки в вебе имеют это свойство?

[@AleksanderLamkov]

Вот тут можно почитать про это: medium.com/simple-human/buttons-shouldnt-have-a-hand-cursor-b11e99ca374b

[@ManOzbilis]

Жизнь выглядит прекрасно до момента когда начинаешь изучать @media 😢 Когда уже не понимаешь что лучше использовать vw px или %. Если есть совет какой нибудь, буду очень благодарен. Не могу понять где что лучше использовать

[@AleksanderLamkov]

Привет! В большинстве случаев можно оперировать связкой из width: 100% + max-width: 1000px, где 1000px - ширина элемента в десктопной версии макета. А при сужении экрана следишь за тем, чтобы всё смотрелось органично, и, если начинает выглядеть не очень, начинаешь либо ограничивать в % ширину текущего и/или соседних в ряде элементов, либо банально перестраиваешь элементы из одного ряда в колонку (либо уменьшаешь количество колонок, если речь изначально идет о многоколоночной грид/флекс-сетке).

[@ManOzbilis]

@@AleksanderLamkov Спасибо за ответ

[@AlexanderPuhckov]

Добрый день.У меня вместо Heebo и норм текста какая то кириллица(

[@AleksanderLamkov]

Привет! Напиши сюда, тебе помогут: t.me/friendlyFrontendChat Можешь сразу скинуть код, так будет проще тебе помочь.

[@pablo_barnes7329]

12:03 Ладно, я пошёл

[@Константин-т4с9ш]

Я тоже

[@flowcsgo804]

Александр, почему в начале почти каждого видео у вас красные глаза?( Берегите себя🥺

[@AleksanderLamkov]

Многочасовые съемки под ярким холодным светом так влияют 🥲 В последнее время решил записывать основную часть видеоуроков (сами скринкасты) без вебкамеры, теперь моим глазам гораздо комфортнее 🙂

[@alexander_stark]

Совершенно отлиичащийся подход в CSS.. мало кто использует рут в вертке для новичков...

[@AleksanderLamkov]

Возможно. Но на канале есть материалы по этим темам, поэтому новички не должны запутаться :)

[@Дари-щ9г]

Почему нет функции скачать шрифт на гугл фонтс? Если ли способ это сделать сторонники источниками?

[@AleksanderLamkov]

Если шрифт на гугл-фонтс не получается найти, то его там и нет и никаким образом скачать его с этого ресурса не выйдет. Нужно обращаться к сторонним сайтам.