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

Подписаться 30 тыс.

Просмотров 37 тыс.

50% 1

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

Опубликовано:

1 мар 2022

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 312

@user-wo6bu3sz3b Год назад

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

@blackcelebration3588 2 года назад

Максим, спасибо. Просто душой отдохнул, наблюдая, как методично работает профессионал. Идея с камерой отличная.

@maxgraph 2 года назад

Спасибо)

@vouqreels8114 2 года назад

Верстка с этой сборкой чудесна! И идея - видеть тебя, создает более уютную атмосферу, продолжай)

@maxgraph 2 года назад

Спасибо)

@disconnect355 2 года назад

Спасибо, Максим. Посмотрел 5 минут, но как раз попался момент, который нужно было сделать. Пересмотрю всё позднее.

@maxgraph 2 года назад

Спасибо)

@antonshcherban2100 Год назад

Максим, спасибо тебе за проделанный труд, думаю это один из лучших каналов, что есть в интернете, контент очень годный и понятный. За сборку огромное спасибо, все работает)

@maxgraph Год назад

спасибо)

@xdayx53 7 месяцев назад

@@maxgraph согласен со всем вышесказанным. сборка просто топчик, лучший канал по верстке 10000%. Максим, скоро курс выйдет по верстке/js? планируется вообще?

@UserUser-vf4sg Год назад

Спасибо, очень полезный урок! Ждем больше подобных видосов. Очень благодарен автору канала.

@maxgraph Год назад

Пожалуйста)

@user-ho5fn2vv1g 2 года назад

Максим, спасибо за классный и полезный контент.

@maxgraph 2 года назад

Пожалуйста)

@vitaliiviktorovich7870 Год назад

Жму руку! Разжевал всё подробно и понятно. Контент топчик, благодарю!

@maxgraph Год назад

Пожалуйста)

@whyest Год назад

Максим, сборка отличная! Все понятно и доступно!

@maxgraph Год назад

Спасибо)

@whyest Год назад

@@maxgraph Максим, еще вопрос - в Chrome favicon меняется при подключении своей, а в Safari уже нет. Где ее можно изменить кроме папки resources?

@gergeorg 2 года назад

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

@maxgraph 2 года назад

Это уже не относится к сборке))

@tatiana5197 2 года назад

Спасибо, Максим! Первая мысль: Максим существует!))) По поводу некоторых комментариев: звук отличный. Как раз сейчас изучаю галп и очень интересна Ваша сборка))

@maxgraph 2 года назад

Пожалуйста)

@AlekseyNaumov_734 Год назад

@@maxgraph А есть видео в котором вы собственно и собираете эту сборку? Я вот про последние изменения нашёл видео, а с чего все начиналось нет.

@luxarmiger5729 2 года назад

Друже, огромная тебе благодарность, дорогой! Сборка замечательная и новый формат, где тебя видно тоже очень зашел. Скажи пожалуйста, какие горячие клавиши для вставки сниппетов?

@maxgraph 2 года назад

Привет! Спасибо) Просто начинай вводить сниппет с буквы G и подскажет варианты)

@user-lm9ee1gn5p 2 года назад

Классная задумка + с камерой ещё лучше

@maxgraph 2 года назад

Спасибо)

@user-bp9yg9cj9j 2 года назад

Видео супер!!! ОГРОМНЫЙ ЛАЙК)))

@maxgraph 2 года назад

Спасибо)

@Vladimir-yh2dl 2 года назад

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

@maxgraph 2 года назад

Здравствуйте. Посмотрите последнее видео в ui компонентах про это)

@pavelkirav649 Год назад

Сборка во 👍👍👍👍,продолжай в том же духе!!!

@maxgraph Год назад

Спасибо)

@user-hc7wq9om9i Год назад

Спасибо Вам большое за полезное видео!👍

@maxgraph Год назад

Пожалуйста)

@BMikel 2 года назад

Видео супер. Будет время, повторю. Спасибо

@maxgraph 2 года назад

Пожалуйста)

@xbtxbt3714 2 года назад

Привет, Максим! Спасибо за твой труд. Все очень круто. Скажи, натяжку на Winter CMS предыдущей верстки уже не ждать?

@maxgraph 2 года назад

Привет, будет все) запись уже делаю

@xbtxbt3714 2 года назад

@@maxgraph Супер! Жду с нетерпением! Спасибо!

@yulya1348 2 года назад

