😎 Получить исходники и другие преимущества - 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/

Виталий, очень интересно (особенно подача материала)!!! Выкладывайте пожалуйста побольше видео, в частности - верстка сложных и нестандартных макетов))

Спасибо за видео) Очень интересно смотреть, а также нравится стиль.

Большое спасибо! Очень приятно учиться по Вашим урокам! 💪

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

Каждый раз, когда после перерыва мне нудно вкатываться в новый проект, я открываю это видео и привожу воспоминания в порядочек. Уже проекта три такое происходит ) Видос полезный в этом плане. Всё необходимое, для того, что б стартануть проект более менее грамотно и не переделывать потом по сто раз. Спасибо)

Спасибо, очень интересно и легко воспринимается информация

Спасибо большое за такое видео! Все только по делу, и все понятно!

Побольше таких видео и ждем JS! Трудяга капец, спасибо тебе)

спасибо Виталий! посмотрел с удовольствием! больше таких видео!

Poka sdelal, glaza chut' ne polomal, poidu teper' zakaju sebe takie je stil'nie ochki kak u vas ))) Spasibo za rabotu!!!

Всё было здорово. Благодарю!

Очень жду похожего контента. Очень интересно именно от вас!)

Спасибо, после видео моя верстка стала много чище и приятней. Потому что в основном, в уроках, эта какая-то мешанина из классов, блоков. А здесь сразу видно как делать чтобы было красиво.

Спасибо, видео очень сильно помогло в верстке!

Спасибо огромное, Виталий! Вы - супер!

Виталий , ну вы гений конечно! Спасибо за знания

Посмотрел видео про sass, потом про gulp, потом это. С флексами разобрался через шпаргалки. Сверстал первый макет. Спасибо. :)

Крутое видео. Макет не сложный, но главная ценность показать направление мыслей, структуру html / css кода

Понравилось. Очень интересно было, верстал вместе, ставя на паузу. Впечатляет концентрация твоя :)

Виталий, спасибо за практический урок!

Спасибо, делал по вашему видео, все получилось :) приятно слушать! все объяснено доходчиво и понятно)

Спасибо за такой контент!

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

Спасибо Вам большое за проделанный труд!

Спасибо большое за видео

Я после этого видоса вспомнил свой код (хуякхуяк-готово) и захотелось себе морду набить!) теперь буду стараться по такой же системе верстать, аккуратно и вдумчиво!

Спасибо! Очень понятное объяснение! Всё получилось!

Привет. 1) большое спасибо за качественные видео 2) будет очень полезно если сделаете видео о методологиях типо БЭМ и т. п. Очень интересно что думаете о том как правильно называть класы и каких правил придерживаетесь при написание стилей Что скажите?

Заметил такие моменты: 1.) CSS свойства не имеют приоритета. Например, первыми должны идти CSS свойства которые отвечают за позиционирование и блочную модель: position, display, далее прописываются margin, padding, и только потом, в конце, идут стили оформления color, background, font и т.д. Для этого даже существует соглашение в верстке, на хабре думаю есть статья, с порядком свойств, сначала будет не привычно, но потом вы будете автоматически писать свойства в нужных местах, это улучшает читаемость кода, position всегда идет первым, а не так, что где то он первый, а где то в конце, это очень плохо, не делайте так. 2.) 26:30 яркий пример того, когда с помощью препроцессора вы стреляете сами себе в ногу. Есть главный блок, в него вложен &-wrapper, далее идут вложенные элементы &__ ... это ухудшает читаемость кода, а так же навигацию по коду, я это давно понял и перестал использовать вложенные правила, чего и другим советую, кто только изучает препроцессоры, и думает: "вау, вложенность, как круто, буду теперь городить целые блоки кода через &", нет, так делать не нужно, только если вы хотите прописать &:hover, &::before, & + &, тогда да, это будет очень удобно и не будет ухудшать читаемость CSS кода.

Большое спасибо, было очень приятно и познавательно смотреть!!! :)

Спасибо, было очень полезно

Cупер , приятно смотреть как работает про :)

Спасибо, за видео.

Спасибо за видео, можете пожалуйста скинуть макеты в будущем если ещё будете делать такие видео)

Спасибо за работу

просто спасибо! знайте, что только из-за того что всего лишь я посмотрел это видео - время которое вы на него потратили не ушло впустую так точно!

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

огромное спасибо!! ❤️❤️

Спасибо, информативно! Небольшое замечание, заголовки лучше, наверное, тэгами h размечать, а не дивами)

Годный контент!

