Верстка многостраничного сайта с нуля с пояснениями. Gulp, SCSS, CSS Grid, БЭМ. Верстка шапки
Рет қаралды 29,770
2 жыл бұрынПривет! Первая часть седьмого марафона на канале, верстаем макет Createx! Это платный макет, которым я делюсь с вами, а также показываю как его верстать.
В этой части готовим проект, используем Gulp-сборку и верстаем шапку сайта по всем канонам)
github.com/maxdenaro/gulp-max... - сборка Gulp
github.com/maxdenaro/youtube-... - репозиторий проекта на GitHub
www.figma.com/file/r9RnpJZ6Iw... - макет сайта
www.artlebedev.ru/typograf/ - Типограф
chir.ag/projects/name-that-co... - сервис для названий цветов
Меня зовут Максим Васянович. Фрилансер уже 5 лет, создал более 50 коммерческих сайтов. Преподаватель в онлайн-университете Skillbox, автор курса Веб-верстка.
Понравилось? clck.ru/Gr9Ec
Моя страница вконтакте: maxdenaro
Мой блог: blog.maxgraph.ru
Мой сайт: maxgraph.ru
Канал в телеграм: teleg.run/maxgraph
Чат для верстальщиков: teleg.run/maxgraph_chat
Тема VS Code: One Monokai
Шрифт VS Code: Consolas, 'Courier New', monospace
#ityoutubersru #марафонверстки #лендинг
@luxarmiger5729 2 жыл бұрын
Ну наконец-то хоть кто-то многостраничник на cms натянет. Только из-за этого я с тобой!
@maxgraph 2 жыл бұрын
Хех)
@fantast2568 2 жыл бұрын
Супер что вы делаете нормально как положено от начала и до конца!
@maxgraph 2 жыл бұрын
Спасибо)
@user-lm9ee1gn5p 2 жыл бұрын
Полностью поддерживаю 🤙
@madmaxhiam1684 2 жыл бұрын
Лучшие уроки по верстке на ютюбе. Жду следующий выпуск.
@maxgraph 2 жыл бұрын
Спасибо)
@lesliekingsman6066 2 жыл бұрын
Монументально и комплексно! В предвкушении конечного результата!!
@maxgraph 2 жыл бұрын
Спасибо)
@mosostep2478 2 жыл бұрын
Очередной раз убедился в истинности таких слов: "Кто ищет, тот всегда найдет". Повезло, что наткнулся на тебя:) Очень много информации и мало "воды", одно удовольствие наблюдать за работой. Спасибо за действительно полезные ролики, есть чему поучиться. Если есть видеоролик по теме CMS WordPress, хостинг и т.п., оставь, пожалуйста, ссылку, обязательно посмотрю. Спасибо заранее, успехов!
@maxgraph 2 жыл бұрын
Спасибо) Ссылки увы с телефона не могу оставить, но по плейлистам легко найдётся)
@FF-gq3hm 2 жыл бұрын
Контент топовый!!!! Спасибо вам за ваш огромный труд!)))))) столько нового узнаю вместе с вами!!!!!!!
@maxgraph 2 жыл бұрын
Отлично) спасибо
@nestartup 2 жыл бұрын
очень подробно, спасибо за видео!
@maxgraph 2 жыл бұрын
Пожалуйста)
@kharlugina_mari Жыл бұрын
Огонь! Все получилось. Едем дальше! Спасибо.
@stylelifeweb.wyndace 2 жыл бұрын
Супер! Очень лаконично и понятно объясняешь) Крутой ребрендинг канала, кста)
@maxgraph 2 жыл бұрын
Спасибо) Ребрендинг пока ещё в процессе))
@koshatskaya9951 2 жыл бұрын
Спасибо! Урок понравился. Однозначно лайк😘
@maxgraph 2 жыл бұрын
Пожалуйста)
@m1akarov442 2 жыл бұрын
Круто , автор настоящий профессионал своего дела. Удовольствие получил , дальше пошел смотреть You Tube =) Жду 2 урок, круто! Успехов
@maxgraph 2 жыл бұрын
Спасибо)
@andreyveda 2 жыл бұрын
Премного благодарен за такой щедрый марафон, аж настроение поднялось! 😃 Обязательно заведи аккаунт на патреоне и рекламируй его как Вадим Макеев после своих роликов. Мы с радостью поддержим твои ролики и курсы финансово! 🔥👍
@maxgraph 2 жыл бұрын
Будет будет))
@kotofun 2 жыл бұрын
Спасибо! Отличные видео-уроки. Мастер!!!
@maxgraph 2 жыл бұрын
Спасибо)
@o.o.rom. Жыл бұрын
Начал верстать данный сайт. Что-то делаю сам, а что-то подсматриваю у автора. Спасибо за качественный контент!
@maxgraph Жыл бұрын
Пожалуйста)
@user-wj8ft4he3o 2 жыл бұрын
Балдеж!! Ура ура ура !! Ждём следующие выпуски!!!
@maxgraph 2 жыл бұрын
👍
@shifrl771 2 жыл бұрын
Действительно качественное видео, gulp сборка прост огонь, лучший контент, в том же духе!
@maxgraph 2 жыл бұрын
Спасибо!)
@032vanya 7 ай бұрын
Крутой курс, спасибо!
2 жыл бұрын
Cпасибо за марафон.
@maxgraph 2 жыл бұрын
Пожалуйста)
@maryanaviviandeck7737 2 жыл бұрын
Ночь с субботы на воскресенье - и чем я занимаюсь? Всё сделала! Жду следующую часть! Не знаю, как буду успевать 3 части в неделю, это прям много. А вообще спасибо, всё классно!
@maxgraph 2 жыл бұрын
Круто) спасибо)
@kirillshipovalov9947 2 жыл бұрын
Очень понравилось, жду продолжения
@maxgraph 2 жыл бұрын
Отлично))
@user-bp9yg9cj9j 2 жыл бұрын
Макс красавчик! Всегда лайк!!!
@maxgraph 2 жыл бұрын
Спасибо)
@Expertdog 2 жыл бұрын
Супер! Я думал, что немного знаю эту кухню, но начав смотреть, понял, что мои знания на уровне ясель))) Открыл для себя новое слово Gulp, mixin, @include, scss Как со всем этим работать? Что за миксины и как их создавать и как их подключать. Только начало, а вопросов уже вагон и маленькая тележка. Жду продолжения!!!
@maxgraph 2 жыл бұрын
Про галп и scss на канале есть))
@k0rsoYD 2 жыл бұрын
Очень интересно было бы посмотреть на тонкости и моменты, которые стоит учесть в верстке под iOS как со стилями так и с JS (как тема для ролика) А этот макет и марафон выглядит многообещающ, смотрю и уже жду следующий выпуск!
@maxgraph 2 жыл бұрын
Что-то такое планирую про айос.но когда не знаю
@detro1821 2 жыл бұрын
год разрабатываю сайты, но даже с такого лёгкого макета можно узнать что-то новое) спасибо
@maxgraph 2 жыл бұрын
Пожалуйста)
@squarl5922 2 жыл бұрын
Привет! Только верстаешь, или ещё CMS знаешь? Мне нужно найти толкового разработчика, может сработаемся. Можешь написать свои контакты, я тебе напишу
@user-zv3in3zj1v 2 жыл бұрын
Было очень интересно) недавно закончила курс по верстке, многое делаю так же, но есть моменты, которые для меня не очень понятны)) Это новый опыт и всегда интересно видеть, как разные люди разными способами верстают. Особенно познавательно - верстать сразу по Пикселю. Обычно мы же по макету смотрим все отступы, а тут - все практически на глаз)) И соглашусь, что это эффективно, потому что в любом случае значения с макета потом нужно корректировать по Пикселю, а тут уже сразу все пиксель в пиксель и не будет раздражать лишняя доработка)
@maxgraph 2 жыл бұрын
Очень рад, спасибо)
@user-fh1gr5li2r Жыл бұрын
Благодарю за урок!
@_pheax 2 жыл бұрын
круто, спасибо Макс
@maxgraph 2 жыл бұрын
Пожалуйста)
@summersbyy 2 жыл бұрын
Отличное видео, мало воды)
@maxgraph 2 жыл бұрын
👍
@Jane-ge7ho 2 жыл бұрын
Ура! Супер, будет чем заняться на выходных :) Большое спасибо за твой труд и марафон
@maxgraph 2 жыл бұрын
Пожалуйста)
@4ucjloiiu779 8 ай бұрын
это круто, спасибо
@iphp 2 жыл бұрын
Класс спасибо!
@maxgraph 2 жыл бұрын
Пожалуйста)
@driverf1668 2 жыл бұрын
С Алексеем соревнуетесь 😆 Здоровая конкуренция это хорошо
@maxgraph 2 жыл бұрын
С кем?)
@tatiana5197 2 жыл бұрын
О, спасибо, Максим! Так здорово смотреть, когда уже база уложилась в голове) Всё же маржин лефт не совсем под запретом?
@maxgraph 2 жыл бұрын
Иногда можно) но редко) Пожалуйста)
@jackyiakovenko 2 жыл бұрын
ну наконец 😍👍
@maxgraph 2 жыл бұрын
👍
@Learn-Dev_ 2 жыл бұрын
Спасибо!!! Очень круто :)))
@maxgraph 2 жыл бұрын
Пожалуйста)
@marina-ej4qd9kc1wh Жыл бұрын
Pixel perfect - крутенько!
@green3216 2 жыл бұрын
Максим Васянович, подскажите, если не трудно. По вашей актуальной сборке gulp, которая прикреплена под видео, норм делать этот макет или есть нюансы, на которые стоит обратить внимание? Просто начал делать, немного начинает закипать котелок. Или стоит просто разобраться и продолжать делать?
@maxgraph 2 жыл бұрын
Да любой сайт на сборке можно сделать) посмотрите видео про то как я с ней работаю, будет проще
@lisofsky8151 2 жыл бұрын
круть кртанская ваще спасибо !!
@maxgraph 2 жыл бұрын
Пожалуйста)
@user-Arvard 2 жыл бұрын
Макс, такой вопрос: нормальным ли будет решение НЕ делать для шапки "justify-content: space-between;", а вместо этого просто оставить "display: flex;", задать логотипу отступ справа, а для "header__contacts" сделать "margin-left: auto;" ? просто чтоб не прибегать к отрицательному марджину, а подвинуть всё в рамках обычных положительных значений
@maxgraph 2 жыл бұрын
Можно и так, да
@azizbeksamatov4631 2 жыл бұрын
Урок отличный. Много чего можно изучать. Понятно объясняете. А когда выйдет продолжение уроков ? (Посадка на Winter CMS). Заранее спасибо.
@maxgraph 2 жыл бұрын
В феврале) спасибо
@braveheart3403 Жыл бұрын
@MaxGraph - cайты как страсть почему то нет некторых вещей из видео, это изза обновления сборки? не могу по гайду нормально сделать ничего( в settings нет тега body, и где его искать не знаю 12:35 момент
@maxgraph Жыл бұрын
Да, в сборке немного иначе стало теперь Вы можете взять готовый код из гит, убрать собственно код и использовать старую сборку
@user-cs1mc6sm9w Жыл бұрын
Добрый день! Подскажите а это всего по 10 пикселей с каждой из сторон подрезать надо? или это значение переменное которое может меняться от прокта к проекту?
@maxgraph Жыл бұрын
только слева и справа. везде по 10, от проекта к проекту
@user-cs1mc6sm9w Жыл бұрын
@@maxgraph Спасибо за помощь. Успехов в ведении канал и развития!
@ruslanhd7262 Жыл бұрын
Привет, я не давно начал изучать БЭМ, и у меня возник вопрос смотря на твою разметку, а именно, разве элементу блока nav__link (25:44) можно задавать текстовые стили? Там же только можно задавать стили связанные с расположением блоков (position, margin, flex/grid) ? Если я не прав, то напиши почему, мне прям важно знать ибо эта тема еще не совсем уяснилась в моей голове ) ЗАранее Спасибо.
@maxgraph Жыл бұрын
Можно задавать элементам БЭМ что угодно
@ruslanhd7262 Жыл бұрын
@@maxgraph Тогда я вообще перестал понимать что-то в БЭМ))) Блок - это самостоятельная сущность, ему можно задавать стили, кроме position, margin и иногда padding. Модификатор - это сущность, которая только дополняет блок или элемент, скажем картинкой какой нибудь или другим цветом для кнопок (ховер), а если и элементу можно добавлять что угодно, тогда в чем прикол модификатор элемента ?
@Bassenhouse 2 жыл бұрын
Спасибо!
@maxgraph 2 жыл бұрын
Пожалуйста)
@onfull8166 Жыл бұрын
Два вопроса, как сделать снипет с табуляцией и как убрать эту табуляцию при выделении
@user-lm9ee1gn5p 2 жыл бұрын
Топ контент
@maxgraph 2 жыл бұрын
Спасибо)
@user-wb9rd9bu9n Жыл бұрын
💯👍👍👍
@nemercevroman 5 ай бұрын
Добрый вечер! Не сработал гулп в терминале, однако npm i принял все данные корректно. Ошибку при гулпе уже не смог скопировать, так как снёс всё. Шрифты не подключились, некоторые стили не соответствуют. Когда прочитал все комментарии, понял, что сборка просто обновленная и тд. Тогда скачал готовый репо с гита и... при открытии index.html обнаружил только html, без стилей и тд. Пытался сделать слияние директорий на локальном устройстве гулпа и репо сайта, тоже не много изменилось. Точно что бы наверняка не знаю что делать, наверное пойду смотреть инфу по гулпу у вас на канале, надеюсь там получится. Очень заинтересовал марафон, крутое начало, жаль делать паузу. Спасибо!
@maxgraph 5 ай бұрын
Добрый вечер! Да, сборка теперь новее. Но в репозитории урока все равно старая, вполне можно ей пользоваться
@nemercevroman 5 ай бұрын
@@maxgraph спасибо что подсказали) изучая данное видео из вашего канала, kzfaq.info/get/bejne/fsllnNl9sd66ZIU.htmlsi=uHFAO8baj1iVOtNc я понял что галп у меня в принципе не установлен, сейчас это уже исправлено, продолжаю обучение, очень информативное и полезное! Я так думаю, что у меня поэтому даже готовый код с гита сыпался, где только разметка была
@nemercevroman 5 ай бұрын
@maxgraph Здравствуйте! Прошел gulp4, усвоил необходимые знания - всё работает! В связи с тем, что приходится скачивать готовый репозиторий в этом марафоне, придется либо вручную приводить разработку до момента начала этого видео, либо просто смотреть без практики, для себя считаю любой формат полезным, более менее, в любом случае спасибо!
@nemercevroman 5 ай бұрын
покопался в репо, думаю коммит f269e28e9c подойдет, отпишусь по результату. Очень хорошая работа, хочу что бы в дальнейшем каждый мог практиковаться. *правка, коммит f269e28 фикс хтмлэ
@nemercevroman 5 ай бұрын
всё прошло успешно, продолжу плейлист на этом комите
@NayskomMedia 11 ай бұрын
Спасибо за отличный урок! Когда будет курс по WinterCMS?
@maxgraph 11 ай бұрын
Привет! Я думаю что в августе. Там все с нуля будет, с другим макетом, поэтому надо время)
@ktowho42 Жыл бұрын
Склонировал gulp сборку, во время устновки около 15 depricated. gulp команды по итогу не работают. Я что-то не так делаю? Или действительно зависимости устарели?
@maxgraph Жыл бұрын
Неважно, что там depricated, это не влияет на работу. Нужно смотреть ошибки
@valerypobelenskiy1001 2 жыл бұрын
Максим привет ) в чем может проблема быть в Computed отображает просто шрифт Ubuntu но не Ubuntu-Regular странно....
@maxgraph 2 жыл бұрын
А в чем проблема, все верно
@andrewpizzert4065 Жыл бұрын
Вот хочу узнать по поводу .container. БЭМ вроде не любит лишних оберток и блоки же могут быть разной ширины в макетах. Можно ли делать вот так? Для header добавить page__header и там прописать стили контейнера и там же сделать флексы для всей навигации? Т.е вместо обертки будет вот так: class="header page__header". Меня только смущает то, что код будет дублироваться, но так вроде будет больше маневров для переиспользования. Можно же в одном классе писать стили контейнера центровщика и там же задавать флексы?
@maxgraph Жыл бұрын
Можно делать и так, и так. Разницы никакой
@squarl5922 2 жыл бұрын
Макс, привет. Можно в шапке объединить лого и меню в див, чтобы не писать отрицательные марджины. Нормальный способ, или есть минусы?
@maxgraph 2 жыл бұрын
Лишние дивы разве что)
@user-rs2cr2cd8f 2 жыл бұрын
При помощи свойства gap flex елементами можно давать отступы. В примере можно было nav меню дать gap:40px и между ними были бы отступы и не пришлось бы использовать псевдо классы))
@maxgraph 2 жыл бұрын
Нет, нельзя. Ещё поддержка слишком слабая)
@user-rs2cr2cd8f 2 жыл бұрын
Понимаю
@user-em2zl1lp3z Жыл бұрын
Спасибо за классное видео, скажи пожалуйста что за площадка на которой ты покупаешь макеты для вёрстки ?
@maxgraph Жыл бұрын
themeforest. Правда сейчас уже не знаю, возможно ли там что-то купить))
@koshatskaya9951 2 жыл бұрын
Скажите, пжл, что лучше использовать sass или less в подобной разработке?
@maxgraph 2 жыл бұрын
Сасс новее, значит его)
@trobiukfront-end5795 2 жыл бұрын
Спасибо за видео! Не получилось запустить gulp-сборку, обновил gulp-scss до v5 заработала. Это связано с node.js? У меня последняя версия (16)
@maxgraph 2 жыл бұрын
Скорее уж с сасс)
@user-fs5rm7kf6y 2 жыл бұрын
топ контент
@maxgraph 2 жыл бұрын
Спасибо)
@crazyhippo9191 2 жыл бұрын
Да, гугл пусть гуляет со своими шрифтами, мало того , что зависишь от него, так есть еще и косяки. Например, тот же Lato на гугле лежит старой версии, без кириллицы и тп, хотя давно уже вышла расширенная версия этого шрифта.
@ob7349 2 жыл бұрын
Обьяснение классное, детально, как мне надо, только переключение между этими страничками, туда записать, там создать - пугает(, а так Спасибо!)))👍
@maxgraph 2 жыл бұрын
Дело привычки)
@nicC-S 2 жыл бұрын
Максим доброго времени. У меня вопрос: для переменных для цвета ты используешь :root... но при этом ты пользуешься sass, почему не используешь $name... Мне очень понравилась твоя идея, что переменные цвета вынесены в отдельный файл. Хочу взять на вооружение)) Но не понял что за структура :root... поэтому полез гуглить))) (:root... - css; $name... - sass)
@maxgraph 2 жыл бұрын
Мне больше нравятся нативные переменные css, а не sass. Возможно их можно тоже как-то встроить в sass, но не искал даже Они в любом случае круче хотя бы возможностью использования в js
@user-gp8ok4yz6p 2 жыл бұрын
Почему модификатор через двойной дефис ( -- ), По бэму же одинарное нижнее подчеркивание. Я что то пропустил? )
@maxgraph 2 жыл бұрын
Можно и так, и так
@squarl5922 2 жыл бұрын
В чем преимущество делать иконки через фон, а не через псевдоэлемент или обычную картинку в html?
@maxgraph 2 жыл бұрын
Разделение по признаку. Проще html, удобнее css
@user-od6zw6zb4k 2 жыл бұрын
Подскажите что делать, если не запускается сборка gulp?
@maxgraph 2 жыл бұрын
А почему, что за ошибка?
@user-lm9ee1gn5p 2 жыл бұрын
Разметку nav вы раскрыли с помощью snippet?
@maxgraph 2 жыл бұрын
Да, свой собственный написал
@user-fs5rm7kf6y 2 жыл бұрын
15:22 не получается использовать svg через тег img,ничего не отображается
@maxgraph 2 жыл бұрын
Тут смотреть надо
@igorproshyn9380 Жыл бұрын
Сборка gulp не работает с библиотеками которые скачал и разместил там где нужно в папке вендор и подключил в файле _вендор
@maxgraph Жыл бұрын
Да, все так. Теперь только через npm
@sergik55 2 жыл бұрын
добрый день! давно смотрю видео уроки и насколько я помню раньше в сборках был конвертор TTF to WOFF & WOFF2, почему сейчас нужно на сторонние сайты искать и конвертировать? и еще не понятно если сборка используется на реальных проекта(каждый день для разных макетов) зачем тогда body и container запихивать далеко данные в них меняются часто и логичнее их перенести в main.scss
@maxgraph 2 жыл бұрын
Решил не грузить сборку конвертером) А по поводу боди и контейнер - просто моё личное удобство
@sergik55 2 жыл бұрын
@@maxgraph пока смотрел видео возник еще возник еще один вопрос а что если миксин убрать а оставить просто классы с флексами и добавлять эти классы в html?
@maxgraph 2 жыл бұрын
Можно и так)
@sergik55 2 жыл бұрын
@@maxgraph неожиданный обрыв считаю header не готовым, где состояние :hover & :active у ссылок?
@maxgraph 2 жыл бұрын
Будет в свое время
@aslan_web 2 ай бұрын
Привет а что за плагин этот include в html, что-то не могу найти (
@maxgraph 2 ай бұрын
Gulp-fileinclude
@toy9664 2 жыл бұрын
все очень круто, но можете, пожалуйста, объяснить целесообразность создания маленьких подфайлов стилей для каждого подраздела хэдера?
@maxgraph 2 жыл бұрын
Здравствуйте. Мне удобнее так) знаю где какие стили
@yura_8952 2 жыл бұрын
А как ты делаешь сразу деплой из репозитория на другой сайт?
@maxgraph 2 жыл бұрын
Есть на канале видео)
@user-oz8xb2fj9u 2 жыл бұрын
шрифт Ubuntu почему то не подключается, хотя сделал все как в видосе
@maxgraph 2 жыл бұрын
Надо смотреть)
@dis1755 2 жыл бұрын
Максим, а где покупал макет?
@maxgraph 2 жыл бұрын
Envato
@FryFry-rd5sf 2 жыл бұрын
Максим, а что за площадка с макетами?
@maxgraph 2 жыл бұрын
Themeforest
@FryFry-rd5sf 2 жыл бұрын
@@maxgraph оперативно) Спасибо!
@user-vf2js9xt4f 2 жыл бұрын
У меня power shell не работает, что делать я пишу npm i у меня ошибку выдает
@maxgraph 2 жыл бұрын
Для начала показать ошибку)
@user-vf2js9xt4f 2 жыл бұрын
Шрифт не подключается это наверно из-за того что powershell работает
@maxgraph 2 жыл бұрын
@@user-vf2js9xt4f что значит не работает?)
@isradinnurbek3525 2 жыл бұрын
Не подскажите что за тема vscode
@maxgraph 2 жыл бұрын
В описании написано)
@dis1755 2 жыл бұрын
Почему отступы у пунктов меню не gap ?
@maxgraph 2 жыл бұрын
Потому что во флексах gap не поддерживается везде
@serhiiretsenko2237 2 жыл бұрын
Макет начинает прогружаться и превращается в чёрное полотно :( Подскажите, плиз, решение :(
@maxgraph 2 жыл бұрын
Возможно банально слабый пк. Сложно сказать точно
@serhiiretsenko2237 2 жыл бұрын
@@maxgraph машина мощная, но видео встроенная.
@maxgraph 2 жыл бұрын
Хм, ну тогда должно работать. Надо гуглить
@serhiiretsenko2237 2 жыл бұрын
@@maxgraph Нужна была дискретная видео :)
@user-jt7wb3zc1m 2 жыл бұрын
готовий участок кода - gist?
@maxgraph 2 жыл бұрын
Сниппет))
@user-jt7wb3zc1m 2 жыл бұрын
@@maxgraph А, точно, тоже вспоминал слово но не угадал, спасибо!
@anfain3831 2 жыл бұрын
а можно сразу адаптив делать?
@maxgraph 2 жыл бұрын
Вы можете делать все, что вам угодно) но видео про адаптив у меня будет в самом конце
@amaksatovich5935 Ай бұрын
Будет ли натяжка данной вёрстки?
@maxgraph Ай бұрын
Нет. Будет другой сайт)
@amaksatovich5935 Ай бұрын
@@maxgraph скоро?
@maxgraph Ай бұрын
Пока не знаю. Сейчас в планах просто марафон
@alexsanders7240 2 жыл бұрын
Как називається тема в VS Code?
@maxgraph 2 жыл бұрын
Под видео есть название)
@Medve.d 2 жыл бұрын
ctrl+k+l нижний регистр текста
@user-or1hy4xz8u Жыл бұрын
Макс, подскажите, вот скачал файлы данной сборки с Гитхаба - youtube-creatix-marathon. Там в папке "app" только 1 файл - index.html. Запускаю его - но готовой верстки нет, только каркас какой-то. Как запустить готовую верстку в браузере? Может, ссылку дайте, где объясняете....
@maxgraph Жыл бұрын
Для этого нужно использовать gulp. Посмотрите видео про это
@electrostryker6332 2 жыл бұрын
Отличный видос! Но после того, как узнал о Pug, забыл про html. Я не знаю, как можно верстать те же карточки товаров без миксинов, или верстать без подключения разных частей сайта в один файл, в общем без шаблонизации) Это же прекрасно, написал данные карточки в массив объектов, перебрал этот массив и вывел карточку в условный cards-wrapper, всё считай без использования JS
@maxgraph 2 жыл бұрын
Спасибо)
@electrostryker6332 2 жыл бұрын
@@maxgraph пробовали верстать с помощью Pug? Мне просто интересно)
@maxgraph 2 жыл бұрын
Да) html удобнее
@electrostryker6332 2 жыл бұрын
@@maxgraph привыкли наверное?) ну, тут уже на вкус и цвет
@ivankrashevskyi3837 2 жыл бұрын
Какая стоимость такой верстки? без натяжки
@maxgraph 2 жыл бұрын
Я бы взял тысяч 20-25
@ramankarseka7362 2 жыл бұрын
18:14 это называется emmet, вижу, что у тебя иначе настроено, расскажи, пожалуйста, как. 26:20 почему не gap?
@tatiana5197 2 жыл бұрын
А я подумала, что Максим шаблон хотел сказать)
@maxgraph 2 жыл бұрын
1) Это сниппеты, урок по ним есть на канале 2) поддержка gap во флексах слишком слабая
@ramankarseka7362 2 жыл бұрын
@@maxgraph flex-gap - 87.79%. т.е. все живое, а под ie мы не верстаем. понятно, что разницы нет, ну и ладно) а про сниппеты посмотрю, хоть уже и кастомных emmet-ов навоял. суть аналогичная.
@FACEBAKER Жыл бұрын
Слишком сложно. пойду по проще поищу)
@An0AdoOChannel Жыл бұрын
Сборка какая-то не правильная, начал все последовательно делать, svg файлы не отображаются, контент весь становиться в центре, сам контейнер 320px, это указано в .page__body меняешь все размеры сам, вообще может контент подходящий но получается не для меня, вообще ничего не понял почему именно так, и почему ничего нельзя исправить.
@maxgraph Жыл бұрын
Так посмотрите в гите готовый код, там же все работает
@An0AdoOChannel Жыл бұрын
@@maxgraph Вы не поняли меня, я хотел повторить всю верстку за вами, но я делал как делали вы, и у меня ничего не получилось.
@maxgraph Жыл бұрын
Потому что сборка с момента этого видео чуть обновилась
@An0AdoOChannel Жыл бұрын
Беру свои слова обратно, я сильно не внимательный и не читаю описание на гите, спасибо за сборку, и за видео, продолжаю верстать.
@SergiyPolar 2 жыл бұрын
А как же обещанный October? 😁 А я говорил же, говорил...
@maxgraph 2 жыл бұрын
А что с ним? Во вступлении все сказано
@SergiyPolar 2 жыл бұрын
@@maxgraph ну просто ещё когда только была озвучена мысль о курсе по October cms, то я сразу сказал, что по October уже не выйдет, а будет по Winter 😁
@maxgraph 2 жыл бұрын
Ну так да. По платной системе смысл делать)
@rosolovsky 2 жыл бұрын
@@maxgraph Не думаю что Winter чем то отличается от бесплатной October версии 1.1.
@SergiyPolar 2 жыл бұрын
@@rosolovsky он и не отличался вообще ничем изначально 😁
@pungushe 2 жыл бұрын
Не вывоится logo.svg сделал все как в видео
@maxgraph 2 жыл бұрын
Нужен код)
@pungushe 2 жыл бұрын
@@maxgraph разобрался спасибо
@user-yl1dp2hw9n 2 жыл бұрын
Mini.scss лучше переименовать в helpers
@maxgraph 2 жыл бұрын
Может)
@user-nk8wq4sx1x Ай бұрын
Gulp заготовка устарела, npm такими конскими ошибками ругается насчет версий, npm audit fix ничем не помогает..
@maxgraph Ай бұрын
Да, просто используйте актуальный галп, немного изменив под себя код)
@doniyorusmonov152 2 жыл бұрын
не могу запускать гупл помгите
@maxgraph 2 жыл бұрын
Что конкретно не так?
@igormajrov8444 Жыл бұрын
Pixel Perfect - зло реально.
@maxgraph Жыл бұрын
Кому как) если примириться со злом - выходит даже удобно
@fresh_wind87 2 жыл бұрын
Вот вроде сделал всё от души, объяснял, но отбил желание смотреть или заниматься этим. Из-за своих автоматизированных галпов, микиснов , и прочей строительно-автоматизированной фигне, я не понимаю сам процесс верстки, этими штуками автоматизированными , я ничего не понял. даже флексы в миксины перевел автор, и что мне смотреть как на автомате всё строится там, когда сам процесс почти не виден нормально?
@maxgraph 2 жыл бұрын
Для тебя есть ролики как предпоследний, где нет никакой сборки) а это - для более продвинутых людей
@fresh_wind87 2 жыл бұрын
@@maxgraph спасибо, посмотрю
@Demonik4052 8 ай бұрын
Здравствуйте Смотрю у Вас уже не первый марафон, но вот с Gulp работаю впервые. Не подскажите, как решить проблему? При запуске команды gulp возникает ошибка: Error [ERR_REQUIRE_ESM]: require() of ES Module C:\Site-layout-5 ode_modules\gulp-image\index.js from C:\Site-layout-5\gulpfile.js not supported. Instead change the require of index.js in C:\Site-layout-5\gulpfile.js to a dynamic import() which is available in all CommonJS modules. at Object. (C:\Site-layout-5\gulpfile.js:18:15) { code: 'ERR_REQUIRE_ESM' } Пробывал использовать import image from 'gulp-image', но тогда ошибка: SyntaxError: Cannot use import statement outside a module На просторах интернета ответа не нашёл, так как не совсем понимаю, что конкретно искать.. Буду рад, если Вы мне поможете Желаю Вам успехов в Вашем деле)
@Demonik4052 8 ай бұрын
Если у кого-то будет такая же ошибка, то вот как я её решил: Дело в том, что gulp-image перешел на ESM, под него все конфиги надо переделывать или откатывать на прошлую версию Собственно говоря, я и откатился на прошлую версию, написав npm i gulp-image@5
@d1l2r77 2 жыл бұрын
chokidar@2.1.8: Chokidar 2 does not receive security updates since 2019. Upgrade to chokidar 3 with 15x fewer dependencies npm WARN deprecated svgo@1.3.2: This SVGO version is no longer supported. Upgrade to v2.x.x. шо то такое вылазает и не хочет работать(
@d1l2r77 2 жыл бұрын
это в powershell
@maxgraph 2 жыл бұрын
Это не влияет на работу)
@pascalsparadox9211 Жыл бұрын
А вы на какой площадке покупаете макеты?
@maxgraph Жыл бұрын
Envato market
@pascalsparadox9211 Жыл бұрын
@@maxgraph спасибо Макс.для меня в создании сайта стало самым сложным сделать сам дизайн чем вёрстка.я сам гидравлик и начал делать сайти по гидравлическим системам,логика и вёрстка оказалась легче чем делать сам дизайн.книги что нашел на русском либо старые либо плохие.хорошие и современные книги по дизайну нашёл тока на немецком языке.делать дизайн на уровне европейцев сложно.шаблон этот хороший!
@braveheart3403 Жыл бұрын
почему то не работает сборка и выдает кучу ошибок, не знаю что делать тыщу способов перепробовал. есть какое то решение? npm ERR! Cannot read properties of null (reading 'pickAlgorithm') npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\1crow\AppData\Local pm-cache\_logs\2022-11-03T02_14_14_408Z-debug-0.log PS C:\Users\1crow\gulp-maxgraph-master> gulp gulp : Имя "gulp" не распознано как имя командлета, функции, файла сценария или выполняемой программы. Проверьте правил ьность написания имени, а также наличие и правильность пути, после чего повторите попытку. строка:1 знак:1 + gulp + ~~~~ + CategoryInfo : ObjectNotFound: (gulp:String) [], CommandNotFoundException + FullyQualifiedErrorId : CommandNotFoundException
@maxgraph Жыл бұрын
Попробуйте установить галп глобально на пк
@braveheart3403 Жыл бұрын
@@maxgraph Помогло! спасибо!
@braveheart3403 Жыл бұрын
@@maxgraph почему то нет некторых вещей из видео, это изза обновления сборки? не могу по гайду нормально сделать ничего( в settings нет тега body, и где его искать не знаю 12:35 момент
MaxGraph - cайты как страсть
Рет қаралды 11 М.
Верстка многостраничного сайта с нуля с пояснениями. Gulp, SCSS, CSS Grid, БЭМ. Services и Portfolio
MaxGraph - cайты как страсть
Рет қаралды 9 М.
Pro Web
Рет қаралды 3,3 М.
MaxGraph - cайты как страсть
Рет қаралды 31 М.
MaxGraph - cайты как страсть
Рет қаралды 21 М.
Фрілансер по життю
Рет қаралды 1 МЛН
MaxGraph - cайты как страсть
Рет қаралды 4,6 М.
Coding With Topchiy
Рет қаралды 2,8 М.
ВебКадеми | Юрий Ключевский
Рет қаралды 46 М.