Максим, спасибо за видео! Давно мечтала увидеть вас в "реале", так сказать))). *Фанатка со Skillbox*☺

@maxgraph 2 года назад

Спасибо))

@user-mv1dg9fg5m 2 года назад

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

@Dedinside05 2 года назад

вы че на заводе слушайте чтоль, норм звук

@TrelinGames 2 года назад

отлично все слышно. как по мне.

@INTTable 2 года назад

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

@AndAlexei 2 года назад

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

@user-je4wx2ny5b 2 года назад

Спасибо за контент! Вопрос не по теме, что за клавиатуру используешь?

@maxgraph 2 года назад

Привет, Anne pro 2 На моем сайте можно глянуть все что использую)

@Clay286 Месяц назад

Спасибо огромное и за сборку, и за такую видео-инструкцию! Скажи пожалуйста, почему ты задаёшь размеры img в самом html, а не в CSS?

@maxgraph Месяц назад

Это полезно для производительности)

@user-lz8zm5lo4r Год назад

Привет, спасибо за годный контент! Подскажи пожалуйста, какая тема у тебя установлена?

@maxgraph Год назад

Привет) One Monokai

@Tony.Crafter 2 года назад

Спасибо Макс за видос. Помогло отвлечься от хаоса вокруг. Добавь света на себя. Темновато в комнате у тебя.

@maxgraph 2 года назад

Спасибо)

@Littlchaffinch 9 месяцев назад

Максим, спасибо за видео, есть вопрос по поводу формы, может в другом видео есть, но не нашла... Как настроить gulp, чтобы можно было отправлять ajax запросы, т.е. как добавить поддержку php в сборку?

@maxgraph 9 месяцев назад

Все это в документации к сборке написано

@user-gg2ye5gw2h 2 года назад

Спасибо большое за контент!!! Очень приятно тебя видеть через камеру))) Макс, а почему ты сразу не пропишешь margin 0 и padding 0 для всех элементов что бы каждый раз не писать. Вот так например *{margin: 0; padding: 0;}

@maxgraph 2 года назад

Посмотри видео в веб заметках про это) поймёшь

@user-gg2ye5gw2h 2 года назад

@@maxgraph Спасибо за ответ) благодаря тебе я улучшаю свои знания в любимом деле 😁

@Sergus1984 2 года назад

Добрый день, спасибо за урок. Хотел спросить, зачем нам нужны такие короткие миксины как display:flex; Ведь написать df гораздо проще чем инклуд миксина. Еще хотел узнать, где можно посмотреть готовые сниппеты для верстки, которые используются в сборке. Спасибо.

@maxgraph 2 года назад

Здравствуйте. Ну может для флекса и не надо, а для нескольких свойств удобно Сниппеты лежат в папке vscode

@DmitryDomnichev 2 года назад

Супер видео. Спасибо. Расскажи пожалуйста как разворачивать твои сниппеты в WebStorm. Я им пользуюсь просто. Свои сниппеты в этой программе я могу делать. А в твоих по всей видимости в json нужно лезть?

@maxgraph 2 года назад

Никогда не пользовался этой ide, не знаю

@DmitryDomnichev 2 года назад

@@maxgraph Очень жаль для меня)) Повторяю за тобой в этом редакторе, и получаю кучу ошибок . Приходится много фиксить, что ведет еще к большему пониманию. Две недели уже делаю этот кейс. Так держать !

@Alexus1504 2 года назад

Видео супер!!! Спасибо!!!

@maxgraph 2 года назад

Пожалуйста)

@user-vg9mj6eo7e 6 месяцев назад

Замечательная сборка. Я не являюсь верстальщиком, но иногда приходится. И как здорово что есть такая сборка, где можно быстро собрать лендинг. И хотелось бы поподробнее видео при работе с формой. А именно интересует формат отправляемого письма. Может я чего упустил или где его можно создать?

@maxgraph 6 месяцев назад

В файле mail.php лежит код письма, можно там поменять

@kubris.developer Год назад

Сколько смотрю, но так бросается в глаза это копирование/вставка! - Shift+Alt+downArrow - дублировать выделенное, хоть всю секцию, а без выделения дублирует строку, где курсор стоит (editor.action.duplicateSelection - если не работает); - Alt+downArrow/upArrow - перемещает текущую строку вверх/вниз по коду (notebook.cell.moveUp, editor.action.moveLinesUpAction) Видео чёткое, Спасибо!

@maxgraph Год назад

Мне так неудобно)

@valerypobelenskiy1001 2 года назад

