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

  Рет қаралды 18,712

От 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 Жыл бұрын
круть!
@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-jt3su6le8i
@user-jt3su6le8i Жыл бұрын
Каждый видос как маленький праздник для меня. Спасибо за хорошее настроение!
@vadymprokopchuk
@vadymprokopchuk Жыл бұрын
круто, спасибо
@sezimaz
@sezimaz Жыл бұрын
Единственная вечеринка на которую мне хочется после 20 лет
@vadymprokopchuk
@vadymprokopchuk Жыл бұрын
круть, туса)
@upwlqwp
@upwlqwp Жыл бұрын
Спасибо большое, Вадим тебя можно слушать бесконечно. Это гениально сгенерированные примеры просто нечто❤️‍🔥
@vadymprokopchuk
@vadymprokopchuk Жыл бұрын
Благодарю)
@serg-k
@serg-k Жыл бұрын
Учимся у лучших, чтобы стать лучшими. 10🐺/10
@vadymprokopchuk
@vadymprokopchuk Жыл бұрын
спасибо
@user-xi1gj4ju9f
@user-xi1gj4ju9f Жыл бұрын
Вадим, мое почтение, ты лучший из всех преподавателей, очень легко и весело с тобой учиться, спасибо что ты есть. Жаль что все так выходит в нашем мире... Сил тебе!
@user-nw2gz8jg2v
@user-nw2gz8jg2v Жыл бұрын
Ты как всегда, все четко и понятно! Спасибо за курс! Считаю, что решение пойти на него было одним из лучших моих решений)) Успехов во всем!!!
@vadymprokopchuk
@vadymprokopchuk Жыл бұрын
Благодарю! отлично поработали! мне очень приятно
@user-dc8yf8rc6d
@user-dc8yf8rc6d Жыл бұрын
Вадим, спасибо большое за марафоны и за эти самые топовые вечеринки. Тебя слушать одно удовольствие и учится очень легко на все 💯. Отличная подача материала. Удачи тебе. Здоровья и мирного неба тебе и твоим близким✌️
@user-zr8jp3wf5t
@user-zr8jp3wf5t Жыл бұрын
Всё чётко. Как всегда. А можно видео для новичков какими словами правильно называть классы в той или иной ситуации? С конкретными примерами.
@dotlavv
@dotlavv Жыл бұрын
дизайнер руководствуется логикой. Это может быть странно.... Я долго смеялся с этого)) Вадим, ты лучший 🦾
@seriously7791
@seriously7791 Жыл бұрын
Вадим, спасибо тебе за отличный контент! Так держать! Подписка, лайк однозначно!
@user-sr6fc7kl7w
@user-sr6fc7kl7w Жыл бұрын
Все просто и понятно как всегда ! Красава Вадик!
@Jane_123
@Jane_123 8 ай бұрын
Спасибо за доступное изложение полезной информации.
@user-rn5ue1ys1k
@user-rn5ue1ys1k Жыл бұрын
классный видос, спасибо, ждем возвращение, гуру!
@cy66a
@cy66a Жыл бұрын
Спасибо, Вадим!
@Arefevpro
@Arefevpro 11 ай бұрын
Спасибо за эту вечеринку)
@user-bm5ge3mr9u
@user-bm5ge3mr9u Жыл бұрын
Как всегда жирный лайк!))
@VladimirOnokhov
@VladimirOnokhov Жыл бұрын
Крутой видос! Спасибо. Сделаешь видео про фишки в верстке для новичков? Что-то типа margin: 0 auto (чтобы выравнить по ширине контента). Думаю будет полезно для старта, чтобы так сказать получить пул знаний и дальше только практика
@user-sy5dy8jx9v
@user-sy5dy8jx9v Жыл бұрын
Выслушал вас, все понял и принял , так доступно и понятно обьяснить нужно иметь талантище. Спасибо!!!
@vadymprokopchuk
@vadymprokopchuk Жыл бұрын
спасибо) долго работал над этим)
@user-or3ou3yl2r
@user-or3ou3yl2r Жыл бұрын
Спасибо, очень интересно!
@user-frond-end_dev
@user-frond-end_dev Жыл бұрын
спасибо за годный контент!!! 2-ая часть, продолжение будет?
@vitaliisapryga4825
@vitaliisapryga4825 Жыл бұрын
Очень полезное видео особенно для новачков! Интересно будет ли продолжение по gulp сборке?
@user-ve7tx3ud6n
@user-ve7tx3ud6n Жыл бұрын
Спасибо Вадим.
@aleksandralessandrovich2386
@aleksandralessandrovich2386 Жыл бұрын
Заглянул я как-то на эту вечеринку, и Вадим подсадил меня на верстку…🎉
@artkkk7443
@artkkk7443 Жыл бұрын
Вадян ты очень крутой специалист! Удачи тебе во всех твоих проектах!
@tatigerbst4416
@tatigerbst4416 Жыл бұрын
Спасибо тебе большое!👍👍👍
@v.prochniy63
@v.prochniy63 Жыл бұрын
Привет, Давно не встречал вас. Бороду отпустили не узнать. Смотрю все окей: жив ,здоров.,а значит будут еще видосы.
@vimvexvimvex8780
@vimvexvimvex8780 Жыл бұрын
Подача материала просто супер )
@vadymprokopchuk
@vadymprokopchuk Жыл бұрын
спасибо
@Gazovchik
@Gazovchik Жыл бұрын
Интересная тема Жаль смотреть пока некогда....... Всем успехов в обучении. Мира и добра.
@technoline-5758
@technoline-5758 Жыл бұрын
Вадим,подскажите как Вы относитесь к webflow? Я с самого начала работаю только с традиционной вёрсткой..хотелось бы услышать Ваше мнение
@mEden-xw2ke
@mEden-xw2ke Жыл бұрын
Здравствуйте, продолжение gulp ближайшее время будет ? Или не ждать и самому пытаться настроить
@Alex-kc3mn
@Alex-kc3mn Жыл бұрын
Спасибо
@dre._
@dre._ Жыл бұрын
Сегодня я взял свой первый заказ на 20$ благодаря вам ,хочу сказать большое спасибо за ваш труд
@user-natal04ka
@user-natal04ka Жыл бұрын
Не подскажите на какой площадке лучше искать заказы?
@natalialiakhovych
@natalialiakhovych Жыл бұрын
Дивлюся ваше перше відео! Ваша вєчєрінка мені офігєть як подобається, ваша буква ггг, одразу мені сказала, що свій чувак і все по темі теж топ 💙😉
@aleksandrkobelev8868
@aleksandrkobelev8868 Жыл бұрын
У Вадима всегда самые крутые вечеринки!!!!!!
@pol_puh
@pol_puh Жыл бұрын
Спасибо за контент? Скоро будет видос про совершенствование сборки gulp для работы с картинками и шрифтами
@user-gh9jp3jx4e
@user-gh9jp3jx4e Жыл бұрын
Все разжёвано проглотил с удовольствием) Спасибо.
@avalex82
@avalex82 6 ай бұрын
опа, go-surf (складний лендос) не так давно заверстав)) а відео тільки побачив, цікаво буде подивитися)
@vadymprokopchuk
@vadymprokopchuk 6 ай бұрын
супер, молодцем!
@Panda_ex_
@Panda_ex_ Жыл бұрын
Локи-король вечеринок это хорошо было😂
@asgard1428
@asgard1428 Жыл бұрын
Добрый день. Большое спасибо Вам за очередное классное видео. Можно вопрос? У меня такая проблема в vs code, между фигурными скобками (при нажатии на энтер) когда одна скобка опускается вниз, перестала появляться пустая строка. Получается так { }, а должно быть вот так { }. Что может быть? Я уже все настройки пересмотре, снес vs code и заново установил и все равно осталась эта проблема. Пожалуйста, помогите. Это отнимает столько времени.
@vladimirzvyagincev8193
@vladimirzvyagincev8193 Жыл бұрын
Четенько🤘
@vadymprokopchuk
@vadymprokopchuk Жыл бұрын
по красоте )
@computercomputer3293
@computercomputer3293 Жыл бұрын
Хочется спросить, а задавать высоту через min-height тоже плохая практика?
@ivanbrest7650
@ivanbrest7650 Жыл бұрын
При каких разрешениях (и ниже) стоит убирать Hover на мобильных устройствах?
@manuchehrqoriev
@manuchehrqoriev Жыл бұрын
Спасибо большое ❤. 13:08 где можно найти видео об форм изображение
@twitch3255
@twitch3255 Жыл бұрын
Пожалуйста а можете сказать, сколько Вам времени пришлось чтобы выучить это все, я знаю что развиваться надо постепенно, но интересно хотя бы когда Вы изучили и нормально без всяких спокойно начали верстать, просто строчить без бб, сколько времени прошло (дней) на прокачку навыков? сколько часов на изучения вообщем и в день? где Вы набрали первых своих клиентов?
@BorealisAndre
@BorealisAndre Жыл бұрын
Спрошу под этим видео. Хотел спросить: Есть задача сделать документацию на веб. В наличии много документов (текст+фото+видео) по ремонту и обслуживанию. Нужно сделать это все интерактивным переход от одного документа к другому, запуск видео, просмотр фото. Для этой цели подумываю сделать в видео HTML. Все это должно находиться локально без контакта с интернет. На какие средства стоит обратить внимание ? Нудны какие то решения вроде конструкторов сайта или может wordpress ?
@jamjam3337
@jamjam3337 Жыл бұрын
👏👍
@luckytima2315
@luckytima2315 Жыл бұрын
я: да я же сделал все как Вадим показывал так-же я :
@drawusoon
@drawusoon Жыл бұрын
не по колокольчику, а по зову сердца!)
@vadymprokopchuk
@vadymprokopchuk Жыл бұрын
ты же мой родной=)
@1995taunus
@1995taunus Жыл бұрын
Вадим, спасибо за ваши видео. Сейчас уже поздно спустя 3 недели записываться на ваш курс начавшийся 20 марта. Вы наверно столько работы в него вложили, что будет жаль сделать его одноразрвым. Повтора не будет? Или может будет можно этот курс купить в записи для самостоятельного изучения?
@vadymprokopchuk
@vadymprokopchuk Жыл бұрын
можете мне в телеграм написать, ник @silver8light
@waishan7929
@waishan7929 Жыл бұрын
А можно ссылку на новый сайт с курсом?
@zlatan6565
@zlatan6565 Жыл бұрын
Вадик,давай новые видосики выпускай !
@vladimirchekanov7053
@vladimirchekanov7053 Жыл бұрын
На это курс уже не успел наверно. Когда будет следующий?
@Victorianos-ls7qy
@Victorianos-ls7qy Жыл бұрын
Привет , можешь снять видео как натягивать верстку на wordpre? спс за ведео очень помогают
@serdarhuseynov8901
@serdarhuseynov8901 Жыл бұрын
spasibo oqromnoe
@user-se6nj9qx9g
@user-se6nj9qx9g Жыл бұрын
будут ли уроки по git?)
@front_praxis
@front_praxis Жыл бұрын
Слушаем и впитываем !
@vadymprokopchuk
@vadymprokopchuk Жыл бұрын
топчик
@user-lz4ob7gj4p
@user-lz4ob7gj4p Жыл бұрын
Добрый день, Вадим! Готовится ли курс по посадке вёрстки на WP?
@vadymprokopchuk
@vadymprokopchuk Жыл бұрын
неа, лежит в долгом ящике, а был готов на 25%
@denismoskvichov8691
@denismoskvichov8691 Жыл бұрын
Привет сделай пожалуйста пооду по gulp
@Anodoree
@Anodoree Жыл бұрын
Вадим, спасибо тебе огромное за курс) В очередной раз благодарю) Заскакивал с некоторым багажом знаний больше полутора лет назад) Как раз с задержкой на пару недель залетал) В итоге - знания упорядочились значительно, курс с ментором - пушка! Стал увереннее искать работу, в итоге первый заказ через пару месяцев только нашёл (за сомнительную "шляпу" не брался намеренно), продолжал фрилансить вполне успешно, а вот уже более полугода на удалёнке официально) Люблю вёрстку) Спасибо! Рад, что продолжаешь учить людей качеству) Успехов!) Народ, рекомендую от чистого сердца) Да, буд-то заказанное, сам раньше к таким комментам скептически относился, если не сказать более. Но что поделать, когда от души человеку и его делу благодарен?) В общем, думайте, что хотите. Было не шибко просто, но я достиг своей цели, и иду дальше) И во многом благодаря Вадиму и его курсу с ментором)
@Anodoree
@Anodoree Жыл бұрын
И по теме. Учитывание сих неочевидных ошибок - огромнейший плюс к вашему успеху в деле. Решил вот посмотреть, убедиться в своём пути, послушать интересную речь с юмором - не прогадал, как обычно) всё чётко и праивильно) А как иначе у Вадима) Больше думаем головой - и всё будет лучше) Неочевидные резонансные моменты порой должны только давать повод к размышлению и нахождению ответа, а не к опусканию рук) Думаем и работаем!)
@morminator6575
@morminator6575 Жыл бұрын
Здравствуйте, столкнулся с такой проблемой, добавлял на свой сайт статью через файловый менеджер, внес изменения в файл, обновил страницу браузера, статья добавилась, а спустя несколько часов, статья просто пропала и файл который я редактировал, откатился до прошлой версии до моих изменений. Если редактировать файл по FTP то точно такая же проблема, через пару часов восстанавливается старая версия файла. Я уже весь интернет обшарил, но ничего не нашел по этой проблеме, в тех. поддержке не могут понять чего я от них хочу и как мне помочь. Так что вся надежда на вас, заранее спасибо
@user-bq6pk8pf3g
@user-bq6pk8pf3g Жыл бұрын
Вы с Харькова?
@mEden-xw2ke
@mEden-xw2ke Жыл бұрын
Когда будет продолжение gulp ?
@Capo2965
@Capo2965 Жыл бұрын
Почему РФ И РБ не доступен курс ?
@cormoranstrike7096
@cormoranstrike7096 Жыл бұрын
Вадос в своих уроках на ютубе вроде бы и сам hover не убирает при адаптиве
@vadymprokopchuk
@vadymprokopchuk Жыл бұрын
это чтобы веселее было =)
@dimaslayer491
@dimaslayer491 Жыл бұрын
Спасибо что рассказал про план обучения по твоим видосам, учусь по твоим марафонам, стараюсь где-то сделать сам, а потом смотрю как это сделал ты. Уже месяц занимаюсь, но прогресс не чувствуется, включаю следующий видос, думаю щас как сам сделаю весь сайт и спотыкаюсь уже через 15 минут верстки. Может кто подскажет, так и должно быть, или всё таки я как-то неправильно учусь?
@Arkady-777
@Arkady-777 Жыл бұрын
У Вадима только курс на 1,5 месяца рассчитан, где тебя в темпе вальса ведут с кучей инфы и нюансов и очередности по сложности... и даже после этого надо еще поверстать, что бы закрепилось всё. А ты самостоятельно ... скорее всего по вершкам прошелся
@dimaslayer491
@dimaslayer491 Жыл бұрын
@@Arkady-777 ты прав, скорее всего так и есть
@sovel1489
@sovel1489 Жыл бұрын
Не переживай, делай дальше и всё получится, здесь главное практика)
@computercomputer3293
@computercomputer3293 Жыл бұрын
К сожалению поздно появился пк и поздно узнал про верстку, нет возможности выдешить достаточное время на самообучение. Но в общем если на чем-то спотыкаюсь, то ищу информацию в интернете. Как правило находится. Поэтому практика реально рулит, особенно если макет ставит интересные задачи. А можно привести пример на чем спотыкнулись вы? Модет и помочт чем-то получится
@dimaslayer491
@dimaslayer491 Жыл бұрын
@@computercomputer3293 так не, я же говорю, ставлю ролик на паузу, пытаюсь сделать дальше и довольно быстро наступает момент, когда не понимаю как делать дальше. Потом включаю ролик, смотрю как надо делать, пробиваю себе смачный фэйспалм, от понимания того что тормоз и делаю дальше. Свои проекты пока не делал, что бы совета искать) А так спасибо)
@natalia_0729
@natalia_0729 Жыл бұрын
Как отключить :hover на планшетах и мобильных устройствах?
@onese7en141
@onese7en141 11 ай бұрын
Медиа запрос any-hover проигнорирует hover на моб.устройствах
@kekoffer852
@kekoffer852 3 ай бұрын
МЕТОД БДСМ - ТОП!
@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 Жыл бұрын
гарна ідея, дякую, я дружині про коментар скажу=))
@Ch-ce7ym
@Ch-ce7ym Жыл бұрын
А как можно убрать hover на мобильных устройствах ?
@The_Python17
@The_Python17 Жыл бұрын
Когда будешь адаптировать сайт тогда и уберёшь
@dimondimonov6417
@dimondimonov6417 Жыл бұрын
Где найти монтера? шоб проверял работы,подсказывал,указывал на ошибки,помогал исправлять.
@natalia_0729
@natalia_0729 Жыл бұрын
Непонятен момент "как защитить user content". Поясните кто-то.
@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 в одном уроке несколько видео, так что до момента изучения флексов уже есть ответы на вопросы которые вы писали выше
@AntonioBenderas
@AntonioBenderas Жыл бұрын
я думал метод БДСМ - это когда заказчик просит сверстать под IE8
@user-natal04ka
@user-natal04ka Жыл бұрын
Вроде @media (any-hover hover)
@ukraine1514
@ukraine1514 5 ай бұрын
Лайк,подписка. Сижу в тюрьме и учусь.... Спасибо😜👍
@vadymprokopchuk
@vadymprokopchuk 5 ай бұрын
молодцом, пожалуйста
@ukraine1514
@ukraine1514 5 ай бұрын
@@vadymprokopchuk Вадим,будет желанье и возможность,сделать курс по js,что б была вечериночка😁 с удовольствием записался бы на курс,но... Подневольный человек и естт есть ограничения🤷
@Exigoll92
@Exigoll92 Жыл бұрын
Смотрите Вадоса! Он дело говорит
@NursAcademy
@NursAcademy 10 ай бұрын
Вадип ты просто хаха😅😅
@kiralatysheva6794
@kiralatysheva6794 Жыл бұрын
Без тайм-кодов миллениалы могут и побить =)
@vadymprokopchuk
@vadymprokopchuk Жыл бұрын
уже добрые люди написали, так что сейчас опубликую
@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 по второму пункту уточню Если у вас по модификатору цвет зеленый, а вы потом ставите красный то только когда вы ставите после зелёного красный вы переименовываете модификатор или пишете новый с названием праймери, не как иначе. Если это не предполагается изначально. А если кто-то решил поменять цвет то он должен или вешать новый модификатор или переименовывать старый. Т.е. это ни разу не ошибка называть модификатор названием цвета
@vvks9901
@vvks9901 Жыл бұрын
Не пойму логику: курс не доступен резидентами РФ, но курс на русском языке. Т.е. он для русских, живущих за пределами РФ и для русскоговорящих украинцев? Из РФ можно оплачивать без проблем через Юмани. Спасибо за очередное видео!!!
@alinan674
@alinan674 Жыл бұрын
А чого б це з вами торгувати? Оце вигадали! І це не ваша справа, на якій він мові. Ми тут що хочемо, те й робимо.
@vvks9901
@vvks9901 Жыл бұрын
@@alinan674 да будет МИР!!!
@Himera1983
@Himera1983 7 ай бұрын
Бдсм? Ты серьезно 😅
@sartjhon3300
@sartjhon3300 Жыл бұрын
какое то неочевидное видео.... открываем любое твое видео и что мы видим?..... у каждого параграфа есть класс у каждой ссылки и картинки есть класс... что получается, ты учил все это нас неправильно? намеренно, или сам только недавно понял про именование user.generated?
@AntonioBenderas
@AntonioBenderas Жыл бұрын
На стримах Вадим верстал не user.generated лендосы
@AntonioBenderas
@AntonioBenderas Жыл бұрын
а вот по поводу вложенности селекторов вопрос. Как её избежать, если SCSS это очень удобная штука
@sartjhon3300
@sartjhon3300 Жыл бұрын
@@AntonioBenderas он говорит об избыточной вложенности. 2-3 уровня вложенности это нормально, как раз по БЭМ, блок, внутри элемент и иногда модификатор. Плохо, когда блок, внутри ещё блок, внутри элемент, внутри какой нибудь псевдоэлемент, а внутри псевдокласс, внутри модификатор... И так лалее
@sartjhon3300
@sartjhon3300 Жыл бұрын
@@AntonioBenderas у него не только лендосы на стримах. И как бы странно, столько лет делать такой учебный материал, чтобы потом вдруг в 12 минутном ролике сказать - хей, ребятки, вы делаете ошибку давая имена классам контент которых может быть сгенерирован. Я, например, впервые слышу про генерацию контента. Я думаю логично было либо расширить ролик, либо снять про это ролик отдельно, я имею ввиду про эту вечеринку. Потому как я, конечно, учусь не только по роликам Вадима, и ни у кого не встречал упоминание об этом. Да, многие советуют использовать конструкции типа p+p last - child и тд, вместо именования, но я не встречал этому иных объяснение, кроме как универсальность кода
@user-fd5le5bx9j
@user-fd5le5bx9j Жыл бұрын
спс, Валос. ти топ
PixelPerfect все что нужно знать
37:58
От 0 до 1
Рет қаралды 16 М.
Chips evolution !! 😔😔
00:23
Tibo InShape
Рет қаралды 42 МЛН
La final estuvo difícil
00:34
Juan De Dios Pantoja
Рет қаралды 27 МЛН
37 ошибок верстальщиков. Не делай так!
44:50
MaxGraph - cайты как страсть
Рет қаралды 55 М.
Семантика, семантическая верстка
1:38:06
От 0 до 1
Рет қаралды 48 М.
БЭМ методология за 10 минут | Основы для начинающих
10:01
Александр Ламков — Friendly Frontend
Рет қаралды 11 М.
Chips evolution !! 😔😔
00:23
Tibo InShape
Рет қаралды 42 МЛН