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

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

От 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

Пікірлер: 134
@Marylovesautumn
@Marylovesautumn Жыл бұрын
Наш любимый диджей вечеринок!!!! Спасибо за видео, бегу за чаем и устраиваюсь за компьютером.
@vadymprokopchuk
@vadymprokopchuk Жыл бұрын
круть!
@sezimaz
@sezimaz Жыл бұрын
Единственная вечеринка на которую мне хочется после 20 лет
@vadymprokopchuk
@vadymprokopchuk Жыл бұрын
круть, туса)
@serg-k
@serg-k Жыл бұрын
Учимся у лучших, чтобы стать лучшими. 10🐺/10
@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 Жыл бұрын
круто, спасибо
@dotlavv
@dotlavv Жыл бұрын
дизайнер руководствуется логикой. Это может быть странно.... Я долго смеялся с этого)) Вадим, ты лучший 🦾
@upwlqwp
@upwlqwp Жыл бұрын
Спасибо большое, Вадим тебя можно слушать бесконечно. Это гениально сгенерированные примеры просто нечто❤️‍🔥
@vadymprokopchuk
@vadymprokopchuk Жыл бұрын
Благодарю)
@user-xi1gj4ju9f
@user-xi1gj4ju9f Жыл бұрын
Вадим, мое почтение, ты лучший из всех преподавателей, очень легко и весело с тобой учиться, спасибо что ты есть. Жаль что все так выходит в нашем мире... Сил тебе!
@user-zr8jp3wf5t
@user-zr8jp3wf5t Жыл бұрын
Всё чётко. Как всегда. А можно видео для новичков какими словами правильно называть классы в той или иной ситуации? С конкретными примерами.
@user-nw2gz8jg2v
@user-nw2gz8jg2v Жыл бұрын
Ты как всегда, все четко и понятно! Спасибо за курс! Считаю, что решение пойти на него было одним из лучших моих решений)) Успехов во всем!!!
@vadymprokopchuk
@vadymprokopchuk Жыл бұрын
Благодарю! отлично поработали! мне очень приятно
@user-dc8yf8rc6d
@user-dc8yf8rc6d Жыл бұрын
Вадим, спасибо большое за марафоны и за эти самые топовые вечеринки. Тебя слушать одно удовольствие и учится очень легко на все 💯. Отличная подача материала. Удачи тебе. Здоровья и мирного неба тебе и твоим близким✌️
@seriously7791
@seriously7791 Жыл бұрын
Вадим, спасибо тебе за отличный контент! Так держать! Подписка, лайк однозначно!
@user-sr6fc7kl7w
@user-sr6fc7kl7w Жыл бұрын
Все просто и понятно как всегда ! Красава Вадик!
@user-rn5ue1ys1k
@user-rn5ue1ys1k Жыл бұрын
классный видос, спасибо, ждем возвращение, гуру!
@cy66a
@cy66a Жыл бұрын
Спасибо, Вадим!
@Arefevpro
@Arefevpro Жыл бұрын
Спасибо за эту вечеринку)
@user-bm5ge3mr9u
@user-bm5ge3mr9u Жыл бұрын
Как всегда жирный лайк!))
@aleksandralessandrovich2386
@aleksandralessandrovich2386 Жыл бұрын
Заглянул я как-то на эту вечеринку, и Вадим подсадил меня на верстку…🎉
@VladimirOnokhov
@VladimirOnokhov Жыл бұрын
Крутой видос! Спасибо. Сделаешь видео про фишки в верстке для новичков? Что-то типа margin: 0 auto (чтобы выравнить по ширине контента). Думаю будет полезно для старта, чтобы так сказать получить пул знаний и дальше только практика
@Jane_123
@Jane_123 9 ай бұрын
Спасибо за доступное изложение полезной информации.
@user-frond-end_dev
@user-frond-end_dev Жыл бұрын
спасибо за годный контент!!! 2-ая часть, продолжение будет?
@vitaliisapryga4825
@vitaliisapryga4825 Жыл бұрын
Очень полезное видео особенно для новачков! Интересно будет ли продолжение по gulp сборке?
@vimvexvimvex8780
@vimvexvimvex8780 Жыл бұрын
Подача материала просто супер )
@vadymprokopchuk
@vadymprokopchuk Жыл бұрын
спасибо
@user-or3ou3yl2r
@user-or3ou3yl2r Жыл бұрын
Спасибо, очень интересно!
@Gazovchik
@Gazovchik Жыл бұрын
Интересная тема Жаль смотреть пока некогда....... Всем успехов в обучении. Мира и добра.
@artkkk7443
@artkkk7443 Жыл бұрын
Вадян ты очень крутой специалист! Удачи тебе во всех твоих проектах!
@v.prochniy63
@v.prochniy63 Жыл бұрын
Привет, Давно не встречал вас. Бороду отпустили не узнать. Смотрю все окей: жив ,здоров.,а значит будут еще видосы.
@natalialiakhovych
@natalialiakhovych Жыл бұрын
Дивлюся ваше перше відео! Ваша вєчєрінка мені офігєть як подобається, ваша буква ггг, одразу мені сказала, що свій чувак і все по темі теж топ 💙😉
@user-ve7tx3ud6n
@user-ve7tx3ud6n Жыл бұрын
Спасибо Вадим.
@user-sy5dy8jx9v
@user-sy5dy8jx9v Жыл бұрын
Выслушал вас, все понял и принял , так доступно и понятно обьяснить нужно иметь талантище. Спасибо!!!
@vadymprokopchuk
@vadymprokopchuk Жыл бұрын
спасибо) долго работал над этим)
@dre._
@dre._ Жыл бұрын
Сегодня я взял свой первый заказ на 20$ благодаря вам ,хочу сказать большое спасибо за ваш труд
@user-natal04ka
@user-natal04ka Жыл бұрын
Не подскажите на какой площадке лучше искать заказы?
@tatigerbst4416
@tatigerbst4416 Жыл бұрын
Спасибо тебе большое!👍👍👍
@user-gh9jp3jx4e
@user-gh9jp3jx4e Жыл бұрын
Все разжёвано проглотил с удовольствием) Спасибо.
@aleksandrkobelev8868
@aleksandrkobelev8868 Жыл бұрын
У Вадима всегда самые крутые вечеринки!!!!!!
@avalex82
@avalex82 6 ай бұрын
опа, go-surf (складний лендос) не так давно заверстав)) а відео тільки побачив, цікаво буде подивитися)
@vadymprokopchuk
@vadymprokopchuk 6 ай бұрын
супер, молодцем!
@pol_puh
@pol_puh Жыл бұрын
Спасибо за контент? Скоро будет видос про совершенствование сборки gulp для работы с картинками и шрифтами
@manuchehrqoriev
@manuchehrqoriev Жыл бұрын
Спасибо большое ❤. 13:08 где можно найти видео об форм изображение
@Panda_ex_
@Panda_ex_ Жыл бұрын
Локи-король вечеринок это хорошо было😂
@drawusoon
@drawusoon Жыл бұрын
не по колокольчику, а по зову сердца!)
@vadymprokopchuk
@vadymprokopchuk Жыл бұрын
ты же мой родной=)
@technoline-5758
@technoline-5758 Жыл бұрын
Вадим,подскажите как Вы относитесь к webflow? Я с самого начала работаю только с традиционной вёрсткой..хотелось бы услышать Ваше мнение
@Anodoree
@Anodoree Жыл бұрын
Вадим, спасибо тебе огромное за курс) В очередной раз благодарю) Заскакивал с некоторым багажом знаний больше полутора лет назад) Как раз с задержкой на пару недель залетал) В итоге - знания упорядочились значительно, курс с ментором - пушка! Стал увереннее искать работу, в итоге первый заказ через пару месяцев только нашёл (за сомнительную "шляпу" не брался намеренно), продолжал фрилансить вполне успешно, а вот уже более полугода на удалёнке официально) Люблю вёрстку) Спасибо! Рад, что продолжаешь учить людей качеству) Успехов!) Народ, рекомендую от чистого сердца) Да, буд-то заказанное, сам раньше к таким комментам скептически относился, если не сказать более. Но что поделать, когда от души человеку и его делу благодарен?) В общем, думайте, что хотите. Было не шибко просто, но я достиг своей цели, и иду дальше) И во многом благодаря Вадиму и его курсу с ментором)
@Anodoree
@Anodoree Жыл бұрын
И по теме. Учитывание сих неочевидных ошибок - огромнейший плюс к вашему успеху в деле. Решил вот посмотреть, убедиться в своём пути, послушать интересную речь с юмором - не прогадал, как обычно) всё чётко и праивильно) А как иначе у Вадима) Больше думаем головой - и всё будет лучше) Неочевидные резонансные моменты порой должны только давать повод к размышлению и нахождению ответа, а не к опусканию рук) Думаем и работаем!)
@luckytima2315
@luckytima2315 Жыл бұрын
я: да я же сделал все как Вадим показывал так-же я :
@vladimirzvyagincev8193
@vladimirzvyagincev8193 Жыл бұрын
Четенько🤘
@vadymprokopchuk
@vadymprokopchuk Жыл бұрын
по красоте )
@mEden-xw2ke
@mEden-xw2ke Жыл бұрын
Здравствуйте, продолжение gulp ближайшее время будет ? Или не ждать и самому пытаться настроить
@twitch3255
@twitch3255 Жыл бұрын
Пожалуйста а можете сказать, сколько Вам времени пришлось чтобы выучить это все, я знаю что развиваться надо постепенно, но интересно хотя бы когда Вы изучили и нормально без всяких спокойно начали верстать, просто строчить без бб, сколько времени прошло (дней) на прокачку навыков? сколько часов на изучения вообщем и в день? где Вы набрали первых своих клиентов?
@1995taunus
@1995taunus Жыл бұрын
Вадим, спасибо за ваши видео. Сейчас уже поздно спустя 3 недели записываться на ваш курс начавшийся 20 марта. Вы наверно столько работы в него вложили, что будет жаль сделать его одноразрвым. Повтора не будет? Или может будет можно этот курс купить в записи для самостоятельного изучения?
@vadymprokopchuk
@vadymprokopchuk Жыл бұрын
можете мне в телеграм написать, ник @silver8light
@Alex-kc3mn
@Alex-kc3mn Жыл бұрын
Спасибо
@cormoranstrike7096
@cormoranstrike7096 Жыл бұрын
Вадос в своих уроках на ютубе вроде бы и сам hover не убирает при адаптиве
@vadymprokopchuk
@vadymprokopchuk Жыл бұрын
это чтобы веселее было =)
@front_praxis
@front_praxis Жыл бұрын
Слушаем и впитываем !
@vadymprokopchuk
@vadymprokopchuk Жыл бұрын
топчик
@asgard1428
@asgard1428 Жыл бұрын
Добрый день. Большое спасибо Вам за очередное классное видео. Можно вопрос? У меня такая проблема в vs code, между фигурными скобками (при нажатии на энтер) когда одна скобка опускается вниз, перестала появляться пустая строка. Получается так { }, а должно быть вот так { }. Что может быть? Я уже все настройки пересмотре, снес vs code и заново установил и все равно осталась эта проблема. Пожалуйста, помогите. Это отнимает столько времени.
@user-lz4ob7gj4p
@user-lz4ob7gj4p Жыл бұрын
Добрый день, Вадим! Готовится ли курс по посадке вёрстки на WP?
@vadymprokopchuk
@vadymprokopchuk Жыл бұрын
неа, лежит в долгом ящике, а был готов на 25%
@jamjam3337
@jamjam3337 Жыл бұрын
👏👍
@BorealisAndre
@BorealisAndre Жыл бұрын
Спрошу под этим видео. Хотел спросить: Есть задача сделать документацию на веб. В наличии много документов (текст+фото+видео) по ремонту и обслуживанию. Нужно сделать это все интерактивным переход от одного документа к другому, запуск видео, просмотр фото. Для этой цели подумываю сделать в видео HTML. Все это должно находиться локально без контакта с интернет. На какие средства стоит обратить внимание ? Нудны какие то решения вроде конструкторов сайта или может wordpress ?
@computercomputer3293
@computercomputer3293 Жыл бұрын
Хочется спросить, а задавать высоту через min-height тоже плохая практика?
@dimaslayer491
@dimaslayer491 Жыл бұрын
Спасибо что рассказал про план обучения по твоим видосам, учусь по твоим марафонам, стараюсь где-то сделать сам, а потом смотрю как это сделал ты. Уже месяц занимаюсь, но прогресс не чувствуется, включаю следующий видос, думаю щас как сам сделаю весь сайт и спотыкаюсь уже через 15 минут верстки. Может кто подскажет, так и должно быть, или всё таки я как-то неправильно учусь?
@Arkady-777
@Arkady-777 Жыл бұрын
У Вадима только курс на 1,5 месяца рассчитан, где тебя в темпе вальса ведут с кучей инфы и нюансов и очередности по сложности... и даже после этого надо еще поверстать, что бы закрепилось всё. А ты самостоятельно ... скорее всего по вершкам прошелся
@dimaslayer491
@dimaslayer491 Жыл бұрын
@@Arkady-777 ты прав, скорее всего так и есть
@sovel1489
@sovel1489 Жыл бұрын
Не переживай, делай дальше и всё получится, здесь главное практика)
@computercomputer3293
@computercomputer3293 Жыл бұрын
К сожалению поздно появился пк и поздно узнал про верстку, нет возможности выдешить достаточное время на самообучение. Но в общем если на чем-то спотыкаюсь, то ищу информацию в интернете. Как правило находится. Поэтому практика реально рулит, особенно если макет ставит интересные задачи. А можно привести пример на чем спотыкнулись вы? Модет и помочт чем-то получится
@dimaslayer491
@dimaslayer491 Жыл бұрын
@@computercomputer3293 так не, я же говорю, ставлю ролик на паузу, пытаюсь сделать дальше и довольно быстро наступает момент, когда не понимаю как делать дальше. Потом включаю ролик, смотрю как надо делать, пробиваю себе смачный фэйспалм, от понимания того что тормоз и делаю дальше. Свои проекты пока не делал, что бы совета искать) А так спасибо)
@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 Жыл бұрын
гарна ідея, дякую, я дружині про коментар скажу=))
@ivanbrest7650
@ivanbrest7650 Жыл бұрын
При каких разрешениях (и ниже) стоит убирать Hover на мобильных устройствах?
@zlatan6565
@zlatan6565 Жыл бұрын
Вадик,давай новые видосики выпускай !
@Victorianos-ls7qy
@Victorianos-ls7qy Жыл бұрын
Привет , можешь снять видео как натягивать верстку на wordpre? спс за ведео очень помогают
@user-se6nj9qx9g
@user-se6nj9qx9g Жыл бұрын
будут ли уроки по git?)
@serdarhuseynov8901
@serdarhuseynov8901 Жыл бұрын
spasibo oqromnoe
@waishan7929
@waishan7929 Жыл бұрын
А можно ссылку на новый сайт с курсом?
@vladimirchekanov7053
@vladimirchekanov7053 Жыл бұрын
На это курс уже не успел наверно. Когда будет следующий?
@denismoskvichov8691
@denismoskvichov8691 Жыл бұрын
Привет сделай пожалуйста пооду по gulp
@mEden-xw2ke
@mEden-xw2ke Жыл бұрын
Когда будет продолжение gulp ?
@kekoffer852
@kekoffer852 3 ай бұрын
МЕТОД БДСМ - ТОП!
@AntonioBenderas
@AntonioBenderas Жыл бұрын
я думал метод БДСМ - это когда заказчик просит сверстать под IE8
@user-natal04ka
@user-natal04ka Жыл бұрын
Вроде @media (any-hover hover)
@ukraine1514
@ukraine1514 5 ай бұрын
Лайк,подписка. Сижу в тюрьме и учусь.... Спасибо😜👍
@vadymprokopchuk
@vadymprokopchuk 5 ай бұрын
молодцом, пожалуйста
@ukraine1514
@ukraine1514 5 ай бұрын
@@vadymprokopchuk Вадим,будет желанье и возможность,сделать курс по js,что б была вечериночка😁 с удовольствием записался бы на курс,но... Подневольный человек и естт есть ограничения🤷
@user-bq6pk8pf3g
@user-bq6pk8pf3g Жыл бұрын
Вы с Харькова?
@dimondimonov6417
@dimondimonov6417 Жыл бұрын
Где найти монтера? шоб проверял работы,подсказывал,указывал на ошибки,помогал исправлять.
@Capo2965
@Capo2965 Жыл бұрын
Почему РФ И РБ не доступен курс ?
@morminator6575
@morminator6575 Жыл бұрын
Здравствуйте, столкнулся с такой проблемой, добавлял на свой сайт статью через файловый менеджер, внес изменения в файл, обновил страницу браузера, статья добавилась, а спустя несколько часов, статья просто пропала и файл который я редактировал, откатился до прошлой версии до моих изменений. Если редактировать файл по FTP то точно такая же проблема, через пару часов восстанавливается старая версия файла. Я уже весь интернет обшарил, но ничего не нашел по этой проблеме, в тех. поддержке не могут понять чего я от них хочу и как мне помочь. Так что вся надежда на вас, заранее спасибо
@natalia_0729
@natalia_0729 Жыл бұрын
Как отключить :hover на планшетах и мобильных устройствах?
@onese7en141
@onese7en141 Жыл бұрын
Медиа запрос any-hover проигнорирует hover на моб.устройствах
@kiralatysheva6794
@kiralatysheva6794 Жыл бұрын
Без тайм-кодов миллениалы могут и побить =)
@vadymprokopchuk
@vadymprokopchuk Жыл бұрын
уже добрые люди написали, так что сейчас опубликую
@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 в одном уроке несколько видео, так что до момента изучения флексов уже есть ответы на вопросы которые вы писали выше
@Ch-ce7ym
@Ch-ce7ym Жыл бұрын
А как можно убрать hover на мобильных устройствах ?
@The_Python17
@The_Python17 Жыл бұрын
Когда будешь адаптировать сайт тогда и уберёшь
@NursAcademy
@NursAcademy 10 ай бұрын
Вадип ты просто хаха😅😅
@Exigoll92
@Exigoll92 Жыл бұрын
Смотрите Вадоса! Он дело говорит
@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 Жыл бұрын
спс, Валос. ти топ
Верстка под cms
34:31
От 0 до 1
Рет қаралды 16 М.
37 ошибок верстальщиков. Не делай так!
44:50
MaxGraph - cайты как страсть
Рет қаралды 55 М.
КАРМАНЧИК 2 СЕЗОН 6 СЕРИЯ
21:57
Inter Production
Рет қаралды 497 М.
Why You Should Always Help Others ❤️
00:40
Alan Chikin Chow
Рет қаралды 18 МЛН
100❤️
00:20
Nonomen ノノメン
Рет қаралды 56 МЛН
PixelPerfect все что нужно знать
37:58
От 0 до 1
Рет қаралды 16 М.
Как подготовить макет в фигме для фронтендера
37:23
Vallek: фронтенд и образование
Рет қаралды 107
Ошибки в HTML верстке сайтов. Никогда не верстай так
22:34
ВебКадеми | Юрий Ключевский
Рет қаралды 23 М.
Адаптивная верстка сайта на HTML CSS
2:00:35
ВебКадеми | Юрий Ключевский
Рет қаралды 110 М.
Семантика, семантическая верстка
1:38:06
От 0 до 1
Рет қаралды 48 М.
[2021] Верстка сайта с нуля для начинающих | HTML, CSS
2:14:50
ВебКадеми | Юрий Ключевский
Рет қаралды 103 М.
Верстка сайта - HTML, CSS, JS. Адаптив
3:01:57
От 0 до 1
Рет қаралды 70 М.
КАРМАНЧИК 2 СЕЗОН 6 СЕРИЯ
21:57
Inter Production
Рет қаралды 497 М.