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

Поділитися
Вставка
  • Опубліковано 23 гру 2024

КОМЕНТАРІ • 221

  • @AleksanderLamkov
    @AleksanderLamkov  Рік тому +6

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

  • @ВладиславМарюхин-э4с
    @ВладиславМарюхин-э4с 9 місяців тому +13

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

    • @AleksanderLamkov
      @AleksanderLamkov  9 місяців тому +4

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

  • @itobold
    @itobold Рік тому +11

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

  • @ИванТуманов-е2ш
    @ИванТуманов-е2ш 10 місяців тому +8

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

  • @K0mariki
    @K0mariki 10 місяців тому +12

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

  • @cheetprogram
    @cheetprogram 21 день тому +3

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

  • @Whynot-lx8nl
    @Whynot-lx8nl Рік тому +8

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

  • @sartjhon3300
    @sartjhon3300 Рік тому +4

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

  • @НариманАскеров-х6и
    @НариманАскеров-х6и 4 місяці тому +3

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

  • @denisd3218
    @denisd3218 Рік тому +6

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

  • @unlimitedgames8357
    @unlimitedgames8357 Рік тому +7

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

    • @AleksanderLamkov
      @AleksanderLamkov  Рік тому +6

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

  • @egorrublev5529
    @egorrublev5529 Рік тому +14

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

  • @Dreamer_78
    @Dreamer_78 10 місяців тому +2

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

  • @ЛисЛис-д8м
    @ЛисЛис-д8м 9 місяців тому +2

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

  • @Tehnokrott
    @Tehnokrott 4 місяці тому +2

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

    • @AleksanderLamkov
      @AleksanderLamkov  4 місяці тому +1

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

  • @UmarUlbiev
    @UmarUlbiev 4 місяці тому +2

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

  • @dini9036
    @dini9036 26 днів тому +1

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

  • @OnlyProg-dm9gc
    @OnlyProg-dm9gc 5 місяців тому +2

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

  • @ГуФаРиККоН
    @ГуФаРиККоН 20 днів тому +1

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

  • @steiden1
    @steiden1 Рік тому +5

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

  • @AntonSchmidt-ik7qq
    @AntonSchmidt-ik7qq 3 місяці тому +2

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

  • @aLeKseU852
    @aLeKseU852 10 місяців тому +5

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

    • @AleksanderLamkov
      @AleksanderLamkov  10 місяців тому +2

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

  • @errxrcxde8265
    @errxrcxde8265 Рік тому +4

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

  • @СергейЖелезняк-ч8я
    @СергейЖелезняк-ч8я 6 місяців тому +2

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

  • @dimasnytin
    @dimasnytin Рік тому +3

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

  • @mouri_san
    @mouri_san 4 місяці тому +2

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

  • @dimasnytin
    @dimasnytin Рік тому +2

    Ждём 2 часть🎉

  • @idg817
    @idg817 5 місяців тому +2

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

  • @memasracing3681
    @memasracing3681 13 днів тому +2

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

    • @AleksanderLamkov
      @AleksanderLamkov  13 днів тому +1

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

  • @andreymolokankin5634
    @andreymolokankin5634 21 день тому +2

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

  • @MauroCesario-o8d
    @MauroCesario-o8d 5 місяців тому +52

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

    • @AleksanderLamkov
      @AleksanderLamkov  5 місяців тому +1

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

    • @0percot926
      @0percot926 5 місяців тому

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

    • @yygdr-
      @yygdr- 4 місяці тому

      Pixso

    • @UmarUlbiev
      @UmarUlbiev 4 місяці тому +1

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

  • @PavelChupryna
    @PavelChupryna 7 місяців тому +2

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

  • @Bit_Maximum
    @Bit_Maximum Рік тому +4

    Спасибо!

  • @АндрійЛємак
    @АндрійЛємак 9 місяців тому +1

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

    • @AleksanderLamkov
      @AleksanderLamkov  9 місяців тому +1

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

  • @idknope111
    @idknope111 Рік тому +3

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

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

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

  • @svitboomer8840
    @svitboomer8840 Рік тому +4

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

  • @offernity2707
    @offernity2707 2 місяці тому +1

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

    • @AleksanderLamkov
      @AleksanderLamkov  2 місяці тому +2

      Свойство 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
      @AleksanderLamkov  2 місяці тому +1

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

  • @Zhenkaaf
    @Zhenkaaf 7 днів тому

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

    • @AleksanderLamkov
      @AleksanderLamkov  7 днів тому +1

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

  • @Alex-y3n9s
    @Alex-y3n9s Рік тому +4

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

    • @AleksanderLamkov
      @AleksanderLamkov  Рік тому +7

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

    • @mushroom2267
      @mushroom2267 Рік тому +3

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

  • @alenache1
    @alenache1 Рік тому +4

    огонь

  • @orman4021
    @orman4021 10 місяців тому +3

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

    • @AleksanderLamkov
      @AleksanderLamkov  10 місяців тому +2

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

    • @orman4021
      @orman4021 10 місяців тому +1

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

  • @progover24
    @progover24 Рік тому +7

    жду след урок

  • @kiralatysheva6794
    @kiralatysheva6794 Рік тому +3

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

    • @AleksanderLamkov
      @AleksanderLamkov  Рік тому +6

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

  • @dini9036
    @dini9036 26 днів тому

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

  • @hyperpocket.
    @hyperpocket. 11 місяців тому

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

    • @AleksanderLamkov
      @AleksanderLamkov  11 місяців тому +3

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

  • @kiralatysheva6794
    @kiralatysheva6794 Рік тому +2

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

    • @AleksanderLamkov
      @AleksanderLamkov  Рік тому +1

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

    • @kiralatysheva6794
      @kiralatysheva6794 Рік тому +2

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

    • @AleksanderLamkov
      @AleksanderLamkov  Рік тому +3

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

    • @kiralatysheva6794
      @kiralatysheva6794 Рік тому +2

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

  • @ВиталийДавыдов-э4г
    @ВиталийДавыдов-э4г 10 місяців тому +1

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

    • @AleksanderLamkov
      @AleksanderLamkov  10 місяців тому +1

      Можно смело использовать в каждом проекте.
      Видео на канале по этой теме вот:
      ua-cam.com/video/A4Y5VwXGG9g/v-deo.htmlsi=KEUl2ozTW8bRhBoj

  • @Serega2831
    @Serega2831 5 місяців тому +2

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

    • @AleksanderLamkov
      @AleksanderLamkov  5 місяців тому +2

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

  • @ЕленаГунина-ш6э
    @ЕленаГунина-ш6э 7 місяців тому

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

    • @AleksanderLamkov
      @AleksanderLamkov  7 місяців тому

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

    • @ЕленаГунина-ш6э
      @ЕленаГунина-ш6э 7 місяців тому

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

  • @offernity2707
    @offernity2707 2 місяці тому +1

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

    • @AleksanderLamkov
      @AleksanderLamkov  2 місяці тому +2

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

  • @ВладимирПетров-т7ч
    @ВладимирПетров-т7ч 4 місяці тому +1

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

    • @AleksanderLamkov
      @AleksanderLamkov  4 місяці тому +2

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

    • @ВладимирПетров-т7ч
      @ВладимирПетров-т7ч 2 місяці тому

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

    • @AleksanderLamkov
      @AleksanderLamkov  2 місяці тому

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

  • @alialiev4667
    @alialiev4667 3 місяці тому

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

    • @AleksanderLamkov
      @AleksanderLamkov  3 місяці тому

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

  • @liza_beg
    @liza_beg 11 місяців тому

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

    • @AleksanderLamkov
      @AleksanderLamkov  11 місяців тому

      Привет!
      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
      @liza_beg 11 місяців тому

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

  • @hermaeuusmora
    @hermaeuusmora Місяць тому +1

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

    • @AleksanderLamkov
      @AleksanderLamkov  Місяць тому +1

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

  • @gamerstv9985
    @gamerstv9985 5 місяців тому

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

    • @AleksanderLamkov
      @AleksanderLamkov  5 місяців тому +3

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

    • @gamerstv9985
      @gamerstv9985 5 місяців тому

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

  • @smotritelyoutube
    @smotritelyoutube Рік тому +3

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

    • @AleksanderLamkov
      @AleksanderLamkov  Рік тому +3

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

    • @Alex-y3n9s
      @Alex-y3n9s Рік тому +1

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

  • @evgenmarfel
    @evgenmarfel 10 місяців тому +2

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

    • @AleksanderLamkov
      @AleksanderLamkov  10 місяців тому +2

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

    • @evgenmarfel
      @evgenmarfel 10 місяців тому

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

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

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

    • @AleksanderLamkov
      @AleksanderLamkov  Рік тому +4

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

  • @volkodav14.1
    @volkodav14.1 10 місяців тому

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

  • @evgeniy3370
    @evgeniy3370 6 місяців тому

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

    • @AleksanderLamkov
      @AleksanderLamkov  6 місяців тому +2

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

  • @MBa1201
    @MBa1201 5 місяців тому

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

    • @AleksanderLamkov
      @AleksanderLamkov  5 місяців тому +1

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

  • @ВладЛитвин-с6д
    @ВладЛитвин-с6д Рік тому

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

    • @AleksanderLamkov
      @AleksanderLamkov  Рік тому +2

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

  • @volk_99
    @volk_99 4 місяці тому

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

    • @AleksanderLamkov
      @AleksanderLamkov  4 місяці тому

      Можно использовать плагин Inspect Styles, снимал про это шортс:
      ua-cam.com/users/shortsWVpYkW-Ktto?si=m3ycNJCjhIgckmCb

    • @volk_99
      @volk_99 4 місяці тому

      Спасибо!

  • @Tehnokrott
    @Tehnokrott 4 місяці тому

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

    • @AleksanderLamkov
      @AleksanderLamkov  4 місяці тому +2

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

  • @HungerGames911
    @HungerGames911 Рік тому

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

    • @AleksanderLamkov
      @AleksanderLamkov  Рік тому +1

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

    • @HungerGames911
      @HungerGames911 Рік тому

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

    • @AleksanderLamkov
      @AleksanderLamkov  Рік тому +2

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

    • @HungerGames911
      @HungerGames911 Рік тому

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

    • @AleksanderLamkov
      @AleksanderLamkov  Рік тому +2

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

  • @ВладЛитвин-с6д
    @ВладЛитвин-с6д Рік тому

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

    • @AleksanderLamkov
      @AleksanderLamkov  Рік тому +1

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

    • @ВладЛитвин-с6д
      @ВладЛитвин-с6д Рік тому +1

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

  • @user-itgen
    @user-itgen 8 місяців тому

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

    • @AleksanderLamkov
      @AleksanderLamkov  8 місяців тому +1

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

  • @frodo5190
    @frodo5190 9 місяців тому +2

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

  • @fjarrling
    @fjarrling Рік тому

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

    • @AleksanderLamkov
      @AleksanderLamkov  Рік тому +2

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

    • @fjarrling
      @fjarrling Рік тому +2

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

  • @beetleGP
    @beetleGP 7 днів тому

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

    • @AleksanderLamkov
      @AleksanderLamkov  7 днів тому +1

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

    • @beetleGP
      @beetleGP 7 днів тому

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

  • @alexander_stark
    @alexander_stark Рік тому +1

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

    • @AleksanderLamkov
      @AleksanderLamkov  Рік тому +1

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

  • @DSW-
    @DSW- 9 місяців тому

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

    • @AleksanderLamkov
      @AleksanderLamkov  9 місяців тому +2

      Привет! Всё дело в 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: ua-cam.com/video/oQDNPNZ72Ig/v-deo.htmlsi=_XBV85Ab36VVfzYy

    • @DSW-
      @DSW- 9 місяців тому

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

  • @ВиталийДавыдов-э4г
    @ВиталийДавыдов-э4г 9 місяців тому

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

    • @AleksanderLamkov
      @AleksanderLamkov  9 місяців тому +1

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

  • @ДенисДенис-ш6ю
    @ДенисДенис-ш6ю 3 місяці тому

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

    • @AleksanderLamkov
      @AleksanderLamkov  3 місяці тому +1

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

  • @ВиталийДавыдов-э4г
    @ВиталийДавыдов-э4г 10 місяців тому

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

    • @AleksanderLamkov
      @AleksanderLamkov  10 місяців тому

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

  • @profesor2009
    @profesor2009 8 місяців тому

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

    • @AleksanderLamkov
      @AleksanderLamkov  8 місяців тому +1

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

  • @ShocKKKKKKK
    @ShocKKKKKKK 10 місяців тому

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

  • @РоманВолков-д9щ
    @РоманВолков-д9щ 4 місяці тому

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

    • @AleksanderLamkov
      @AleksanderLamkov  4 місяці тому +3

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

  • @asifabbasov3801
    @asifabbasov3801 11 місяців тому

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

    • @AleksanderLamkov
      @AleksanderLamkov  11 місяців тому +1

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

    • @asifabbasov3801
      @asifabbasov3801 11 місяців тому

      @@AleksanderLamkov спасибо

  • @АлександрБондарев-н5у
    @АлександрБондарев-н5у 8 місяців тому +2

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

  • @aswarriorr
    @aswarriorr 11 місяців тому

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

    • @AleksanderLamkov
      @AleksanderLamkov  11 місяців тому +1

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

    • @AleksanderLamkov
      @AleksanderLamkov  11 місяців тому +1

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

    • @AleksanderLamkov
      @AleksanderLamkov  11 місяців тому +1

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

    • @aswarriorr
      @aswarriorr 11 місяців тому

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

    • @aswarriorr
      @aswarriorr 11 місяців тому

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

  • @idcwhrejustfar
    @idcwhrejustfar 3 місяці тому

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

    • @AleksanderLamkov
      @AleksanderLamkov  3 місяці тому

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

    • @idcwhrejustfar
      @idcwhrejustfar 3 місяці тому

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

    • @AleksanderLamkov
      @AleksanderLamkov  3 місяці тому +1

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

  • @ВиталийДавыдов-э4г
    @ВиталийДавыдов-э4г 10 місяців тому

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

    • @AleksanderLamkov
      @AleksanderLamkov  10 місяців тому +2

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

  • @AlexanderPuhckov
    @AlexanderPuhckov 4 місяці тому

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

    • @AleksanderLamkov
      @AleksanderLamkov  4 місяці тому +1

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

  • @ВиталийДавыдов-э4г
    @ВиталийДавыдов-э4г 10 місяців тому

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

    • @AleksanderLamkov
      @AleksanderLamkov  10 місяців тому +2

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

    • @ВиталийДавыдов-э4г
      @ВиталийДавыдов-э4г 10 місяців тому +2

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

  • @АндрійЛємак
    @АндрійЛємак 9 місяців тому

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

    • @AleksanderLamkov
      @AleksanderLamkov  9 місяців тому

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

    • @АндрійЛємак
      @АндрійЛємак 9 місяців тому

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

    • @AleksanderLamkov
      @AleksanderLamkov  9 місяців тому

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

    • @АндрійЛємак
      @АндрійЛємак 9 місяців тому

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

    • @AleksanderLamkov
      @AleksanderLamkov  9 місяців тому

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

  • @aswarriorr
    @aswarriorr 11 місяців тому

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

    • @AleksanderLamkov
      @AleksanderLamkov  11 місяців тому +1

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

    • @aswarriorr
      @aswarriorr 11 місяців тому +2

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

  • @it400
    @it400 Місяць тому

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

    • @AleksanderLamkov
      @AleksanderLamkov  Місяць тому +1

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

  • @Дари-щ9г
    @Дари-щ9г 6 місяців тому

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

    • @AleksanderLamkov
      @AleksanderLamkov  6 місяців тому +1

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

  • @beetleGP
    @beetleGP 7 днів тому

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

  • @pablo_barnes7329
    @pablo_barnes7329 5 місяців тому +1

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

  • @flowcsgo804
    @flowcsgo804 7 місяців тому

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

    • @AleksanderLamkov
      @AleksanderLamkov  7 місяців тому +2

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

  • @ManOzbilis
    @ManOzbilis 9 місяців тому +1

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

    • @AleksanderLamkov
      @AleksanderLamkov  9 місяців тому +2

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

    • @ManOzbilis
      @ManOzbilis 9 місяців тому +1

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

  • @alexander_stark
    @alexander_stark Рік тому +1

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

    • @AleksanderLamkov
      @AleksanderLamkov  Рік тому +2

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

  • @Mr.Bellamy
    @Mr.Bellamy Рік тому +3

    Если честно, то непонятно зачем качать шрифты с гугла и тянуть в бандл. Если шрифт популярный, то он с высокой вероятностью уже есть закэшированный в браузере. Гугл фонт кэшируется на год вроде. Здесь конечно не самые популярные шрифты, но все же. Выгода такого подхода очевидна. Это и применимо к куче библиотек, типа бутстрапов, jquery и т.д.
    Чем больше сайтов будет пользоваться загрузкой с гугла, тем выгодее это будет для всех)
    Если еще немного упороться в оптимизацию выгоднее всего подключить шрифт не через css,а через линк в html, ближе к началу файла, чтобы браузер при загрузке html и парсинга его уже поставил шрифт на прелоад. (если его все же не будет в кэше). Первый пакет данных 14кб, хватает на весь с лихвой. В итоге когда загрузится весь остальной контент для отрисовки страницы, то шрифт уже подгрузится скорее всего))

    • @AleksanderLamkov
      @AleksanderLamkov  Рік тому +4

      Спасибо за развернутый комментарий! Да, тема подключения ресурсов через CDN жива, но работая последние годы в продуктовых командах, слышал множество мнений против публичных CDN по множеству причин:
      - публичный CDN сервер нам (компании, для которой мы разрабатываем веб-приложение) не принадлежит, для некоторых бизнесов это бывает важно;
      - мы не можем повлиять на параметры кеширования, только согласиться с существующими;
      - приходится надеятся на то, что загружаемый с CDN ресурс достаточно популярен и у ЦА с бОльшей вероятностью уже закеширован, а иначе первоначальная загрузка ресурса будет зачастую дольше, чем могла бы, будь ресурс загружен с оригинального домена нашего веб-приложения.
      Но о поводу подключения шрифта через link preload - да, шикарный метод, но для многих приложений будет через чур... Редко ведь бывает, когда шрифт настолько важен, что без него всё развалится. Разве что вспоминается иконочный шрифт font-awesome, но это что-то совсем нерелевантное в современной фронтенд-разработке :)

  • @morismustanger6095
    @morismustanger6095 Рік тому

    а вот для чего это

  • @ИгОрЁк-л2з
    @ИгОрЁк-л2з Рік тому +1

    если видео для новичков то объяснять нужно подробней

    • @AleksanderLamkov
      @AleksanderLamkov  Рік тому +3

      Привет! А что конкретно показалось непонятным?
      Вообще, верно, видео рассчитаны для новичков, но для тех, кто прошел мои два вышедших ранее на канале курса по HTML и CSS, где я подробно объяснял многие моменты.

    • @ИгОрЁк-л2з
      @ИгОрЁк-л2з Рік тому +1

      @@AleksanderLamkov для человека который сверстал несколько макетов то всё достаточно ясно, но если кто то только начинает верстать то можно было бы немнрого остановится на функции calc, на использовании svg, на вычислении line-height, показать как на макете изменяется расположение элементов при использовании каждого свойств display: flex, а также немного остановится на работе с псевдоэлементом aftert, даже если об этом есть уже видео то можно хотя бы в пару словах напоминать о том как работает то или иное свойство

    • @AleksanderLamkov
      @AleksanderLamkov  Рік тому +3

      Понял, учту подобное в дальнейшем, спасибо!

    • @smotritelyoutube
      @smotritelyoutube Рік тому +2

      @@ИгОрЁк-л2зэммм.... Автор же сказал, что макет хоть и для новичков, но предполагает самые элементарные знания html и css. А перед этим, автор выпускал видео и по html, и по css, и он сказал, что перед просмотром, ты можешь ознакомиться с ними и тогда не будешь задавать вопросы что такое calc, clamp, flex и другое, так как автор обо всем этом говорил и рассказывал в своих предыдущих видео . Поэтому, если вы посмотрели обо плейлиста (css, html), то вопросов возникнуть не должно, даже если верстаете 1 раз)

    • @egorrublev5529
      @egorrublev5529 Рік тому +3

      @@ИгОрЁк-л2з это же вроде всё есть в двух курсах на данном канале.

  • @Константин-т4с9ш
    @Константин-т4с9ш 29 днів тому

    И это для начинающих......

    • @AleksanderLamkov
      @AleksanderLamkov  29 днів тому +1

      Я всё объяснял в своих двух курсах по HTML и CSS, предшествующих мастер-классу. Если что-то в МК кажется сложным, советую сначала посмотреть эти курсы.