Привет Максим, отличная сборочка многое облегчает на порядок ... ты забыл в burger.scss указать display none а на разрешения экрана начиная с high-tablet display block

@maxgraph 2 года назад

Да, возможно))

@user-st8lz4no2v Год назад

Максим, здравствуйте, а как насчет установки плагина gulp-ttf2woff2, что-бы сразу конвертировать ttf в woff2? Удобнее было бы ( по-моему мнению )

@maxgraph Год назад

Не хочу)

@tatiana5197 Год назад

Максим, здравствуйте! Пробую вашу сборку, очень нравится) , выложила код на гитхаб, но на странице сайта только список подключенных частей html, с чем это может быть связано?

@maxgraph Год назад

Здравствуйте! видимо вы выложили src, а нужно готовую папку - app

@Reservoirv 2 года назад

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

@maxgraph 2 года назад

Табы работают через стрелки, как и должны

@user-cy2vp8xp3g 2 года назад

Масксим, спасибо вам большое за Ваш труд, очень полезный контент! Ребят, подскажите пожалуйста, где почитать или посмотреть про данный случай с margin-bottom: auto; (1:31:49). Почему он так идеально в данном случае работает ?)

@maxgraph 2 года назад

Здравствуйте. Всё из-за флекса. При флексе работает авто) вот и все

@user-cy2vp8xp3g 2 года назад

@@maxgraph Здравствуйте. Спасибо!)

@daulettulepbergenov9151 2 года назад

Спасибо за видео! Вы пользовались nunjucks? (это штука с фун file inclide но в 100 раз круче)

@maxgraph 2 года назад

Пользовался, но для других целей

@user-vs5eh7ez4b Год назад

сборка отличная, спасибо. Почему-то при создании нового файла курсор начинает сам перепрыгивать на след строку

@development76 2 года назад

Максим а как сделать так что бы input при ошибке не прыгал?

@ZolotarevPavel 2 года назад

Максим, спасибо за ваш труд. Верстаю на вашей новой сборке. У меня вопрос: Сделал две формы, звонок и товары, обе в модальном окне. Но работает только одна из. Как их заставить работать совместно. И как реализовать динамический заголовок для товара. Заранее спасибо.

@maxgraph 2 года назад

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

@ZolotarevPavel 2 года назад

@@maxgraph Есть два вида форм (заказ звонка и заказ товара) использую разные атрибуты в graph-modal, к примеру form1 и form2. Работает только первая форма на странице, как я понимаю нужен цикл, перебрать атрибуты и открывать разные формы?

@maxgraph 2 года назад

Видимо да

@Anatoli-bq1pe Год назад

Благодарю за классное видео! Скажите, а на относительных единицах rem и em вместо фиксированных px, верстаете? Всё же адаптивный шрифт тогда получается

@maxgraph Год назад

Нет, верстаю пикселями, и тоже получается адаптивно)

@Anatoli-bq1pe Год назад

@@maxgraph не совсем понятно, как в px может получаться адаптивно, если к примеру пользователь будет менять настройки шрифтов в браузере (к примеру увеличивать размер шрифта) , то разве размер шрифта прописанный в px тож будет увеличиваться? Он то и будет стоять на месте. А вот если и отступы и размеры шрифта будут заданы в относительных единицах, они то и будут и изменяться и адаптироваться и не ломаться. При том то меньше работы с адаптивом при верстке сайта, если изначально задавать все в относительных единицах, кроме только тех ситуаций где нужны фиксированные значения (px). Для меня лично плюсы очевидны. Хотелось бы узнать более развернутый ответ. Благодарю

@maxgraph Год назад

Кому надо поменять размер шрифтов - может поменять масштаб страницы, и все :) А насчёт упрощения адаптива спорно, я и так не испытываю с этим проблем

@Anatoli-bq1pe Год назад

@@maxgraph Благодарю

@MelkoR4111 Год назад

@@Anatoli-bq1pe какойто бред написали)) в каком месте у вас шрифты. которые написаны в пикселях не меняют своего размера, когда меняешь размер экрана? все также меняется как и везде.

@trobiukfront-end5795 Год назад

спасибо за видео! уточнение по сборке: файл _vars.scss строка --font-family: "Open Sans", sans-serif; и файл _settings.scss строка font-family: var(--font-family, sans-serif); два раза прописано sans-serif. Это так задумано? Или в одном из мест можно удалить? Спасибо!

@maxgraph Год назад

