Верстаю сайт, используя фишки своей Gulp-сборки

  Рет қаралды 37,778

MaxGraph - cайты как страсть

MaxGraph - cайты как страсть

Күн бұрын

Привет! В этом видео я сверстаю небольшой лендинг с использованием моей gulp-сборки (готовые сниппеты, плагины, модули с готовым кодом и т.д.). В общем, покажу, как я сам делаю проекты и что использую. Поехали!
Сборка: github.com/max...
Макет: www.figma.com/...
Готовый код: github.com/max...
Меня зовут Максим Васянович. Фрилансер уже 5 лет, создал более 50 коммерческих сайтов. Преподаватель в онлайн-университете Skillbox, автор курса Веб-верстка.
Понравилось? clck.ru/Gr9Ec
Моя страница вконтакте: maxdenaro
Мой блог: blog.maxgraph.ru
Мой сайт: maxgraph.ru
Канал в телеграм: teleg.run/maxg...
Чат для верстальщиков: teleg.run/maxg...
#обучение #gulp #верстка

Пікірлер: 313
@user-wo6bu3sz3b
@user-wo6bu3sz3b 2 жыл бұрын
очень приятно удивлен, что автор пытается ответить на каждый комментарий даже спустя пол года после выхода ролика. Очень приятно такое отношение
@vouqreels8114
@vouqreels8114 2 жыл бұрын
Верстка с этой сборкой чудесна! И идея - видеть тебя, создает более уютную атмосферу, продолжай)
@maxgraph
@maxgraph 2 жыл бұрын
Спасибо)
@blackcelebration3588
@blackcelebration3588 2 жыл бұрын
Максим, спасибо. Просто душой отдохнул, наблюдая, как методично работает профессионал. Идея с камерой отличная.
@maxgraph
@maxgraph 2 жыл бұрын
Спасибо)
@user-mv1dg9fg5m
@user-mv1dg9fg5m 2 жыл бұрын
Максим, нужно что то делась со звуком, тебя очень плохо слышно. Все твои видео нужно смотреть или в полной тишине или в наушниках. Пожалуйста подбавь в следующий раз громкости или подноси микро поближе. Спасибо!)
@Dedinside05
@Dedinside05 2 жыл бұрын
вы че на заводе слушайте чтоль, норм звук
@TrelinGames
@TrelinGames 2 жыл бұрын
отлично все слышно. как по мне.
@INTTable
@INTTable 2 жыл бұрын
а ты под музыку обычно слушаешь? всегда смотрю в тишине лол
@AndAlexei
@AndAlexei 2 жыл бұрын
У меня музыкальный центр подключен, соседи говорят, что слышно хорошо
@user-ho5fn2vv1g
@user-ho5fn2vv1g 2 жыл бұрын
Максим, спасибо за классный и полезный контент.
@maxgraph
@maxgraph 2 жыл бұрын
Пожалуйста)
@user-lm9ee1gn5p
@user-lm9ee1gn5p 2 жыл бұрын
Классная задумка + с камерой ещё лучше
@maxgraph
@maxgraph 2 жыл бұрын
Спасибо)
@tatiana5197
@tatiana5197 2 жыл бұрын
Спасибо, Максим! Первая мысль: Максим существует!))) По поводу некоторых комментариев: звук отличный. Как раз сейчас изучаю галп и очень интересна Ваша сборка))
@maxgraph
@maxgraph 2 жыл бұрын
Пожалуйста)
@AlekseyNaumov_734
@AlekseyNaumov_734 Жыл бұрын
@@maxgraph А есть видео в котором вы собственно и собираете эту сборку? Я вот про последние изменения нашёл видео, а с чего все начиналось нет.
@disconnect355
@disconnect355 2 жыл бұрын
Спасибо, Максим. Посмотрел 5 минут, но как раз попался момент, который нужно было сделать. Пересмотрю всё позднее.
@maxgraph
@maxgraph 2 жыл бұрын
Спасибо)
@antonshcherban2100
@antonshcherban2100 Жыл бұрын
Максим, спасибо тебе за проделанный труд, думаю это один из лучших каналов, что есть в интернете, контент очень годный и понятный. За сборку огромное спасибо, все работает)
@maxgraph
@maxgraph Жыл бұрын
спасибо)
@xdayx53
@xdayx53 9 ай бұрын
@@maxgraph согласен со всем вышесказанным. сборка просто топчик, лучший канал по верстке 10000%. Максим, скоро курс выйдет по верстке/js? планируется вообще?
@UserUser-vf4sg
@UserUser-vf4sg Жыл бұрын
Спасибо, очень полезный урок! Ждем больше подобных видосов. Очень благодарен автору канала.
@maxgraph
@maxgraph Жыл бұрын
Пожалуйста)
@gign_141
@gign_141 Жыл бұрын
Мы не заслуживаем тебя, братан...
@maxgraph
@maxgraph Жыл бұрын
Да ладно))
@vitaliiviktorovich7870
@vitaliiviktorovich7870 2 жыл бұрын
Жму руку! Разжевал всё подробно и понятно. Контент топчик, благодарю!
@maxgraph
@maxgraph 2 жыл бұрын
Пожалуйста)
@kubris.developer
@kubris.developer Жыл бұрын
Сколько смотрю, но так бросается в глаза это копирование/вставка! - Shift+Alt+downArrow - дублировать выделенное, хоть всю секцию, а без выделения дублирует строку, где курсор стоит (editor.action.duplicateSelection - если не работает); - Alt+downArrow/upArrow - перемещает текущую строку вверх/вниз по коду (notebook.cell.moveUp, editor.action.moveLinesUpAction) Видео чёткое, Спасибо!
@maxgraph
@maxgraph Жыл бұрын
Мне так неудобно)
@gergeorg
@gergeorg 2 жыл бұрын
спасибо за очередной топ контент)) очень не хватило подставки нужных данных в попапе под каждого препода: имя, фото, навыков и т.д. что бы нажав на подробнее под другим преподом выходили его данные
@maxgraph
@maxgraph 2 жыл бұрын
Это уже не относится к сборке))
@uroki-verstki
@uroki-verstki Ай бұрын
очень крутая сборка
@whyest
@whyest Жыл бұрын
Максим, сборка отличная! Все понятно и доступно!
@maxgraph
@maxgraph Жыл бұрын
Спасибо)
@whyest
@whyest Жыл бұрын
@@maxgraph Максим, еще вопрос - в Chrome favicon меняется при подключении своей, а в Safari уже нет. Где ее можно изменить кроме папки resources?
@pavelkirav649
@pavelkirav649 Жыл бұрын
Сборка во 👍👍👍👍,продолжай в том же духе!!!
@maxgraph
@maxgraph Жыл бұрын
Спасибо)
@Tony.Crafter
@Tony.Crafter 2 жыл бұрын
Спасибо Макс за видос. Помогло отвлечься от хаоса вокруг. Добавь света на себя. Темновато в комнате у тебя.
@maxgraph
@maxgraph 2 жыл бұрын
Спасибо)
@aleksandrsanduliak2511
@aleksandrsanduliak2511 2 жыл бұрын
Мучался с навигацией 4 дня, бургер не работал из-за того, что .menu--active { с пробелом, а я писал .menu--active{ без пробела. В остальном видео крутое, набрался навыков!
@maxgraph
@maxgraph 2 жыл бұрын
Отлично)
@yulya1348
@yulya1348 2 жыл бұрын
Максим, спасибо за видео! Давно мечтала увидеть вас в "реале", так сказать))). *Фанатка со Skillbox*☺
@maxgraph
@maxgraph 2 жыл бұрын
Спасибо))
@user-or1hy4xz8u
@user-or1hy4xz8u Жыл бұрын
Добрый вы человек, людям бесплатно помогаете)))) Насчет результирующего файла "main.js" - не совсем понятно, как с ним работать далее, как другому человеку работать с ним, вносить правки и т.п..... Ведь после обычной команды "gulp" файл "main.js" засорен какими-то вызовами вебпака и т.п., типа "__webpack_require__.r(__webpack_exports__);" и т.п. ... А если сбилдить "gulp build" - то получается код типа "598: () => {function e(e) { var t = !0, o = !1, n = null, i = { text: !" - с какими-то 1-буквенными именованиями функций. Получается, чтобы удобно смотреть и править код, другому человеку придется ставить сборку и работать только с ней?
@maxgraph
@maxgraph Жыл бұрын
Итоговый файл просто подключается к хтмл и все. Править надо исходник и собирать заново
@AlekseyNaumov_734
@AlekseyNaumov_734 Жыл бұрын
В vsCode копировать строку можно: alt + shift + стрелка вниз (вверх), а для перемещения строки: alt + стрелка вниз (вверх).
@maxgraph
@maxgraph Жыл бұрын
знаю) не хочу)
@user-hc7wq9om9i
@user-hc7wq9om9i Жыл бұрын
Спасибо Вам большое за полезное видео!👍
@maxgraph
@maxgraph Жыл бұрын
Пожалуйста)
@luxarmiger5729
@luxarmiger5729 2 жыл бұрын
Друже, огромная тебе благодарность, дорогой! Сборка замечательная и новый формат, где тебя видно тоже очень зашел. Скажи пожалуйста, какие горячие клавиши для вставки сниппетов?
@maxgraph
@maxgraph 2 жыл бұрын
Привет! Спасибо) Просто начинай вводить сниппет с буквы G и подскажет варианты)
@user-bp9yg9cj9j
@user-bp9yg9cj9j 2 жыл бұрын
Видео супер!!! ОГРОМНЫЙ ЛАЙК)))
@maxgraph
@maxgraph 2 жыл бұрын
Спасибо)
@BMikel
@BMikel 2 жыл бұрын
Видео супер. Будет время, повторю. Спасибо
@maxgraph
@maxgraph 2 жыл бұрын
Пожалуйста)
@Vladimir-yh2dl
@Vladimir-yh2dl 2 жыл бұрын
видео супер, Максим большое спасибо за то что поделились своими наработками и знаниями, много полезного и актуального на сегодня. расскажите, пожалуйста, про PHPMailer я как понял именно его вы использовали для работы с почтой, меня интересует как и где хранить данные логина и пароля для безопасности
@maxgraph
@maxgraph 2 жыл бұрын
Здравствуйте. Посмотрите последнее видео в ui компонентах про это)
@user-vg9mj6eo7e
@user-vg9mj6eo7e 9 ай бұрын
Замечательная сборка. Я не являюсь верстальщиком, но иногда приходится. И как здорово что есть такая сборка, где можно быстро собрать лендинг. И хотелось бы поподробнее видео при работе с формой. А именно интересует формат отправляемого письма. Может я чего упустил или где его можно создать?
@maxgraph
@maxgraph 9 ай бұрын
В файле mail.php лежит код письма, можно там поменять
@Clay286
@Clay286 4 ай бұрын
Спасибо огромное и за сборку, и за такую видео-инструкцию! Скажи пожалуйста, почему ты задаёшь размеры img в самом html, а не в CSS?
@maxgraph
@maxgraph 4 ай бұрын
Это полезно для производительности)
@igormajrov8444
@igormajrov8444 Жыл бұрын
Сборка отличная. Прошло больше полугода уже. При установке сейчас выпадает много ошибок: куча deprecated. "npm audit fix ---force" помогает частично.
@maxgraph
@maxgraph Жыл бұрын
Эти ошибки никак не влияют на работу, необязательно исправлять
@igormajrov8444
@igormajrov8444 Жыл бұрын
@@maxgraph "mkaufman.HTMLHint" уже нерабочий. Вместо него маркетплейс предлагает "HTMLHint.vscode-htmlhint"
@user-gg2ye5gw2h
@user-gg2ye5gw2h 2 жыл бұрын
Спасибо большое за контент!!! Очень приятно тебя видеть через камеру))) Макс, а почему ты сразу не пропишешь margin 0 и padding 0 для всех элементов что бы каждый раз не писать. Вот так например *{margin: 0; padding: 0;}
@maxgraph
@maxgraph 2 жыл бұрын
Посмотри видео в веб заметках про это) поймёшь
@user-gg2ye5gw2h
@user-gg2ye5gw2h 2 жыл бұрын
@@maxgraph Спасибо за ответ) благодаря тебе я улучшаю свои знания в любимом деле 😁
@valerypobelenskiy1001
@valerypobelenskiy1001 2 жыл бұрын
Привет Максим, отличная сборочка многое облегчает на порядок ... ты забыл в burger.scss указать display none а на разрешения экрана начиная с high-tablet display block
@maxgraph
@maxgraph 2 жыл бұрын
Да, возможно))
@Alexus1504
@Alexus1504 2 жыл бұрын
Видео супер!!! Спасибо!!!
@maxgraph
@maxgraph 2 жыл бұрын
Пожалуйста)
@rodrigoespayzer1006
@rodrigoespayzer1006 8 ай бұрын
Вопрос такой, подключаю шрифты как по видео. но они не применяются у меня в woff2 перевел. все так же по стандарту arial стоит причем это происходит с теми шрифтами которые я конвертирую если я скачиваю в woof2 шрифт с ним все нормально
@maxgraph
@maxgraph 8 ай бұрын
Ну тут множество причин может быть, так наугад не сказать
@user-zq4nz6yd2p
@user-zq4nz6yd2p Жыл бұрын
Табы 2:46:12 Кастомный скролл 2:54:49
@user-xu1rr9do8z
@user-xu1rr9do8z 25 күн бұрын
Доброго времени. Максим ничего не работает, начиная от подключения шрифтов и выставления ширины блока.!!
@Littlchaffinch
@Littlchaffinch Жыл бұрын
Максим, спасибо за видео, есть вопрос по поводу формы, может в другом видео есть, но не нашла... Как настроить gulp, чтобы можно было отправлять ajax запросы, т.е. как добавить поддержку php в сборку?
@maxgraph
@maxgraph Жыл бұрын
Все это в документации к сборке написано
@user-or1hy4xz8u
@user-or1hy4xz8u Жыл бұрын
1:09:00 Вы выносите свайпер из контейнера, а потом задаете паддинг и т.д. ..... Выносить элемент за пределы контейнера - плохая практика, потом будут проблемы с посадкой на cms.
@maxgraph
@maxgraph Жыл бұрын
Ничего не будет)
@qwerty8858
@qwerty8858 Жыл бұрын
Очень хорошее видео. НО можно чуть чуть по громче говорить пожалуйста?
@xbtxbt3714
@xbtxbt3714 2 жыл бұрын
Привет, Максим! Спасибо за твой труд. Все очень круто. Скажи, натяжку на Winter CMS предыдущей верстки уже не ждать?
@maxgraph
@maxgraph 2 жыл бұрын
Привет, будет все) запись уже делаю
@xbtxbt3714
@xbtxbt3714 2 жыл бұрын
@@maxgraph Супер! Жду с нетерпением! Спасибо!
@IslamNasrylaev
@IslamNasrylaev 2 жыл бұрын
MaxGraph - cайты как страсть, саламалейкум. Есть такая идея для видео, можешь снять видео, о том как сделать сборку галпа под wordpress. Пример: очень часто приходится при разработке на wp работать с локальной версией(openServer) , и потом выгружать на хостинг , самое не приятное, если делаешь правки, то опять делаешь их в локальной.... потом переносишь на хостинг. Можно ли это как то автоматизировать? Желательно еще авто-пуш бд-шки, в гугле очень старая информацию по этому вопросу, на ютубе тоже. Я думаю это будет полезно.
@maxgraph
@maxgraph 2 жыл бұрын
Привет. Можно такое сделать, правда я не разбирался как. Но запишу)
@user-rb5ot4rx6k
@user-rb5ot4rx6k 11 ай бұрын
Здраствуйте. У меня вопрос. У меня почему-то паданги контейнера работают только в шапке сайта и в херо. В чем может быть проблема?
@user-or1hy4xz8u
@user-or1hy4xz8u Жыл бұрын
В папке "vendor" есть файл "normalize.css" - там, в основном, стили для корректной работы IE 10+... Наверно, такой файл уже не очень актуален на сегодняшний день? Ведь ИЕ не поддерживается...
@maxgraph
@maxgraph Жыл бұрын
Там не только для ие)
@user-lz8zm5lo4r
@user-lz8zm5lo4r Жыл бұрын
Привет, спасибо за годный контент! Подскажи пожалуйста, какая тема у тебя установлена?
@maxgraph
@maxgraph Жыл бұрын
Привет) One Monokai
@Buny_Ann
@Buny_Ann 24 күн бұрын
Есть ли возможность посмотреть данное видео на другой платформе? К сожалению на KZfaq его смотреть уже крайне проблематично 😢
@maxgraph
@maxgraph 24 күн бұрын
Да, это видео есть в ВК Видео. vk.com/video/@maxgraph/all
@frednoby8531
@frednoby8531 Жыл бұрын
Вёрстка на дивах - это жуть! Как насчёт семантики? Ведь есть и другие теги, кроме div. К тому же использовать пикселы везде - вроде как тоже прошлый век, лучше относительные - em, rem. И когда в браузере показываешь стили в панели разработчика - экран с собой нужно отодвигать, а то людям не видно. В остальном всё классно.
@maxgraph
@maxgraph Жыл бұрын
Расскажите, где лучше использовать другой тег и почему) Вроде как - не аргумент) посмотрите последний выпуск веб стандартов, как раз на эту тему там говорят.
@frednoby8531
@frednoby8531 Жыл бұрын
@@maxgraph там, где Вы применяете div с текстом, например, можно запросто (и правильнее всего) применить тег p (или span, если уместно).
@maxgraph
@maxgraph Жыл бұрын
И что бы это дало с точки зрения семантики?
@nikolaikukurudza4084
@nikolaikukurudza4084 2 жыл бұрын
Максим привет, можешь подсказать с помощью какого плагена высвечивается неправильная очередность значений свойств в css, я думал это stylelint. Он у меня не работает)
@shakur.0238
@shakur.0238 2 жыл бұрын
Stylelint
@ondrui
@ondrui 2 жыл бұрын
у меня тоже stylelint не работал изначально при запуске проекта в vscode, я исправил добавив в конфигурацию vscode следующие настройки (первые три убирают проверку кода встроенным редактором) "css.validate": false, "less.validate": false, "scss.validate": false, "stylelint.validate": [ "css", "less", "postcss", "scss" ]
@user-vs5eh7ez4b
@user-vs5eh7ez4b 2 жыл бұрын
сборка отличная, спасибо. Почему-то при создании нового файла курсор начинает сам перепрыгивать на след строку
@Sergus1984
@Sergus1984 2 жыл бұрын
Добрый день, спасибо за урок. Хотел спросить, зачем нам нужны такие короткие миксины как display:flex; Ведь написать df гораздо проще чем инклуд миксина. Еще хотел узнать, где можно посмотреть готовые сниппеты для верстки, которые используются в сборке. Спасибо.
@maxgraph
@maxgraph 2 жыл бұрын
Здравствуйте. Ну может для флекса и не надо, а для нескольких свойств удобно Сниппеты лежат в папке vscode
@user-vg9mj6eo7e
@user-vg9mj6eo7e 2 жыл бұрын
Замечательная сборка, Максим. Но у меня почему-то при каждой компиляции сборки, перед тем как отправить на сервер теряются шрифты. Не очень приятно, когда каждый раз приходится заново их закидывать. Минута, но все же...
@maxgraph
@maxgraph 2 жыл бұрын
Тут надо смотреть, что не так вдруг
@user-vg9mj6eo7e
@user-vg9mj6eo7e 2 жыл бұрын
Да, здесь не объяснишь. Все делал как показывали. Закидываю нужные шрифты в woff2 и подключаю их. А при сборке они убираются. Приходится заново их закидывать
@onese7en141
@onese7en141 2 жыл бұрын
Макс привет, а ничего что итоговый main.js твоего лендинга прогнанный через webpack у тебя весит целых 1.15 мб? Нормальны ли вообще такие большие размеры JS файла в таких маленьких проектах?
@maxgraph
@maxgraph 2 жыл бұрын
Привет, думаю ничего)
@onese7en141
@onese7en141 2 жыл бұрын
@@maxgraph всё я разобрался в твоей сборке), дело в том что в конфиге вебпака стоял мод development, если ставить production и после этого запускать галп то вебпак собирает js уже весом 300кб
@budextershopfaq3491
@budextershopfaq3491 Жыл бұрын
@@onese7en141 а можешь подсказать где и что исправить?там 2 записи есть с development
@budextershopfaq3491
@budextershopfaq3491 Жыл бұрын
@@maxgraph Максим можете объяснить из-за чего такой размер исходного файла main.js?и есть ли разница если бы он был бы в 2 раза легче к примеру?и если использовать данную сборку для больших проэктов,по логике main.js будет в разы больше? как этого избежать?при использовании другой сборки у меня main.js 30-40 kb,из-за чего тут такой большой размер?Заранее спасибо !
@maxgraph
@maxgraph Жыл бұрын
Тут такой размер из-за вебпака, там много своего кода идёт. Но это не критично
@AlekseyNaumov_734
@AlekseyNaumov_734 Жыл бұрын
Можно же в сборке gulp прописать автоматическую конвертацию шрифтов и их подключение.
@maxgraph
@maxgraph Жыл бұрын
Можно. Но я не хочу
@alexandrgusletsov2567
@alexandrgusletsov2567 10 ай бұрын
2:56:00 scroll bar
@user-jg2cn4bu2l
@user-jg2cn4bu2l 6 ай бұрын
Не отображается картинка прописанная в srcset
@hermes4048
@hermes4048 Жыл бұрын
Спасибо за видео и за сборку. Столкнулся с такой проблемой. В файле settings.scss прописаны свойства для адаптивных изображений img { height: auto; max-width: 100%; object-fit: cover; } Из-за этого сталкиваюсь с проблемами в задавании размеров изображениям инлайново в html. То есть я их задаю, но они не применяются (css их перебивает) Как с этим быть? В этом видео у тебя такой проблемы нет, у меня последняя версия твоей сборки. upd: Вставляю через тег picture Если вставлять просто через тег img то такой проблемы нет
@hermes4048
@hermes4048 Жыл бұрын
Дело в max-width: 100% для img, img подстраивается под своего родителя (picture) Как это дела лучше поправить? Убрать это свойство для img совсем? upd: ничего не надо убирать, просто изображению не хватало места растянуться) Хотя иногда надо что бы изображение "растолкало" элементы, а оно из-за этого свойства наоборот сжимается
@altosdatch8523
@altosdatch8523 2 жыл бұрын
Максим, спасибо за твои труды! Видосиками это называть язык не поворачивается!) Ещё про плавную прокрутку, вроде автор плагина Smooth Scroll уже сам отправляет в css scroll-behavior, как с этим быть? В чём подвох?))
@maxgraph
@maxgraph 2 жыл бұрын
Привет! Scroll behavior все ещё не работает в сафари)
@altosdatch8523
@altosdatch8523 2 жыл бұрын
@@maxgraph Аааааа...))
@AlekseyNaumov_734
@AlekseyNaumov_734 Жыл бұрын
У меня в хроме не работает.
@UserUser-vf4sg
@UserUser-vf4sg Жыл бұрын
@@AlekseyNaumov_734 тебе нужно в _setting.scss найти свойство html { box-sizing: border-box; scroll-behavior: smooth; } -туда дописать эти строчки. Автор за это не говорил ни слова.
@AlekseyNaumov_734
@AlekseyNaumov_734 Жыл бұрын
@@UserUser-vf4sg Пасиб, попробую.
@user-je4wx2ny5b
@user-je4wx2ny5b 2 жыл бұрын
Спасибо за контент! Вопрос не по теме, что за клавиатуру используешь?
@maxgraph
@maxgraph 2 жыл бұрын
Привет, Anne pro 2 На моем сайте можно глянуть все что использую)
@Beardy13
@Beardy13 Жыл бұрын
Максим, большое спасибо за видео. В настоящий момент изучаю вашу сборку gulp параллельно изучая js. К сожалению не все понятно. Не работают модальные окна. В консоли появляется ошибка. Не подскажете, как исправить? (Код ошибки не могу добавить. Ютуб комментарий удаляет.)
@Beardy13
@Beardy13 Жыл бұрын
Разобрался )))
@Anatoli-bq1pe
@Anatoli-bq1pe Жыл бұрын
Благодарю за классное видео! Скажите, а на относительных единицах rem и em вместо фиксированных px, верстаете? Всё же адаптивный шрифт тогда получается
@maxgraph
@maxgraph Жыл бұрын
Нет, верстаю пикселями, и тоже получается адаптивно)
@Anatoli-bq1pe
@Anatoli-bq1pe Жыл бұрын
@@maxgraph не совсем понятно, как в px может получаться адаптивно, если к примеру пользователь будет менять настройки шрифтов в браузере (к примеру увеличивать размер шрифта) , то разве размер шрифта прописанный в px тож будет увеличиваться? Он то и будет стоять на месте. А вот если и отступы и размеры шрифта будут заданы в относительных единицах, они то и будут и изменяться и адаптироваться и не ломаться. При том то меньше работы с адаптивом при верстке сайта, если изначально задавать все в относительных единицах, кроме только тех ситуаций где нужны фиксированные значения (px). Для меня лично плюсы очевидны. Хотелось бы узнать более развернутый ответ. Благодарю
@maxgraph
@maxgraph Жыл бұрын
Кому надо поменять размер шрифтов - может поменять масштаб страницы, и все :) А насчёт упрощения адаптива спорно, я и так не испытываю с этим проблем
@Anatoli-bq1pe
@Anatoli-bq1pe Жыл бұрын
@@maxgraph Благодарю
@MelkoR4111
@MelkoR4111 Жыл бұрын
@@Anatoli-bq1pe какойто бред написали)) в каком месте у вас шрифты. которые написаны в пикселях не меняют своего размера, когда меняешь размер экрана? все также меняется как и везде.
@DmitryDomnichev
@DmitryDomnichev 2 жыл бұрын
Супер видео. Спасибо. Расскажи пожалуйста как разворачивать твои сниппеты в WebStorm. Я им пользуюсь просто. Свои сниппеты в этой программе я могу делать. А в твоих по всей видимости в json нужно лезть?
@maxgraph
@maxgraph 2 жыл бұрын
Никогда не пользовался этой ide, не знаю
@DmitryDomnichev
@DmitryDomnichev 2 жыл бұрын
@@maxgraph Очень жаль для меня)) Повторяю за тобой в этом редакторе, и получаю кучу ошибок . Приходится много фиксить, что ведет еще к большему пониманию. Две недели уже делаю этот кейс. Так держать !
@user-tm2mp4dy4z
@user-tm2mp4dy4z Жыл бұрын
Почему не используете html тег dialog для модальных окон ? Зачем нужен целый плагин, не совсем понимаю, js кода намного меньше будет при использовании dialog. По caniuse поддержка всеми основными браузерами уже есть...
@maxgraph
@maxgraph Жыл бұрын
Вам стоит внимательно посмотреть на поддержку. В сафари она появилась только в этом году, этого мало) Ну и плагин все равно более функционален
@user-tm2mp4dy4z
@user-tm2mp4dy4z Жыл бұрын
@@maxgraph Понял, спасибо!
@bleinmono2784
@bleinmono2784 6 ай бұрын
Ребята, подскажите, как с помощью gulp сверстать мультиязычный сайт? Без переводчиков, с реальными страницами.
@maxgraph
@maxgraph 6 ай бұрын
Вы можете просто создать папки /ru, /en и там хранить разные страницы
@e-astap
@e-astap 2 жыл бұрын
В более ранних версиях сборки был таск, конвертирующий шрифты из ttf в woff2 (плагин gulp-ttf2woff2). Подскажите, почему отказались от его использования? Ведь, вроде бы с ним проще, чем конвертить вручную?
@maxgraph
@maxgraph 2 жыл бұрын
Он нагружает сборку) Да и нужен только вофф 2 теперь, потому на вижу смысла
@Tik_Lab
@Tik_Lab Жыл бұрын
Правильно ли я понимаю, что в теге head в html нужно подключать основные шрифты для предзагрузки. В таком случае если я подключу так, это негативно скажется на загрузке сайта и если браузер не использует woff, то могут появиться ошибки в браузере про то, что шрифт загружен, но не используется?
@maxgraph
@maxgraph Жыл бұрын
Таких браузеров сейчас нет, так что и проблем не будет Скорее будут предупреждения, не ошибки
@AntonioBenderas
@AntonioBenderas 2 жыл бұрын
Крутотень. А есть видео по мануалу этой сборки? Или в этом видео есть?
@maxgraph
@maxgraph 2 жыл бұрын
Это оно и есть)
@maxgraph
@maxgraph 2 жыл бұрын
Это оно и есть)
@tatiana5197
@tatiana5197 Жыл бұрын
Максим, здравствуйте! Пробую вашу сборку, очень нравится) , выложила код на гитхаб, но на странице сайта только список подключенных частей html, с чем это может быть связано?
@maxgraph
@maxgraph Жыл бұрын
Здравствуйте! видимо вы выложили src, а нужно готовую папку - app
@rviturnel8516
@rviturnel8516 2 жыл бұрын
👍
@alexandrgusletsov2567
@alexandrgusletsov2567 Жыл бұрын
1:53:00 mask input
@user-vj8qv6hz2p
@user-vj8qv6hz2p 2 жыл бұрын
Может ли кто то помочь с browser-sync. Когда верстаю без инструмента разработчика (посмотреть код в гугл хроме) изменения выполняются нормально. Когда включаю инструмент разработчика то изменения не происходит, и когда обновляю страницу вручную то появляется пишет нет подключения к сети. Проверял на хроме и яндекс браузере.
@user-jv4px9cu3e
@user-jv4px9cu3e 2 жыл бұрын
Привет Макс!а про фриланс планируешь рассказывать?где заказы на верстку брать и тд
@maxgraph
@maxgraph 2 жыл бұрын
Привет, новых видео не планирую, старые есть на канале)
@user-jv4px9cu3e
@user-jv4px9cu3e 2 жыл бұрын
@@maxgraph чето я не находил таких у тебя, может не там смотрел))
@maxgraph
@maxgraph 2 жыл бұрын
В плейлистах канала посмотри)
@user-jv4px9cu3e
@user-jv4px9cu3e 2 жыл бұрын
@@maxgraph окей
@user-Ruslan-Akimov
@user-Ruslan-Akimov Жыл бұрын
Спасибо за прекрасную сборку. Есть один вопрос, подскажите пожалуйста почему не на всех операционных системах работает сборка gulp? У меня проблема в том что на windows 10 и на Linux в сборке не отрабатывает команда watch, тем самым приходится нажимать ctrl+s для сохранения, без этой команды автоматический не сохраняет, и не обновляет страницу. А на 11 windows все отлично работает. Может вы знаете в чем проблема?
@maxgraph
@maxgraph Жыл бұрын
Сборка работает везде, разве что не тестил линукс) У меня два компа и мак, на них разные системы. Все в порядке
@user-Ruslan-Akimov
@user-Ruslan-Akimov Жыл бұрын
Спасибо.
@Reservoirv
@Reservoirv 2 жыл бұрын
Классное видео, один вопрос, и там где сам повторял за видео и на версте скачанной из репозитория, не работают табы модального окна через кнопку tab, может что с плагином не так, как решить данную проблему? Причем на самом видео в момент верстки все работало...
@maxgraph
@maxgraph 2 жыл бұрын
Табы работают через стрелки, как и должны
@alexshev7412
@alexshev7412 Жыл бұрын
MaxGraph, как происходит взаимодействие сборки gulp с github? Допустим сделал Билд и выложил на github, потом внёс изменение в проекте, снова Билд делать и заменять целиком css файл?
@maxgraph
@maxgraph Жыл бұрын
Сейчас никак не происходит) но по идее да, после билда надо пуш делать
@trobiukfront-end5795
@trobiukfront-end5795 2 жыл бұрын
спасибо за видео! уточнение по сборке: файл _vars.scss строка --font-family: "Open Sans", sans-serif; и файл _settings.scss строка font-family: var(--font-family, sans-serif); два раза прописано sans-serif. Это так задумано? Или в одном из мест можно удалить? Спасибо!
@maxgraph
@maxgraph 2 жыл бұрын
Опечатка))
@ZolotarevPavel
@ZolotarevPavel 2 жыл бұрын
Максим, спасибо за ваш труд. Верстаю на вашей новой сборке. У меня вопрос: Сделал две формы, звонок и товары, обе в модальном окне. Но работает только одна из. Как их заставить работать совместно. И как реализовать динамический заголовок для товара. Заранее спасибо.
@maxgraph
@maxgraph 2 жыл бұрын
Здравствуйте, это слишком обширные вопросы, надо смотреть как все это сделано
@ZolotarevPavel
@ZolotarevPavel 2 жыл бұрын
@@maxgraph Есть два вида форм (заказ звонка и заказ товара) использую разные атрибуты в graph-modal, к примеру form1 и form2. Работает только первая форма на странице, как я понимаю нужен цикл, перебрать атрибуты и открывать разные формы?
@maxgraph
@maxgraph 2 жыл бұрын
Видимо да
@user-st8lz4no2v
@user-st8lz4no2v 2 жыл бұрын
Максим, здравствуйте, а как насчет установки плагина gulp-ttf2woff2, что-бы сразу конвертировать ttf в woff2? Удобнее было бы ( по-моему мнению )
@maxgraph
@maxgraph 2 жыл бұрын
Не хочу)
@hermes4048
@hermes4048 Жыл бұрын
Привет. Мне захотелось сделать фиксированный header (шапку). Такой вопрос: При открытии и закрытии бургер меню страница прокручивается сверху до положения где был открыт бургер. При открытии модальных окон все ок. Немного покопал, это происходит из-за блокирования скролла. А именно из-за свойства position: fixed, заданного для body через класс dis-scroll. Я правильно понимаю, что оно нужно для исправления бага с положением курсора на ios (я с ним пока не сталкивался)? Как исправить данный момент? Определять операционную систему и отдельно задавать свойство через js? Почитал readme для сборки, задавал класс fixed-block для header, не помогает.
@hermes4048
@hermes4048 11 ай бұрын
Нашел решение в комментариях в видео "JS-решения №4. Универсальное отключение скролла на сайте". Такое происходит из-за scrollBehavior = 'smooth' в js.
@maxgraph
@maxgraph 11 ай бұрын
Должно помочь. Возможно что то не так делаете
@hermes4048
@hermes4048 11 ай бұрын
@@maxgraph разобрался)
@saivengo
@saivengo Жыл бұрын
Макс, кнопка закрытия мобилки осталась висеть на десктопе... Как ее убрать на десктопе?
@maxgraph
@maxgraph Жыл бұрын
Дисплей нон задать можно
@user-cy2vp8xp3g
@user-cy2vp8xp3g 2 жыл бұрын
Масксим, спасибо вам большое за Ваш труд, очень полезный контент! Ребят, подскажите пожалуйста, где почитать или посмотреть про данный случай с margin-bottom: auto; (1:31:49). Почему он так идеально в данном случае работает ?)
@maxgraph
@maxgraph 2 жыл бұрын
Здравствуйте. Всё из-за флекса. При флексе работает авто) вот и все
@user-cy2vp8xp3g
@user-cy2vp8xp3g 2 жыл бұрын
@@maxgraph Здравствуйте. Спасибо!)
@MihailRomov
@MihailRomov Жыл бұрын
Привет, спасибо за сборку, очень великодушно)! У меня подсказка на сниппеты не вылазит ,а если ввести имя сниппета и таб ничего не происходит. Может какой плагин нужен?
@maxgraph
@maxgraph Жыл бұрын
Перезапустите вс код
@MihailRomov
@MihailRomov Жыл бұрын
@@maxgraph Перезапустил vscode, заодно комп перезагрузил не помогает. Из сборки Maxgraph набирая g выходит подсказка MaxGraph, а если набрать например g-nav и tab, то получается . Чтото у меня в настройках может.
@alexandrgusletsov2567
@alexandrgusletsov2567 Жыл бұрын
2:04:40
@foodreria7438
@foodreria7438 Жыл бұрын
Как сделать, чтобы в режиме разработки в выходном файле css не оставались комментарии по типу /* stylelint-disable */?
@maxgraph
@maxgraph Жыл бұрын
В обработчике css в gulp нужно удалять комментарии. Скорее всего через плагин сжатия
@foodreria7438
@foodreria7438 Жыл бұрын
@@maxgraph короче все подряд чтобы удалял) Они же там по идее и не нужны
@mokaq
@mokaq 2 жыл бұрын
познавательно, прям тёска инопланетянин, с такой скоростью мочит))
@maxgraph
@maxgraph 2 жыл бұрын
Ахах)
@alexandrgusletsov2567
@alexandrgusletsov2567 Жыл бұрын
2:27:20 burger начало
@development76
@development76 2 жыл бұрын
Максим, а твою сборку я могу использовать для коммерческих проектов которые я делаю?
@maxgraph
@maxgraph 2 жыл бұрын
Конечно можете
@kontorasb2754
@kontorasb2754 2 жыл бұрын
А окончание предыдущего проекта, "Верстка многостраничного сайта с нуля с пояснениями", там где должен быть JS, я пропустил?
@maxgraph
@maxgraph 2 жыл бұрын
Видимо да
@daulettulepbergenov9151
@daulettulepbergenov9151 2 жыл бұрын
Спасибо за видео! Вы пользовались nunjucks? (это штука с фун file inclide но в 100 раз круче)
@maxgraph
@maxgraph 2 жыл бұрын
Пользовался, но для других целей
@dexterdragons
@dexterdragons 2 жыл бұрын
Hi, Gulp is all right and running ... but for the html header: , would you know what that is? node v13.10.1, npm v6.13.7, gulp CLI version: 2.3.0 Local version: 4.0.2 Thanks!
@ForeverDarkDeath
@ForeverDarkDeath 2 жыл бұрын
18:50 Почему в записи HTML класс не ставишь на первое место? Ведь вообще нечитабельное получается - ищешь что же за класс где-то в конце длиннючих других свойств.
@maxgraph
@maxgraph 2 жыл бұрын
Потому что так хочу)
@development76
@development76 2 жыл бұрын
Максим а как сделать так что бы input при ошибке не прыгал?
@user-zq4nz6yd2p
@user-zq4nz6yd2p Жыл бұрын
Максим, как можно stylint на твоей сборке подключить
@maxgraph
@maxgraph Жыл бұрын
Привет, она там уже стоит
@user-zq4nz6yd2p
@user-zq4nz6yd2p Жыл бұрын
@@maxgraph Привет)
@Eeegyfddgjjiii
@Eeegyfddgjjiii 2 жыл бұрын
А почему бы не добавить марджин 0 в обнуляющий файл и не писать его постоянно? И задать font-weight: 400; для body?
@maxgraph
@maxgraph 2 жыл бұрын
По этой теме есть видео в web заметках, посмотри)
@user-or1hy4xz8u
@user-or1hy4xz8u 2 жыл бұрын
А почему сборка работает только со шрифтами woff2? А как же другие форматы?
@maxgraph
@maxgraph 2 жыл бұрын
Другие бесполезны
@user-or1hy4xz8u
@user-or1hy4xz8u 2 жыл бұрын
@@maxgraph , Максим, а со стороны заказчиков не будет претензий? И еще, в ТЗ могут быть прописаны такие нюансы?
@maxgraph
@maxgraph 2 жыл бұрын
Претензии могут быть только если заказчику нужна вёрстка под очень старые браузеры. Но это вряд ли В тз будут как раз версии браузера прописаны
@whyest
@whyest Жыл бұрын
Максим, вопрос - куда подключать script карты в сборке?
@maxgraph
@maxgraph Жыл бұрын
Можно прямо в html через тег script
@TheBreade
@TheBreade 2 жыл бұрын
Хай, Макс. Такой вопрос: как сделать так, чтобы при нажатии на "подробнее" первого элемента у него менялась картинка, сабтайтл и описание ? То есть, чтобы при клике на кнопку подставлялась нужная информация ? Сейчас у всех модальных окон одно и то же содержимое, и вот его хотелось бы менять при клике. Если скопировать код модального окна и заменить в нем data-graph-target и также поменять data-graph-path, то окно просто не отображается. Я определенно делаю что-то не так, но что именно - не знаю. Может, есть какая-то статейка или еще что ? Буду благодарен за любой ответ !
@maxgraph
@maxgraph 2 жыл бұрын
Привет. Должно работать разное окно с разными таргетами. Ну а вообще, можно использовать событие плагина isOpen и в нем получать данные (наверное через innerHTML), и вставлять в модалку
@TheBreade
@TheBreade 2 жыл бұрын
@@maxgraph Окей, будем пробовать. Спасибо !
@aleksandrsanduliak2511
@aleksandrsanduliak2511 2 жыл бұрын
Как потом данный проект к примеру выложить на хостинг? На хостинге же не будет сборщика. Спасибо за ответ
@maxgraph
@maxgraph 2 жыл бұрын
Итоговую папку app (её содержимое) надо грузить на хостинг
@andy_lab
@andy_lab 2 жыл бұрын
Здравствуйте! Видео шикарное, как и сборка!) Подскажите пожалуйста, почему у меня при написании имени миксина не всплывает подсказка?) Приходится идти за полным названием миксина
@maxgraph
@maxgraph 2 жыл бұрын
Здравствуйте. Скорее всего какой-то плагин от моего отличается) видео про плагины на канале есть, посмотрите
@andy_lab
@andy_lab 2 жыл бұрын
@@maxgraph Понял, посмотрю. Большое спасибо!)
@eccotw
@eccotw 2 жыл бұрын
Добрый день, не подскажешь что нужно сделать или переустановить чтобы заработали сниппеты ? я уже папку node moduls с package.json несколько раз переустановил ничего не выходит. А так спасибо за видео очень качественно и полезные видео, спасибо тебе.
@maxgraph
@maxgraph 2 жыл бұрын
Привет А плагин поставил? Папка vscode точно есть? Попробуй перезапустить редактор
@eccotw
@eccotw 2 жыл бұрын
@@maxgraph Всё установил через npm пакеты. А плагин projects snippets не могу найти в vscode.
@eccotw
@eccotw 2 жыл бұрын
всё я понял, у вас просто в описании во множественном числе projects написано, а я так и искал)
@andriizatsepin6137
@andriizatsepin6137 Жыл бұрын
​@@eccotw спасибо !
@altosdatch8523
@altosdatch8523 2 жыл бұрын
Появился вопрос, время 2:34:01, крестик закрытия бургера не скрывается и ведёт себя странно, где смотреть ошибку?
@maxgraph
@maxgraph 2 жыл бұрын
Надо понять, что за странность
@pavliken1337
@pavliken1337 2 жыл бұрын
Здравствуйте. Что нужно сделать, что бы работало второе бургер меню на странице? (в вашей gulp-сборке)
@maxgraph
@maxgraph 2 жыл бұрын
Здравствуйте. Скорее всего написать код с нуля для второго. А зачем второе-то?)
@pavliken1337
@pavliken1337 Жыл бұрын
@@maxgraph, ну мало ли, вдруг понадобится. И еще один вопрос, простите за наглость, как установить разный Title и Description на страницах? Сейчас везде применяется title и descr из head.html Правильно ли я понимаю, что нужно установить ssi? ssi я установил, прописал в gulpfile.js следующее: var ssi = require("ssi"); var inputDirectory = "src/"; var outputDirectory = "app/"; var matcher = "/**/*.html"; var includes = new ssi(inputDirectory, outputDirectory, matcher); includes.compile(); Затем, когда я вставляю на странице контакты ничего не происходит. Что-то я немножечко в тупике.
@maxgraph
@maxgraph Жыл бұрын
не пользовался этим. Я бы просто сделал head-1, head-2 и т.д., какие вам нужно.
АЗАРТНИК 4 |СЕЗОН 1 Серия
40:47
Inter Production
Рет қаралды 585 М.
Кадр сыртындағы қызықтар | Келінжан
00:16
艾莎撒娇得到王子的原谅#艾莎
00:24
在逃的公主
Рет қаралды 54 МЛН
Слава Комиссаренко «Горит сарай, гори и хата»
1:05:45
Слава Комиссаренко
Рет қаралды 7 МЛН
КАК УСТРОЕН TCP/IP?
31:32
Alek OS
Рет қаралды 58 М.
Обзор обновления моей сборки Gulp 2.0.4
22:17
MaxGraph - cайты как страсть
Рет қаралды 13 М.
Обновление сборки Gulp. Видеоинструкция
25:24
MaxGraph - cайты как страсть
Рет қаралды 7 М.
АЗАРТНИК 4 |СЕЗОН 1 Серия
40:47
Inter Production
Рет қаралды 585 М.