Ура, у меня получилось следовать вашему уроку и сделать это. Впервые приступил именно к макету (на это меня подтолкнул подробный и содержательный разбор). До этого я лишь частично делал отдельные структуры (кнопки, менюшки, навигацию и прочее) на www.w3schools.com/howto/default.asp и искал разные уроки с уже "взрослым" подходом насчет сверстать целый макет, впоследствии чего и наткнулся на данный канал. Даже просто повторяя за вами все действия в процессе запутался в html разметке, а после 50:00 минуты с введением .description-item стал вообще нервничать. Все поехало и поплыло. Но уже потом я разобрался с проблемами (иногда они были настолько мелкими, что хотелось кусать локти - где-то не хватало “{“ в стилях (потом установил Bracket Pair Colorizer), где-то не там закрыл тег в разметке. Вопросы, которые у меня возникали по vscode и сборке gulp решились обращением к ранним видео - действительно лучше, когда есть видеосопровождение рассказчика в уголку экрана, создается впечатление полноценного диалога, не знаю почему, но воспринимается лучше, чем без него - многим обзорщикам такой тематики (на мой взгляд новичка) не хватает медленного темпа (есть в сети просто ukposts.info/have/v-deo/bGaiZpt5bq6nuXU.html странные уроки на скорость), а вы еще проговариваете чуть ли ни каждое слово кода Некоторые вопросы: - в разметке по наименованию класса: почему “section-outer section-header” - почему просто не “section-header”? - в дальнейших наименованиях классов: по типу section-plans_list-item_title я заметил, что вы чередуете “__“и “-” , чередовать символы “__“и “-” это с целью не запутаться и общей наглядности? - запланирован ли у вас контент, где производится разбор готовых макетов, сделанных неопытными верстальщиками или просто с профессиональной точки зрения примеры криво написанного кода. Вероятно, за свою практику вы сталкивались с самыми разными ошибками, обнародовать самые частые - это бомба. Дело в том, что я наткнулся на видео обсуждения работ с форума htmlforum.io вот тут ukposts.info/have/v-deo/h2CHZYJ7moGizWw.html и нашел такой контент очень познавательным. В заключение хочу сказать спасибо за это приключение. Делал я макет по утрам/вечерам в свободное время и растянулось на четыре дня и такое чувство, что с вами подружился. Мне понравилось решать проблемы (которые создавал сам, старался рассуждать вместе с вами и хотя бы разметку делать самому, понял, что прописывать стили еще не могу), благодаря такому сложному макету для новичка я почерпнул для себя многое. От души душевно в душу вообще. Крутой контент, мегалайк.

Ничего не понятно, но очень интересно. Со стороны выглядит так легко и просто)

Как же я тебя обожаю

Спасибо за урок!

Чел, ты реально оч крут!

спасибо шеф))

Я его победил! Спасибо Виталий!

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

Отличный видео урок!Но хотел спросить, почему допустим посл"content не продолжить сразу, а создавать ещё одну обертку для остального контента.Извиняюсь, если вопрос глупый, только начал увлекаться сей сферой и есть сложности с понятием структуры(семантики)

Спасибо!

два лайка! очень хотелось бы увидеть подолжение!

У меня windows. Данный макет, который для скотча, прекрасно открылся в Adobe XD. А данный редактор сейчас бесплатный!

Подскажите пожалуйста, кто знает, почему Виталий не использовал тег а только задал класс для секшона в шапке?

Виталий, скажите пожалуйста, будут ли уроки по натяжке верстки на какую-нибудь популярную CMS?

гуд, спасибо. а есть подобный канал про бэк-энд?

Наконецто, хоть кто-то верстает на флексах. Самые популярные видео с версткой, это float с последующими фиксами clear: both; Сколько можно ? =)

Скажи пожалуйста какую методологию верстки ты используешь?

Привет, а что это за программа, в которой ты смотрел шрифты?

Круто! Я б такой сверстал часов за 8-10 наверное =)

Было очень интересно! Спасибо! // быстрая верстка для новичка заняла 3дня по 2ч тоесть ~7 часов )) А сколько заняло у вас?

еще бы адаптив показал, было б круто

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

Спасибо за видео, сам так же попробовал сверстать какой-нибудь макет и столкнулся со небольшой сложностью: возможно ли центрировать по вертикали div, состоящий из трёх элементов, по центру нижнего там элемента ? Или нужно прибегать к свойству transform: translateY и отодвигать блок наверх на высоту первых двух элементов ?

Вопрос, Вы вроде фронт-ендер? То есть пишите и js код для сайтов? Нужны какие-то вводные видео, как правильно изучить данную область и т.д И желательно примерчик разобрать.Спасибо

Здравствуйте вы можете скинуть ссылку на программу с которой вы работаете Спасибо за обучающие видео очень рад продолжайте в этом духе спасибо!

