пздц чувак, учусь верстать 2-3 месяца, пересмотре кучу контента других блогеров, но ты как то просто мегамозг. так быстро соображать это капец. респект и уважение твоим скилам. надеюсь дойду до такого лет за 5))))
Новичкам всегда так, могут быть затупы, может быть где-то сложно, а когда научишься как он, будешь понимать как все работает, и где что лучше использовать, знать много способов работы с элементами, то будешь так же, это все с опытом приходит, если не забрасывать. Даже если с временем беда, а ты хочешь этому научиться, выдели хотя бы по часу в день на практику т. д. и дело в шляпе, я вот тоже не знал до этого как центрировать элементы и т. д. лень было знакомится с флексами, сейчас познакомился с некоторыми свойствами, и мне достаточно часто приходиться центрировать, и оно само по себе запомнилось, ведь постоянно используешь/практикуешь
не нравится мне центровка лого через огроменный маржин. Я его отцентрировал через установку flex: 0 1 calc((100% - 117px) / 2) для его соседних элементов.
Доверстал до 22-минуты. Дальше не смог! Скакать по файлам это не по мне. Понятно что нужно разбивать верстку. Но для каждого тега создавать файл... Как по мне это маразм. Какой в этом смысл. Многие опытные верстальщики не создают 2 миллиона файлов. В одном файле гораздо легче и быстрее найти нужное место, чем рыться в куче файлов и вспоминать где там и что наверстал! Это моё мнение. )
меня тоже это напрягло, но компонентную верстку надо все-таки изучать. Я все же слил все теги в файл-родитель, тоже не смог скакать, терялся постоянно.
меня больше напрягло, что автор забил на то, что в макете не svg и использует среднего качества png, можно же было скачать где-то нормальные иконки, ну нельзя в 2020 юзать такие png иконки. По поводу модульности, в стилях еще можно это делать, но html ты можешь один писать и все, не обращать внимание, на то, что он инклюдит, а просто делать в индексе. Ну и не понял замысла делать картинкой огромную женщину на баннере, надеюсь, это как-то обыграется в будущем, пока мне не ясна мысль
@@maxgraph И тебе спасибо, за миксин со шрифтами. Хорошая штука. А то раньше приходилась в папке fonts, для каждой жирности создавать отдельную папку, туда закидывать ttf, woff, woff2. Затем в папке utils прописывать путь для каждого шрифта. И еще потом в папке vars прописывать название каждого шрифта. И все это отнимала кучу времени.
Тоже долго возился с подгонкой макета. Нашел решение: меняем ширину картинки (я делал тут onlineconvertfree.com/ru/resize-image/) до 1903px (минус правый скролл (17px)), получается идеально. Загружаем в ПП и работаем). Если есть решение поинтересней, просьба поделиться (в интернете ничего толкового не нашел).
Привет, при установке gulp файла вот такая ошибка: WebpackOptionsValidationError: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema. Перерыл интерент, но не понимаю в чём проблема?
Отличный контент!! как раз делаю верстку интернет магазина и нужно подключать одинаковый футер и хедер на всех страницах, уже думал php использовать не мог нагуглить:))) а тут бац и в gulp есть include и все! изначально хотел посмотреть структуру как ты сделал но теперь досмотрю видосы до конца:)))
Очень крутые уроки, норм объясняешь, но бляя. Исходники которые ты скинул изначально не те, что у тебя. А скачать итоговую версию с гита нельзя, ибо ты закрыл доступ. И вот как в куче этого всего найти эти различия?
@@maxgraph Пожалуйста удели исходникам чуть больше внимания, если это возможно. Я пока на втором марафоне только, может на следующих всё норм, но очень много времени занимает настройка проекта, если не правильные исходники
Никак не выходит подключить svg через use, можно кншн по-другому врубить, но я хочу понять в чем может быть дело, вроде все сделал точно так же, в чем может быть проблема?
очень странно, у меня такой же код, сборка отличается
Home
Однако если я задаю свойства container и потом задаю другие свойства header__container, то они переопределяются и просто container перестает работать, с чем это может быть связано? container у меня в папке scss>base>_base.scss , а header__container в scss>sections>_header.scss подключения в main.scss идет так: //base @import './base/reset'; @import './base/mixins'; @import './base/fonts'; @import './base/vars'; @import './base/libs'; @import './base/base'; //blocks @import './blocks/**/*.scss'; //sections @import './sections/**/*.scss';
Спасибо, очень полезное видео и приложения. Много полезных вещей при работе с большим проектом. Взял в работу setting и pixelperfect. Обязательно посмотрю остальные видео.
Я думал, что уже более менее нормально верстаю, но после просмотра твоих видео, понимаю, что делаю много чего лишнего и много чего неправильно... Даже немного расстроился :) Буду практиковаться :)
А можно ли использовать на навигацию position: absolute? Я сейчас верстаю макет в котором текст в header'е находится прямо в центре, но навигация мешает его выровнять. Если так можно, то и на реальных заказах такое допустимо?
После просмотра видео про Gulp возникла идея написать функцию, которая будет передавать значение жирности в sass-миксин при подключении шрифта исходя из текста в названии самого файла шрифта, ведь там всегда присутствует значение жирности: bold, light и т.д. А тут качаю актуальную сборку для этого марафона и там уже появилась такая функция checkWeight, круто!
Если макет 1920, по бокам отступы 50 пикселей у контента, то ширину скроллбара отнимать у контента, а отступы 50 пикселей оставить? В макете игнорируется существование скроллбара.
пздц чувак, учусь верстать 2-3 месяца, пересмотре кучу контента других блогеров, но ты как то просто мегамозг. так быстро соображать это капец. респект и уважение твоим скилам. надеюсь дойду до такого лет за 5))))
Спасибо)) дойдешь при старании))
Ну че 3 года осталось
Новичкам всегда так, могут быть затупы, может быть где-то сложно, а когда научишься как он, будешь понимать как все работает, и где что лучше использовать, знать много способов работы с элементами, то будешь так же, это все с опытом приходит, если не забрасывать. Даже если с временем беда, а ты хочешь этому научиться, выдели хотя бы по часу в день на практику т. д. и дело в шляпе, я вот тоже не знал до этого как центрировать элементы и т. д. лень было знакомится с флексами, сейчас познакомился с некоторыми свойствами, и мне достаточно часто приходиться центрировать, и оно само по себе запомнилось, ведь постоянно используешь/практикуешь
@@riderhog7846 Clasher man? Интересно, забросил ли он :D
Круто! Я хотел спорсить про относительные единицы. Их не лучше использовать для отсупов?
Я считаю что да)
Честно, огромное спасибо тебе! Лучший канал на Ютубе по верстке! Очень многому у тебя научился. Никогда не останавлявайся!
супер полезно, правда, что-то не могу понять для чего для блока hero задается height:100vh min-height:700px
Чтоб высота первого блока меньше 700 не становилась
Я даже не понял что он сделал в начале,конечно смотреть дальше смысла нет,уже не чего не понятно.
Впервые смотрю видео на скорости 0.75 )))
Отличное видео 👍 Много примеров, которые можно применять повсюду 😊Спасибо большое за качественный урок. Успехов!😉
Спасибо)
не нравится мне центровка лого через огроменный маржин. Я его отцентрировал через установку flex: 0 1 calc((100% - 117px) / 2) для его соседних элементов.
тоже вариант)
Годный контент, ты где раньше был?
Не знаю))
Работал)
Доверстал до 22-минуты. Дальше не смог! Скакать по файлам это не по мне. Понятно что нужно разбивать верстку. Но для каждого тега создавать файл... Как по мне это маразм. Какой в этом смысл. Многие опытные верстальщики не создают 2 миллиона файлов. В одном файле гораздо легче и быстрее найти нужное место, чем рыться в куче файлов и вспоминать где там и что наверстал! Это моё мнение. )
Жаль :)
меня тоже это напрягло, но компонентную верстку надо все-таки изучать. Я все же слил все теги в файл-родитель, тоже не смог скакать, терялся постоянно.
меня больше напрягло, что автор забил на то, что в макете не svg и использует среднего качества png, можно же было скачать где-то нормальные иконки, ну нельзя в 2020 юзать такие png иконки. По поводу модульности, в стилях еще можно это делать, но html ты можешь один писать и все, не обращать внимание, на то, что он инклюдит, а просто делать в индексе. Ну и не понял замысла делать картинкой огромную женщину на баннере, надеюсь, это как-то обыграется в будущем, пока мне не ясна мысль
Какой макет - то и верстаем.
@@maxgraph если бы был коммерческий проект, тоже использовал бы эти иконки png?
Чтобы при ховере в навигации не возникал баг в виде точки, нужно дописать свойство: linear и проблема решится.
transition: width 0.15s linear;
Спасибо, проверю =)
@@maxgraph И тебе спасибо, за миксин со шрифтами. Хорошая штука.
А то раньше приходилась в папке fonts, для каждой жирности создавать отдельную папку, туда закидывать ttf, woff, woff2.
Затем в папке utils прописывать путь для каждого шрифта. И еще потом в папке vars прописывать название каждого шрифта.
И все это отнимала кучу времени.
@@stasalsakhanov435 это да)
Круто! Интересный подход, хорошая подача! Главное взял некоторые штуки на вооружение) Спасибо!
Спасибо)
Спасибо мастер
Какой ноут сейчас вывозит всё показано в видео загрузки, фотошоп и т.д?
Есть видео на канале про компьютер) посмотрите
Топ контент😯
А вопрос, ты normalize.css не используешь что ль?
Просто лишние margin или padding как у ul и h2 были
Или я чето не понимаю?😸
Нормалайз их не убирает же, но я использую его)
@@maxgraph аа, даже так😅
Оки, спасибо:)
Высоту секции "hero" нужно делать при помощи свойства: calc. И тогда картинка не будет скакать.
height: calc(100vh + 143px);
почему нужно? =)
@@maxgraph потому что на макете высота секции нестандартная (не 100 vh).
А почему именно + 143px, можешь объяснить как высчитывается?
И да спасибо за крутой курс верстки смотрю с удовольствием.
Пожалуйста)
Почему тут решили обрезать макет, а не настроить ширину в device toggle toolbar?
Да удобно без него) те же Ховеры смотреть и тд
Пожалуй, да! Тоже попробую обрезать, а то после видео про perf.pixel подгонял ширину. А она слетает)) Спасибо!
Тоже долго возился с подгонкой макета. Нашел решение: меняем ширину картинки (я делал тут onlineconvertfree.com/ru/resize-image/) до 1903px (минус правый скролл (17px)), получается идеально. Загружаем в ПП и работаем). Если есть решение поинтересней, просьба поделиться (в интернете ничего толкового не нашел).
Как всегда, топ контент! Спасибо, бро
Привет, при установке gulp файла вот такая ошибка:
WebpackOptionsValidationError: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
Перерыл интерент, но не понимаю в чём проблема?
Сборка отличается, не такая как на видео. Папки со шрифтами нет. Он ее вообще не создает и шрифты тоже
Возможно она по какой-то причине не попала на гитхаб.
@@maxgraph И что делать дальше делать с шрифтами? Можно как то исправить ошибку или подсказать как сделать это за Вас...
Эх как обидно. А у меня через npm i нифига не ставится и не собирается, соответственно. Пишет ошибку
Какую?
@@maxgraph а я так и не понял, но вроде ругается на версии из json. перенес файлы из Вашего src в свою и что любопытно заработало)
Отличный контент!! как раз делаю верстку интернет магазина и нужно подключать одинаковый футер и хедер на всех страницах, уже думал php использовать не мог нагуглить:))) а тут бац и в gulp есть include и все! изначально хотел посмотреть структуру как ты сделал но теперь досмотрю видосы до конца:)))
круто) спасибо
Будешь ли натягивать на какую нибудь CMS?
Нет, только вёрстка
Очень крутые уроки, норм объясняешь, но бляя. Исходники которые ты скинул изначально не те, что у тебя. А скачать итоговую версию с гита нельзя, ибо ты закрыл доступ. И вот как в куче этого всего найти эти различия?
Почему я закрыл доступ?) все на гите есть.
@@maxgraph Пожалуйста удели исходникам чуть больше внимания, если это возможно. Я пока на втором марафоне только, может на следующих всё норм, но очень много времени занимает настройка проекта, если не правильные исходники
Почему неправильные? Что с ними?
Никак не выходит подключить svg через use, можно кншн по-другому врубить, но я хочу понять в чем может быть дело, вроде все сделал точно так же, в чем может быть проблема?
Посмотреть надо, что там
@@maxgraph я понял что svg появляется, но без заливки, ладно, не столь фатальная ошибка, разберусь
нужно svg файлы класть в папку svg src/img/svg/logo.svg , т.к в таске gulp такой путь. В видео автор кладет файл в src/img/logo.svg.
@@АлександрСмагин-ф3ш Спасибо, теперь понял
очень странно, у меня такой же код, сборка отличается
Home
Однако если я задаю свойства container и потом задаю другие свойства header__container, то они переопределяются и просто container перестает работать, с чем это может быть связано? container у меня в папке scss>base>_base.scss , а header__container в scss>sections>_header.scss
подключения в main.scss идет так:
//base
@import './base/reset';
@import './base/mixins';
@import './base/fonts';
@import './base/vars';
@import './base/libs';
@import './base/base';
//blocks
@import './blocks/**/*.scss';
//sections
@import './sections/**/*.scss';
Тут наугад увы не смогу сказать
а если я хочу использовать svg иконки как я могу вставить их в css, через спрайт?? например лупу или иконку кабинета? вы их вставляете фоном в png
Спрайтом нельзя
Не разобрался как поставить stylelint. Установил в сборку, скинул файл в рут, нужно плагин ставить в VSC для подсветки?
Плагин для редактора +плагины для самого стайл линт
Запишу отдельное видео
Спасибо, очень полезное видео и приложения. Много полезных вещей при работе с большим проектом. Взял в работу setting и pixelperfect. Обязательно посмотрю остальные видео.
Пожалуйста)
Увидел качественный контент, обрадовался, начал и понял что с исходниками проблемы - обидно, ну и сразу же закончил
В чем проблема с исходниками? По ссылочке в описании переходите, затем в общий репозиторий, и качайте.
@@maxgraph так там много чего отличается же, со шрифтами вообще проблемы
@@kenanhaciyev3759 возможно, вы что-то не так делаете) отличий не может быть, ведь там точно такой же код, который я писал в уроках
Я думал, что уже более менее нормально верстаю, но после просмотра твоих видео, понимаю, что делаю много чего лишнего и много чего неправильно... Даже немного расстроился :) Буду практиковаться :)
Не надо расстраиваться)
А можно ли использовать на навигацию position: absolute? Я сейчас верстаю макет в котором текст в header'е находится прямо в центре, но навигация мешает его выровнять. Если так можно, то и на реальных заказах такое допустимо?
Если не помешает при адаптиве - можно
@@maxgraph
Понял, спасибо
После просмотра видео про Gulp возникла идея написать функцию, которая будет передавать значение жирности в sass-миксин при подключении шрифта исходя из текста в названии самого файла шрифта, ведь там всегда присутствует значение жирности: bold, light и т.д. А тут качаю актуальную сборку для этого марафона и там уже появилась такая функция checkWeight, круто!
Хех, так вот бывает))
Если макет 1920, по бокам отступы 50 пикселей у контента, то ширину скроллбара отнимать у контента, а отступы 50 пикселей оставить? В макете игнорируется существование скроллбара.
В верстке мы никогда не привязываемся к ширине макета. Только к ширине контента. В вашем случае она будет 1820
@@maxgraph спасибо.
Записи будут? Какой пиксель перфект используете, программа?
Это и есть запись)
Очень достойно !!!
Есть вопрос, зачем нужен class site-container?
Есть ведь body что бы скрыть элементы блока которые не влезли в экран
Мне так удобнее задать оверфлоу на сайт. Чтобы не трогать боди
@@maxgraph Только что понял что работало неправильно в body, сделал как из урока и все заработало, спасибо)
Кстати, хотел спросить: Почему ты пишешь border-radius: 50%? Ведь 50% и 100% ничем не отличаются?)
я разве писал 50? обычно для круга пишу 100)) не знаю, нет какой-то закономерности.
@@maxgraph Ой, я ошибся в вопросе, 100%, я часто вижу ты пишешь 100%. Хотя я различия между 100 и 50 не замечаю. Спасибо за ответ))
Из каждого видео открываю что-то новое для себя! Спасибо за труд!
Пожалуйста)
14:33 - можно использовать свойство gap для отступов, тогда не придётся применять margin с псевдоклассом not
к сожалению флексовые гэпы еще не работают в сафари
@@maxgraph не знал, спасибо! У вас отличный канал с большим количеством полезной информации.
спасибо)
А, почему на sass не верстаете?
Нравится что-то похожее на обычный css)
А есть видео по настройки галп ?
Есть, поищите на канале)
Почему header-у назначили position: absolute ?
Задам вопрос по другому , почему тут нужны position-и ? Без них же можно обойтись ?)
да, можно обойтись. я сделал так, чтобы хедер изначально не мешал контенту, вдруг его потом сделают фикседом :) но можно и без, конечно.
@@maxgraph спасибо
а как завут вас канал максим граф?
верно)
Может фигма открыть Avacode макет?
Нет
Это же псд обычный, может открыть marsy например
А, что у вас за моделька клавиатуры. Приятно клацает на фоне видео.
Anne pro 2
@@maxgraph Какие свичи?
@@maxgraph Где покупали? Али?
красные
Да, на алишке)