Топ 10 неочевидных ошибок в верстке HTML/CSS

  Переглядів 18,393

От 0 до 1

От 0 до 1

Рік тому

Топ 10 неочевидных ошибок в верстке, расскажу про революционный метод работы с заказчиком БДСМ, всем точно понравится, также разберем, то что не приходит в голову на первый взгляд при использовании HTML/CSS
-----------------------------------
Мой курс по верстке - from0to1.com.ua/
-----------------------------------
Телеграм канал - t.me/from0to1com
Видео про семантику: • Семантика, семантическ...
Видео про БЭМ: • БЭМ методология. Практ...
Для самых маленьких лендинг: • Верстка сайта для самы...
Для самых маленьких многостраничник: • Верстка многостранично...
Верстка: • Верстка целого сайта в...
Сложный лендинг: • Верстка сайта, Gulp 4,...
Сложный многостраничник: • Верстка сайта. Верстаю...
Задавать классы User-generated content, 0:51
Hover на мобильных устройствах, 3:56
Семантика, 5:08
Именование классов, 7:06
Задавать высоту, 8:10
Длинные вложенности селекторов, 9:15
Не защитить user content, 10:21
Размер и формат картинок, 12:15
Не задавать вопросы, 13:08
Сделать счастливым заказчика (работодателя) метод БДСМ, 15:56
Подпишитесь на канал, если вам понравилось данное видео:
bit.ly/2IFzwBZ