Привет! Можешь обновить в базовом шаблоне package-json, так как новичку трудно в этом ковыряться.

а нужно ли собирать gulp? Например, в webpack прописывал в терминале npm run build и проект собирался в отдельную папку и все работало, а здесь, если просто открыть index.html работает половина.. как быть?

А почему не использовали готовые тэги как header и footer ещё для загаловка h1?

А ты что чаще используешь scss или sass, что удобнее?

Thanks

Большое спасибо. Подскажите, зачем делается так? .description-item + .description-item {margin-left: 40px;} для формирования отступа между блоками с "лампочками". Почему нельзя просто один раз написать .description-item, зачем здесь сложение?

Как ты расположил элементы по контейнеру, хотя самого контейнера нету ?

Подписка!)))

Профи 😉

Скажите, а вот вы используйте для заголовков div, но ведь есть h1-h6(сейчас не пытаюсь придираться и делать из себя самого умного, мне просто интересно, как все делают в реальных проектах и есть ли смысл использовать h-теги), если не сложно, то объясните пожалуйста)

Скажите а по чему самый верхний section не назвать просто тегом header,

Подскажите, пожалуйста, как сделать так , чтоб в файле style.scss тоже добавилось столько строк с подписанными секциями ??

Здравствуйте ! Скажите, пожалуйста, VSCode выдаёт ошибку оранжевым волнистым подчёркиванием. Якобы что-то не так по БЭМ-технологии. Может одинарное нижнее подчёркивание. Например в этом классе - class="section-plans__list-item_button". Что не правильно ? Ведь у вас тоже VSCode и подчёркивания нет.

Агонь

Большое спасибо за данное видео. Однако у меня возникла следующая трудность: в вашем видео после первого рендера сайта на 12:56 весь текст прижат к левому краю, а уже после второго на 16:18 все блоки сместились правее, точнее заняли крайнее левое положение внутри блока section-inner. При этом когда Я проделываю аналогичные действия, все элементы у меня по прежнему остаются привязанными у крайней левой границы экрана. Почему так происходит?

16:21 Как в style.scss появилось столько кода, которые до этого в видео не обьяснялось?

всем привет! почему нельзя вместо нельзя использовать просто тег ?

Эх, ну если уж после этого ролика я не начну завтра тренироваться делать лендинги то мне срочно потребуется строгий наставник с ремнём ) Кстати что за программу вы использовали для просмотра лендинга? Я знаю что используют фотошоп, но это программа совсем не похожа по интерфейсу. Или это был Avocode? Спасибо за видео!

привет. в самом начале у меня возникла проблема с миксином для шрифта, повторил полностью @mixin font-lato { font-family: 'Lato' , sans-serif;} и выдает ошибку "ERROR: media query expression must begin with '(' миксин создавался в style.scss

Только в этом видео задумался что галп полезная вещь, ещё бы и вебпак в догонку, но пока не вижу в нем смысла, мне компиляция и авто обновление нужно, и продакшн сборка с минификацией префиксами и тд

2 часа смотрел на этот сасс, но так и не понял, накой оно надо. Забивать голову каким-то левым синтаксисом, когда css и так все это умеет. Макет верстался в пикселях (а не емах или ремах) потому-что так быстрее сделать первую версию? Может ответ будет во второй части. Пойду ознакомлюсь)

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

А классы Вы по БЭМу писали?

А мне интересно, вот. Че за инструмент такой типа "панели управления", где показываются все свойства любого объекта в макете?

у меня проблема. не работает преобразование scss в css( не меняеться вид документа) а если меняю пути преобразование то пишет что в плагине gulp-sass ошибка

Скажите, а что за расширение такое у вас, что переносит все классы сразу с html в scss ? Очень полезная штука, каждому пригодится.

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

а ссылку на шаблон нельзя было оставить?)

два замечания: 1) Не по БЭМ, хотя и напоминает его. 2) Для копирования названия всех классов (из html в css) есть плагин Class Extractor , который сделает верстку намного быстрее

Хорошая вёрстка, без лишних стилей, но в шапке кнопка шире, в секции с видео - правый блок должен быть чуть ниже текста. Если над этим работать, то вёрстка уже не будет такой хорошой и заказчику этого не объяснить, поэтому приходится писать говно-код с фиксированой шириной или падингами для 1 кнопки

Заголовки верстать дивами ? В section должен же быть заголовок любого уровня, чтобы валидной была

А почему на картинку наложение через псевдо элемент? А можно использовать background blend mode?

22:33 объясните, пожалуйста, для чего тут нужен flex-shrink? Когда убрал его не увидел разницы

Круто! А что это за ЯП?