Виталий, очень интересно (особенно подача материала)!!! Выкладывайте пожалуйста побольше видео, в частности - верстка сложных и нестандартных макетов))
Каждый раз, когда после перерыва мне нудно вкатываться в новый проект, я открываю это видео и привожу воспоминания в порядочек. Уже проекта три такое происходит ) Видос полезный в этом плане. Всё необходимое, для того, что б стартануть проект более менее грамотно и не переделывать потом по сто раз. Спасибо)
Спасибо, после видео моя верстка стала много чище и приятней. Потому что в основном, в уроках, эта какая-то мешанина из классов, блоков. А здесь сразу видно как делать чтобы было красиво.
Заметил такие моменты: 1.) CSS свойства не имеют приоритета. Например, первыми должны идти CSS свойства которые отвечают за позиционирование и блочную модель: position, display, далее прописываются margin, padding, и только потом, в конце, идут стили оформления color, background, font и т.д. Для этого даже существует соглашение в верстке, на хабре думаю есть статья, с порядком свойств, сначала будет не привычно, но потом вы будете автоматически писать свойства в нужных местах, это улучшает читаемость кода, position всегда идет первым, а не так, что где то он первый, а где то в конце, это очень плохо, не делайте так. 2.) 26:30 яркий пример того, когда с помощью препроцессора вы стреляете сами себе в ногу. Есть главный блок, в него вложен &-wrapper, далее идут вложенные элементы &__ ... это ухудшает читаемость кода, а так же навигацию по коду, я это давно понял и перестал использовать вложенные правила, чего и другим советую, кто только изучает препроцессоры, и думает: "вау, вложенность, как круто, буду теперь городить целые блоки кода через &", нет, так делать не нужно, только если вы хотите прописать &:hover, &::before, & + &, тогда да, это будет очень удобно и не будет ухудшать читаемость CSS кода.
Че то не понял ) , это из за того что кто то на хабре сказал так нельзя менять порядки местами свойств в css, значит надо следовать этому советчику?). Это наверно из той же оперу с семантикой, где это всего лишь рекомендация а всех ввели в заблуждение и многие считают что поисковые лучше считывают код)))
я немного в афиге, ибо хожу на курсы, но всё равно приходиться отстаивать свой подход к стилю кодинга...а теперь я понимаю, что двигаюсь в правильном направлении =) спасибо за новые для меня фичи по структуре и оптимизации =) и отдельное спасибо за визит к айти-бороде =)
Ура, у меня получилось следовать вашему уроку и сделать это. Впервые приступил именно к макету (на это меня подтолкнул подробный и содержательный разбор). До этого я лишь частично делал отдельные структуры (кнопки, менюшки, навигацию и прочее) на www.w3schools.com/howto/default.asp и искал разные уроки с уже "взрослым" подходом насчет сверстать целый макет, впоследствии чего и наткнулся на данный канал. Даже просто повторяя за вами все действия в процессе запутался в html разметке, а после 50:00 минуты с введением .description-item стал вообще нервничать. Все поехало и поплыло. Но уже потом я разобрался с проблемами (иногда они были настолько мелкими, что хотелось кусать локти - где-то не хватало “{“ в стилях (потом установил Bracket Pair Colorizer), где-то не там закрыл тег в разметке. Вопросы, которые у меня возникали по vscode и сборке gulp решились обращением к ранним видео - действительно лучше, когда есть видеосопровождение рассказчика в уголку экрана, создается впечатление полноценного диалога, не знаю почему, но воспринимается лучше, чем без него - многим обзорщикам такой тематики (на мой взгляд новичка) не хватает медленного темпа (есть в сети просто ua-cam.com/video/46q2eB7xvXA/v-deo.html странные уроки на скорость), а вы еще проговариваете чуть ли ни каждое слово кода Некоторые вопросы: - в разметке по наименованию класса: почему “section-outer section-header” - почему просто не “section-header”? - в дальнейших наименованиях классов: по типу section-plans_list-item_title я заметил, что вы чередуете “__“и “-” , чередовать символы “__“и “-” это с целью не запутаться и общей наглядности? - запланирован ли у вас контент, где производится разбор готовых макетов, сделанных неопытными верстальщиками или просто с профессиональной точки зрения примеры криво написанного кода. Вероятно, за свою практику вы сталкивались с самыми разными ошибками, обнародовать самые частые - это бомба. Дело в том, что я наткнулся на видео обсуждения работ с форума htmlforum.io вот тут ua-cam.com/video/O0V1LDcKql8/v-deo.html и нашел такой контент очень познавательным. В заключение хочу сказать спасибо за это приключение. Делал я макет по утрам/вечерам в свободное время и растянулось на четыре дня и такое чувство, что с вами подружился. Мне понравилось решать проблемы (которые создавал сам, старался рассуждать вместе с вами и хотя бы разметку делать самому, понял, что прописывать стили еще не могу), благодаря такому сложному макету для новичка я почерпнул для себя многое. От души душевно в душу вообще. Крутой контент, мегалайк.
@@prosto_razrabotka если будет свободная минутка, можете посмотреть свежесверстанный мной макет? drive.google.com/open?id=1PuMOZTIWGlc-csuCWqkfpeKZV8L3CNjA мне любопытно, не переборщил ли я с вложенностью и дивами, да и вообще любая информация интересна
@@prosto_razrabotka да, вдохновился к первым подвигам верстки по вашим урокам. Конечно, берите. Это удивительный поворот в моей учебной деятельности (о таком разве что мечтать мог)
Виталий, спасибо! я разработчик (JS), посмотрел видео и уловил полностью ход Ваших мыслей и удобство Вашего подхода! Спасибо огромное за то, что поделились
Я после этого видоса вспомнил свой код (хуякхуяк-готово) и захотелось себе морду набить!) теперь буду стараться по такой же системе верстать, аккуратно и вдумчиво!
Привет. 1) большое спасибо за качественные видео 2) будет очень полезно если сделаете видео о методологиях типо БЭМ и т. п. Очень интересно что думаете о том как правильно называть класы и каких правил придерживаетесь при написание стилей Что скажите?
Спасибо, я считаю, что видео учит в первую очередь гигиене верстки. Мне надо еще раза три посмотреть, чтобы привыкнуть верстать так, а не жуткой кашей и мешаниной классов, как это делаю пока я.
не самый лучший вариант для подражания, если что. например из БЭМа автор использует только именования классов как я вижу. на безумную вложенность классов и из-за этого чрезмерную специфичность селектора (спасибо sass) пофиг. На то, что элементы формы выносятся в отдельный блок, т.к. могут использоваться в других частях сайта тоже пофиг. верстка как спорт короч, быстрее сверстал быстрее бабло получил, а дальше хоть трава не расти). Автору ролика без обид картинка хорошая, подача тоже, но, думаю, сам свои ошибки понимаешь, при этом учишь зрителей плохому(
Объясните, пожалуйста, как так получается, что на 9 минуте в scss файле 10 строчек, затем идёт длинная вставка html-я, а затем на 16:27 ВНЕЗАПНО там уже 51 строка, да ещё и введены всякие значения вроде width:1180px?!
а нужно ли собирать gulp? Например, в webpack прописывал в терминале npm run build и проект собирался в отдельную папку и все работало, а здесь, если просто открыть index.html работает половина.. как быть?
Большое спасибо за данное видео. Однако у меня возникла следующая трудность: в вашем видео после первого рендера сайта на 12:56 весь текст прижат к левому краю, а уже после второго на 16:18 все блоки сместились правее, точнее заняли крайнее левое положение внутри блока section-inner. При этом когда Я проделываю аналогичные действия, все элементы у меня по прежнему остаются привязанными у крайней левой границы экрана. Почему так происходит?
@@prosto_razrabotka объясните, пожалуйста, как так получается, что на 9 минуте в scss файле 10 строчек, затем идёт длинная вставка html-я, а затем на 16:27 ВНЕЗАПНО там уже 51 строка, да ещё и введены всякие значения вроде width:1180px?!
Большое спасибо. Подскажите, зачем делается так? .description-item + .description-item {margin-left: 40px;} для формирования отступа между блоками с "лампочками". Почему нельзя просто один раз написать .description-item, зачем здесь сложение?
привет. в самом начале у меня возникла проблема с миксином для шрифта, повторил полностью @mixin font-lato { font-family: 'Lato' , sans-serif;} и выдает ошибку "ERROR: media query expression must begin with '(' миксин создавался в style.scss
Отличный видео урок!Но хотел спросить, почему допустим посл"content не продолжить сразу, а создавать ещё одну обертку для остального контента.Извиняюсь, если вопрос глупый, только начал увлекаться сей сферой и есть сложности с понятием структуры(семантики)
Здравствуйте ! Скажите, пожалуйста, VSCode выдаёт ошибку оранжевым волнистым подчёркиванием. Якобы что-то не так по БЭМ-технологии. Может одинарное нижнее подчёркивание. Например в этом классе - class="section-plans__list-item_button". Что не правильно ? Ведь у вас тоже VSCode и подчёркивания нет.
у меня проблема. не работает преобразование scss в css( не меняеться вид документа) а если меняю пути преобразование то пишет что в плагине gulp-sass ошибка
@ВСЕ_НА_СТРИМ seo_dodik на серьезных проектах его не используют.. бутстрап больше как разработка пилотного для презентации.. не ну есть конечно чудаки кто из проекта в проект все на бутстрапе) определенно это не то на что нужно равняться ) я бекендер и раньше постоянно все с бутстрап делал.. сейчас понял свои ошибки)
Здравствуйте, появилась проблема: установил галп, создал файл style.scss и он перевелся в css, а когда сделал файл normalize.scss, то он не переводится в css. Вбивал команду gulp style-не помогает
два замечания: 1) Не по БЭМ, хотя и напоминает его. 2) Для копирования названия всех классов (из html в css) есть плагин Class Extractor , который сделает верстку намного быстрее
Только в этом видео задумался что галп полезная вещь, ещё бы и вебпак в догонку, но пока не вижу в нем смысла, мне компиляция и авто обновление нужно, и продакшн сборка с минификацией префиксами и тд
Скажите, а вот вы используйте для заголовков div, но ведь есть h1-h6(сейчас не пытаюсь придираться и делать из себя самого умного, мне просто интересно, как все делают в реальных проектах и есть ли смысл использовать h-теги), если не сложно, то объясните пожалуйста)
Я делал по привычке, ибо в последние 5 лет делал исключительно закрытые проекты, и там seo не важно. Да, правильно использовать h1 и тд исходя из логики.
Уж не знаю на каком разрешении и экране вы смотрите ролики на ютубе, но по-моему всё прекрасно видно. И понятно намного лучше, чем если бы в одно окно влезало всего несколько увеличенных строк.
Хорошая вёрстка, без лишних стилей, но в шапке кнопка шире, в секции с видео - правый блок должен быть чуть ниже текста. Если над этим работать, то вёрстка уже не будет такой хорошой и заказчику этого не объяснить, поэтому приходится писать говно-код с фиксированой шириной или падингами для 1 кнопки
Я одного понять не могу, почему вся структура html из дивов ? я открыл видео, чтобы посмотреть на верстку профессионала. Какие семантические теги использует, как заранее верстает, чтобы потом с адаптивностью легче было И что по вопросам стилизации, то вопросов почти нет (кроме того, что вы везде используете пиксели вместо относительных единиц измерения), но, блин, семантика html..
В этом вся "прелесть" верстки, браузер принимает абсолютно всё что ему дают, даже не валидную разметку. Поэтому стоит расслабиться и верстать, так как ты умеешь и с опытом править свой стиль кода, под те баги, которые ты будешь встречать начинаю с адаптивности и заканчиваю кроссплатформенностью
К тому же, заказчику наплевать, что в коде и никто не будет платить лишних 1к$, лишь для того чтобы код был удобен, читаем и легко поддерживаемый. Для таких вещей люди пишут свои проекты и реализует свой потенциал в них. А в интерпрайзе работает с тем, с чем приходится
думаю ты уже давно нашел ответ на свой вопрос, но все же) это св-во показывает кэф сжатия, чем он больше, тем сильнее сжимается элемент, по умолчанию 1, то есть элементу разрешено сжатие при уменьшении размеров экрана
Эх, ну если уж после этого ролика я не начну завтра тренироваться делать лендинги то мне срочно потребуется строгий наставник с ремнём ) Кстати что за программу вы использовали для просмотра лендинга? Я знаю что используют фотошоп, но это программа совсем не похожа по интерфейсу. Или это был Avocode? Спасибо за видео!
Всем привет! А кто сможет подсказать, почему у меня выдает 12 ошибок в css файле, начиная с .section-outer {}, такое ощущение будто он не видит класс в html section class="section-other section-header"> это буквально, начиная с 17 45 данного видео, где задний фон должен стать белым. Я нажимаю обновить html файл в google chrome, но после обновления ничего не происходит Жаль что скрин приложить не могу.
Вопрос, Вы вроде фронт-ендер? То есть пишите и js код для сайтов? Нужны какие-то вводные видео, как правильно изучить данную область и т.д И желательно примерчик разобрать.Спасибо
Скажите Виталий, почему вы оборачиваете каждый инпут и баттон в свой див? Что этим преследуется? я совсем недавно начал изучать верстку и мне многое непонятно. Ведь можно задать каждому инпуту и кнопке свой класс и пользоваться задавать свои стили напрямую.
А какой резон содержимое файла normalize.css копировать в normalize.scss? Как я вижу, это лишнее. Сам файл normalize.css не меняется. Его можно было проще закинуть в папку css и всё..
В идеале файл CSS должен быть всего один, причем сжатый! Аналогично и с JS. Узнай побольше про "таск раннеры". Это азбука! Когда всё это изучишь, тогда можешь смело советы давать направо и налево! )))
Спасибо за видео, сам так же попробовал сверстать какой-нибудь макет и столкнулся со небольшой сложностью: возможно ли центрировать по вертикали div, состоящий из трёх элементов, по центру нижнего там элемента ? Или нужно прибегать к свойству transform: translateY и отодвигать блок наверх на высоту первых двух элементов ?
😎 Получить исходники и другие преимущества - 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/
i guess it is kinda off topic but do anyone know a good place to stream newly released series online?
@Axel Derek flixportal xD
@Reyansh Holden Thank you, I signed up and it seems to work :D I appreciate it!!
@Axel Derek happy to help =)
Виталий, очень интересно (особенно подача материала)!!! Выкладывайте пожалуйста побольше видео, в частности - верстка сложных и нестандартных макетов))
Да, уже год прошел, а новых версток нет!!!!!! Я негодую
Каждый раз, когда после перерыва мне нудно вкатываться в новый проект, я открываю это видео и привожу воспоминания в порядочек.
Уже проекта три такое происходит ) Видос полезный в этом плане.
Всё необходимое, для того, что б стартануть проект более менее грамотно и не переделывать потом по сто раз. Спасибо)
Poka sdelal, glaza chut' ne polomal, poidu teper' zakaju sebe takie je stil'nie ochki kak u vas ))) Spasibo za rabotu!!!
Спасибо
Благодаря таким видео не пропадает желание продолжать изучение вёрстки.
@Ast Kch дружище, в интернете достаточно макетов для практики.
Крутое видео. Макет не сложный, но главная ценность показать направление мыслей, структуру html / css кода
Спасибо, после видео моя верстка стала много чище и приятней. Потому что в основном, в уроках, эта какая-то мешанина из классов, блоков. А здесь сразу видно как делать чтобы было красиво.
Заметил такие моменты:
1.) CSS свойства не имеют приоритета. Например, первыми должны идти CSS свойства которые отвечают за позиционирование и блочную модель: position, display, далее прописываются margin, padding, и только потом, в конце, идут стили оформления color, background, font и т.д. Для этого даже существует соглашение в верстке, на хабре думаю есть статья, с порядком свойств, сначала будет не привычно, но потом вы будете автоматически писать свойства в нужных местах, это улучшает читаемость кода, position всегда идет первым, а не так, что где то он первый, а где то в конце, это очень плохо, не делайте так.
2.) 26:30 яркий пример того, когда с помощью препроцессора вы стреляете сами себе в ногу. Есть главный блок, в него вложен &-wrapper, далее идут вложенные элементы &__ ... это ухудшает читаемость кода, а так же навигацию по коду, я это давно понял и перестал использовать вложенные правила, чего и другим советую, кто только изучает препроцессоры, и думает: "вау, вложенность, как круто, буду теперь городить целые блоки кода через &", нет, так делать не нужно, только если вы хотите прописать &:hover, &::before, & + &, тогда да, это будет очень удобно и не будет ухудшать читаемость CSS кода.
Копуцк
Че то не понял ) , это из за того что кто то на хабре сказал так нельзя менять порядки местами свойств в css, значит надо следовать этому советчику?). Это наверно из той же оперу с семантикой, где это всего лишь рекомендация а всех ввели в заблуждение и многие считают что поисковые лучше считывают код)))
2) Вложенность добавляет специфичности классам. Общие стили пишуться общему классу, а вложенным блокам (&__ ...) добавляються специфичные стили
Большое спасибо! Очень приятно учиться по Вашим урокам! 💪
я немного в афиге, ибо хожу на курсы, но всё равно приходиться отстаивать свой подход к стилю кодинга...а теперь я понимаю, что двигаюсь в правильном направлении =) спасибо за новые для меня фичи по структуре и оптимизации =) и отдельное спасибо за визит к айти-бороде =)
Спасибо -)
Ура, у меня получилось следовать вашему уроку и сделать это. Впервые приступил именно к макету (на это меня подтолкнул подробный и содержательный разбор). До этого я лишь частично делал отдельные структуры (кнопки, менюшки, навигацию и прочее) на www.w3schools.com/howto/default.asp и искал разные уроки с уже "взрослым" подходом насчет сверстать целый макет, впоследствии чего и наткнулся на данный канал. Даже просто повторяя за вами все действия в процессе запутался в html разметке, а после 50:00 минуты с введением .description-item стал вообще нервничать. Все поехало и поплыло. Но уже потом я разобрался с проблемами (иногда они были настолько мелкими, что хотелось кусать локти - где-то не хватало “{“ в стилях (потом установил Bracket Pair Colorizer), где-то не там закрыл тег в разметке. Вопросы, которые у меня возникали по vscode и сборке gulp решились обращением к ранним видео
- действительно лучше, когда есть видеосопровождение рассказчика в уголку экрана, создается впечатление полноценного диалога, не знаю почему, но воспринимается лучше, чем без него
- многим обзорщикам такой тематики (на мой взгляд новичка) не хватает медленного темпа (есть в сети просто ua-cam.com/video/46q2eB7xvXA/v-deo.html странные уроки на скорость), а вы еще проговариваете чуть ли ни каждое слово кода
Некоторые вопросы:
- в разметке по наименованию класса:
почему “section-outer section-header” - почему просто не “section-header”?
- в дальнейших наименованиях классов:
по типу section-plans_list-item_title я заметил, что вы чередуете “__“и “-” , чередовать символы “__“и “-” это с целью не запутаться и общей наглядности?
- запланирован ли у вас контент, где производится разбор готовых макетов, сделанных неопытными верстальщиками или просто с профессиональной точки зрения примеры криво написанного кода. Вероятно, за свою практику вы сталкивались с самыми разными ошибками, обнародовать самые частые - это бомба. Дело в том, что я наткнулся на видео обсуждения работ с форума htmlforum.io вот тут ua-cam.com/video/O0V1LDcKql8/v-deo.html и нашел такой контент очень познавательным.
В заключение хочу сказать спасибо за это приключение. Делал я макет по утрам/вечерам в свободное время и растянулось на четыре дня и такое чувство, что с вами подружился. Мне понравилось решать проблемы (которые создавал сам, старался рассуждать вместе с вами и хотя бы разметку делать самому, понял, что прописывать стили еще не могу), благодаря такому сложному макету для новичка я почерпнул для себя многое. От души душевно в душу вообще. Крутой контент, мегалайк.
@@prosto_razrabotka здорово, это для меня новое, почитаю про бэм яндекса. Понял, спасибо
@@prosto_razrabotka если будет свободная минутка, можете посмотреть свежесверстанный мной макет? drive.google.com/open?id=1PuMOZTIWGlc-csuCWqkfpeKZV8L3CNjA мне любопытно, не переборщил ли я с вложенностью и дивами, да и вообще любая информация интересна
@@prosto_razrabotka да, вдохновился к первым подвигам верстки по вашим урокам. Конечно, берите. Это удивительный поворот в моей учебной деятельности (о таком разве что мечтать мог)
@@prosto_razrabotka странно, сейчас повторю, конечно
@@prosto_razrabotka у вас отображается ссылка сейчас (вчера тут ее оставил)? а то может ютюб блокирует (не знаю)
Понравилось. Очень интересно было, верстал вместе, ставя на паузу. Впечатляет концентрация твоя :)
Посмотрел видео про sass, потом про gulp, потом это. С флексами разобрался через шпаргалки. Сверстал первый макет. Спасибо. :)
Побольше таких видео и ждем JS! Трудяга капец, спасибо тебе)
просто спасибо! знайте, что только из-за того что всего лишь я посмотрел это видео - время которое вы на него потратили не ушло впустую так точно!
Cупер , приятно смотреть как работает про :)
Спасибо)
Ничего не понятно, но очень интересно. Со стороны выглядит так легко и просто)
Только со стороны 😅
На деле так же легко и быстро)
@@iamname8758 макет то очень простой, с таких и нужно начинать))
Виталий, спасибо! я разработчик (JS), посмотрел видео и уловил полностью ход Ваших мыслей и удобство Вашего подхода! Спасибо огромное за то, что поделились
Я после этого видоса вспомнил свой код (хуякхуяк-готово) и захотелось себе морду набить!) теперь буду стараться по такой же системе верстать, аккуратно и вдумчиво!
жиза :з
Наконецто, хоть кто-то верстает на флексах. Самые популярные видео с версткой, это float с последующими фиксами clear: both; Сколько можно ? =)
Чел, ты реально оч крут!
Привет.
1) большое спасибо за качественные видео
2) будет очень полезно если сделаете видео о методологиях типо БЭМ и т. п. Очень интересно что думаете о том как правильно называть класы и каких правил придерживаетесь при написание стилей
Что скажите?
Спасибо, информативно!
Небольшое замечание, заголовки лучше, наверное, тэгами h размечать, а не дивами)
@@FaineLito1055 объясните зачем нужны h если можно размер дива прост менять
@@КлаудиХо h тоже меняются и даже проще
Спасибо, я считаю, что видео учит в первую очередь гигиене верстки. Мне надо еще раза три посмотреть, чтобы привыкнуть верстать так, а не жуткой кашей и мешаниной классов, как это делаю пока я.
не только лишь посмотреть, а делать на практике, приучаться делать всё как положено)
не самый лучший вариант для подражания, если что. например из БЭМа автор использует только именования классов как я вижу. на безумную вложенность классов и из-за этого чрезмерную специфичность селектора (спасибо sass) пофиг. На то, что элементы формы выносятся в отдельный блок, т.к. могут использоваться в других частях сайта тоже пофиг. верстка как спорт короч, быстрее сверстал быстрее бабло получил, а дальше хоть трава не расти). Автору ролика без обид картинка хорошая, подача тоже, но, думаю, сам свои ошибки понимаешь, при этом учишь зрителей плохому(
@@TheBuzzJazz А как правильно учиться верстке? Где инфу брать?
Что делать надо?
IS OS можешь посмотреть все видео Harry Roberts csswizsrdry.
@@isos6534 обрати внимание на Harry Roberts csswizardry, и научись правильно использовать БЭМ. Про БЭМ смотри только видео от Яндекса. Удачи)
Спасибо, делал по вашему видео, все получилось :) приятно слушать! все объяснено доходчиво и понятно)
Всегда приятно слышать, когда у подписчиков получается -)
Согласен с тем, что объяснения понятные и т.д.
Здравствуйте! У меня, к сожалению возникли проблемы. Не могли бы вы поделиться кодом, а то я не могу разобраться со структурой?!
Как же я тебя обожаю
Очень жду похожего контента. Очень интересно именно от вас!)
Виталий, спасибо за практический урок!
Спасибо за видео) Очень интересно смотреть, а также нравится стиль.
Виталий , ну вы гений конечно! Спасибо за знания
Спасибо за видео, можете пожалуйста скинуть макеты в будущем если ещё будете делать такие видео)
Спасибо большое за такое видео! Все только по делу, и все понятно!
Спасибо огромное, Виталий! Вы - супер!
Благодарю
Спасибо! Очень понятное объяснение! Всё получилось!
Большое спасибо, было очень приятно и познавательно смотреть!!! :)
Подскажите пожалуйста, кто знает, почему Виталий не использовал тег а только задал класс для секшона в шапке?
16:21 Как в style.scss появилось столько кода, которые до этого в видео не обьяснялось?
... он же до этого копипастит секции, вы точно сначала смотрите?
@@kirillprosvirov8932 про // === Variables === и // === Common === там нет ни слова, откуда взялись непонятно
спасибо Виталий! посмотрел с удовольствием! больше таких видео!
Спасибо, очень интересно и легко воспринимается информация
Объясните, пожалуйста, как так получается, что на 9 минуте в scss файле 10 строчек, затем идёт длинная вставка html-я, а затем на 16:27 ВНЕЗАПНО там уже 51 строка, да ещё и введены всякие значения вроде width:1180px?!
Mne tozhe o4en' interesno
@@danilsergeev6299 новичек о контейнере может не знать, ето был бы шок как оно само стоит по центру
@@danilsergeev6299 а в какой момент на видео, он все это делал? Я уже 10ё раз пересматриваю и ничего нету из этого
а нужно ли собирать gulp? Например, в webpack прописывал в терминале npm run build и проект собирался в отдельную папку и все работало, а здесь, если просто открыть index.html работает половина.. как быть?
Спасибо за Ваши видео, очень круто и доступно!
Всё было здорово. Благодарю!
Круто! Я б такой сверстал часов за 8-10 наверное =)
34:55 Section Promo
44:14 Section Promo продолжение
55:50 Section Founder
1:01:46 Section Plans
1:22:30 Section Free
1:29:03 Section Footer
1:40:43 Дорабатываем мелочи
Большое спасибо за данное видео. Однако у меня возникла следующая трудность: в вашем видео после первого рендера сайта на 12:56 весь текст прижат к левому краю, а уже после второго на 16:18 все блоки сместились правее, точнее заняли крайнее левое положение внутри блока section-inner. При этом когда Я проделываю аналогичные действия, все элементы у меня по прежнему остаются привязанными у крайней левой границы экрана. Почему так происходит?
Такая же проблема возникла у меня. Может быть нашли решение ?
два лайка! очень хотелось бы увидеть подолжение!
Продолжение - это адаптив. Есть на канале.
@@prosto_razrabotka объясните, пожалуйста, как так получается, что на 9 минуте в scss файле 10 строчек, затем идёт длинная вставка html-я, а затем на 16:27 ВНЕЗАПНО там уже 51 строка, да ещё и введены всякие значения вроде width:1180px?!
Большое спасибо. Подскажите, зачем делается так? .description-item + .description-item {margin-left: 40px;} для формирования отступа между блоками с "лампочками". Почему нельзя просто один раз написать .description-item, зачем здесь сложение?
Спасибо, видео очень сильно помогло в верстке!
привет. в самом начале у меня возникла проблема с миксином для шрифта, повторил полностью @mixin font-lato { font-family: 'Lato' , sans-serif;} и выдает ошибку "ERROR: media query expression must begin with '('
миксин создавался в style.scss
У меня windows. Данный макет, который для скотча, прекрасно открылся в Adobe XD. А данный редактор сейчас бесплатный!
Отличный видео урок!Но хотел спросить, почему допустим посл"content не продолжить сразу, а создавать ещё одну обертку для остального контента.Извиняюсь, если вопрос глупый, только начал увлекаться сей сферой и есть сложности с понятием структуры(семантики)
Здравствуйте ! Скажите, пожалуйста, VSCode выдаёт ошибку оранжевым волнистым подчёркиванием. Якобы что-то не так по БЭМ-технологии. Может одинарное нижнее подчёркивание. Например в этом классе - class="section-plans__list-item_button". Что не правильно ? Ведь у вас тоже VSCode и подчёркивания нет.
Привет, а как появилась разметка по секциям в SCSS?
Горячие клавиши)
@@mexvision-3556 а как именно?)
еще бы адаптив показал, было б круто
Адаптив тут:
ua-cam.com/video/nvce-Ao_t9k/v-deo.html
у меня проблема. не работает преобразование scss в css( не меняеться вид документа) а если меняю пути преобразование то пишет что в плагине gulp-sass ошибка
Спасибо за такой контент!
Огромное спасибо! Я бекендер, и прям очень нужно было быро разобраться.. А то бутстрап это утопия.. Куча мусора остаётся..
@ВСЕ_НА_СТРИМ seo_dodik на серьезных проектах его не используют.. бутстрап больше как разработка пилотного для презентации.. не ну есть конечно чудаки кто из проекта в проект все на бутстрапе) определенно это не то на что нужно равняться ) я бекендер и раньше постоянно все с бутстрап делал.. сейчас понял свои ошибки)
Здравствуйте, появилась проблема: установил галп, создал файл style.scss и он перевелся в css, а когда сделал файл normalize.scss, то он не переводится в css. Вбивал команду gulp style-не помогает
Приходите в телеграмм чат со скринами
Я его победил! Спасибо Виталий!
Привет! Можешь обновить в базовом шаблоне package-json, так как новичку трудно в этом ковыряться.
два замечания: 1) Не по БЭМ, хотя и напоминает его. 2) Для копирования названия всех классов (из html в css) есть плагин Class Extractor
, который сделает верстку намного быстрее
1. Я к нему и не стремился
2. А вот это интересно. Спасибо, посмотрю
О, так вот как этот плагин называется)
всем привет! почему нельзя вместо нельзя использовать просто тег ?
Не понимаю. от куда взялись стили и классы в scss на 16:26 может кто нибуть пояснить?
он в самом начале начале говорил про то что у него в проекте есть😐, если не понятно, то смотри видео про gulp
У меня к вам вопрос, а почему вы везде использовали только дивы? почему нет нигде h1, h2, p и тд? Очень хотелось бы услышать причину этого
Он закрепляет все комментариями, а еще названия классов говорит само за себя
@@sauronin2058 и что? а семантика? так же для формы ессть type="name" type="email"
потому что не изучил семантику, а теги h, p, strong и т.д важны для поисковиков. Лично по мне, он не лучший пример для новичков
@@evgeniyk.4618 а кого можете посоветовать? кроме семантики, вроде у него все неплохо
@@rand_kk я сам книжки читал, после смотрел каналы: "от 0 до 1" "glo academy" "webdesignmaster' , смотря их видео , сомнений не возникало.
Спасибо за урок!
огромное спасибо!! ❤️❤️
Спасибо за работу
что делать если в scss файл не импортируются данные ? проверил всё по 3 раза, вроде всё правильно, но данные не импортируются.
Только в этом видео задумался что галп полезная вещь, ещё бы и вебпак в догонку, но пока не вижу в нем смысла, мне компиляция и авто обновление нужно, и продакшн сборка с минификацией префиксами и тд
Годный контент!
Привет, а что это за программа, в которой ты смотрел шрифты?
Скажите а по чему самый верхний section не назвать просто тегом header,
А почему не использовали готовые тэги как header и footer ещё для загаловка h1?
Скажите, а вот вы используйте для заголовков div, но ведь есть h1-h6(сейчас не пытаюсь придираться и делать из себя самого умного, мне просто интересно, как все делают в реальных проектах и есть ли смысл использовать h-теги), если не сложно, то объясните пожалуйста)
Я делал по привычке, ибо в последние 5 лет делал исключительно закрытые проекты, и там seo не важно.
Да, правильно использовать h1 и тд исходя из логики.
@@prosto_razrabotka понял, спасибо за ответ)
И отдельное спасибо за ваши обучающие видео!)
Спасибо большое за видео
А ты что чаще используешь scss или sass, что удобнее?
Автор, к вам скромная просьба, делайте пожалуйста zoom когда пишете код, пожалуйста.
В противном случае нам крайне не удобно смотреть .
Уж не знаю на каком разрешении и экране вы смотрите ролики на ютубе, но по-моему всё прекрасно видно. И понятно намного лучше, чем если бы в одно окно влезало всего несколько увеличенных строк.
Попробуйте видео во всеь экран сделать, мне помогает обычно
Хорошая вёрстка, без лишних стилей, но в шапке кнопка шире, в секции с видео - правый блок должен быть чуть ниже текста. Если над этим работать, то вёрстка уже не будет такой хорошой и заказчику этого не объяснить, поэтому приходится писать говно-код с фиксированой шириной или падингами для 1 кнопки
Подскажите, пожалуйста, как сделать так , чтоб в файле style.scss тоже добавилось столько строк с подписанными секциями ??
решила проблему - запедалила все в ручную :)
Подскажите студенту,что за программа в которой просматривается макет?
Спасибо, было очень полезно
Спасибо, за видео.
Я одного понять не могу, почему вся структура html из дивов ? я открыл видео, чтобы посмотреть на верстку профессионала. Какие семантические теги использует, как заранее верстает, чтобы потом с адаптивностью легче было
И что по вопросам стилизации, то вопросов почти нет (кроме того, что вы везде используете пиксели вместо относительных единиц измерения), но, блин, семантика html..
В этом вся "прелесть" верстки, браузер принимает абсолютно всё что ему дают, даже не валидную разметку. Поэтому стоит расслабиться и верстать, так как ты умеешь и с опытом править свой стиль кода, под те баги, которые ты будешь встречать начинаю с адаптивности и заканчиваю кроссплатформенностью
К тому же, заказчику наплевать, что в коде и никто не будет платить лишних 1к$, лишь для того чтобы код был удобен, читаем и легко поддерживаемый. Для таких вещей люди пишут свои проекты и реализует свой потенциал в них. А в интерпрайзе работает с тем, с чем приходится
Почему теги без заголовков ?
IFEXE не семантическая верстка
Да, не валидно получается!
22:33 объясните, пожалуйста, для чего тут нужен flex-shrink? Когда убрал его не увидел разницы
думаю ты уже давно нашел ответ на свой вопрос, но все же) это св-во показывает кэф сжатия, чем он больше, тем сильнее сжимается элемент, по умолчанию 1, то есть элементу разрешено сжатие при уменьшении размеров экрана
Было очень интересно! Спасибо! // быстрая верстка для новичка заняла 3дня по 2ч тоесть ~7 часов )) А сколько заняло у вас?
4ч. Печатать в слепую пробовал?
Эх, ну если уж после этого ролика я не начну завтра тренироваться делать лендинги то мне срочно потребуется строгий наставник с ремнём )
Кстати что за программу вы использовали для просмотра лендинга? Я знаю что используют фотошоп, но это программа совсем не похожа по интерфейсу. Или это был Avocode?
Спасибо за видео!
Sketch
@@prosto_razrabotka Ах да, пересматривая ролик я увидел где вы это говорите 0:36
Здравствуйте вы можете скинуть ссылку на программу с которой вы работаете Спасибо за обучающие видео очень рад продолжайте в этом духе спасибо!
А мне интересно, вот. Че за инструмент такой типа "панели управления", где показываются все свойства любого объекта в макете?
В Хроме нажимаете правой кнопкой мыши на странице, там выбираете пункт Inspect. То же самое есть и в других браузерах, но может называться по другому
Скажи пожалуйста какую методологию верстки ты используешь?
Виталий, скажите пожалуйста, будут ли уроки по натяжке верстки на какую-нибудь популярную CMS?
Всем привет! А кто сможет подсказать, почему у меня выдает 12 ошибок в css файле, начиная с .section-outer {}, такое ощущение будто он не видит класс в html section class="section-other section-header"> это буквально, начиная с 17 45 данного видео, где задний фон должен стать белым. Я нажимаю обновить html файл в google chrome, но после обновления ничего не происходит
Жаль что скрин приложить не могу.
Вопрос, Вы вроде фронт-ендер? То есть пишите и js код для сайтов? Нужны какие-то вводные видео, как правильно изучить данную область и т.д И желательно примерчик разобрать.Спасибо
Скажите Виталий, почему вы оборачиваете каждый инпут и баттон в свой див? Что этим преследуется?
я совсем недавно начал изучать верстку и мне многое непонятно.
Ведь можно задать каждому инпуту и кнопке свой класс и пользоваться задавать свои стили напрямую.
Больше контроля. По выравниванию, добавлению еще каких-то элементов, например лейблов.
Скажите, а что за расширение такое у вас, что переносит все классы сразу с html в scss ? Очень полезная штука, каждому пригодится.
Bohdan Bilun gulp
А какой резон содержимое файла normalize.css копировать в normalize.scss? Как я вижу, это лишнее. Сам файл normalize.css не меняется. Его можно было проще закинуть в папку css и всё..
В идеале файл CSS должен быть всего один, причем сжатый! Аналогично и с JS. Узнай побольше про "таск раннеры". Это азбука! Когда всё это изучишь, тогда можешь смело советы давать направо и налево! )))
Спасибо за видео, сам так же попробовал сверстать какой-нибудь макет и столкнулся со небольшой сложностью:
возможно ли центрировать по вертикали div, состоящий из трёх элементов, по центру нижнего там элемента ? Или нужно прибегать к свойству transform: translateY и отодвигать блок наверх на высоту первых двух элементов ?
Честно говоря, не понял задачи. Скиньте макет мне в ВК, я взгляну.
Подскажите пожалуйста как вносить изменения сразу в несколько строк.
Посмотрите видео на канале посвященное горячим клавишам в VS Code
ua-cam.com/video/kPxFrThR2IU/v-deo.html
гуд, спасибо.
а есть подобный канал про бэк-энд?