КОМЕНТАРІ: 133
@Marylovesautumn
@Marylovesautumn Рік тому
Наш любимый диджей вечеринок!!!! Спасибо за видео, бегу за чаем и устраиваюсь за компьютером.
@vadymprokopchuk
@vadymprokopchuk Рік тому
круть!
@sezimaz
@sezimaz Рік тому
Единственная вечеринка на которую мне хочется после 20 лет
@vadymprokopchuk
@vadymprokopchuk Рік тому
круть, туса)
@user-jt3su6le8i
@user-jt3su6le8i Рік тому
Каждый видос как маленький праздник для меня. Спасибо за хорошее настроение!
@vadymprokopchuk
@vadymprokopchuk Рік тому
круто, спасибо
@serg-k
@serg-k Рік тому
Учимся у лучших, чтобы стать лучшими. 10🐺/10
@vadymprokopchuk
@vadymprokopchuk Рік тому
спасибо
@upwlqwp
@upwlqwp Рік тому
Спасибо большое, Вадим тебя можно слушать бесконечно. Это гениально сгенерированные примеры просто нечто❤️‍🔥
@vadymprokopchuk
@vadymprokopchuk Рік тому
Благодарю)
@cy66a
@cy66a Рік тому
1. Задавать классы User-generated content, 0:51 2. Hover на мобильных устройствах, 3:56 3. Семантика, 5:08 4. Именование классов, 7:06 5. Задавать высоту, 8:10 6. Длинные вложенности селекторов, 9:15 7. Не защитить user content, 10:21 8. Размер и формат картинок, 12:15 9. Не задавать вопросы, 13:08 10. Сделать счастливым заказчика (работодателя) метод БДСМ, 15:56
@varvara_prokopchuk
@varvara_prokopchuk Рік тому
Спасибо, добрый человек
@Marylovesautumn
@Marylovesautumn Рік тому
Спасибо огромное!
@user-xi1gj4ju9f
@user-xi1gj4ju9f Рік тому
Вадим, мое почтение, ты лучший из всех преподавателей, очень легко и весело с тобой учиться, спасибо что ты есть. Жаль что все так выходит в нашем мире... Сил тебе!
@user-dc8yf8rc6d
@user-dc8yf8rc6d Рік тому
Вадим, спасибо большое за марафоны и за эти самые топовые вечеринки. Тебя слушать одно удовольствие и учится очень легко на все 💯. Отличная подача материала. Удачи тебе. Здоровья и мирного неба тебе и твоим близким✌️
@user-nw2gz8jg2v
@user-nw2gz8jg2v Рік тому
Ты как всегда, все четко и понятно! Спасибо за курс! Считаю, что решение пойти на него было одним из лучших моих решений)) Успехов во всем!!!
@vadymprokopchuk
@vadymprokopchuk Рік тому
Благодарю! отлично поработали! мне очень приятно
@dotlavv
@dotlavv Рік тому
дизайнер руководствуется логикой. Это может быть странно.... Я долго смеялся с этого)) Вадим, ты лучший 🦾
@Jane_123
@Jane_123 7 місяців тому
Спасибо за доступное изложение полезной информации.
@user-zr8jp3wf5t
@user-zr8jp3wf5t Рік тому
Всё чётко. Как всегда. А можно видео для новичков какими словами правильно называть классы в той или иной ситуации? С конкретными примерами.
@seriously7791
@seriously7791 Рік тому
Вадим, спасибо тебе за отличный контент! Так держать! Подписка, лайк однозначно!
@user-rn5ue1ys1k
@user-rn5ue1ys1k Рік тому
классный видос, спасибо, ждем возвращение, гуру!
@cy66a
@cy66a Рік тому
Спасибо, Вадим!
@user-sr6fc7kl7w
@user-sr6fc7kl7w Рік тому
Все просто и понятно как всегда ! Красава Вадик!
@Gazovchik
@Gazovchik Рік тому
Интересная тема Жаль смотреть пока некогда....... Всем успехов в обучении. Мира и добра.
@Arefevpro
@Arefevpro 10 місяців тому
Спасибо за эту вечеринку)
@VladimirOnokhov
@VladimirOnokhov Рік тому
Крутой видос! Спасибо. Сделаешь видео про фишки в верстке для новичков? Что-то типа margin: 0 auto (чтобы выравнить по ширине контента). Думаю будет полезно для старта, чтобы так сказать получить пул знаний и дальше только практика
@user-bm5ge3mr9u
@user-bm5ge3mr9u Рік тому
Как всегда жирный лайк!))
@vitaliisapryga4825
@vitaliisapryga4825 Рік тому
Очень полезное видео особенно для новачков! Интересно будет ли продолжение по gulp сборке?
@user-frond-end_dev
@user-frond-end_dev Рік тому
спасибо за годный контент!!! 2-ая часть, продолжение будет?
@vimvexvimvex8780
@vimvexvimvex8780 11 місяців тому
Подача материала просто супер )
@vadymprokopchuk
@vadymprokopchuk 11 місяців тому
спасибо
@artkkk7443
@artkkk7443 Рік тому
Вадян ты очень крутой специалист! Удачи тебе во всех твоих проектах!
@v.prochniy63
@v.prochniy63 Рік тому
Привет, Давно не встречал вас. Бороду отпустили не узнать. Смотрю все окей: жив ,здоров.,а значит будут еще видосы.
@user-or3ou3yl2r
@user-or3ou3yl2r Рік тому
Спасибо, очень интересно!
@user-ve7tx3ud6n
@user-ve7tx3ud6n Рік тому
Спасибо Вадим.
@tatigerbst4416
@tatigerbst4416 Рік тому
Спасибо тебе большое!👍👍👍
@dre._
@dre._ Рік тому
Сегодня я взял свой первый заказ на 20$ благодаря вам ,хочу сказать большое спасибо за ваш труд
@user-natal04ka
@user-natal04ka Рік тому
Не подскажите на какой площадке лучше искать заказы?
@aleksandralessandrovich2386
@aleksandralessandrovich2386 Рік тому
Заглянул я как-то на эту вечеринку, и Вадим подсадил меня на верстку…🎉
@avalex82
@avalex82 5 місяців тому
опа, go-surf (складний лендос) не так давно заверстав)) а відео тільки побачив, цікаво буде подивитися)
@vadymprokopchuk
@vadymprokopchuk 5 місяців тому
супер, молодцем!
@pol_puh
@pol_puh Рік тому
Спасибо за контент? Скоро будет видос про совершенствование сборки gulp для работы с картинками и шрифтами
@manuchehrqoriev
@manuchehrqoriev Рік тому
Спасибо большое ❤. 13:08 где можно найти видео об форм изображение
@natalialiakhovych
@natalialiakhovych Рік тому
Дивлюся ваше перше відео! Ваша вєчєрінка мені офігєть як подобається, ваша буква ггг, одразу мені сказала, що свій чувак і все по темі теж топ 💙😉
@Alex-kc3mn
@Alex-kc3mn Рік тому
Спасибо
@Panda_ex_
@Panda_ex_ Рік тому
Локи-король вечеринок это хорошо было😂
@drawusoon
@drawusoon Рік тому
не по колокольчику, а по зову сердца!)
@vadymprokopchuk
@vadymprokopchuk Рік тому
ты же мой родной=)
@user-sy5dy8jx9v
@user-sy5dy8jx9v Рік тому
Выслушал вас, все понял и принял , так доступно и понятно обьяснить нужно иметь талантище. Спасибо!!!
@vadymprokopchuk
@vadymprokopchuk Рік тому
спасибо) долго работал над этим)
@user-gh9jp3jx4e
@user-gh9jp3jx4e Рік тому
Все разжёвано проглотил с удовольствием) Спасибо.
@aleksandrkobelev8868
@aleksandrkobelev8868 Рік тому
У Вадима всегда самые крутые вечеринки!!!!!!
@mEden-xw2ke
@mEden-xw2ke Рік тому
Здравствуйте, продолжение gulp ближайшее время будет ? Или не ждать и самому пытаться настроить
@technoline-5758
@technoline-5758 Рік тому
Вадим,подскажите как Вы относитесь к webflow? Я с самого начала работаю только с традиционной вёрсткой..хотелось бы услышать Ваше мнение
@vladimirzvyagincev8193
@vladimirzvyagincev8193 Рік тому
Четенько🤘
@vadymprokopchuk
@vadymprokopchuk Рік тому
по красоте )
@front_praxis
@front_praxis Рік тому
Слушаем и впитываем !
@vadymprokopchuk
@vadymprokopchuk Рік тому
топчик
@luckytima2315
@luckytima2315 Рік тому
я: да я же сделал все как Вадим показывал так-же я :
@zlatan6565
@zlatan6565 Рік тому
Вадик,давай новые видосики выпускай !
@asgard1428
@asgard1428 Рік тому
Добрый день. Большое спасибо Вам за очередное классное видео. Можно вопрос? У меня такая проблема в vs code, между фигурными скобками (при нажатии на энтер) когда одна скобка опускается вниз, перестала появляться пустая строка. Получается так { }, а должно быть вот так { }. Что может быть? Я уже все настройки пересмотре, снес vs code и заново установил и все равно осталась эта проблема. Пожалуйста, помогите. Это отнимает столько времени.
@1995taunus
@1995taunus Рік тому
Вадим, спасибо за ваши видео. Сейчас уже поздно спустя 3 недели записываться на ваш курс начавшийся 20 марта. Вы наверно столько работы в него вложили, что будет жаль сделать его одноразрвым. Повтора не будет? Или может будет можно этот курс купить в записи для самостоятельного изучения?
@vadymprokopchuk
@vadymprokopchuk Рік тому
можете мне в телеграм написать, ник @silver8light
@denismoskvichov8691
@denismoskvichov8691 Рік тому
Привет сделай пожалуйста пооду по gulp
@Victorianos-ls7qy
@Victorianos-ls7qy Рік тому
Привет , можешь снять видео как натягивать верстку на wordpre? спс за ведео очень помогают
@user-lz4ob7gj4p
@user-lz4ob7gj4p Рік тому
Добрый день, Вадим! Готовится ли курс по посадке вёрстки на WP?
@vadymprokopchuk
@vadymprokopchuk Рік тому
неа, лежит в долгом ящике, а был готов на 25%
@sergeytsapliy7071
@sergeytsapliy7071 Рік тому
Доброго дня Вадим! Хотілося би дізнатися чи буде відео або парочку відео про веб-доступність і як її приміняти в проектах, так як дуже мало інформації про це і як її правильно приміняти, а також відео у вас або вашої дружини які розміри шрифтів використовувати на мобільних пристроях?
@romatokar3516
@romatokar3516 Рік тому
Написал вам огромную простыню что делать, а ютуб походу посчитал за спам и удалил его( Так что теперь коротко. Используйте семантику, вам как минимум не придется проставлять атрибут role для нативных тегов, например для тега атрибут role="button" не нужен, работает и для остальных семантических тегов. Не выключайте глобально outline это уже 60% доступности. Заполняйте атрибут alt в картинках и не вставляйте картинки через background-image, его используйте только для фонов. А это еще и для сео плюсик) Почитайте про aria атрибуты, самые часто используемые это aria-hidden, aria-label, aria-labelledby, aria-describedby Почитайте про contrast ratio. Почитайте про tabindex, вкртаце применяйте его в исключительных случаях. Тестируйте всё сами. Пройдитесь табом по странице, все интерактивные елементы должны выделятся, вы должны иметь возможность открыть и закрыть дропдаун с клавиатуры, а также перемещаться по его елементам стрелками. Тестируйте скринридером это NVDA, JAWS для windows и дефолтний для mac-os. Всё должно озвучиваться, в том числе и описание картинок, и иконки в кнопках если в кнопке только иконка. Учтите что если вы табом попали на елемент и скрин ридер его озвучил то наведите на него еще курсором, тоже должно читаться, а это не всегда так к сожалению. Поставьте екстеншены для хрома WAVE Evaluation Tool и axe DevTools - Web Accessibility Testing и запускайте их для проверки страницы, они подскажут все грубые ошибки и некоторые мелкие, подскажут как исправить и дадут линку на спеку. В первом исправляйте преимущественно красные ошибки, всеостальные больше рекомендации. Все что больше это уже специфика она либо описана в таске либо ее выцепит тестировщик, а зная проблему решение нагуглиться. Если остались вопросы пишите, попробую ответить
@vadymprokopchuk
@vadymprokopchuk Рік тому
гарна ідея, дякую, я дружині про коментар скажу=))
@jamjam3337
@jamjam3337 Рік тому
👏👍
@ivanbrest7650
@ivanbrest7650 11 місяців тому
При каких разрешениях (и ниже) стоит убирать Hover на мобильных устройствах?
@dimaslayer491
@dimaslayer491 Рік тому
Спасибо что рассказал про план обучения по твоим видосам, учусь по твоим марафонам, стараюсь где-то сделать сам, а потом смотрю как это сделал ты. Уже месяц занимаюсь, но прогресс не чувствуется, включаю следующий видос, думаю щас как сам сделаю весь сайт и спотыкаюсь уже через 15 минут верстки. Может кто подскажет, так и должно быть, или всё таки я как-то неправильно учусь?
@Arkady-777
@Arkady-777 Рік тому
У Вадима только курс на 1,5 месяца рассчитан, где тебя в темпе вальса ведут с кучей инфы и нюансов и очередности по сложности... и даже после этого надо еще поверстать, что бы закрепилось всё. А ты самостоятельно ... скорее всего по вершкам прошелся
@dimaslayer491
@dimaslayer491 Рік тому
@@Arkady-777 ты прав, скорее всего так и есть
@sovel1489
@sovel1489 Рік тому
Не переживай, делай дальше и всё получится, здесь главное практика)
@computercomputer3293
@computercomputer3293 Рік тому
К сожалению поздно появился пк и поздно узнал про верстку, нет возможности выдешить достаточное время на самообучение. Но в общем если на чем-то спотыкаюсь, то ищу информацию в интернете. Как правило находится. Поэтому практика реально рулит, особенно если макет ставит интересные задачи. А можно привести пример на чем спотыкнулись вы? Модет и помочт чем-то получится
@dimaslayer491
@dimaslayer491 Рік тому
@@computercomputer3293 так не, я же говорю, ставлю ролик на паузу, пытаюсь сделать дальше и довольно быстро наступает момент, когда не понимаю как делать дальше. Потом включаю ролик, смотрю как надо делать, пробиваю себе смачный фэйспалм, от понимания того что тормоз и делаю дальше. Свои проекты пока не делал, что бы совета искать) А так спасибо)
@BorealisAndre
@BorealisAndre Рік тому
Спрошу под этим видео. Хотел спросить: Есть задача сделать документацию на веб. В наличии много документов (текст+фото+видео) по ремонту и обслуживанию. Нужно сделать это все интерактивным переход от одного документа к другому, запуск видео, просмотр фото. Для этой цели подумываю сделать в видео HTML. Все это должно находиться локально без контакта с интернет. На какие средства стоит обратить внимание ? Нудны какие то решения вроде конструкторов сайта или может wordpress ?
@serdarhuseynov8901
@serdarhuseynov8901 Рік тому
spasibo oqromnoe
@user-se6nj9qx9g
@user-se6nj9qx9g Рік тому
будут ли уроки по git?)
@twitch3255
@twitch3255 Рік тому
Пожалуйста а можете сказать, сколько Вам времени пришлось чтобы выучить это все, я знаю что развиваться надо постепенно, но интересно хотя бы когда Вы изучили и нормально без всяких спокойно начали верстать, просто строчить без бб, сколько времени прошло (дней) на прокачку навыков? сколько часов на изучения вообщем и в день? где Вы набрали первых своих клиентов?
@computercomputer3293
@computercomputer3293 Рік тому
Хочется спросить, а задавать высоту через min-height тоже плохая практика?
@waishan7929
@waishan7929 Рік тому
А можно ссылку на новый сайт с курсом?
@mEden-xw2ke
@mEden-xw2ke Рік тому
Когда будет продолжение gulp ?
@kekoffer852
@kekoffer852 2 місяці тому
МЕТОД БДСМ - ТОП!
@vladimirchekanov7053
@vladimirchekanov7053 Рік тому
На это курс уже не успел наверно. Когда будет следующий?
@ukraine1514
@ukraine1514 4 місяці тому
Лайк,подписка. Сижу в тюрьме и учусь.... Спасибо😜👍
@vadymprokopchuk
@vadymprokopchuk 4 місяці тому
молодцом, пожалуйста
@ukraine1514
@ukraine1514 4 місяці тому
@@vadymprokopchuk Вадим,будет желанье и возможность,сделать курс по js,что б была вечериночка😁 с удовольствием записался бы на курс,но... Подневольный человек и естт есть ограничения🤷
@cormoranstrike7096
@cormoranstrike7096 Рік тому
Вадос в своих уроках на ютубе вроде бы и сам hover не убирает при адаптиве
@vadymprokopchuk
@vadymprokopchuk Рік тому
это чтобы веселее было =)
@natalia_0729
@natalia_0729 Рік тому
Как отключить :hover на планшетах и мобильных устройствах?
@onese7en141
@onese7en141 10 місяців тому
Медиа запрос any-hover проигнорирует hover на моб.устройствах
@AntonioBenderas
@AntonioBenderas Рік тому
я думал метод БДСМ - это когда заказчик просит сверстать под IE8
@user-natal04ka
@user-natal04ka Рік тому
Вроде @media (any-hover hover)
@user-bq6pk8pf3g
@user-bq6pk8pf3g Рік тому
Вы с Харькова?
@morminator6575
@morminator6575 Рік тому
Здравствуйте, столкнулся с такой проблемой, добавлял на свой сайт статью через файловый менеджер, внес изменения в файл, обновил страницу браузера, статья добавилась, а спустя несколько часов, статья просто пропала и файл который я редактировал, откатился до прошлой версии до моих изменений. Если редактировать файл по FTP то точно такая же проблема, через пару часов восстанавливается старая версия файла. Я уже весь интернет обшарил, но ничего не нашел по этой проблеме, в тех. поддержке не могут понять чего я от них хочу и как мне помочь. Так что вся надежда на вас, заранее спасибо
@dimondimonov6417
@dimondimonov6417 Рік тому
Где найти монтера? шоб проверял работы,подсказывал,указывал на ошибки,помогал исправлять.
@Capo2965
@Capo2965 Рік тому
Почему РФ И РБ не доступен курс ?
@Ch-ce7ym
@Ch-ce7ym Рік тому
А как можно убрать hover на мобильных устройствах ?
@The_Python17
@The_Python17 Рік тому
Когда будешь адаптировать сайт тогда и уберёшь
@natalia_0729
@natalia_0729 Рік тому
Непонятен момент "как защитить user content". Поясните кто-то.
@NursAcademy
@NursAcademy 9 місяців тому
Вадип ты просто хаха😅😅
@kiralatysheva6794
@kiralatysheva6794 Рік тому
Без тайм-кодов миллениалы могут и побить =)
@vadymprokopchuk
@vadymprokopchuk Рік тому
уже добрые люди написали, так что сейчас опубликую
@boombla_5234
@boombla_5234 Рік тому
А это нормально что по програме вашего курса, вы на 3 уроке учите Flex?
@vadymprokopchuk
@vadymprokopchuk Рік тому
а что вас смущает? =)
@boombla_5234
@boombla_5234 Рік тому
@@vadymprokopchuk то что на этом этапе, не особо понимают где ставить margin а где padding, и почему свойство width и height не работает на тег span, а у вас сразу флекс и js на 3 уроке,мне кажется если бы я так учил вёрстку, то бросил бы это дело сразу после 2 урока)
@vadymprokopchuk
@vadymprokopchuk Рік тому
@@boombla_5234 в одном уроке несколько видео, так что до момента изучения флексов уже есть ответы на вопросы которые вы писали выше
@Exigoll92
@Exigoll92 Рік тому
Смотрите Вадоса! Он дело говорит
@user-fd5le5bx9j
@user-fd5le5bx9j Рік тому
спс, Валос. ти топ
@Anodoree
@Anodoree Рік тому
Вадим, спасибо тебе огромное за курс) В очередной раз благодарю) Заскакивал с некоторым багажом знаний больше полутора лет назад) Как раз с задержкой на пару недель залетал) В итоге - знания упорядочились значительно, курс с ментором - пушка! Стал увереннее искать работу, в итоге первый заказ через пару месяцев только нашёл (за сомнительную "шляпу" не брался намеренно), продолжал фрилансить вполне успешно, а вот уже более полугода на удалёнке официально) Люблю вёрстку) Спасибо! Рад, что продолжаешь учить людей качеству) Успехов!) Народ, рекомендую от чистого сердца) Да, буд-то заказанное, сам раньше к таким комментам скептически относился, если не сказать более. Но что поделать, когда от души человеку и его делу благодарен?) В общем, думайте, что хотите. Было не шибко просто, но я достиг своей цели, и иду дальше) И во многом благодаря Вадиму и его курсу с ментором)
@Anodoree
@Anodoree Рік тому
И по теме. Учитывание сих неочевидных ошибок - огромнейший плюс к вашему успеху в деле. Решил вот посмотреть, убедиться в своём пути, послушать интересную речь с юмором - не прогадал, как обычно) всё чётко и праивильно) А как иначе у Вадима) Больше думаем головой - и всё будет лучше) Неочевидные резонансные моменты порой должны только давать повод к размышлению и нахождению ответа, а не к опусканию рук) Думаем и работаем!)
@Nurlybekdauletbaev
@Nurlybekdauletbaev Рік тому
БРИГАДА!!! Как найти и пользоваться флексбоксом
@WERWOLION
@WERWOLION Рік тому
По БЭМ классы задаются везде, если ты не задаешь классы то 100% сделаешь хуже. Бэкенд не может в классы?типо что? Типо воздать шаблон и переменную это что-то сложное? Текст--грин Грин это модификатор, он не может быть красным потому что есть БЭМ Картинкам 50 на 50нужно задавать высоту потому что юзер ставит потом чёрти что и если не задать высоту то будет трешь Если ты делаешь кнопку которую намудрил дизайнер то можно делать 5 влоденностей т.к если для всех спанов писать классы то получится ахинея. А по сути это полноценный блок который не будет менятся. Qjery в 2023 году, серьезно?
@romatokar3516
@romatokar3516 Рік тому
В видео же четко сказано куда классы не задавать. Это всякие текстовые и пост редакторы, никто в своем уме не пилит их с нуля есть уже проверенные готовые, и текста так и генерятся только тегами и своими классами, соответственно и стилить придется в основном селектор тега, незнаю погугли Quill editor и посмотри как оно работает и поймешь что имеется ввиду. А еще открою секрет БЭМ не истина методологий куча, а с учетом модульных стилей и вовсе пофиг на именование классов. "Грин это модификатор, он не может быть красным потому что есть БЭМ" этим цветом выделили какуюто часть текста, тут надо смотреть от контекста использования, если это акцентный цвет то что помешает через год разработки ему изменится на сиреневый? Часто бывает так что за 2-4 года разработки продукта у заказчиков меняется виденье продукта и редизайн проекта может случится 1 а то и 2 раза. Про высоту там избыточно сказано когда так делать не надо, приводить все случаи когда надо нет смысла. С компонентами которые "не будут менятся" это утопия, да, в больинстве мест компонент готов и везде одинаков. Но вот конкретно в этом месте в дизайне этот же компонент но немного изменен и перебивать всю мишуру вложеностей уже не приятно. Если что-то намудрено дроби на мелкие части и от них строй логику, сам же про бэм упоминаешь
@user-gk1su2vw4e
@user-gk1su2vw4e Рік тому
1. Верно, по БЭМ классы задаются всем элементам. В видео Вадим говорит именно о контенте, который будет меняться в админ-панели. Если вёрстка натягивается на CMS систему, то динамическому контенту, который будет меняться из админ-панели, классы не задают. Стили для такого контента записывают через вложенность от родителя. 2. Плохая практика называть классы или модификаторы судя из того как элемент выглядит. Сегодня он зеленый, завтра красный, после завтра синий. Поэтому лучше задавать классы или модификаторы исходя из того что это за элемент : brand-color, accent-color, inverse-color, second-color, primary-color. 3. Речь не шла о картинках, а скорее о блоках, секциях, контенте, который может добавиться в будущем на сайте. 4. Стилизация элементов через большую вложенность действительно плохое решение. Большая вложенность селекторов неизменно ведёт к большой связанности кода. Если вы захотите поменять какой-то один селектор, вам неизбежно придётся поменять его во всех каскадах. К тому же, переиспользование кода при таком подходе стремится к нулю. Итог: больший вес селекторов - больший бардак, больший вес файла - медленная загрузка. 5. Поддержка у браузеров формата AVIF - 83.16%, у WEBP - 96.76%.
@WERWOLION
@WERWOLION Рік тому
@@user-gk1su2vw4e 2 правило именования модификаторов по БЭМ написанное черным по белому если меняем цвет то пишем название цвета 5 какая поддержка AVIF в 2023 году? Вы про picture слышали что-то? 4 если у вас кнопка дизайнера то что вы собрались менять? Размер задаётся только элементу блока а не блоку. Если поменяется 2 цвета то что там мешает повесить модификатор на кнопку и дописать вложенность? 1 про админу вообще ничего не понятно. Что вы предлагаете делать если дизайнер намутил сложный дизайн и у вас p имеют разный отступ снизу? Т.е тут даётся совет новичкам они решат где-то не задавать стили и их вёрстка превращается в ужас. Если дают такие опасные советы то нужно развёрнуто пояснять что к чему и как определить где именно применять такой метод. Переписать стили с .блок__р на .блок р куда легче потом.
@WERWOLION
@WERWOLION Рік тому
@@user-gk1su2vw4e по второму пункту уточню Если у вас по модификатору цвет зеленый, а вы потом ставите красный то только когда вы ставите после зелёного красный вы переименовываете модификатор или пишете новый с названием праймери, не как иначе. Если это не предполагается изначально. А если кто-то решил поменять цвет то он должен или вешать новый модификатор или переименовывать старый. Т.е. это ни разу не ошибка называть модификатор названием цвета
@Himera1983
@Himera1983 5 місяців тому
Бдсм? Ты серьезно 😅
@vvks9901
@vvks9901 Рік тому
Не пойму логику: курс не доступен резидентами РФ, но курс на русском языке. Т.е. он для русских, живущих за пределами РФ и для русскоговорящих украинцев? Из РФ можно оплачивать без проблем через Юмани. Спасибо за очередное видео!!!
@alinan674
@alinan674 Рік тому
А чого б це з вами торгувати? Оце вигадали! І це не ваша справа, на якій він мові. Ми тут що хочемо, те й робимо.
@vvks9901
@vvks9901 Рік тому
@@alinan674 да будет МИР!!!
@sartjhon3300
@sartjhon3300 Рік тому
какое то неочевидное видео.... открываем любое твое видео и что мы видим?..... у каждого параграфа есть класс у каждой ссылки и картинки есть класс... что получается, ты учил все это нас неправильно? намеренно, или сам только недавно понял про именование user.generated?
@AntonioBenderas
@AntonioBenderas Рік тому
На стримах Вадим верстал не user.generated лендосы
@AntonioBenderas
@AntonioBenderas Рік тому
а вот по поводу вложенности селекторов вопрос. Как её избежать, если SCSS это очень удобная штука
@sartjhon3300
@sartjhon3300 Рік тому
@@AntonioBenderas он говорит об избыточной вложенности. 2-3 уровня вложенности это нормально, как раз по БЭМ, блок, внутри элемент и иногда модификатор. Плохо, когда блок, внутри ещё блок, внутри элемент, внутри какой нибудь псевдоэлемент, а внутри псевдокласс, внутри модификатор... И так лалее
@sartjhon3300
@sartjhon3300 Рік тому
@@AntonioBenderas у него не только лендосы на стримах. И как бы странно, столько лет делать такой учебный материал, чтобы потом вдруг в 12 минутном ролике сказать - хей, ребятки, вы делаете ошибку давая имена классам контент которых может быть сгенерирован. Я, например, впервые слышу про генерацию контента. Я думаю логично было либо расширить ролик, либо снять про это ролик отдельно, я имею ввиду про эту вечеринку. Потому как я, конечно, учусь не только по роликам Вадима, и ни у кого не встречал упоминание об этом. Да, многие советуют использовать конструкции типа p+p last - child и тд, вместо именования, но я не встречал этому иных объяснение, кроме как универсальность кода
5+1 css свойств которые от тебя скрывают
34:23
37 ошибок верстальщиков. Не делай так!
44:50
MaxGraph - cайты как страсть
Переглядів 55 тис.
Не покупай эти гиперзаряды 👎
00:36
ЗРЯ Я 24 ЧАСА СТОЯЛ НА ГВОЗДЯХ! #нонале
00:35
Артем Пивоваров х Klavdia Petrivna - Барабан
03:16
Artem Pivovarov
Переглядів 1,1 млн
Responsive web design in 37 minutes + layout. You don’t need Bootstrap!
36:44
Фрілансер по життю
Переглядів 1 млн
PixelPerfect все что нужно знать
37:58
От 0 до 1
Переглядів 15 тис.
8 новых сss свойств о котрых ты мечтал
32:17
От 0 до 1
Переглядів 29 тис.
Ошибки в HTML верстке сайтов. Никогда не верстай так
22:34
ВебКадеми | Юрий Ключевский
Переглядів 22 тис.
😱 ТОП-6 ошибок при верстке адаптива сайта
8:39
Не покупай эти гиперзаряды 👎
00:36