Опечатка))

@e-astap Год назад

В более ранних версиях сборки был таск, конвертирующий шрифты из ttf в woff2 (плагин gulp-ttf2woff2). Подскажите, почему отказались от его использования? Ведь, вроде бы с ним проще, чем конвертить вручную?

@maxgraph Год назад

Он нагружает сборку) Да и нужен только вофф 2 теперь, потому на вижу смысла

@Beardy13 Год назад

Максим, большое спасибо за видео. В настоящий момент изучаю вашу сборку gulp параллельно изучая js. К сожалению не все понятно. Не работают модальные окна. В консоли появляется ошибка. Не подскажете, как исправить? (Код ошибки не могу добавить. Ютуб комментарий удаляет.)

@Beardy13 Год назад

Разобрался )))

@gign_141 Год назад

Мы не заслуживаем тебя, братан...

@maxgraph Год назад

Да ладно))

@nikolaikukurudza4084 2 года назад

Максим привет, можешь подсказать с помощью какого плагена высвечивается неправильная очередность значений свойств в css, я думал это stylelint. Он у меня не работает)

@shakur.0238 2 года назад

Stylelint

@ondrui 2 года назад

у меня тоже stylelint не работал изначально при запуске проекта в vscode, я исправил добавив в конфигурацию vscode следующие настройки (первые три убирают проверку кода встроенным редактором) "css.validate": false, "less.validate": false, "scss.validate": false, "stylelint.validate": [ "css", "less", "postcss", "scss" ]

@AlekseyNaumov_734 Год назад

В vsCode копировать строку можно: alt + shift + стрелка вниз (вверх), а для перемещения строки: alt + стрелка вниз (вверх).

@maxgraph Год назад

знаю) не хочу)

@hermes4048 10 месяцев назад

Спасибо за видео и за сборку. Столкнулся с такой проблемой. В файле settings.scss прописаны свойства для адаптивных изображений img { height: auto; max-width: 100%; object-fit: cover; } Из-за этого сталкиваюсь с проблемами в задавании размеров изображениям инлайново в html. То есть я их задаю, но они не применяются (css их перебивает) Как с этим быть? В этом видео у тебя такой проблемы нет, у меня последняя версия твоей сборки. upd: Вставляю через тег picture Если вставлять просто через тег img то такой проблемы нет

@hermes4048 10 месяцев назад

Дело в max-width: 100% для img, img подстраивается под своего родителя (picture) Как это дела лучше поправить? Убрать это свойство для img совсем? upd: ничего не надо убирать, просто изображению не хватало места растянуться) Хотя иногда надо что бы изображение "растолкало" элементы, а оно из-за этого свойства наоборот сжимается

@user-rb5ot4rx6k 8 месяцев назад

Здраствуйте. У меня вопрос. У меня почему-то паданги контейнера работают только в шапке сайта и в херо. В чем может быть проблема?

@kontorasb2754 2 года назад

А окончание предыдущего проекта, "Верстка многостраничного сайта с нуля с пояснениями", там где должен быть JS, я пропустил?

@maxgraph 2 года назад

Видимо да

@development76 2 года назад

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

@maxgraph 2 года назад

Конечно можете

@alexshev7412 Год назад

MaxGraph, как происходит взаимодействие сборки gulp с github? Допустим сделал Билд и выложил на github, потом внёс изменение в проекте, снова Билд делать и заменять целиком css файл?

@maxgraph Год назад

Сейчас никак не происходит) но по идее да, после билда надо пуш делать

@aleksandrsanduliak2511 2 года назад

Мучался с навигацией 4 дня, бургер не работал из-за того, что .menu--active { с пробелом, а я писал .menu--active{ без пробела. В остальном видео крутое, набрался навыков!

@maxgraph 2 года назад

Отлично)

@MihailRomov Год назад

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

@maxgraph Год назад

Перезапустите вс код

@MihailRomov Год назад

@@maxgraph Перезапустил vscode, заодно комп перезагрузил не помогает. Из сборки Maxgraph набирая g выходит подсказка MaxGraph, а если набрать например g-nav и tab, то получается . Чтото у меня в настройках может.

@onese7en141 Год назад

Макс привет, а ничего что итоговый main.js твоего лендинга прогнанный через webpack у тебя весит целых 1.15 мб? Нормальны ли вообще такие большие размеры JS файла в таких маленьких проектах?

@maxgraph Год назад

Привет, думаю ничего)

@onese7en141 Год назад

