Просто чувствуется большой опыт! Спасибо Вам за то, что делитесь знаниями с нами в этих видео бесплатно. Лучший туториал однозначно! Потому что лучшее обучение - это практика, а здесь только она)
Лысый из IBM 6 часов без остановки показывает как надо.. смотреть без регистрации и смс! А если серьёзно - спасибо за титанический труд. В рутубе, к сожалению, мало контента такого качества. Продолжайте в том-же духе, успехов!
Я много разной вёрстки у разных учителей посмотрел, но это.. Это просто next level, blown mind! Очень круто и структурировано. Настоящий высокопрофессиональный подход, такой фиг где увидешь! Спасибо большое, и хотелось бы ещё хотя бы один свёрстанный маэстро макетик увидеть и желательно с натяжкой на WP, если время найдётся. Чтобы закрепить материал так сказать. Буду использовать как подручное пособие для своей вёрстки!
Такое чувство , когда потратив 6 часов на это видео сэкономишь 100-ни часов в будущем. Огромный респект тебе Виталий за то, что ты делаешь для подписчиков!!!
Дорогой Виталий! Изучаю верстку три месяца и в голове была настоящая каша. Только после просмотра этого ролика сложился паззл! Работа вами проделана титаническая, но это именно то, что надо! Молодец! Подписка однозначно! Считаю, что эта информация сэкономила мне часов 100! Успехов вам! Хотела дополнить - Виталий единственный из всех авторов по этой теме (а посмотрела я ее - море!) учит не просто как делать, но и как размышлять! Отличная подача материала. Сама четыре лендинга заваяла после просмотра - это, оказывается не сложно, когда Виталий объяснил!
1 месяц назад (изменено) Просто чувствуется большой опыт! Спасибо Вам за то, что делитесь знаниями с нами в этих видео бесплатно. Лучший туториал однозначно! Потому что лучшее обучение - это практика, а здесь только она) написал Михаил
Спасибо большое за такую большую проделанную работу. Занимаюсь фронтом уже больше пяти лет и всегда интересно посмотреть решение типовых задач с ракурса другого разработчика.
Мне вообще по кайфу Frontend) Что не понимаю: 1. Начинаю копаться с самого начала, начало начал когда только добавили данную функцию. Узнаю про неё все. 2. Вырезаю из цветной бумаги данную функцию и подписываю. 3. При начале вёрстки собираю сначала все на белой доске. Занимает минут 10 от силы. 4. На ИЗИ верстаю)). Спасибо за Ваш труд. Узнал не много, но для меня даже крохи инфы очень полезны.
Ашка)) Думаю олды вспомнят. Раньше был сериал "Чародеи. Страна великого дракона". И там была злая чародейка Ашка). Аж скупую слезу пустил, когда вспомнил)
на 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 А то я начал искать синтаксические ошибки, думал, что я тут пропустил или ещё что...А дело было в отсутствии плагина.
Да, вы пропустили момент, где я в самом начале показал мой конфиг галпа и сказал, что его задача - компилировать сасс и рестартить страницу. Так что дело в отсутствии внимательности, а не плагина.
Очень крутое видео, с удовольствием выполнил данный макет, с учетом подхода Автора:) Хотелось бы немножко обьяснить преимущества использования переменных в качестве Пикселей)
Здравствуйте я полный Ноль ) . Хотел под видео руку поднабить ну и выяснилось что ни Гулпфайла у меня нет ни прочие файлы как у вас в подготовке я не имею. думаю в процессе где то выковыряю у вас и перепешу ))
Супер, я жду подобных роликов! Может запишешь как-то видео о кросбраузерности, в особенности интересует большой список не поддерживаемых свойств css браузерами Safari, mobile/desktop?
если надо будет изменить все в большую или меньшую сторону то надо будет изменить ТОЛЬКО эту переменную и увеличится или уменьшится все пропорционально и не надо будет бегать и искать 1000 параметров
Виталий, можете пожалуйста мне объяснить почему задаёте отступы внутренние для section-inner, если по макету видно что отступы у section-outer(или margin'ы для иннера)
(1:22:17) Кто кодит вместе с Виталием: На видео промотался кусочек, где Виталий вставляет цвет заголовков в CSS для heading'ов, поэтому я например сперва понять не мог, почему у меня цвет отличается. Надо добавить цвет. ;)
@@prosto_razrabotka Я просмотрел ролик флэш верстка landing page, но поскольку начал изучать этот ролик, то решил выразить свой восторг под этим видео, что бы не возвращаться к прежнему ролику.
Сделай, пожалуйста, ролик про полезные горячие клавиши в VS code. Уж очень ловко получается и экономит много времени, а то всю жизнь пользоваться сплошными кнтрл в +кнтрл с и клацать мышкой не комильфо) за раннее спасибо за труд!
Отличное видео! Спасибо большое. Подчерпнул для себя много нового. Такой вопрос - чем объясняется необходимость указывать размерность по типу $base, исходя из того, что можно использовать скажем "rem", или даже "px" так как в макетах дизайнеры редко заморачиваются над отступами и одной размерностью (целостностью, кратностью) ?
Тут макет не по БЭМу, дизайнер набросал кучу разношерстной фигни (типикал десигнер), которую сложно выделить во вменяемые компоненты. Поэтому и верстать с использованием БЭМ наименований классов считаю в данном случае нецелесообразным - слишком громоздко получится.
у меня возник вопрос, ты так же и с настоящими заказами поступаешь? я имею ввиду там отступы по макету одни а ты ставишь свои, понятное дело что твои отступы от секций правильные , потому что они стандартизированы и одинаковы, не как в макете, но делаешь ли ты так с настоящими макетами? просто я учу верстку и думал что нужно один в один делать макет даже если он с точки зрения верстки не правильный, или у тебя просто нет возможности дизайнеру указать на эти ошибки и что бы он их справив так как это тестовый макет?)
Хм, а вы тут использовали методологию ITCSS о которой говорили в интервью с бородой? Если да, то я ее исполнение немного по другому представлял с ваших слов
😎 Получить исходники и другие преимущества - 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 часов без остановки показывает как надо.. смотреть без регистрации и смс!
А если серьёзно - спасибо за титанический труд. В рутубе, к сожалению, мало контента такого качества. Продолжайте в том-же духе, успехов!
Мне этого не хватало! Спасибо! Смотрю с огромным удовольствием!
Благодарю
Наконец-то качественное видео про вёсртку с полного нуля!
Спасибо Виталий😁
Благодарю -)
Благодарю, для новичка это кладезь знаний. Всех благ желаю.
Спасибо
Спасибо Виталий за понятный, полезный и систематизированный материал на Вашем канале.
Я много разной вёрстки у разных учителей посмотрел, но это.. Это просто next level, blown mind! Очень круто и структурировано. Настоящий высокопрофессиональный подход, такой фиг где увидешь! Спасибо большое, и хотелось бы ещё хотя бы один свёрстанный маэстро макетик увидеть и желательно с натяжкой на WP, если время найдётся. Чтобы закрепить материал так сказать. Буду использовать как подручное пособие для своей вёрстки!
Спасибо за видео! В голове сложилась определенная схема работы по верстке. Мне очень не хватало именно такого системного подхода
Видео просто нереально космоподобное, кладезь ценной информации, титанический труд
Вау! Ещё не смотрел, но тут лайк не глядя. Огромное вам спасибо, за такой контент!
Благодарствую -)
Такое чувство , когда потратив 6 часов на это видео сэкономишь 100-ни часов в будущем. Огромный респект тебе Виталий за то, что ты делаешь для подписчиков!!!
Очень приятно такое слышать (читать)! Спасибо.
Дорогой Виталий! Изучаю верстку три месяца и в голове была настоящая каша. Только после просмотра этого ролика сложился паззл! Работа вами проделана титаническая, но это именно то, что надо! Молодец! Подписка однозначно! Считаю, что эта информация сэкономила мне часов 100! Успехов вам!
Хотела дополнить - Виталий единственный из всех авторов по этой теме (а посмотрела я ее - море!) учит не просто как делать, но и как размышлять! Отличная подача материала. Сама четыре лендинга заваяла после просмотра - это, оказывается не сложно, когда Виталий объяснил!
Вёрстка 80 lvl от работы с цветом - шок. Спасибо.
Виталий, благодарю вас за труд! Обязательно посмотрю всё видео!
Очень круто! С нетерпением жду следующую часть! Очень нравится такой формат.
Отлично)
кучу новых фишек для себя открыл!спасибо
Спасибо
1 месяц назад (изменено)
Просто чувствуется большой опыт! Спасибо Вам за то, что делитесь знаниями с нами в этих видео бесплатно. Лучший туториал однозначно! Потому что лучшее обучение - это практика, а здесь только она) написал Михаил
Это первый курс в открытом рунете на эту тему с таким качеством материала и субъекта преподносящего его
Теперь с нетерпением жду вторую часть!!! Спасибо за годный контент!
Спасибо большое за такую большую проделанную работу. Занимаюсь фронтом уже больше пяти лет и всегда интересно посмотреть решение типовых задач с ракурса другого разработчика.
Какая классная напоминалочка для лайков)) грех не поставить.. и не отмотать на 5 секунд назад :D
Спасибо)
Виталий ты лучший, спасибо за такой контент)))
Спасибо
"Я сказал костыли? Я имел ввиду грамотное технологическое решение"
Я запомнил это😂😂😂
Виталий, спасибо огромное за ваш труд! Взорву свой pomodoro)))
Спасибо. Очень полезный урок
Вау! Вот это подарок!!! Просто супер!)
Благодарю -)
Я только неделю назад хотел сверстать этот макет)
Спасибо за ролик
Огромное спасибо за видео!
И вам спасибо за просмотр.
Очень качественный, понятный и усваиваемый контент. Благодарю за ваш труд. Как будет время засяду.
Спасибо
Спасибо за опыт! Всё очень круто получилось! Классный формат, хорошо что начали пилить такие ролики
Такой формат уже был на канале...
Вы великолепны!
Благодарю -)
Очень крутой и полезный контент! Можно больше?)
Спасибо за ваш титано-адамантивый труд. Лейкоцит.
Спасибо за такой мощный видос
Благодарю
Мне вообще по кайфу Frontend) Что не понимаю: 1. Начинаю копаться с самого начала, начало начал когда только добавили данную функцию. Узнаю про неё все. 2. Вырезаю из цветной бумаги данную функцию и подписываю. 3. При начале вёрстки собираю сначала все на белой доске. Занимает минут 10 от силы. 4. На ИЗИ верстаю)). Спасибо за Ваш труд. Узнал не много, но для меня даже крохи инфы очень полезны.
супер контент! в топы!
Благодарю
Как круто, спасибо. Лайк, коммент
Благодарю
О, топ контент подъехал)
Ещё и вовремя
Спасибо
Оч крутой ролик! Было бы круто, если бы вы сделали курсы по html, css и js, для меня как для новичка во всем этом - это очень интересно.
Спасибо за видео!
Было бы круто узнать о том как ты так круто работаешь с текстом!)
извиняюсь, с кодом
Одно из первых видео на канале про VS Code
Нормально. Будет под что покушать и поспать)
У меня что, настолько успокаивающий голос?))
пушка,топ видео,уже смотрю
У вас на это как раз есть все выходные -)
Спасибо огромное, бомба, буду прорабатывать
Спасибо что делитесь своим опытом))
Благодарю -)
спасибо, очень круто
Благодарю
Ашка)) Думаю олды вспомнят. Раньше был сериал "Чародеи. Страна великого дракона". И там была злая чародейка Ашка). Аж скупую слезу пустил, когда вспомнил)
Спасибо за ваш труд. Сразу лайк.!
Благодарю
Это были лучшие 6 часов моей жизни
Спасибо))
Очень круто!)
Шикарно! Большое спасибо за такой качественный контент.
Ну наконец-то
А я все жду, жду, когда же ты придёшь...)
Виталий, ты делаешь качественный контент! Спасибо! Почему забросил??
На одном макете в Фигме сейчас 13 человек. Жах. Необходимо всегда делать Duplicate to your draft...
2:02:06 уютнейший кабинет ))) круто
Спасибо
6 часов, нихрена себе
Сам в шоке -)
Грамотное технологическое решение, хахахахах. Большое вам спасибо за уроки)
Пока лайк и комментарий, посмотрю чуть позже ^^
Чего ждать-то? Как раз выходные.. -)
Что дает использование переменной $base в проекте?
good job!
Thx
Круто 🔥
Спасибо
на 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!
О боже, на кончиках HTML5 12 из 10!
-))
Очень крутое видео, с удовольствием выполнил данный макет, с учетом подхода Автора:)
Хотелось бы немножко обьяснить преимущества использования переменных в качестве Пикселей)
Смотрите следующую часть -)
Здравствуйте я полный Ноль ) . Хотел под видео руку поднабить ну и выяснилось что ни Гулпфайла у меня нет ни прочие файлы как у вас в подготовке я не имею. думаю в процессе где то выковыряю у вас и перепешу ))
Супер, я жду подобных роликов!
Может запишешь как-то видео о кросбраузерности, в особенности интересует большой список не поддерживаемых свойств css браузерами Safari, mobile/desktop?
Нечего там записывать. Большая часть вопросов снимается ресурсом caniuse.com и модулем autoprefixer. Остальные вопросы решаются в частном порядке.
@@prosto_razrabotka спасибо за инфо!
Крутой канал
Крутяк 👍
Спасибо
Очень полезно и интересно. А когда будет продолжение?
Как только оно появится, подписчики телеграм канала узнают первыми) Вы знаете, что делать)
А почему в этот раз без Бэма и файл .scss в папке css лежит?
Огромная благодарность за контент! Не лучше ли обнуление margin и padding сделать глобально для селектора * ?
сайтама от веба спасибо тебе
Круть
Спасибо
Supereee
может быть, я прослушал(или не досмотрел), но в чем выгода использовать $base: 4px? при адаптации?
если надо будет изменить все в большую или меньшую сторону то надо будет изменить ТОЛЬКО эту переменную и увеличится или уменьшится все пропорционально и не надо будет бегать и искать 1000 параметров
выгоды нет. в медиа запросе нельзя изменить сасс переменную. Даже если можно было бы то не бывает дизайнов где надо все синхронно масштабировать
@@НиколайХвостов-н9г такое надо бывает никогда
@@РоманЮрченко-ф7ъ оно мб и так но если вдруг то...вот например заказчик говорит хочу версию для слабовидящих...
Виталий, можете пожалуйста мне объяснить почему задаёте отступы внутренние для section-inner, если по макету видно что отступы у section-outer(или margin'ы для иннера)
(1:22:17) Кто кодит вместе с Виталием: На видео промотался кусочек, где Виталий вставляет цвет заголовков в CSS для heading'ов, поэтому я например сперва понять не мог, почему у меня цвет отличается. Надо добавить цвет. ;)
А в чем преимущества такого рефакторинга цветов?
Расскажите если не сложно
Спасибо за видео. Только один вопрос будет ли ссылка на репозиторий этого проекта. Просто нету времени смотреть полностью) Хотелось бы код изучить)))
Плюс
Здравствуйте почему вы на stats поставили number h2 а потом скачок видео а потом получается div вы еще после этого по этому поводу ни чего не говорили
Прошу, снимите пожалуйста ещё один ролик по вёрстке сайта с нуля, если у вас будет на то время
А эти 3 части уже изучили?
@@prosto_razrabotka Я просмотрел ролик флэш верстка landing page, но поскольку начал изучать этот ролик, то решил выразить свой восторг под этим видео, что бы не возвращаться к прежнему ролику.
Сделай, пожалуйста, ролик про полезные горячие клавиши в VS code. Уж очень ловко получается и экономит много времени, а то всю жизнь пользоваться сплошными кнтрл в +кнтрл с и клацать мышкой не комильфо)
за раннее спасибо за труд!
Досмотрел до 17 минуты ,оказывается такой ролик уже есть. Ложная тревога
Еще будет про вёрстку?)
Оптимизация:D
Плагин в Figma Font Fascia покажет все шрифты в макете. Пользуйтесь на здоровье.
Отличное видео! Спасибо большое. Подчерпнул для себя много нового.
Такой вопрос - чем объясняется необходимость указывать размерность по типу $base, исходя из того, что можно использовать скажем "rem", или даже "px" так как в макетах дизайнеры редко заморачиваются над отступами и одной размерностью (целостностью, кратностью) ?
Ответ в сообществе
супер видео, лайк подписка сразу! но вот только я не пойму, классы по БЭМ-у написаны все?
Тут макет не по БЭМу, дизайнер набросал кучу разношерстной фигни (типикал десигнер), которую сложно выделить во вменяемые компоненты. Поэтому и верстать с использованием БЭМ наименований классов считаю в данном случае нецелесообразным - слишком громоздко получится.
Виталий скажи, если мы придерживаемся методологии БЭМ, почему мы отделяем блок от элемента дефисом ?
Я не исключаю, что я где-то мог ошибиться, но скорее всего у меня дефисом отделён класс (блок) с несколькими словами, а не отделение блока от элемента
Жесть, я думал это спидран будет
супер контент!!!! только слух режет "релЭйтив", правильно "рЭлэтив"
Автору спасибо! Но хочется спросить - в реальной верстке вы же делите код? header.scss, footer.pug и прочее ...
Зависит от масштаба проекта. В подобном не стал бы
Я от ХАуди хо ребят)
А разве макеты сейчас не верстаются mobile first? Сначала мобилка, планшет и уже в конце десктоп?
В данном вопросе нет Сейчас, Тогда, Потом. Есть разные подходы. И мобайл фирст один из них...
у меня возник вопрос, ты так же и с настоящими заказами поступаешь? я имею ввиду там отступы по макету одни а ты ставишь свои, понятное дело что твои отступы от секций правильные , потому что они стандартизированы и одинаковы, не как в макете, но делаешь ли ты так с настоящими макетами?
просто я учу верстку и думал что нужно один в один делать макет даже если он с точки зрения верстки не правильный, или у тебя просто нет возможности дизайнеру указать на эти ошибки и что бы он их справив так как это тестовый макет?)
Да, и с настоящими так же поступаю.
@@prosto_razrabotka мощно XD
Этим и отличается новичок от мастера. Мастер не только сам делает правильно, но и исправляет попутно ошибки других, в данном случае дизайнера макета.
Добрый день, подскажите как вы скопировали все цвета на 4:50?
Хм, а вы тут использовали методологию ITCSS о которой говорили в интервью с бородой? Если да, то я ее исполнение немного по другому представлял с ваших слов
Где вы тут хоть под каким-то углом что-то похожее на ITCSS углядели?
@@prosto_razrabotka Я не сказал что увидел, спрашивал же
Виталий, хотелось бы узнать, а где-то можно взять исходники этой странички, хотелось бы самому сверстать?
Ой, уже нашел, простите