📌 Друзья, в телеграмме у нас есть отдельный чат, где вы можете задать вопрос по фронтенд-разработке и вам постараются помочь: 💬 t.me/friendlyFrontendChat Если вам это интересно, присоединяйтесь, задавайте вопросы и помогайте другим 🙂
Спасибо большое проделанную работу! Объясняется очень грамотно, хоть и очень быстро. Для совсем нуба как я, приходится несколько раз пересматривать. Очень хочется видеть подобные мастер классы где подробно разжованно и по скорости не быстро))) Спасибо!
Отличный канал, так держать, все четко, быстро, по полочкам и по кривой роста, от простого к сложному и офигенные советы по внешним сервисам. Есть момент, глаза красные(периодами), аккуратнее с нагрузками, перегоришь, и мы потеряем такого здравого контентмейкера, спасибо за труд.
В Figma есть плагин "Inspect Styles", который является заменой режима разработчика, а также он показывает какие шрифты используются в макете. В элемент можно провалиться через все слои зажав левый ctrl.
До этого видео верстала страницы по урокам других авторов и думала, что хоть что-то понимаю... Наткнулась на Ваше видео и поняла, что не понимаю на самом деле ничего. Мало того, что скорость просто огромная и приходится ставить максимум на 0.75, так еще и куча вопросов по ходу верстки возникает - гуглить приходится постоянно. Тяжко, но полезно, лишним такой "опыт" не будет. Спасибо Вам за видео👍
Спасибо за уроки! Приятно, что есть люди которые снимают такие видео и обучают других. Кстати через плагин в фигма Font Fascia можно сразу определить все шрифты
Отличный канал, отлично объясняешь. У меня куплен курс в SkillFactory, но понимания по их "текстовому обучению" никакого. Спасибо тебе большое за работу!
видео подойдет для тех, кто закончил теорию html css , и собираются практиковаться, идеальная подсказка как делать разные блоки, т. к. очень легко заблудиться в способах реализации
Спасибо за контент! Посмотрел на твоем канале html курс, частично css. Пробую верстать аналогичный макет. В фигме только как я понял режим разработчика сейчас могут включить только платные подписчики
Привет! Угу, дев-мод стал платным, но я советую приноровиться к режиму дизайнера, там не так сложно, мне он даже больше нравится. Ну а для конкретных CSS-свойств теней и градиентов есть различные плагины. Если нужно - напиши в телеграмм чате (ссылка под видео), тебе скинут ссылки.
Если что, есть различные плагины, которые позволяют вытащить стили с элемента в формате CSS-свойств. Про один из таких давным давно снимал шортс: ruclips.net/user/shortsWVpYkW-Ktto
(20:23) Привет, при добавлении селектора hover к a, и при наведении на ссылку, у меня перекрашивается вся область нажатия (весь квадрат, с помощью которого мы увеличили область нажатия на эту же ссылку) UPD. Не понял, как это работает, но я написал код ещё раз, и всё заработало, но всё равно спасибо)
А как вы думаете, какие еще инструменты, кроме Figma, могут помочь в анализе макетов? я сам долго выбирал курсы по IT, рассматривал разные компании, но в итоге остановился на Skypro и не пожалел))
ну мне зашел видео, все по делу, без воды, подача материала очень доходчива, голос конечно решает много, чуток не удобно что на иностранном языке, но это такое - терпимо. подписан - отслеживаю. Кстати что за тема редактора и шрифт? довольно удобно глазу. Еще вопрос от noob - у тебя тег img раскрылся очень удобно - это твой личный snippet или как ?
Почему у такого канала так мало подписчиков? :) Спасибо за годный контент для начинающих. Сам пользуюсь WebStorm по студенческой подписке, не расскажешь, что за оформление ты используешь? В плане Color Scheme
Александр, спасибо за шикарные видео👍 На ближайшее время ваш контент-план примерно понятен. Если не секрет, какие планы далее? Js, React, Vue или все сразу?
Привет! В 2020-м смотрел “Фрилансер по жизни», делал практические задания на htmlbook.ru/practical, верстал рандомные макеты из фигмы, делал задачки в тренажерах htmlacademy по базовой подписке, ещё прочитал от корки до корки книги «Head First HTML» и «Большая книга CSS».
22:55 button же по умолчанию inline-block ? размеры можно задавать без указания inline-flex ... Благодарю за уроки! Хорошее, детальное объяснение html и css !
Размеры - можно, а вот центрирование по вертикали через align-items center возможно только при наличии у элемента display flex или inline-flex (ну или схожих грид-значений).
Привет! Как показывает практика, он схватывает все шрифты, в том числе шрифты из скрытых дизайнером слоев и те, которыми, к примеру, подписываются страницы макета. Чаще всего дизайнеры оставляют много мусора в макетах и плагин соберет всё что нужно и не нужно. Но если макет сделан аккуратно и подчищен от лишнего, то да, плагин крут. В любом случае, спасибо за комментарий!)
@@AleksanderLamkov по завершении курса css, планируешь начать обучение джаваскрипту? если да, то до какого уровня? вообще какие планы по развитию канала? спасибо за ответы =)
Курс по CSS уже закончен, а после этого мастер-класса будет БЭМ, препроцессоры стилей, возможно ещё один мастер-класс по верстке с применением этих знаний, а затем, собственно, курс по JS. Планирую в нём рассказать всё то, что пригодилось мне за последние годы работы, но без специфичных ситуативных API, которых в браузере буквально сотни.
Спасибо большое за качественный контент! Один вопрос, может стоит обернуть в header-e все в контейнер и задать ограничения по ширине контента, что бы на мониторах в 2K кнопки не улетали по углам ?
Ну, тут я бы спросил дизайнера, как он видит эту адаптацию под широкие экраны. Вообще, у нас же первая секция (баннер) ещё на всю ширину растягивается. Без растянутой шапки уже баннер будет выглядеть не так...
Свойство 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 { /* стили иконки */ }
Свойство margin-right, примененное к основному элементу (у которого есть псевдоэлемент after), добавило бы внешний отступ справа от псевдоэлемента after. См. упрощенный пример: codepen.io/aleksander-lamkov/pen/LYwVvZJ
Нормализация / обнуление делается под каждый проект отдельно в зависимости от особенностей проекта или в каждый проект вставляется стандартный набор селекторов\свойств? Я понял, это отдельная большая тема. Есть ли у Вас видео на эту тему?
Александр вопрос. Я новичок и минут 20 не мог понять почему у меня не работает transition для ссылок. Зашел в dev tools и понял, что мешает transition-duration: 0.01ms !important в обнулении стилей. Как только выключил данную функцию все заработало. Эксперимента ради просто поставил после transition для ссылок !important и все так же заработало. Почему на видео работает все с таким набором обнуления стилей?)))
Похоже, что у тебя в настройках браузера (или глобально в настройках операционной системы) стоит пункт «уменьшение количества анимаций» и из-за этого срабатывает медиазпрос prefers-reduced-motion в моем css normalize файле.
Не знаю почему, но псевдоэлемент after прото не видно, хотя если прокликать его через devtools он как бы есть просто невидимый. В итоге сделал его просто png картинкой.
Только у меня вопрос касательно БЭМ, это просто так надо, что например селектор header-logo-icon пишется просто через дефис? Я думал что надо писать через 2 нижних подчеркивания типа header__logo, было бы круто услышать об этом (БЭМ) от Вас) А так все супер, пушка, ждем следующий урок!!!
Я думаю, что для лендинга на 5 блоков вообще нет смысла заморачиваться над неймингом и использовать БЭМ (разве что по привычке). Если многостраничник, тогда да
Александр, уточните, пожалуйста, на 22:16 для класса is-current делаете отступ для кружка через colump-gap:7px, можно ли как альтернативу использовать margin-left: 7px ? Если нет, подскажите, в чем преимущество colump-gap? Еще вопрос, вы пишите селектор .header-menu-link.is-current::after, можно ли указать селектор просто .is-current::after ? Спасибо за ваши уроки.
Преимущество column-gap в том, что отступ задается для родителя, а не для дочернего элемента. Это зачастую удобнее. А ещё, если вдруг одного из элементов флекс-контейнера не будет, то у единственного оставшегося дочернего элемента margin-left выполнял бы в таком случае лишнюю работу. Свойство column-gap получается универсальнее, т. к. оно добавляет отступы только, если дочерних элементов 2 и более штук. По поводу второго вопроса. Нет, селектор .is-current::after {} писать не стоит, т. к. is-current - класс-модификатор и в теории может повториться где-нибудь ещё, поэтому нужна конкретизация, привязка к header-menu-link.
Да, есть такой плагин, спасибо за комментарий! Но должен предупредить, что самый оптимальный способ шрифтов с точки зрения производительности - через font-face и обращение к локальным файлам. Как подключение через плагин работает - не помню.
Да, но по крайней мере раньше с ним была проблема: он показывал в т. ч. шрифты со скрытых (невидимых) слоев. Дизайнеры, особенно начинающие, нередко оставляют в макете много результатов экспериментов, то есть мусора, а потом плагин выдает десяток семейств шрифтов, из которых реально в проекте требуется 1-2 😅
Спасибо! Очень полезно и понятно для новичка. Осталось несколько вопросов, подскажите, пожалуйста: 1. Почему padding-top для класса header задается только в медиазапросе? 2. Зачем свойство line-height кнопкам? 3. Почему max-width именно 1024px? Это какая-то общепринятая величина или "на глаз"?
Привет! 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/, но в целом это не принципиально, стандартов нет.
Подскажите, в header при увеличении масштаба видно, что текст меню и кнопки book-button не совсем по центру высоты header. Как сделать точно по центру?
Хэдеру лучше указать фиксированную ширину 1856рх. Иначе на больших экранах (больше 1920) шапка разъедется на всю ширину экрана. Я указал 1876 и паддинги по 10рх слева и справа.
Если задавать высоту кнопкам через вертикальные внутренние отступы, то чтобы высота соответствовала макету, нужно учитывать размер шрифта и указывать отступы по формуле ((height - font-size) / 2). Это - сложно. Гораздо удобнее и надежнее написать высоту через фиксированное значение для свойство height.
Вот есть статья, раскрывающая эту тему: adamsilver.io/blog/buttons-shouldnt-have-a-hand-cursor/ Но я пересмотрел свой взгляд на этот вопрос. Пришел к выводу, что всё же надо кнопкам прописывать cursor pointer. К этому привыкло большинство пользователей веба.
В начале карьеры имеет смысл перепроверять себя, накладывая макет на сверстанный сайт, чтобы увидеть грубые расхождения. С опытом же приходит понимание, что эта проверка имеет смысл лишь с идеально разработанными макетами. Ну а таких я за карьеру ещё не встречал.
Спасибо вам за интересный практический урок. Можно спросить - почему вы полностью копируете и вставляете код из файла normalize, а не подключаете его в папке CSS, вместе с файлом style.css? Копировать и вставлять код этого файла чем-то лучше?
Привет! Спасибо за обратную связь :) На самом деле особой разницы в способах подключения нормалайза нет, но если подключать отдельным файлом, в конечном приложении на сервер будет выполняться +1 запрос, из-за чего загрузка сайта в целом будет чуть медленнее. Но там такие крохи, что ими можно пренебречь. На этапе обучения тем более. Так что делай так, как тебе удобно.
Привет! А как сделать так, чтобы при разворачиваии тега кнопкой Tab ее атрибуты были на разных строках и чтобы у одинарных тегов в конце был символ слеша?
Просмотрел ваши видео с курсами по css html. Возможно так плохо смотрел и конспектировал, но вообще не понял про max-width: calc(var(--container-width) + var(container-padding-x) * 2). Почему --container-width не дает реальных 1300px ограничения контентной области? По функции calc понял, почитал, но почему именно 1300 + 15 * 2 = 1300 я не понимаю. Буду рад, если объхясните или прикрепите ссылки на статьи, где можно почитать почему так
Привет! Всё дело в 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: ruclips.net/video/oQDNPNZ72Ig/видео.htmlsi=_XBV85Ab36VVfzYy
Привет! В этом мастер-классе специально не делал по методологии, чтобы новичкам было попроще. БЭМ для верстки нужен, без него получается грязновато. В следующем мастер-классе будет и БЭМ и препроцессор стилей.
привет, вот интересует вопрос: можно ли создать переменную в которой будет 3 правила? мне нужно создать border цвет которого будет в градиенте, а создать его можно только с помощью свойств: border, border-image-source, border-image-slice. можно ли уместить эти 3 правила в одну переменную?
Привет! Не получится. То, что ты описываешь, похоже на миксины из препроцессоров (SCSS, PostCSS, Less). В обычном же CSS я бы предложил просто создать утилитарный класс gradient-border и добавлять его тем элементам в разметке, где он нужен.
Привет! Свойство position (и свойства top / right / bottom/ left) всегда предназначались для конкретных ситуаций: расположить элемент относительно одного из родительских элементов или же относительно всей страницы. Применять эти свойства нужно максимально осознанно, так как они выбивают элементы из потока документа. Я могу предположить, что такой вопрос возникает из-за свойств position, top, left, right, bottom, которые показывает Figma в правой колонке при анализе любого блока. Если так, то нет, на эти свойства мы никогда не обращаем внимания, в реальной верстке на уровне кода такое не используется.
@@AleksanderLamkov просто с помощью position легче как то размещать эл-ты зная сколько отступ от левого края от верха, например. С помощью флексов так же нельзя задать вроде-бы, что бы допустим логотип расположить с определенно заданными отступами
@@AleksanderLamkov смотрите такой пример: у нас есть блок шириной 1000px , в нем есть допустим 1 логотип сверху блока, но он не по центру, что бы использовать justify-content, а допустим от левого края 400px располагается, вот как такой вопрос решить с помощь флекса, что бы не использовать position, потому что флекс поможет допустим по центру расположить, а паддинг 400пх тоже врядли сделаешь. Подскажите пожалуйста, если не сложно
Любая верстка должна быть прежде всего адаптивной и если на макете мы видим элемент шириной 1000px и внутри него в 400px от левой границы располагается другой элемент, то я бы задал для этого внутреннего элемента margin-left: 40%, что будет равняться как раз 400px. Но такая ситуация в принципе очень редко может возникнуть. Если на уровне кода вместо костылей с фиксированными значениями в ущерб нескольким пикселям смещения можно использовать изящное решение в пару строк, то стоит этим воспользоваться. Макет нередко бывает кривым и неидеальным, где начинающий дизайнер "на глаз" делал центрирование элементов, но это ведь не значит, что на уровне кода нам нужно повторять все его ошибки.
Вы ширину и высоту логотипа прописали прям в html а не в css, интересно, чем это обусловленно. Нет ли риска в последствии забыть где записаны параметры величины?
Привет! Это для разных целей. В разметке это нужно для того, чтобы при загрузке страницы браузер зарезервировал место под загружаемое в дальнейшем изображение. Далее мы можем в стилях менять размеры как нам нужно. Просто я не указывал (до момента адаптива), так как в этом не было необходимости.
В данном случае этот плагин не поможет, только запутает, так как покажет десятки других семейств, используемых в макете. И зачастую в макетах дизайнеры не подчищают «экспериментальные» слои, а скрывают, но FontFacia покажет данные без разбора, в т. ч. и по этим скрытым слоям.
Везде слышу что надо использовать препроцессоры а у вас css с переменными. Как понять когда что использовать? Говорят что просто css уже не используется
Привет! Этот мастер-класс для новичков, в следующем уже используется препроцессор стилей Sass: ruclips.net/p/PL0MUAHwery4rdZt-8E9p9zty2ZUCH6Ai3&si=JITgUcpklw4we2aU
А в чем именно иначе? Я сам еще 4 года назад смотрел много видео по верстке. Уже не особо помню, что там было в деталях, но моя нынешняя техника разработки не кардинально ведь отличается от того, что люди делали раньше. Просто больше думаю наперед, использую переменные, calc, современные единицы измерения.
@@AleksanderLamkov вот я об этом и говорю ,что все в основном используют другие методы ,без переменных и root. Начиная со шрифтов ,в основном через HTML ссылку вставляют ,сброс стилей через reset или narmolize. Я новичок и многое для меня еще не понятно ). Вас смотрю ,так как вы реально работаете ,а не просто впариваете курсы . Респект вам.
Это новый синтаксис и, на мой взгляд, более правильный. Зачем лишний раз сбрасывать вертикальные внутренние отступы в 0? Лучше точечно задать горизонтальные отступы отдельным свойством padding-inline.
В любом проекте требуется нормализация свойств, глобальные свойства, переменные. Удобнее подготовить всё это заранее, в самом начале разработки на этапе анализа макета, чтобы позже к этому не возвращаться.
Ну а про уровень необходимой подготовки перед этим мастер-классом - он соответствует моему контент-плану на канале, а именно - всем предыдущим видео, включая курсы HTML и CSS. Если смотреть всё последовательно, то особых сложностей возникнуть не должно.
@@AleksanderLamkov у меня отдельно ни как не выбираются эти полоски ,только целиком с кругом и квадратным серым фоном 🥴. Выбирать если что отдельные элементы в фигме,умею .
@user-sd1ig4sb3u вот тут рассказывал: Figma • Инспектирование стилей без DevMode • Плагин Inspect Styles ruclips.net/user/shortsWVpYkW-Ktto?feature=share
Привет! CSS-переменная со значением внутреннего отступа по оси Х, то есть по горизонтали, слева и справа, для утилитарного класса container. Этот класс используется для ограничения ширины контентной части и чтобы контент при сужении экрана не слипался с краями, нужно добавлять внутренние отступы слева и справа (padding-inline).
Потому что плагин находит все шрифты макета, в т. ч. из скрытых мусорных слоев, который оставил дизайнер пока творил. К тому же в этом макете аж 9 лендингов в одном месте, так что неудивительно, что найдено 5 разных шрифтов.
Можешь подсказать какие именно? У меня сейчас нет возможности посмотреть макет детально с телефона. Я находил только два семейства - Heebo и Yantramanav. Heebo в двух начертаниях - light (300) и bold (700), а Yantramanav только bold (700). Может там новые появились? Автор макета мог что-то обновить.
@@AleksanderLamkov (div.gmnoprint , div.gm-style-cc - два элемента , div.gmnoprint ) Roboto Regular и Medium. Это на карте внизу мелким шрифтом - совсем незаметно, и вверху два слова Map + Satelite. Есть еще иконочные шрифты - но то другая история. Мне очень понравилась подача материала, сделал скорость воспроизведения чуток медленнее и все стало хорошо )))
Жизнь выглядит прекрасно до момента когда начинаешь изучать @media 😢 Когда уже не понимаешь что лучше использовать vw px или %. Если есть совет какой нибудь, буду очень благодарен. Не могу понять где что лучше использовать
Привет! В большинстве случаев можно оперировать связкой из width: 100% + max-width: 1000px, где 1000px - ширина элемента в десктопной версии макета. А при сужении экрана следишь за тем, чтобы всё смотрелось органично, и, если начинает выглядеть не очень, начинаешь либо ограничивать в % ширину текущего и/или соседних в ряде элементов, либо банально перестраиваешь элементы из одного ряда в колонку (либо уменьшаешь количество колонок, если речь изначально идет о многоколоночной грид/флекс-сетке).
Многочасовые съемки под ярким холодным светом так влияют 🥲 В последнее время решил записывать основную часть видеоуроков (сами скринкасты) без вебкамеры, теперь моим глазам гораздо комфортнее 🙂
Если честно, то непонятно зачем качать шрифты с гугла и тянуть в бандл. Если шрифт популярный, то он с высокой вероятностью уже есть закэшированный в браузере. Гугл фонт кэшируется на год вроде. Здесь конечно не самые популярные шрифты, но все же. Выгода такого подхода очевидна. Это и применимо к куче библиотек, типа бутстрапов, jquery и т.д. Чем больше сайтов будет пользоваться загрузкой с гугла, тем выгодее это будет для всех) Если еще немного упороться в оптимизацию выгоднее всего подключить шрифт не через css,а через линк в html, ближе к началу файла, чтобы браузер при загрузке html и парсинга его уже поставил шрифт на прелоад. (если его все же не будет в кэше). Первый пакет данных 14кб, хватает на весь с лихвой. В итоге когда загрузится весь остальной контент для отрисовки страницы, то шрифт уже подгрузится скорее всего))
Спасибо за развернутый комментарий! Да, тема подключения ресурсов через CDN жива, но работая последние годы в продуктовых командах, слышал множество мнений против публичных CDN по множеству причин: - публичный CDN сервер нам (компании, для которой мы разрабатываем веб-приложение) не принадлежит, для некоторых бизнесов это бывает важно; - мы не можем повлиять на параметры кеширования, только согласиться с существующими; - приходится надеятся на то, что загружаемый с CDN ресурс достаточно популярен и у ЦА с бОльшей вероятностью уже закеширован, а иначе первоначальная загрузка ресурса будет зачастую дольше, чем могла бы, будь ресурс загружен с оригинального домена нашего веб-приложения. Но о поводу подключения шрифта через link preload - да, шикарный метод, но для многих приложений будет через чур... Редко ведь бывает, когда шрифт настолько важен, что без него всё развалится. Разве что вспоминается иконочный шрифт font-awesome, но это что-то совсем нерелевантное в современной фронтенд-разработке :)
Если шрифт на гугл-фонтс не получается найти, то его там и нет и никаким образом скачать его с этого ресурса не выйдет. Нужно обращаться к сторонним сайтам.
📌 Друзья, в телеграмме у нас есть отдельный чат, где вы можете задать вопрос по фронтенд-разработке и вам постараются помочь:
💬 t.me/friendlyFrontendChat
Если вам это интересно, присоединяйтесь, задавайте вопросы и помогайте другим 🙂
Спасибо большое проделанную работу! Объясняется очень грамотно, хоть и очень быстро. Для совсем нуба как я, приходится несколько раз пересматривать. Очень хочется видеть подобные мастер классы где подробно разжованно и по скорости не быстро))) Спасибо!
Привет! Спасибо за обратную связь :) Про скорость - учту в будущих видео.
Отличный канал, так держать, все четко, быстро, по полочкам и по кривой роста, от простого к сложному и офигенные советы по внешним сервисам. Есть момент, глаза красные(периодами), аккуратнее с нагрузками, перегоришь, и мы потеряем такого здравого контентмейкера, спасибо за труд.
В Figma есть плагин "Inspect Styles", который является заменой режима разработчика, а также он показывает какие шрифты используются в макете.
В элемент можно провалиться через все слои зажав левый ctrl.
Гений.... очень сильно жду 2 част, сильно удивлен почему у такого контента так мало сабов... Удачи!!!
Я только начинаю верстать сайт, изучив html и css, и наткнулся на это видео, и здесь ты чётко и понятно объясняешь спс
Видео не для совсем новичков, но все равно ТОП! Автор отвечает на вопросы в комментариях, что дает дополнительную пользу. Лайк и подписка)
Ну чтож, слушать и смотреть приятно. Формат, конечно, ни разу не для новичков, скорее для уверенных середнячков, как раз стадия вылизывания кода
До этого видео верстала страницы по урокам других авторов и думала, что хоть что-то понимаю... Наткнулась на Ваше видео и поняла, что не понимаю на самом деле ничего. Мало того, что скорость просто огромная и приходится ставить максимум на 0.75, так еще и куча вопросов по ходу верстки возникает - гуглить приходится постоянно. Тяжко, но полезно, лишним такой "опыт" не будет. Спасибо Вам за видео👍
Спасибо за уроки! Приятно, что есть люди которые снимают такие видео и обучают других. Кстати через плагин в фигма Font Fascia можно сразу определить все шрифты
Спасибо. Очень хорошая подача инфы без воды.
все шикарно, спасибо за сжатый и полезный контент. Хотелось бы увидеть на практике адаптив с применением min, max, clamp
Привет! В следующих секциях как раз применим min и clamp :)
Канал подача огонь, Большая тебе благадарность
Очень понравилось! чувствуется профессионализм, спасибо большое
Спасибо за видеоурок! 🙂 Не использовал css переменные до вашего ролика... А это настолько потрясающая вещь оказывается))
Саша-красава! Даёшь мастер-класс по фигме со своими приёмчиками, хоткеями и обозначением нюансов!
Так я же не дизайнер 😅
Максимум могу в видео накидать рекомендаций для дизайнера «чтобы разработчику было хорошо» 🙃
Отличный канал, отлично объясняешь. У меня куплен курс в SkillFactory, но понимания по их "текстовому обучению" никакого. Спасибо тебе большое за работу!
Спасибо за ролик и доходчивое объяснение, очень полезно когда начинаешь учится верстать.
блин, очень классный формат, узнал много нового, спасибо!
очень годный и дорогой на знания канал
желаю вам удачи и большого количества подписчиков
Спасибо за видео. Получил ответы на многие вопросы🔥
видео подойдет для тех, кто закончил теорию html css , и собираются практиковаться, идеальная подсказка как делать разные блоки, т. к. очень легко заблудиться в способах реализации
Очень полезный видос!!! Спасибо!
Спасибо за контент , искал решения с SEO - оптимизацие и вот "как правильно прятать " огромное спасибо...
Спасибо за контент! Посмотрел на твоем канале html курс, частично css. Пробую верстать аналогичный макет. В фигме только как я понял режим разработчика сейчас могут включить только платные подписчики
Привет! Угу, дев-мод стал платным, но я советую приноровиться к режиму дизайнера, там не так сложно, мне он даже больше нравится. Ну а для конкретных CSS-свойств теней и градиентов есть различные плагины. Если нужно - напиши в телеграмм чате (ссылка под видео), тебе скинут ссылки.
Александр огромный вам респект за проделанную работу! Жаль что в Figma режим разработчика стал платным(
Если что, есть различные плагины, которые позволяют вытащить стили с элемента в формате CSS-свойств.
Про один из таких давным давно снимал шортс:
ruclips.net/user/shortsWVpYkW-Ktto
(20:23) Привет, при добавлении селектора hover к a, и при наведении на ссылку, у меня перекрашивается вся область нажатия (весь квадрат, с помощью которого мы увеличили область нажатия на эту же ссылку) UPD. Не понял, как это работает, но я написал код ещё раз, и всё заработало, но всё равно спасибо)
Еееееее, Крутяк
круто, спасибо! переменные действительно удобно использовать
Спасибо большое за труд
Ждём 2 часть🎉
Спасибо, всё чётко и грамотно.
Спасибо за курс. Ты крутой.)
А как вы думаете, какие еще инструменты, кроме Figma, могут помочь в анализе макетов? я сам долго выбирал курсы по IT, рассматривал разные компании, но в итоге остановился на Skypro и не пожалел))
Рекламщики Skypro, перестаньте спамить на моём канале, пожалуйста.
Спамер, задал вопрос об инструментах и пропиарил курсы зачем-то... Связи никакой нет, между вопросом и выбором обучающего ресурса.
Pixso
Вы смотрите туториалы из-за хорошего обучения?)
ну мне зашел видео, все по делу, без воды, подача материала очень доходчива, голос конечно решает много, чуток не удобно что на иностранном языке, но это такое - терпимо. подписан - отслеживаю. Кстати что за тема редактора и шрифт? довольно удобно глазу. Еще вопрос от noob - у тебя тег img раскрылся очень удобно - это твой личный snippet или как ?
Привет! Спасибо за обратную связь :)
Тема - Oceanic Dark Theme
Шрифт - JetBrains Mono
жду след урок
Спасибо!
Почему у такого канала так мало подписчиков? :) Спасибо за годный контент для начинающих. Сам пользуюсь WebStorm по студенческой подписке, не расскажешь, что за оформление ты используешь? В плане Color Scheme
Привет! Спасибо за фидбек:)
Тема - Oceanic Dark Theme: plugins.jetbrains.com/plugin/16506-oceanic-dark-theme
@@AleksanderLamkov Большое спасибо)
Коммент в поддержку
огонь
Александр, спасибо за шикарные видео👍 На ближайшее время ваш контент-план примерно понятен. Если не секрет, какие планы далее? Js, React, Vue или все сразу?
Привет! Спасибо за обратную связь! По плану будет JavaScript, средства автоматизации, потом React.
@@AleksanderLamkov ура ура ура!
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
Да, очень четко-структурированный материал. Большое спасибо. Если не секрет, где вы сами учились вёрстке, по каким материалам?
Привет! В 2020-м смотрел “Фрилансер по жизни», делал практические задания на htmlbook.ru/practical, верстал рандомные макеты из фигмы, делал задачки в тренажерах htmlacademy по базовой подписке, ещё прочитал от корки до корки книги «Head First HTML» и «Большая книга CSS».
@AlexanderLamkor, откуда у вас информация, что некоррекно добавлять к элементу button свойство cursor: pointer? 24:34
Вот мой развернутый пост в моем телеграмм-канале:
t.me/friendlyFrontend/323
@@AleksanderLamkov Спасибо за ответ! Статью прочел и рад, что вы пришли к однозначному выводу, что все же курсор кнопке нужен.
22:55 button же по умолчанию inline-block ? размеры можно задавать без указания inline-flex ... Благодарю за уроки! Хорошее, детальное объяснение html и css !
Размеры - можно, а вот центрирование по вертикали через align-items center возможно только при наличии у элемента display flex или inline-flex (ну или схожих грид-значений).
Есть плагин для фигма, который умеет показывать все шрифты и их начертания из макета. Ускоряет определение шрифтов . называется Font Fascia
Привет! Как показывает практика, он схватывает все шрифты, в том числе шрифты из скрытых дизайнером слоев и те, которыми, к примеру, подписываются страницы макета.
Чаще всего дизайнеры оставляют много мусора в макетах и плагин соберет всё что нужно и не нужно.
Но если макет сделан аккуратно и подчищен от лишнего, то да, плагин крут.
В любом случае, спасибо за комментарий!)
@@AleksanderLamkov вот и идея для нового плагина, который показывает шрифты из открытых слоев
Что думаешь насчёт подключения шрифтов с помощью плагина google fonts (для vs code есть такой) ?
Не работал с таким, пользуюсь IDE WebStorm. Если плагин генерирует font-face подключение, то способ будет неплохим :)
@@AleksanderLamkov по завершении курса css, планируешь начать обучение джаваскрипту? если да, то до какого уровня? вообще какие планы по развитию канала? спасибо за ответы =)
Курс по CSS уже закончен, а после этого мастер-класса будет БЭМ, препроцессоры стилей, возможно ещё один мастер-класс по верстке с применением этих знаний, а затем, собственно, курс по JS. Планирую в нём рассказать всё то, что пригодилось мне за последние годы работы, но без специфичных ситуативных API, которых в браузере буквально сотни.
@@AleksanderLamkov очень круто! ваш канал для меня настоящее открытие! спасибо большое
Спасибо большое за качественный контент! Один вопрос, может стоит обернуть в header-e все в контейнер и задать ограничения по ширине контента, что бы на мониторах в 2K кнопки не улетали по углам ?
Ну, тут я бы спросил дизайнера, как он видит эту адаптацию под широкие экраны. Вообще, у нас же первая секция (баннер) ещё на всю ширину растягивается. Без растянутой шапки уже баннер будет выглядеть не так...
Александр, подскажите пожалуйста, почему на 22:23 свойство column-gap срабатывает а margin-right нет?
Свойство 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 { /* стили иконки */ }
Свойство margin-right, примененное к основному элементу (у которого есть псевдоэлемент after), добавило бы внешний отступ справа от псевдоэлемента after.
См. упрощенный пример:
codepen.io/aleksander-lamkov/pen/LYwVvZJ
Нормализация / обнуление делается под каждый проект отдельно в зависимости от особенностей проекта или в каждый проект вставляется стандартный набор селекторов\свойств? Я понял, это отдельная большая тема. Есть ли у Вас видео на эту тему?
Можно смело использовать в каждом проекте.
Видео на канале по этой теме вот:
ruclips.net/video/A4Y5VwXGG9g/видео.htmlsi=KEUl2ozTW8bRhBoj
Александр вопрос. Я новичок и минут 20 не мог понять почему у меня не работает transition для ссылок. Зашел в dev tools и понял, что мешает transition-duration: 0.01ms !important в обнулении стилей. Как только выключил данную функцию все заработало. Эксперимента ради просто поставил после transition для ссылок !important и все так же заработало. Почему на видео работает все с таким набором обнуления стилей?)))
Похоже, что у тебя в настройках браузера (или глобально в настройках операционной системы) стоит пункт «уменьшение количества анимаций» и из-за этого срабатывает медиазпрос prefers-reduced-motion в моем css normalize файле.
18:26 а какая комбинация клавиш, для просмотра отступов? Никак не появляются красные рамки :(
Левый alt вроде бы зажимаю.
Не знаю почему, но псевдоэлемент after прото не видно, хотя если прокликать его через devtools он как бы есть просто невидимый. В итоге сделал его просто png картинкой.
Значит что-то напутал в коде. Сверь с моим репозиторием по ссылке в описании.
Только у меня вопрос касательно БЭМ, это просто так надо, что например селектор header-logo-icon пишется просто через дефис? Я думал что надо писать через 2 нижних подчеркивания типа header__logo, было бы круто услышать об этом (БЭМ) от Вас) А так все супер, пушка, ждем следующий урок!!!
Привет! Этот проект делаем без БЭМ. Про эту методологию я сделаю отдельное видео и затем выпущу дополнительный мастер-класс.
Я думаю, что для лендинга на 5 блоков вообще нет смысла заморачиваться над неймингом и использовать БЭМ (разве что по привычке). Если многостраничник, тогда да
а почему нельзя экспортировать не код svg, а саму картинку в формате svg и потом использовать не код, а саму картинку
Потому что нам нужно иметь возможность влиять на цвет иконки через CSS. А это со статичным файлом-картинкой сделать без выкрутасов не получится.
Александр, уточните, пожалуйста, на 22:16 для класса is-current делаете отступ для кружка через colump-gap:7px, можно ли как альтернативу использовать margin-left: 7px ?
Если нет, подскажите, в чем преимущество colump-gap?
Еще вопрос, вы пишите селектор .header-menu-link.is-current::after, можно ли указать селектор просто .is-current::after ?
Спасибо за ваши уроки.
Преимущество column-gap в том, что отступ задается для родителя, а не для дочернего элемента. Это зачастую удобнее. А ещё, если вдруг одного из элементов флекс-контейнера не будет, то у единственного оставшегося дочернего элемента margin-left выполнял бы в таком случае лишнюю работу. Свойство column-gap получается универсальнее, т. к. оно добавляет отступы только, если дочерних элементов 2 и более штук.
По поводу второго вопроса. Нет, селектор .is-current::after {} писать не стоит, т. к. is-current - класс-модификатор и в теории может повториться где-нибудь ещё, поэтому нужна конкретизация, привязка к header-menu-link.
@@AleksanderLamkov Спасибо за ответ!
Я ЛЮБЛЮ ТЕБЯ...
возможно многие знают, но лишним не будет, в редакторе vsCode с помощью плагина google fonts можно подключать шрифты прямо в код. так легче и быстрее
Да, есть такой плагин, спасибо за комментарий!
Но должен предупредить, что самый оптимальный способ шрифтов с точки зрения производительности - через font-face и обращение к локальным файлам.
Как подключение через плагин работает - не помню.
Можно использовать плагин «Font Fascia», показывает все используемые шрифты
Да, но по крайней мере раньше с ним была проблема: он показывал в т. ч. шрифты со скрытых (невидимых) слоев. Дизайнеры, особенно начинающие, нередко оставляют в макете много результатов экспериментов, то есть мусора, а потом плагин выдает десяток семейств шрифтов, из которых реально в проекте требуется 1-2 😅
Спасибо! Очень полезно и понятно для новичка.
Осталось несколько вопросов, подскажите, пожалуйста:
1. Почему padding-top для класса header задается только в медиазапросе?
2. Зачем свойство line-height кнопкам?
3. Почему max-width именно 1024px? Это какая-то общепринятая величина или "на глаз"?
Привет!
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/, но в целом это не принципиально, стандартов нет.
@@AleksanderLamkov Все поняла. Спасибо большое!
сейчас в бесплатной версии фигмы нет режима разработчика или я что-то делаю не так?
Верно. Глянь это:
Figma • Инспектирование стилей без DevMode • Плагин Inspect Styles
ruclips.net/user/shortsWVpYkW-Ktto?feature=share
Подскажите, в header при увеличении масштаба видно, что текст меню и кнопки book-button не совсем по центру высоты header. Как сделать точно по центру?
Напиши о проблеме в чат коммьюнити, тебе помогут:
t.me/friendlyFrontendChat
Помог margin-top: 2px; - для меню
Кажется, что можно без этого обойтись. Нет особого смысла пиксель-перфект делать.
Кто ты, Воин?))))
Хэдеру лучше указать фиксированную ширину 1856рх. Иначе на больших экранах (больше 1920) шапка разъедется на всю ширину экрана. Я указал 1876 и паддинги по 10рх слева и справа.
Max-width? Да, пригодился бы.
@@AleksanderLamkov Так точно :)
23:51 почему у кнопки задана высота, если можно было padding по всем сторонам?
Если задавать высоту кнопкам через вертикальные внутренние отступы, то чтобы высота соответствовала макету, нужно учитывать размер шрифта и указывать отступы по формуле ((height - font-size) / 2). Это - сложно. Гораздо удобнее и надежнее написать высоту через фиксированное значение для свойство height.
Нашел удобный плагин в фигме, он отображает название и начертание сразу всех шрифтов используемых в макете, называется плагин Font Fascia
* только учтите, что плагин покажет шрифты и из скрытых дизайнером слоев тоже
А так да, полезный плагин, если пользоваться им с умом.
Здравствуйте! Хотелось бы узнать у вас, почему cursor: pointer для кнопок считается некорректным UX-ом?
Вот есть статья, раскрывающая эту тему:
adamsilver.io/blog/buttons-shouldnt-have-a-hand-cursor/
Но я пересмотрел свой взгляд на этот вопрос. Пришел к выводу, что всё же надо кнопкам прописывать cursor pointer. К этому привыкло большинство пользователей веба.
Спасибо вам за ответ!
Теперь, как известно, функция под кнопкой dev в figma стала платной. Есть ли альтернативные средства измерения растояния между элементами?
Расстояния можно и в режиме дизайнера увидеть. А для конкретных CSS-свойств - плагин Inspect Styles.
Perfect pixel -уже не канон ? Или где-то требуют его использование ?
В начале карьеры имеет смысл перепроверять себя, накладывая макет на сверстанный сайт, чтобы увидеть грубые расхождения.
С опытом же приходит понимание, что эта проверка имеет смысл лишь с идеально разработанными макетами. Ну а таких я за карьеру ещё не встречал.
Спасибо вам за интересный практический урок. Можно спросить - почему вы полностью копируете и вставляете код из файла normalize, а не подключаете его в папке CSS, вместе с файлом style.css? Копировать и вставлять код этого файла чем-то лучше?
Привет! Спасибо за обратную связь :)
На самом деле особой разницы в способах подключения нормалайза нет, но если подключать отдельным файлом, в конечном приложении на сервер будет выполняться +1 запрос, из-за чего загрузка сайта в целом будет чуть медленнее. Но там такие крохи, что ими можно пренебречь. На этапе обучения тем более. Так что делай так, как тебе удобно.
Привет! А как сделать так, чтобы при разворачиваии тега кнопкой Tab ее атрибуты были на разных строках и чтобы у одинарных тегов в конце был символ слеша?
Привет! Это нужно сниппеты настроить. Напиши в чат, тебе помогут:
t.me/friendlyFrontendChat
А что это за прога скриншотер у тебя такая, не подскажешь?) Спасибо)
Привет! TeamPaper Snap.
Просмотрел ваши видео с курсами по css html. Возможно так плохо смотрел и конспектировал, но вообще не понял про max-width: calc(var(--container-width) + var(container-padding-x) * 2). Почему --container-width не дает реальных 1300px ограничения контентной области? По функции calc понял, почитал, но почему именно 1300 + 15 * 2 = 1300 я не понимаю. Буду рад, если объхясните или прикрепите ссылки на статьи, где можно почитать почему так
Привет! Всё дело в 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: ruclips.net/video/oQDNPNZ72Ig/видео.htmlsi=_XBV85Ab36VVfzYy
@@AleksanderLamkov Спасибо за подробный ответ, все понял)❤
Привет, ранее посмотрел видео по БЭМ методологии, хочу уточнить почему не используется в этом курсе? Она вовсе необязательна получается?
Привет! В этом мастер-классе специально не делал по методологии, чтобы новичкам было попроще. БЭМ для верстки нужен, без него получается грязновато. В следующем мастер-классе будет и БЭМ и препроцессор стилей.
@@AleksanderLamkov Спасибо большое за ответ! Жду с нетерпением следующего! С наступающим!
привет, вот интересует вопрос: можно ли создать переменную в которой будет 3 правила? мне нужно создать border цвет которого будет в градиенте, а создать его можно только с помощью свойств: border, border-image-source, border-image-slice. можно ли уместить эти 3 правила в одну переменную?
Привет! Не получится. То, что ты описываешь, похоже на миксины из препроцессоров (SCSS, PostCSS, Less). В обычном же CSS я бы предложил просто создать утилитарный класс gradient-border и добавлять его тем элементам в разметке, где он нужен.
@@AleksanderLamkov Спасибо, я слышал когда то про миксины, но вылетело из головы. у тебя качественные уроки, продолжай в том же духе)
Подскажите , актуально ли верстать блоки используя position в наше время?
Привет! Свойство position (и свойства top / right / bottom/ left) всегда предназначались для конкретных ситуаций: расположить элемент относительно одного из родительских элементов или же относительно всей страницы. Применять эти свойства нужно максимально осознанно, так как они выбивают элементы из потока документа.
Я могу предположить, что такой вопрос возникает из-за свойств position, top, left, right, bottom, которые показывает Figma в правой колонке при анализе любого блока. Если так, то нет, на эти свойства мы никогда не обращаем внимания, в реальной верстке на уровне кода такое не используется.
@@AleksanderLamkov просто с помощью position легче как то размещать эл-ты зная сколько отступ от левого края от верха, например. С помощью флексов так же нельзя задать вроде-бы, что бы допустим логотип расположить с определенно заданными отступами
Не стоит такое через position делать, лучше при необходимости задавать внутренние отступы padding родительской обертке.
@@AleksanderLamkov смотрите такой пример: у нас есть блок шириной 1000px , в нем есть допустим 1 логотип сверху блока, но он не по центру, что бы использовать justify-content, а допустим от левого края 400px располагается, вот как такой вопрос решить с помощь флекса, что бы не использовать position, потому что флекс поможет допустим по центру расположить, а паддинг 400пх тоже врядли сделаешь. Подскажите пожалуйста, если не сложно
Любая верстка должна быть прежде всего адаптивной и если на макете мы видим элемент шириной 1000px и внутри него в 400px от левой границы располагается другой элемент, то я бы задал для этого внутреннего элемента margin-left: 40%, что будет равняться как раз 400px.
Но такая ситуация в принципе очень редко может возникнуть.
Если на уровне кода вместо костылей с фиксированными значениями в ущерб нескольким пикселям смещения можно использовать изящное решение в пару строк, то стоит этим воспользоваться.
Макет нередко бывает кривым и неидеальным, где начинающий дизайнер "на глаз" делал центрирование элементов, но это ведь не значит, что на уровне кода нам нужно повторять все его ошибки.
Вы ширину и высоту логотипа прописали прям в html а не в css, интересно, чем это обусловленно. Нет ли риска в последствии забыть где записаны параметры величины?
Привет! Это для разных целей. В разметке это нужно для того, чтобы при загрузке страницы браузер зарезервировал место под загружаемое в дальнейшем изображение.
Далее мы можем в стилях менять размеры как нам нужно. Просто я не указывал (до момента адаптива), так как в этом не было необходимости.
Эммм.. 2:10 фонт фасция ? так же проще .. не?
В данном случае этот плагин не поможет, только запутает, так как покажет десятки других семейств, используемых в макете.
И зачастую в макетах дизайнеры не подчищают «экспериментальные» слои, а скрывают, но FontFacia покажет данные без разбора, в т. ч. и по этим скрытым слоям.
Здравствуйте figma отображает css стили только в платной теперь версии и как оплатить?
Можно использовать плагин Inspect Styles, снимал про это шортс:
ruclips.net/user/shortsWVpYkW-Ktto?si=m3ycNJCjhIgckmCb
Спасибо!
Везде слышу что надо использовать препроцессоры а у вас css с переменными. Как понять когда что использовать? Говорят что просто css уже не используется
Привет! Этот мастер-класс для новичков, в следующем уже используется препроцессор стилей Sass: ruclips.net/p/PL0MUAHwery4rdZt-8E9p9zty2ZUCH6Ai3&si=JITgUcpklw4we2aU
Замена фигме- программа Pixso практически аналог фигме.
Почему платную используешь, а не vscode?
Для меня WebStorm намного удобнее. Как три года назад познакомился с этой IDE, так VSCode уже не могу нормально воспринимать.
а почему нельзя подключать шрифт из самого google ? зачем их локально грузить ?
Локально надежнее. Так у тебя посетитель сайта будет совершать запросы только к одному домену, к твоему.
24:38 почему cursor: pointer на кнопке это некорректный UX, когда почти все кнопки в вебе имеют это свойство?
Вот тут можно почитать про это: medium.com/simple-human/buttons-shouldnt-have-a-hand-cursor-b11e99ca374b
Как то все иначе верстается , не как у всех)) . Это как один из вариантов верстки ? Урок интересный!
А в чем именно иначе? Я сам еще 4 года назад смотрел много видео по верстке. Уже не особо помню, что там было в деталях, но моя нынешняя техника разработки не кардинально ведь отличается от того, что люди делали раньше. Просто больше думаю наперед, использую переменные, calc, современные единицы измерения.
@@AleksanderLamkov вот я об этом и говорю ,что все в основном используют другие методы ,без переменных и root. Начиная со шрифтов ,в основном через HTML ссылку вставляют ,сброс стилей через reset или narmolize. Я новичок и многое для меня еще не понятно ). Вас смотрю ,так как вы реально работаете ,а не просто впариваете курсы . Респект вам.
А зачем писать padding-inline когда можно написать padding:0px 26px; ? в этом есть какая то разница или можно писать так как мне удобно ?
Это новый синтаксис и, на мой взгляд, более правильный.
Зачем лишний раз сбрасывать вертикальные внутренние отступы в 0?
Лучше точечно задать горизонтальные отступы отдельным свойством padding-inline.
Вы начинаете с css а не с html -разметки, как большинство в видео. В чём преимущество?
В любом проекте требуется нормализация свойств, глобальные свойства, переменные. Удобнее подготовить всё это заранее, в самом начале разработки на этапе анализа макета, чтобы позже к этому не возвращаться.
@@AleksanderLamkov Спасибо. Много того, что не дают на других видео-уроках . Интересно.
Видео урок все же для середнячков ) . Не пойму ,почему добавляю svg (полосочки бургер) они у меня не отображаются . Все делаю как на видео ( .
Скорее всего не так выгрузил иконку из макета. Убедись, что перед импортом выбран нужный слой, как на видео.
Или скинь текущее состояние проекта архивом в телеграмме t.me/friendlyFrontendChat, я тебе помогу.
Ну а про уровень необходимой подготовки перед этим мастер-классом - он соответствует моему контент-плану на канале, а именно - всем предыдущим видео, включая курсы HTML и CSS. Если смотреть всё последовательно, то особых сложностей возникнуть не должно.
@@AleksanderLamkov у меня отдельно ни как не выбираются эти полоски ,только целиком с кругом и квадратным серым фоном 🥴. Выбирать если что отдельные элементы в фигме,умею .
@@AleksanderLamkov сейчас кину. Благодарю
12:03 Ладно, я пошёл
Я тоже
что делать если режим разработчика не работает? есть ли какая то альтернатива?
Какой у тебя браузер? Каким способом пытаешься открыть?
@@AleksanderLamkov я про режим разработчика в фигме, забыл уточнить
@user-sd1ig4sb3u вот тут рассказывал:
Figma • Инспектирование стилей без DevMode • Плагин Inspect Styles
ruclips.net/user/shortsWVpYkW-Ktto?feature=share
container-padding-x это что означает?
Привет! CSS-переменная со значением внутреннего отступа по оси Х, то есть по горизонтали, слева и справа, для утилитарного класса container.
Этот класс используется для ограничения ширины контентной части и чтобы контент при сужении экрана не слипался с краями, нужно добавлять внутренние отступы слева и справа (padding-inline).
@@AleksanderLamkov спасибо
Какая польза скачивать шрифт а не подключать ссылку с гугл? исключить риск, что гугл рухнет?
Привет! Чтобы не грузить ничего лишнего, чтобы грузился лишь нужный woff2 формат файла.
Добрый день.У меня вместо Heebo и норм текста какая то кириллица(
Привет! Напиши сюда, тебе помогут:
t.me/friendlyFrontendChat
Можешь сразу скинуть код, так будет проще тебе помочь.
я сразу в ступоре - я нашел 5 шрифтов , почему без плагина на поиск шрифтов ?
Потому что плагин находит все шрифты макета, в т. ч. из скрытых мусорных слоев, который оставил дизайнер пока творил. К тому же в этом макете аж 9 лендингов в одном месте, так что неудивительно, что найдено 5 разных шрифтов.
@@AleksanderLamkov этот макет открывал в отдельном файле без других макетов, и если внимательно потыкаешь по тексту то увидишь 5 разных шрифтов
Можешь подсказать какие именно? У меня сейчас нет возможности посмотреть макет детально с телефона.
Я находил только два семейства - Heebo и Yantramanav. Heebo в двух начертаниях - light (300) и bold (700), а Yantramanav только bold (700).
Может там новые появились? Автор макета мог что-то обновить.
@@AleksanderLamkov (div.gmnoprint , div.gm-style-cc - два элемента , div.gmnoprint ) Roboto Regular и Medium. Это на карте внизу мелким шрифтом - совсем незаметно, и вверху два слова Map + Satelite. Есть еще иконочные шрифты - но то другая история. Мне очень понравилась подача материала, сделал скорость воспроизведения чуток медленнее и все стало хорошо )))
Шрифты с карты не нужно учитывать точно. Слой карты все равно выгружается как картинка. А иконочный шрифт - архаизм, нужно иконки делать как .
Совершенно отлиичащийся подход в CSS.. мало кто использует рут в вертке для новичков...
Возможно. Но на канале есть материалы по этим темам, поэтому новички не должны запутаться :)
Жизнь выглядит прекрасно до момента когда начинаешь изучать @media 😢 Когда уже не понимаешь что лучше использовать vw px или %.
Если есть совет какой нибудь, буду очень благодарен. Не могу понять где что лучше использовать
Привет! В большинстве случаев можно оперировать связкой из width: 100% + max-width: 1000px, где 1000px - ширина элемента в десктопной версии макета.
А при сужении экрана следишь за тем, чтобы всё смотрелось органично, и, если начинает выглядеть не очень, начинаешь либо ограничивать в % ширину текущего и/или соседних в ряде элементов, либо банально перестраиваешь элементы из одного ряда в колонку (либо уменьшаешь количество колонок, если речь изначально идет о многоколоночной грид/флекс-сетке).
@@AleksanderLamkov Спасибо за ответ
Александр, почему в начале почти каждого видео у вас красные глаза?(
Берегите себя🥺
Многочасовые съемки под ярким холодным светом так влияют 🥲
В последнее время решил записывать основную часть видеоуроков (сами скринкасты) без вебкамеры, теперь моим глазам гораздо комфортнее 🙂
Если честно, то непонятно зачем качать шрифты с гугла и тянуть в бандл. Если шрифт популярный, то он с высокой вероятностью уже есть закэшированный в браузере. Гугл фонт кэшируется на год вроде. Здесь конечно не самые популярные шрифты, но все же. Выгода такого подхода очевидна. Это и применимо к куче библиотек, типа бутстрапов, jquery и т.д.
Чем больше сайтов будет пользоваться загрузкой с гугла, тем выгодее это будет для всех)
Если еще немного упороться в оптимизацию выгоднее всего подключить шрифт не через css,а через линк в html, ближе к началу файла, чтобы браузер при загрузке html и парсинга его уже поставил шрифт на прелоад. (если его все же не будет в кэше). Первый пакет данных 14кб, хватает на весь с лихвой. В итоге когда загрузится весь остальной контент для отрисовки страницы, то шрифт уже подгрузится скорее всего))
Спасибо за развернутый комментарий! Да, тема подключения ресурсов через CDN жива, но работая последние годы в продуктовых командах, слышал множество мнений против публичных CDN по множеству причин:
- публичный CDN сервер нам (компании, для которой мы разрабатываем веб-приложение) не принадлежит, для некоторых бизнесов это бывает важно;
- мы не можем повлиять на параметры кеширования, только согласиться с существующими;
- приходится надеятся на то, что загружаемый с CDN ресурс достаточно популярен и у ЦА с бОльшей вероятностью уже закеширован, а иначе первоначальная загрузка ресурса будет зачастую дольше, чем могла бы, будь ресурс загружен с оригинального домена нашего веб-приложения.
Но о поводу подключения шрифта через link preload - да, шикарный метод, но для многих приложений будет через чур... Редко ведь бывает, когда шрифт настолько важен, что без него всё развалится. Разве что вспоминается иконочный шрифт font-awesome, но это что-то совсем нерелевантное в современной фронтенд-разработке :)
Почему нет функции скачать шрифт на гугл фонтс? Если ли способ это сделать сторонники источниками?
Если шрифт на гугл-фонтс не получается найти, то его там и нет и никаким образом скачать его с этого ресурса не выйдет. Нужно обращаться к сторонним сайтам.
а вот для чего это
Что именно?)