@@maxgraph всё я разобрался в твоей сборке), дело в том что в конфиге вебпака стоял мод development, если ставить production и после этого запускать галп то вебпак собирает js уже весом 300кб

@budextershopfaq3491 Год назад

@@onese7en141 а можешь подсказать где и что исправить?там 2 записи есть с development

@budextershopfaq3491 Год назад

@@maxgraph Максим можете объяснить из-за чего такой размер исходного файла main.js?и есть ли разница если бы он был бы в 2 раза легче к примеру?и если использовать данную сборку для больших проэктов,по логике main.js будет в разы больше? как этого избежать?при использовании другой сборки у меня main.js 30-40 kb,из-за чего тут такой большой размер?Заранее спасибо !

@maxgraph Год назад

Тут такой размер из-за вебпака, там много своего кода идёт. Но это не критично

@user-Ruslan-Akimov Год назад

Спасибо за прекрасную сборку. Есть один вопрос, подскажите пожалуйста почему не на всех операционных системах работает сборка gulp? У меня проблема в том что на windows 10 и на Linux в сборке не отрабатывает команда watch, тем самым приходится нажимать ctrl+s для сохранения, без этой команды автоматический не сохраняет, и не обновляет страницу. А на 11 windows все отлично работает. Может вы знаете в чем проблема?

@maxgraph Год назад

Сборка работает везде, разве что не тестил линукс) У меня два компа и мак, на них разные системы. Все в порядке

@user-Ruslan-Akimov Год назад

Спасибо.

@user-vj8qv6hz2p Год назад

Может ли кто то помочь с browser-sync. Когда верстаю без инструмента разработчика (посмотреть код в гугл хроме) изменения выполняются нормально. Когда включаю инструмент разработчика то изменения не происходит, и когда обновляю страницу вручную то появляется пишет нет подключения к сети. Проверял на хроме и яндекс браузере.

@rodrigoespayzer1006 6 месяцев назад

Вопрос такой, подключаю шрифты как по видео. но они не применяются у меня в woff2 перевел. все так же по стандарту arial стоит причем это происходит с теми шрифтами которые я конвертирую если я скачиваю в woof2 шрифт с ним все нормально

@maxgraph 6 месяцев назад

Ну тут множество причин может быть, так наугад не сказать

@IslamNasrylaev 2 года назад

MaxGraph - cайты как страсть, саламалейкум. Есть такая идея для видео, можешь снять видео, о том как сделать сборку галпа под wordpress. Пример: очень часто приходится при разработке на wp работать с локальной версией(openServer) , и потом выгружать на хостинг , самое не приятное, если делаешь правки, то опять делаешь их в локальной.... потом переносишь на хостинг. Можно ли это как то автоматизировать? Желательно еще авто-пуш бд-шки, в гугле очень старая информацию по этому вопросу, на ютубе тоже. Я думаю это будет полезно.

@maxgraph 2 года назад

Привет. Можно такое сделать, правда я не разбирался как. Но запишу)

@AntonioBenderas 2 года назад

Крутотень. А есть видео по мануалу этой сборки? Или в этом видео есть?

@maxgraph 2 года назад

Это оно и есть)

@maxgraph 2 года назад

Это оно и есть)

@andy_lab 2 года назад

Здравствуйте! Видео шикарное, как и сборка!) Подскажите пожалуйста, почему у меня при написании имени миксина не всплывает подсказка?) Приходится идти за полным названием миксина

@maxgraph 2 года назад

Здравствуйте. Скорее всего какой-то плагин от моего отличается) видео про плагины на канале есть, посмотрите

@andy_lab 2 года назад

@@maxgraph Понял, посмотрю. Большое спасибо!)

@W0rldEd1t 2 года назад

Максим, при запуске твоей сборке в терминале после команды npm i, команда gulp не распознается(не существует), какое решение этой проблеме? Спасибо.

@maxgraph 2 года назад

Попробуй установить его глобально

@whyest Год назад

Максим, вопрос - куда подключать script карты в сборке?

@maxgraph Год назад

Можно прямо в html через тег script

@arshavin0309 2 года назад

а почему в scss используете переменные черех var, а не с помощью $? есть ли разница?

@maxgraph 2 года назад

Есть разница. Обычные мне удобнее

@TheBreade 2 года назад

