Просто чувствуется большой опыт! Спасибо Вам за то, что делитесь знаниями с нами в этих видео бесплатно. Лучший туториал однозначно! Потому что лучшее обучение - это практика, а здесь только она)
Лысый из IBM 6 часов без остановки показывает как надо.. смотреть без регистрации и смс! А если серьёзно - спасибо за титанический труд. В рутубе, к сожалению, мало контента такого качества. Продолжайте в том-же духе, успехов!
Я много разной вёрстки у разных учителей посмотрел, но это.. Это просто next level, blown mind! Очень круто и структурировано. Настоящий высокопрофессиональный подход, такой фиг где увидешь! Спасибо большое, и хотелось бы ещё хотя бы один свёрстанный маэстро макетик увидеть и желательно с натяжкой на WP, если время найдётся. Чтобы закрепить материал так сказать. Буду использовать как подручное пособие для своей вёрстки!
Дорогой Виталий! Изучаю верстку три месяца и в голове была настоящая каша. Только после просмотра этого ролика сложился паззл! Работа вами проделана титаническая, но это именно то, что надо! Молодец! Подписка однозначно! Считаю, что эта информация сэкономила мне часов 100! Успехов вам! Хотела дополнить - Виталий единственный из всех авторов по этой теме (а посмотрела я ее - море!) учит не просто как делать, но и как размышлять! Отличная подача материала. Сама четыре лендинга заваяла после просмотра - это, оказывается не сложно, когда Виталий объяснил!
Такое чувство , когда потратив 6 часов на это видео сэкономишь 100-ни часов в будущем. Огромный респект тебе Виталий за то, что ты делаешь для подписчиков!!!
1 месяц назад (изменено) Просто чувствуется большой опыт! Спасибо Вам за то, что делитесь знаниями с нами в этих видео бесплатно. Лучший туториал однозначно! Потому что лучшее обучение - это практика, а здесь только она) написал Михаил
Спасибо большое за такую большую проделанную работу. Занимаюсь фронтом уже больше пяти лет и всегда интересно посмотреть решение типовых задач с ракурса другого разработчика.
Мне вообще по кайфу Frontend) Что не понимаю: 1. Начинаю копаться с самого начала, начало начал когда только добавили данную функцию. Узнаю про неё все. 2. Вырезаю из цветной бумаги данную функцию и подписываю. 3. При начале вёрстки собираю сначала все на белой доске. Занимает минут 10 от силы. 4. На ИЗИ верстаю)). Спасибо за Ваш труд. Узнал не много, но для меня даже крохи инфы очень полезны.
Ашка)) Думаю олды вспомнят. Раньше был сериал "Чародеи. Страна великого дракона". И там была злая чародейка Ашка). Аж скупую слезу пустил, когда вспомнил)
Очень крутое видео, с удовольствием выполнил данный макет, с учетом подхода Автора:) Хотелось бы немножко обьяснить преимущества использования переменных в качестве Пикселей)
Супер, я жду подобных роликов! Может запишешь как-то видео о кросбраузерности, в особенности интересует большой список не поддерживаемых свойств css браузерами Safari, mobile/desktop?
Виталий, можете пожалуйста мне объяснить почему задаёте отступы внутренние для section-inner, если по макету видно что отступы у section-outer(или margin'ы для иннера)
Здравствуйте я полный Ноль ) . Хотел под видео руку поднабить ну и выяснилось что ни Гулпфайла у меня нет ни прочие файлы как у вас в подготовке я не имею. думаю в процессе где то выковыряю у вас и перепешу ))
если надо будет изменить все в большую или меньшую сторону то надо будет изменить ТОЛЬКО эту переменную и увеличится или уменьшится все пропорционально и не надо будет бегать и искать 1000 параметров
Отличное видео! Спасибо большое. Подчерпнул для себя много нового. Такой вопрос - чем объясняется необходимость указывать размерность по типу $base, исходя из того, что можно использовать скажем "rem", или даже "px" так как в макетах дизайнеры редко заморачиваются над отступами и одной размерностью (целостностью, кратностью) ?
на 20ой минуте речь идёт о центрировании .wrapper-inner Для тех, у кого не произошло изменение при установке margin: 0 auto; проверте подключен ли у вас SASS. То есть, нужно: 1. установить плагин Live SASS compiler в VS Code, перезагрузить приложение. 2. Так, как у вас уже подключен styles.css в файле index.html, то нажмите клавишу WATCH SASS в нижней панели VS Code. 3. Плагин сгенерирует файл styles.css и styles.css.map в папку проекта /CSS А то я начал искать синтаксические ошибки, думал, что я тут пропустил или ещё что...А дело было в отсутствии плагина.
Да, вы пропустили момент, где я в самом начале показал мой конфиг галпа и сказал, что его задача - компилировать сасс и рестартить страницу. Так что дело в отсутствии внимательности, а не плагина.
Тут макет не по БЭМу, дизайнер набросал кучу разношерстной фигни (типикал десигнер), которую сложно выделить во вменяемые компоненты. Поэтому и верстать с использованием БЭМ наименований классов считаю в данном случае нецелесообразным - слишком громоздко получится.
(1:22:17) Кто кодит вместе с Виталием: На видео промотался кусочек, где Виталий вставляет цвет заголовков в CSS для heading'ов, поэтому я например сперва понять не мог, почему у меня цвет отличается. Надо добавить цвет. ;)
у меня возник вопрос, ты так же и с настоящими заказами поступаешь? я имею ввиду там отступы по макету одни а ты ставишь свои, понятное дело что твои отступы от секций правильные , потому что они стандартизированы и одинаковы, не как в макете, но делаешь ли ты так с настоящими макетами? просто я учу верстку и думал что нужно один в один делать макет даже если он с точки зрения верстки не правильный, или у тебя просто нет возможности дизайнеру указать на эти ошибки и что бы он их справив так как это тестовый макет?)
Хм, а вы тут использовали методологию ITCSS о которой говорили в интервью с бородой? Если да, то я ее исполнение немного по другому представлял с ваших слов
Сделай, пожалуйста, ролик про полезные горячие клавиши в VS code. Уж очень ловко получается и экономит много времени, а то всю жизнь пользоваться сплошными кнтрл в +кнтрл с и клацать мышкой не комильфо) за раннее спасибо за труд!
@@prosto_razrabotka Я просмотрел ролик флэш верстка landing page, но поскольку начал изучать этот ролик, то решил выразить свой восторг под этим видео, что бы не возвращаться к прежнему ролику.
😎 Получить исходники и другие преимущества - boosty.to/prostorazrabotka
❓ Запись на консультацию - prosto-razrabotka.ru/
✨ Telegram канал - t.me/prostorazrabotka/
🔥 Telegram чат - t.me/prostorazrabotkachat/
Можете добавиться в друзья:
📷 Instagram - instagram.com/vitaliy.kirenkov/
📘 ВКонтакте - vk.com/vitaliy.kirenkov/
📗 Facebook - facebook.com/vitaliy.kirenkov/
📙 LinkedIn - www.linkedin.com/in/kirenkov/
✏️ Twitter - twitter.com/VitaliyKirenkov/
А так же, подписаться на страницы:
📘 ВКонтакте - vk.com/public195137161/
📗 Facebook - facebook.com/prostorazrabotka/
Просто чувствуется большой опыт! Спасибо Вам за то, что делитесь знаниями с нами в этих видео бесплатно. Лучший туториал однозначно! Потому что лучшее обучение - это практика, а здесь только она)
Благодарю
Виталий спасибо Вам за ваш титанический труд. Здоровья Вам и Процветания каналу.
Благодарю
Это нереально качественно. Просто золото для обучения верстке. Спасибо огромное!
Спасибо)
Вложенность - зло в стилях, а так да, очень классно
@@keksinjo Ну лысому дядьке лучше знать))
@@Zak0532 Это точно, мастера подмастерья не учат.
Спасибо Виталий за понятный, полезный и систематизированный материал на Вашем канале.
Вот это я понимаю! Показательный пример качественной верстки.
Спасибо
Лысый из IBM 6 часов без остановки показывает как надо.. смотреть без регистрации и смс!
А если серьёзно - спасибо за титанический труд. В рутубе, к сожалению, мало контента такого качества. Продолжайте в том-же духе, успехов!
Вёрстка 80 lvl от работы с цветом - шок. Спасибо.
Благодарю, для новичка это кладезь знаний. Всех благ желаю.
Спасибо
Наконец-то качественное видео про вёсртку с полного нуля!
Спасибо Виталий😁
Благодарю -)
Мне этого не хватало! Спасибо! Смотрю с огромным удовольствием!
Благодарю
Я много разной вёрстки у разных учителей посмотрел, но это.. Это просто next level, blown mind! Очень круто и структурировано. Настоящий высокопрофессиональный подход, такой фиг где увидешь! Спасибо большое, и хотелось бы ещё хотя бы один свёрстанный маэстро макетик увидеть и желательно с натяжкой на WP, если время найдётся. Чтобы закрепить материал так сказать. Буду использовать как подручное пособие для своей вёрстки!
Видео просто нереально космоподобное, кладезь ценной информации, титанический труд
Спасибо за видео! В голове сложилась определенная схема работы по верстке. Мне очень не хватало именно такого системного подхода
Дорогой Виталий! Изучаю верстку три месяца и в голове была настоящая каша. Только после просмотра этого ролика сложился паззл! Работа вами проделана титаническая, но это именно то, что надо! Молодец! Подписка однозначно! Считаю, что эта информация сэкономила мне часов 100! Успехов вам!
Хотела дополнить - Виталий единственный из всех авторов по этой теме (а посмотрела я ее - море!) учит не просто как делать, но и как размышлять! Отличная подача материала. Сама четыре лендинга заваяла после просмотра - это, оказывается не сложно, когда Виталий объяснил!
Такое чувство , когда потратив 6 часов на это видео сэкономишь 100-ни часов в будущем. Огромный респект тебе Виталий за то, что ты делаешь для подписчиков!!!
Очень приятно такое слышать (читать)! Спасибо.
кучу новых фишек для себя открыл!спасибо
Спасибо
Это первый курс в открытом рунете на эту тему с таким качеством материала и субъекта преподносящего его
Виталий, благодарю вас за труд! Обязательно посмотрю всё видео!
Вау! Ещё не смотрел, но тут лайк не глядя. Огромное вам спасибо, за такой контент!
Благодарствую -)
1 месяц назад (изменено)
Просто чувствуется большой опыт! Спасибо Вам за то, что делитесь знаниями с нами в этих видео бесплатно. Лучший туториал однозначно! Потому что лучшее обучение - это практика, а здесь только она) написал Михаил
Спасибо. Очень полезный урок
"Я сказал костыли? Я имел ввиду грамотное технологическое решение"
Я запомнил это😂😂😂
Спасибо большое за такую большую проделанную работу. Занимаюсь фронтом уже больше пяти лет и всегда интересно посмотреть решение типовых задач с ракурса другого разработчика.
Очень круто! С нетерпением жду следующую часть! Очень нравится такой формат.
Отлично)
Виталий, спасибо огромное за ваш труд! Взорву свой pomodoro)))
Теперь с нетерпением жду вторую часть!!! Спасибо за годный контент!
Какая классная напоминалочка для лайков)) грех не поставить.. и не отмотать на 5 секунд назад :D
Спасибо)
Очень качественный, понятный и усваиваемый контент. Благодарю за ваш труд. Как будет время засяду.
Спасибо
Виталий ты лучший, спасибо за такой контент)))
Спасибо
Очень крутой и полезный контент! Можно больше?)
Спасибо за ваш титано-адамантивый труд. Лейкоцит.
Мне вообще по кайфу Frontend) Что не понимаю: 1. Начинаю копаться с самого начала, начало начал когда только добавили данную функцию. Узнаю про неё все. 2. Вырезаю из цветной бумаги данную функцию и подписываю. 3. При начале вёрстки собираю сначала все на белой доске. Занимает минут 10 от силы. 4. На ИЗИ верстаю)). Спасибо за Ваш труд. Узнал не много, но для меня даже крохи инфы очень полезны.
Оч крутой ролик! Было бы круто, если бы вы сделали курсы по html, css и js, для меня как для новичка во всем этом - это очень интересно.
Я только неделю назад хотел сверстать этот макет)
Спасибо за ролик
Вау! Вот это подарок!!! Просто супер!)
Благодарю -)
Спасибо за видео!
Было бы круто узнать о том как ты так круто работаешь с текстом!)
извиняюсь, с кодом
Одно из первых видео на канале про VS Code
Ашка)) Думаю олды вспомнят. Раньше был сериал "Чародеи. Страна великого дракона". И там была злая чародейка Ашка). Аж скупую слезу пустил, когда вспомнил)
Огромное спасибо за видео!
И вам спасибо за просмотр.
Спасибо за такой мощный видос
Благодарю
Нормально. Будет под что покушать и поспать)
У меня что, настолько успокаивающий голос?))
Спасибо за опыт! Всё очень круто получилось! Классный формат, хорошо что начали пилить такие ролики
Такой формат уже был на канале...
Вы великолепны!
Благодарю -)
О, топ контент подъехал)
Ещё и вовремя
Спасибо
Это были лучшие 6 часов моей жизни
Спасибо))
Как круто, спасибо. Лайк, коммент
Благодарю
супер контент! в топы!
Благодарю
Что дает использование переменной $base в проекте?
Шикарно! Большое спасибо за такой качественный контент.
Виталий, ты делаешь качественный контент! Спасибо! Почему забросил??
Спасибо огромное, бомба, буду прорабатывать
пушка,топ видео,уже смотрю
У вас на это как раз есть все выходные -)
Грамотное технологическое решение, хахахахах. Большое вам спасибо за уроки)
Спасибо что делитесь своим опытом))
Благодарю -)
Спасибо за ваш труд. Сразу лайк.!
Благодарю
6 часов, нихрена себе
Сам в шоке -)
спасибо, очень круто
Благодарю
На одном макете в Фигме сейчас 13 человек. Жах. Необходимо всегда делать Duplicate to your draft...
Ну наконец-то
А я все жду, жду, когда же ты придёшь...)
Очень полезно и интересно. А когда будет продолжение?
Как только оно появится, подписчики телеграм канала узнают первыми) Вы знаете, что делать)
Огромная благодарность за контент! Не лучше ли обнуление margin и padding сделать глобально для селектора * ?
2:02:06 уютнейший кабинет ))) круто
Спасибо
А почему в этот раз без Бэма и файл .scss в папке css лежит?
Очень круто!)
Очень крутое видео, с удовольствием выполнил данный макет, с учетом подхода Автора:)
Хотелось бы немножко обьяснить преимущества использования переменных в качестве Пикселей)
Смотрите следующую часть -)
Супер, я жду подобных роликов!
Может запишешь как-то видео о кросбраузерности, в особенности интересует большой список не поддерживаемых свойств css браузерами Safari, mobile/desktop?
Нечего там записывать. Большая часть вопросов снимается ресурсом caniuse.com и модулем autoprefixer. Остальные вопросы решаются в частном порядке.
@@prosto_razrabotka спасибо за инфо!
Пока лайк и комментарий, посмотрю чуть позже ^^
Чего ждать-то? Как раз выходные.. -)
О боже, на кончиках HTML5 12 из 10!
-))
Виталий, можете пожалуйста мне объяснить почему задаёте отступы внутренние для section-inner, если по макету видно что отступы у section-outer(или margin'ы для иннера)
Здравствуйте я полный Ноль ) . Хотел под видео руку поднабить ну и выяснилось что ни Гулпфайла у меня нет ни прочие файлы как у вас в подготовке я не имею. думаю в процессе где то выковыряю у вас и перепешу ))
сайтама от веба спасибо тебе
Добрый день, подскажите как вы скопировали все цвета на 4:50?
Крутой канал
Еще будет про вёрстку?)
А в чем преимущества такого рефакторинга цветов?
Расскажите если не сложно
Спасибо за видео. Только один вопрос будет ли ссылка на репозиторий этого проекта. Просто нету времени смотреть полностью) Хотелось бы код изучить)))
Плюс
Круто 🔥
Спасибо
может быть, я прослушал(или не досмотрел), но в чем выгода использовать $base: 4px? при адаптации?
если надо будет изменить все в большую или меньшую сторону то надо будет изменить ТОЛЬКО эту переменную и увеличится или уменьшится все пропорционально и не надо будет бегать и искать 1000 параметров
выгоды нет. в медиа запросе нельзя изменить сасс переменную. Даже если можно было бы то не бывает дизайнов где надо все синхронно масштабировать
@@НиколайХвостов-н9г такое надо бывает никогда
@@РоманЮрченко-ф7ъ оно мб и так но если вдруг то...вот например заказчик говорит хочу версию для слабовидящих...
good job!
Thx
Отличное видео! Спасибо большое. Подчерпнул для себя много нового.
Такой вопрос - чем объясняется необходимость указывать размерность по типу $base, исходя из того, что можно использовать скажем "rem", или даже "px" так как в макетах дизайнеры редко заморачиваются над отступами и одной размерностью (целостностью, кратностью) ?
Ответ в сообществе
Виталий скажи, если мы придерживаемся методологии БЭМ, почему мы отделяем блок от элемента дефисом ?
Я не исключаю, что я где-то мог ошибиться, но скорее всего у меня дефисом отделён класс (блок) с несколькими словами, а не отделение блока от элемента
на 20ой минуте речь идёт о центрировании .wrapper-inner
Для тех, у кого не произошло изменение при установке margin: 0 auto; проверте подключен ли у вас SASS.
То есть, нужно:
1. установить плагин Live SASS compiler в VS Code, перезагрузить приложение.
2. Так, как у вас уже подключен styles.css в файле index.html, то нажмите клавишу WATCH SASS в нижней панели VS Code.
3. Плагин сгенерирует файл styles.css и styles.css.map в папку проекта /CSS
А то я начал искать синтаксические ошибки, думал, что я тут пропустил или ещё что...А дело было в отсутствии плагина.
Да, вы пропустили момент, где я в самом начале показал мой конфиг галпа и сказал, что его задача - компилировать сасс и рестартить страницу. Так что дело в отсутствии внимательности, а не плагина.
@@prosto_razrabotka да, я пропустил, спасибо за ответ. Вы делаете хороший контент, спасибо!
Гы. В помойку ваши плагины. Только Gulp!
супер видео, лайк подписка сразу! но вот только я не пойму, классы по БЭМ-у написаны все?
Тут макет не по БЭМу, дизайнер набросал кучу разношерстной фигни (типикал десигнер), которую сложно выделить во вменяемые компоненты. Поэтому и верстать с использованием БЭМ наименований классов считаю в данном случае нецелесообразным - слишком громоздко получится.
Автору спасибо! Но хочется спросить - в реальной верстке вы же делите код? header.scss, footer.pug и прочее ...
Зависит от масштаба проекта. В подобном не стал бы
Здравствуйте почему вы на stats поставили number h2 а потом скачок видео а потом получается div вы еще после этого по этому поводу ни чего не говорили
Supereee
Круть
Спасибо
Крутяк 👍
Спасибо
Виталий, хотелось бы узнать, а где-то можно взять исходники этой странички, хотелось бы самому сверстать?
Ой, уже нашел, простите
(1:22:17) Кто кодит вместе с Виталием: На видео промотался кусочек, где Виталий вставляет цвет заголовков в CSS для heading'ов, поэтому я например сперва понять не мог, почему у меня цвет отличается. Надо добавить цвет. ;)
Разве это удобно брать в переменную размеры и потом их умножать постоянно? Это привычка от автора или всё же лучше делать так?
Это привычка от автора и всё же лучше не делать так
А разве макеты сейчас не верстаются mobile first? Сначала мобилка, планшет и уже в конце десктоп?
В данном вопросе нет Сейчас, Тогда, Потом. Есть разные подходы. И мобайл фирст один из них...
у меня возник вопрос, ты так же и с настоящими заказами поступаешь? я имею ввиду там отступы по макету одни а ты ставишь свои, понятное дело что твои отступы от секций правильные , потому что они стандартизированы и одинаковы, не как в макете, но делаешь ли ты так с настоящими макетами?
просто я учу верстку и думал что нужно один в один делать макет даже если он с точки зрения верстки не правильный, или у тебя просто нет возможности дизайнеру указать на эти ошибки и что бы он их справив так как это тестовый макет?)
Да, и с настоящими так же поступаю.
@@prosto_razrabotka мощно XD
Этим и отличается новичок от мастера. Мастер не только сам делает правильно, но и исправляет попутно ошибки других, в данном случае дизайнера макета.
Хм, а вы тут использовали методологию ITCSS о которой говорили в интервью с бородой? Если да, то я ее исполнение немного по другому представлял с ваших слов
Где вы тут хоть под каким-то углом что-то похожее на ITCSS углядели?
@@prosto_razrabotka Я не сказал что увидел, спрашивал же
Сделай, пожалуйста, ролик про полезные горячие клавиши в VS code. Уж очень ловко получается и экономит много времени, а то всю жизнь пользоваться сплошными кнтрл в +кнтрл с и клацать мышкой не комильфо)
за раннее спасибо за труд!
Досмотрел до 17 минуты ,оказывается такой ролик уже есть. Ложная тревога
А можно ли увидеть саму получившуюся HTML и CSS? А то не возможно получается использовать видео как справочник без самого "справочника"
Да, исходники есть на Бусти. Ссылка в описании
Привет, а как на вторую часть попасть?
Нужно быть подписанным на телеграм канал, чтоб не пропустить новый выпуск -)
Прошу, снимите пожалуйста ещё один ролик по вёрстке сайта с нуля, если у вас будет на то время
А эти 3 части уже изучили?
@@prosto_razrabotka Я просмотрел ролик флэш верстка landing page, но поскольку начал изучать этот ролик, то решил выразить свой восторг под этим видео, что бы не возвращаться к прежнему ролику.
Я от ХАуди хо ребят)
Оптимизация:D