Верстка сайта HTML SCSS из Figma на Gulp сборке. Проект Modimal. Адаптивная верстка. 4K

แชร์
ฝัง
  • เผยแพร่เมื่อ 9 พ.ย. 2024

ความคิดเห็น • 61

  • @aaronmakepeace8126
    @aaronmakepeace8126 6 หลายเดือนก่อน +12

    Надеюсь стрим останется в записи

  • @bekzhantolonov3031
    @bekzhantolonov3031 6 วันที่ผ่านมา

    Спасибо большое за данный урок!

  • @curious001
    @curious001 6 หลายเดือนก่อน +3

    Здравствуйте, Юрий! Я часто заглядываю на ваш канал, чтобы посмотреть новые видео с вёрсткой, и каждый раз расстраиваюсь, когда обнаруживаю, что видео не вышло. Последнее было выпущено 4 месяца назад.
    Однако, когда я смотрю новое видео с вёрсткой, я вижу, что всё это время велась активная работа над обновлением сборки, созданием макета и подготовкой ролика. Кстати, изображение на рабочем столе и задний фон прекрасно сочетаются друг с другом! Сразу видно, что вы уделяете особое внимание качеству картинки!
    Было очень приятно наблюдать за вашей работой и слушать вас. Огромное спасибо за ваш труд!

    • @WebCademy
      @WebCademy  6 หลายเดือนก่อน +2

      Илья, благодарю за развернутый комментарий. Да, давно не было именно роликов.
      Были два больших стрима, но понимаю что пересматривать их (даже с тайм кодами) не так удобно как смотреть видео. Вот пришла пора)
      Сборка сейчас действительно очень крутая, многое на автомате, в сочетании с сниппетами и миксинами, а еще и Inspect Styles - верстать становится гараздо удобнее.

  • @СашаЗапорожец-д9ь
    @СашаЗапорожец-д9ь 4 หลายเดือนก่อน

    Спасибо вам за прекрасную работу!!! С удовольствием посмотрел это видеою Объяснения все доступные и понятные, а также почти каждое действие сопроводили откуда, зачем и почему. Всё супер!

  • @Ярослава-щ7н
    @Ярослава-щ7н 6 หลายเดือนก่อน +1

    спасибо за шикарный мастер-класс! нашла ваш канал по запросу "настройка gulpfile", где ваше видео было первым, а тут ещё столько полезных материалов! большое спасибо, что делитесь опытом и знаниями =) успехов вам!

  • @ViverMan
    @ViverMan 6 หลายเดือนก่อน +1

    Благодарю за верстку с подробным объяснением!

  • @mykytav
    @mykytav 6 หลายเดือนก่อน

    Cпасибо вам Юра, отличный мастер-класс

  • @Shadow-ce3cn
    @Shadow-ce3cn 3 หลายเดือนก่อน

    Очень классный урок, давно хотел попробовать что-то с gulp, да вот у многих видео старые и сборки уже не работают адекватно, у Вашей все прекрасно работает, спасибо Вам за Ваш труд!
    Кое-что заметил: на 3:23:32 "flex-wrap: wrap" не сработал, так как объекты в .card__cols размещены через grid, а не flex.

  • @ikn7968
    @ikn7968 5 หลายเดือนก่อน +2

    Юрий, приветствую, будет ли ролик про то, как правильно натягивать на wp такую верстку?

  • @albertrockalfredo8250
    @albertrockalfredo8250 6 หลายเดือนก่อน

    Круть

  • @Inno4ka777
    @Inno4ka777 6 หลายเดือนก่อน

    Ждем

  • @aleksandrprokudin4715
    @aleksandrprokudin4715 6 หลายเดือนก่อน

    Юрий, спасибо огромное за очередной мастер-класс! Есть вопрос: как вызвать в этой сборке режим разработчика, чтобы была возможность продебажить джс? По умолчанию все компиллируется только в бандл, dev с флагами и без не дали результата. У меня есть прописанный конфиг для этой задачи, который я добавил в вашу сборку, но может есть решение проще, а я не в курсе?)

  • @gtaplayer4145
    @gtaplayer4145 6 หลายเดือนก่อน +1

    Юрий, спасибо за видео. Какой программой вы автоматически меняете русские буквы на английские? Например, когда вы пишете по ошибке на русском вместо английского, вы переключаете написанные буквы на замену их английскими

    • @WebCademy
      @WebCademy  6 หลายเดือนก่อน +2

      У меня Caramba на MacOS, для Windows есть PuntoSwitcher.

    • @gtaplayer4145
      @gtaplayer4145 6 หลายเดือนก่อน +1

      @@WebCademy , спасибо вам за ответ, пользовался раньше, установлю его снова

  • @MrRevCrew
    @MrRevCrew 6 หลายเดือนก่อน

    Подскажите, вы работаете с натяжкой верски на wordpress? Если да, то хотелось бы узнать, как лучше поднастроить сборку, чтобы было удобно сажать верстку на wp в дальнейшем

  • @СергейЖелезняк-ч8я
    @СергейЖелезняк-ч8я 6 หลายเดือนก่อน

    ​​Подскажите пожалуйста, давно хотео у вас спросить. Как на вашей сборке галп верстать многостраничные сайты ? Создавать отдельную папку для других страниц или оставлять хтмл на уровне индекса? И как галп будет это компилировать ?

    • @WebCademy
      @WebCademy  6 หลายเดือนก่อน +1

      Оставлять на уровне index.html. Там же на старте и так 2 страницы, index.html и docs.html. И все собирается отлично.
      Секции и другие составные части сохранять в папку blocks.

  • @userOlce
    @userOlce 2 หลายเดือนก่อน

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

  • @serhioramires3166
    @serhioramires3166 3 หลายเดือนก่อน

    А как Вы так ловко транслитилировали в одно нажатеие написаное не в той расскладке? на 19-20

  • @stasclear
    @stasclear 5 หลายเดือนก่อน

    А если переключится в режим кода, то видно все стили же.

  • @qwerty-jc7ix
    @qwerty-jc7ix 6 หลายเดือนก่อน

    всем привет

  • @artimity
    @artimity 3 หลายเดือนก่อน

    кнопку view all не сделали

  • @igoryavchenko3973
    @igoryavchenko3973 6 หลายเดือนก่อน

    Участвую

  • @ВасилийАнисимов-ш1ц
    @ВасилийАнисимов-ш1ц 5 หลายเดือนก่อน

    Привет, всем ! Фавиконки не подгружаются на странице .. Создаю сайт совместно с вами. Повторяю все за автором . Подскажите что надо еще сделать чтоб они отобразились ?

  • @artimity
    @artimity 2 หลายเดือนก่อน

    не могу подключить шрифт который уже woff формата

  • @ПростоРома-й9д
    @ПростоРома-й9д 6 หลายเดือนก่อน

    дарова ребят

  • @line_delay
    @line_delay 6 หลายเดือนก่อน

    это стрим записи?

  • @Renttar
    @Renttar 3 หลายเดือนก่อน

    Подскажите, сколько бы такая верстка стоила?

  • @artimity
    @artimity 2 หลายเดือนก่อน

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

  • @Prorok1987
    @Prorok1987 3 หลายเดือนก่อน

    Где взять макет для верстки?

  • @ВасилийАнисимов-ш1ц
    @ВасилийАнисимов-ш1ц 5 หลายเดือนก่อน

    А что за файл .DS_Store? Что он делает? его удалить можно?

  • @shavor1000
    @shavor1000 6 หลายเดือนก่อน +1

    при запуске gulp выдает ошибку: Error in plugin "gulp-imagemin" И выбрасывает из запуска. Обидно.

    • @WebCademy
      @WebCademy  6 หลายเดือนก่อน

      Напишите в наш чат или в комментарии в канал в Телеге. Со скриншотом ошибки.

    • @shavor1000
      @shavor1000 6 หลายเดือนก่อน +1

      @@WebCademyСпасибо за ответ на мой комментарий. Но сборка собралась и gulp не подвел) Заработал как надо. Скорее всего я где-то накосячил!!!

  • @НиколайТитов-ч5п
    @НиколайТитов-ч5п 6 หลายเดือนก่อน

    Я наверное чего-то не понял: # Обновленная версия от 05.08.2024. Это как?

    • @WebCademy
      @WebCademy  6 หลายเดือนก่อน

      Опечатка. В Заметки по сборке.md увидели? Там должно было быть 05.03.2023

  • @pinkshellprod
    @pinkshellprod หลายเดือนก่อน

    3:02:00 не могу разобраться, почему у меня не видит миксины, в хроме не видно даже медиа запросы, урок проходил очень внимательно и все повторял, даже сверил по уже готовому коду все правильно.. а в хроме ничего не отображается 😓

    • @pinkshellprod
      @pinkshellprod หลายเดือนก่อน

      миллион раз обновил и все заработало, какой то непонятный глюк был)

  • @jesterjester3836
    @jesterjester3836 6 หลายเดือนก่อน

    Юрий, здравствуйте!
    на 1.58 - пишет В visual studio code: "special characters must be escaped : [ < ] (spec-char-escape"
    есть варианты, как настроить этот знак? ((
    скажите пожалуйста

    • @WebCademy
      @WebCademy  6 หลายเดือนก่อน

      Добрый день. Я просто игнорирую его.

    • @jesterjester3836
      @jesterjester3836 6 หลายเดือนก่อน +1

      @@WebCademy Юрий, тогда я не понимаю, почему VC не видит цвета в : @@for(var i = 0; i < context.colors.length; i++) {

      }
      так как в products img, title и другие видит...а "colors" нет...
      как вы думаете в чём может быть ошибка у меня((??? заранее спасибо Вам за ответ.

    • @Максим-к2п6н
      @Максим-к2п6н 5 วันที่ผ่านมา

      @@jesterjester3836 у меня тоже так

  • @denis_web_dev
    @denis_web_dev 6 หลายเดือนก่อน

    Это запись?

  • @narotash6721
    @narotash6721 6 หลายเดือนก่อน

    У меня не получается добавить фавикон, в папку сборки в img добавляю картинки скаченные из фигмы, но они не встают на место

    • @WebCademy
      @WebCademy  6 หลายเดือนก่อน

      webcademy.ru/blog/1097/

  • @ВсёОк-ъ1б
    @ВсёОк-ъ1б 6 หลายเดือนก่อน

    Для чего всё это? Не пойму как это поможет в жизни? Онлайн магазины не кто не посещает. Или я ошибаюсь?

    • @WebCademy
      @WebCademy  6 หลายเดือนก่อน +5

      1. Это для тех кто учит верстку, чтобы после использовать её в своей работе. 2. Вы ошибаетесь.

    • @SurprisedBloomingFlower-us2qd
      @SurprisedBloomingFlower-us2qd 6 หลายเดือนก่อน

      Вы что идиот? Вы что не знаете что такое Amazon или Aliexpress?

    • @t.i.i8608
      @t.i.i8608 6 หลายเดือนก่อน

      Мне нужно, так как я работаю с gulp, и я уверен, что оно будет полезным не только для меня, но и для всех, кто использует gulp для верстки сайтов.

  • @afummatodigia1194
    @afummatodigia1194 6 หลายเดือนก่อน

    я повторил за вами и не понять в чем не работают стили top-info

    • @WebCademy
      @WebCademy  6 หลายเดือนก่อน +1

      Сравните с готовым кодом.

    • @afummatodigia1194
      @afummatodigia1194 6 หลายเดือนก่อน

      @@WebCademy спасибо

  • @АлексейТопольсков-й4в
    @АлексейТопольсков-й4в หลายเดือนก่อน

    figma больше не работает

    • @pinkshellprod
      @pinkshellprod หลายเดือนก่อน

      все работает)

    • @Green-ao
      @Green-ao 9 วันที่ผ่านมา

      у меня работает но интерфейс не такой же как в этом видео, он другой (((

  • @vbvb2805
    @vbvb2805 6 หลายเดือนก่อน

    Привет Юр. Спасибо за хороший макет

  • @николайкраснов-р3о
    @николайкраснов-р3о 6 หลายเดือนก่อน

    А где сборку найти?

    • @WebCademy
      @WebCademy  6 หลายเดือนก่อน +1

      В ТГ канале. Ссылка в описании.