Хай, Макс. Такой вопрос: как сделать так, чтобы при нажатии на "подробнее" первого элемента у него менялась картинка, сабтайтл и описание ? То есть, чтобы при клике на кнопку подставлялась нужная информация ? Сейчас у всех модальных окон одно и то же содержимое, и вот его хотелось бы менять при клике. Если скопировать код модального окна и заменить в нем data-graph-target и также поменять data-graph-path, то окно просто не отображается. Я определенно делаю что-то не так, но что именно - не знаю. Может, есть какая-то статейка или еще что ? Буду благодарен за любой ответ !

@maxgraph 2 года назад

Привет. Должно работать разное окно с разными таргетами. Ну а вообще, можно использовать событие плагина isOpen и в нем получать данные (наверное через innerHTML), и вставлять в модалку

@TheBreade 2 года назад

@@maxgraph Окей, будем пробовать. Спасибо !

@aleksandrsanduliak2511 2 года назад

Как потом данный проект к примеру выложить на хостинг? На хостинге же не будет сборщика. Спасибо за ответ

@maxgraph 2 года назад

Итоговую папку app (её содержимое) надо грузить на хостинг

@ramankarseka7362 2 года назад

а как решить вопрос с spaceBetween в swiper, когда в mobile надо поменять на 20px?

@maxgraph 2 года назад

Пока не очень понял проблему)

@user-jv4px9cu3e 2 года назад

Привет Макс!а про фриланс планируешь рассказывать?где заказы на верстку брать и тд

@maxgraph 2 года назад

Привет, новых видео не планирую, старые есть на канале)

@user-jv4px9cu3e 2 года назад

@@maxgraph чето я не находил таких у тебя, может не там смотрел))

@maxgraph 2 года назад

В плейлистах канала посмотри)

@user-jv4px9cu3e 2 года назад

@@maxgraph окей

@user-vg9mj6eo7e Год назад

Замечательная сборка, Максим. Но у меня почему-то при каждой компиляции сборки, перед тем как отправить на сервер теряются шрифты. Не очень приятно, когда каждый раз приходится заново их закидывать. Минута, но все же...

@maxgraph Год назад

Тут надо смотреть, что не так вдруг

@user-vg9mj6eo7e Год назад

Да, здесь не объяснишь. Все делал как показывали. Закидываю нужные шрифты в woff2 и подключаю их. А при сборке они убираются. Приходится заново их закидывать

@user-or1hy4xz8u 10 месяцев назад

В папке "vendor" есть файл "normalize.css" - там, в основном, стили для корректной работы IE 10+... Наверно, такой файл уже не очень актуален на сегодняшний день? Ведь ИЕ не поддерживается...

@maxgraph 10 месяцев назад

Там не только для ие)

@altosdatch8523 Год назад

Максим, спасибо за твои труды! Видосиками это называть язык не поворачивается!) Ещё про плавную прокрутку, вроде автор плагина Smooth Scroll уже сам отправляет в css scroll-behavior, как с этим быть? В чём подвох?))

@maxgraph Год назад

Привет! Scroll behavior все ещё не работает в сафари)

@altosdatch8523 Год назад

@@maxgraph Аааааа...))

@AlekseyNaumov_734 Год назад

У меня в хроме не работает.

@UserUser-vf4sg Год назад

@@AlekseyNaumov_734 тебе нужно в _setting.scss найти свойство html { box-sizing: border-box; scroll-behavior: smooth; } -туда дописать эти строчки. Автор за это не говорил ни слова.

@AlekseyNaumov_734 Год назад

@@UserUser-vf4sg Пасиб, попробую.

@eccotw 2 года назад

Добрый день, не подскажешь что нужно сделать или переустановить чтобы заработали сниппеты ? я уже папку node moduls с package.json несколько раз переустановил ничего не выходит. А так спасибо за видео очень качественно и полезные видео, спасибо тебе.

@maxgraph 2 года назад

Привет А плагин поставил? Папка vscode точно есть? Попробуй перезапустить редактор

@eccotw 2 года назад

@@maxgraph Всё установил через npm пакеты. А плагин projects snippets не могу найти в vscode.

@eccotw 2 года назад

всё я понял, у вас просто в описании во множественном числе projects написано, а я так и искал)

@andriizatsepin6137 Год назад

@@eccotw спасибо !

@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!

@reina_5425 2 года назад

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

@maxgraph 2 года назад

Конечно)

@Tik_Lab Год назад

Правильно ли я понимаю, что в теге head в html нужно подключать основные шрифты для предзагрузки. В таком случае если я подключу так, это негативно скажется на загрузке сайта и если браузер не использует woff, то могут появиться ошибки в браузере про то, что шрифт загружен, но не используется?

@maxgraph Год назад

Таких браузеров сейчас нет, так что и проблем не будет Скорее будут предупреждения, не ошибки

@WockeezChannel 2 года назад

можно подключать шрифты только в формате woff2? а остальные ttf, svg не нужны?

@maxgraph 2 года назад

Если не нужна поддержка ie - да, только woff2

@WockeezChannel 2 года назад

@@maxgraph а если нужна поддержка ie, то какие основные форматы шрифтов подключать?❤

@hermes4048 9 месяцев назад

Привет. Мне захотелось сделать фиксированный header (шапку). Такой вопрос: При открытии и закрытии бургер меню страница прокручивается сверху до положения где был открыт бургер. При открытии модальных окон все ок. Немного покопал, это происходит из-за блокирования скролла. А именно из-за свойства position: fixed, заданного для body через класс dis-scroll. Я правильно понимаю, что оно нужно для исправления бага с положением курсора на ios (я с ним пока не сталкивался)? Как исправить данный момент? Определять операционную систему и отдельно задавать свойство через js? Почитал readme для сборки, задавал класс fixed-block для header, не помогает.

@hermes4048 9 месяцев назад

Нашел решение в комментариях в видео "JS-решения №4. Универсальное отключение скролла на сайте". Такое происходит из-за scrollBehavior = 'smooth' в js.

@maxgraph 9 месяцев назад

Должно помочь. Возможно что то не так делаете

@hermes4048 9 месяцев назад

@@maxgraph разобрался)

@ForeverDarkDeath 2 года назад

18:50 Почему в записи HTML класс не ставишь на первое место? Ведь вообще нечитабельное получается - ищешь что же за класс где-то в конце длиннючих других свойств.

@maxgraph 2 года назад

Потому что так хочу)

@saivengo 10 месяцев назад

Макс, кнопка закрытия мобилки осталась висеть на десктопе... Как ее убрать на десктопе?

@maxgraph 10 месяцев назад

Дисплей нон задать можно

@Eeegyfddgjjiii 2 года назад

А почему бы не добавить марджин 0 в обнуляющий файл и не писать его постоянно? И задать font-weight: 400; для body?

@maxgraph 2 года назад

По этой теме есть видео в web заметках, посмотри)

@user-jg2cn4bu2l 3 месяца назад

Не отображается картинка прописанная в srcset

@bleinmono2784 3 месяца назад

Ребята, подскажите, как с помощью gulp сверстать мультиязычный сайт? Без переводчиков, с реальными страницами.

@maxgraph 3 месяца назад

Вы можете просто создать папки /ru, /en и там хранить разные страницы

@rviturnel8516 Год назад

👍

@alexdreamer11 2 года назад

День добрый. Поддерживает ли ваша сборка верстку многостраничных сайтов?

@maxgraph 2 года назад

Здравствуйте, да

@alexdreamer11 2 года назад

@@maxgraph Файлы других html страниц создавать в корне src?

@pav1337 Год назад

Здравствуйте. Что нужно сделать, что бы работало второе бургер меню на странице? (в вашей gulp-сборке)

@maxgraph Год назад

Здравствуйте. Скорее всего написать код с нуля для второго. А зачем второе-то?)

@pav1337 Год назад

@@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 Год назад

не пользовался этим. Я бы просто сделал head-1, head-2 и т.д., какие вам нужно.

@qwerty8858 Год назад

Очень хорошее видео. НО можно чуть чуть по громче говорить пожалуйста?

@MihailRomov Год назад

Привет! к твоей сборке можно подключать fancybox, slickslider файлами? подключаю файлы в head, закидываю файлы в app/css , app/js работает но при перезагрузке файлы удаляются. через src не закинуть. можно как-то закинуть файлы, чтоьбы после перезагрузки сборки они сохранились? спасибо заранее!

@maxgraph Год назад

Можно подключать все только через npm

@bake5448 Год назад

Здравствуйте,хотел попробовать вашу сборку,установил через npm.Вот только сниппеты не хотят работать,даже вводя начальную букву не сворачиваются имена сниппетов.Чем это связано?

@MihailRomov Год назад

@@bake5448 и у меня такая же канитель

@altosdatch8523 Год назад

Появился вопрос, время 2:34:01, крестик закрытия бургера не скрывается и ведёт себя странно, где смотреть ошибку?

@maxgraph Год назад

Надо понять, что за странность

@user-mw8ik4ko8r Год назад

Добрый вечер не подскажите почему при верстке tooltip он не встает в строку ? текст распологается на две строки под иконкой, скопировал ваш код из github тоже самое в сафаре по меньше растояние

@maxgraph Год назад

Надо смотреть что там

@user-mw8ik4ko8r Год назад

@@maxgraph Пытался ссылку на скриншот закрепить удаляет youtube, не подскажите как можно показать вам иначе? Если описать словами то span с текстом tooltip занимает место как бы на странице хотя скрыт

@user-mw8ik4ko8r Год назад

@@maxgraph Добавил position absolute для tootip__txt и все стало отлично, текст выстроился в линию и перестал занимать место и расширять тег h3, что это было можете подсказать? или я видимо упустил этот момент, хотя у вас в коде не было установки position

@An0AdoOChannel Год назад

Таже проблема, уже переписал готовый код из гит хаба, все равно текст из tooltip становится в две строки, полностю скопировал новый benefits.scss tooltip.scss, benefits.html, все равно та же проблема.

@igormajrov8444 Год назад

Сборка отличная. Прошло больше полугода уже. При установке сейчас выпадает много ошибок: куча deprecated. "npm audit fix ---force" помогает частично.

@maxgraph Год назад

Эти ошибки никак не влияют на работу, необязательно исправлять

@igormajrov8444 Год назад

@@maxgraph "mkaufman.HTMLHint" уже нерабочий. Вместо него маркетплейс предлагает "HTMLHint.vscode-htmlhint"

@AlekseyNaumov_734 Год назад

Можно же в сборке gulp прописать автоматическую конвертацию шрифтов и их подключение.

@maxgraph Год назад

Можно. Но я не хочу

@user-zq4nz6yd2p 9 месяцев назад

Максим, как можно stylint на твоей сборке подключить

@maxgraph 9 месяцев назад

Привет, она там уже стоит

@user-zq4nz6yd2p 9 месяцев назад

@@maxgraph Привет)

@user-zq4nz6yd2p 9 месяцев назад

Табы 2:46:12 Кастомный скролл 2:54:49

@foodreria7438 Год назад

Как сделать, чтобы в режиме разработки в выходном файле css не оставались комментарии по типу /* stylelint-disable */?

@maxgraph Год назад

В обработчике css в gulp нужно удалять комментарии. Скорее всего через плагин сжатия

@foodreria7438 Год назад

@@maxgraph короче все подряд чтобы удалял) Они же там по идее и не нужны

@user-tm2mp4dy4z Год назад

Почему не используете html тег dialog для модальных окон ? Зачем нужен целый плагин, не совсем понимаю, js кода намного меньше будет при использовании dialog. По caniuse поддержка всеми основными браузерами уже есть...

@maxgraph Год назад

Вам стоит внимательно посмотреть на поддержку. В сафари она появилась только в этом году, этого мало) Ну и плагин все равно более функционален

@user-tm2mp4dy4z Год назад

@@maxgraph Понял, спасибо!

@user-st8lz4no2v Год назад

Ещё вопросик, делаю всё правильно, но прокрутка не плавная, а моментальная,что может быть не так ?

@maxgraph Год назад

Невозможно сказать наугад

@user-or1hy4xz8u 10 месяцев назад

Добрый вы человек, людям бесплатно помогаете)))) Насчет результирующего файла "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 10 месяцев назад

Итоговый файл просто подключается к хтмл и все. Править надо исходник и собирать заново

@Eeegyfddgjjiii 2 года назад

Почему в файле burger js когда сохраняешь файл, появляется пробел после ? И выдает 44 ошибки? Что с этим сделать? Убираю эти пробелы, ошибки исчезают, но когда идёт сохранение опять появляются пробелы и ошибки(((

@maxgraph 2 года назад

Надо посмотреть

@Eeegyfddgjjiii 2 года назад

@@maxgraph отключил одну настройку, по выравниванию кода, сохранил файл burgur.js как надо, закрыл его и потом включил эту настройку опять(так как она связана не только на выравнивание файлов js) И все заработало

@Eeegyfddgjjiii 2 года назад

@@maxgraph а почему вы не используете плагины для перевода шрифтов из ttf в woff и woff2? А сейчас это делаете вручную.

@user-wo6bu3sz3b Год назад

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

@maxgraph Год назад

вероятно, потому что фон должен быть под хедером