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

круть!

круть, туса)

Спасибо, добрый человек

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

спасибо

круто, спасибо

Благодарю)

Благодарю! отлично поработали! мне очень приятно

спасибо) долго работал над этим)

спасибо

Не подскажите на какой площадке лучше искать заказы?

супер, молодцем!

топчик

ты же мой родной=)

по красоте )

можете мне в телеграм написать, ник @silver8light

И по теме. Учитывание сих неочевидных ошибок - огромнейший плюс к вашему успеху в деле. Решил вот посмотреть, убедиться в своём пути, послушать интересную речь с юмором - не прогадал, как обычно) всё чётко и праивильно) А как иначе у Вадима) Больше думаем головой - и всё будет лучше) Неочевидные резонансные моменты порой должны только давать повод к размышлению и нахождению ответа, а не к опусканию рук) Думаем и работаем!)

неа, лежит в долгом ящике, а был готов на 25%

Написал вам огромную простыню что делать, а ютуб походу посчитал за спам и удалил его( Так что теперь коротко. Используйте семантику, вам как минимум не придется проставлять атрибут 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 и запускайте их для проверки страницы, они подскажут все грубые ошибки и некоторые мелкие, подскажут как исправить и дадут линку на спеку. В первом исправляйте преимущественно красные ошибки, всеостальные больше рекомендации. Все что больше это уже специфика она либо описана в таске либо ее выцепит тестировщик, а зная проблему решение нагуглиться. Если остались вопросы пишите, попробую ответить

гарна ідея, дякую, я дружині про коментар скажу=))

У Вадима только курс на 1,5 месяца рассчитан, где тебя в темпе вальса ведут с кучей инфы и нюансов и очередности по сложности... и даже после этого надо еще поверстать, что бы закрепилось всё. А ты самостоятельно ... скорее всего по вершкам прошелся

@@Arkady-777 ты прав, скорее всего так и есть

Не переживай, делай дальше и всё получится, здесь главное практика)

К сожалению поздно появился пк и поздно узнал про верстку, нет возможности выдешить достаточное время на самообучение. Но в общем если на чем-то спотыкаюсь, то ищу информацию в интернете. Как правило находится. Поэтому практика реально рулит, особенно если макет ставит интересные задачи. А можно привести пример на чем спотыкнулись вы? Модет и помочт чем-то получится

@@computercomputer3293 так не, я же говорю, ставлю ролик на паузу, пытаюсь сделать дальше и довольно быстро наступает момент, когда не понимаю как делать дальше. Потом включаю ролик, смотрю как надо делать, пробиваю себе смачный фэйспалм, от понимания того что тормоз и делаю дальше. Свои проекты пока не делал, что бы совета искать) А так спасибо)

это чтобы веселее было =)

молодцом, пожалуйста

@@vadymprokopchuk Вадим,будет желанье и возможность,сделать курс по js,что б была вечериночка😁 с удовольствием записался бы на курс,но... Подневольный человек и естт есть ограничения🤷

Вроде @media (any-hover hover)

а что вас смущает? =)

@@vadymprokopchuk то что на этом этапе, не особо понимают где ставить margin а где padding, и почему свойство width и height не работает на тег span, а у вас сразу флекс и js на 3 уроке,мне кажется если бы я так учил вёрстку, то бросил бы это дело сразу после 2 урока)

@@boombla_5234 в одном уроке несколько видео, так что до момента изучения флексов уже есть ответы на вопросы которые вы писали выше

Медиа запрос any-hover проигнорирует hover на моб.устройствах

Когда будешь адаптировать сайт тогда и уберёшь

уже добрые люди написали, так что сейчас опубликую

В видео же четко сказано куда классы не задавать. Это всякие текстовые и пост редакторы, никто в своем уме не пилит их с нуля есть уже проверенные готовые, и текста так и генерятся только тегами и своими классами, соответственно и стилить придется в основном селектор тега, незнаю погугли Quill editor и посмотри как оно работает и поймешь что имеется ввиду. А еще открою секрет БЭМ не истина методологий куча, а с учетом модульных стилей и вовсе пофиг на именование классов. "Грин это модификатор, он не может быть красным потому что есть БЭМ" этим цветом выделили какуюто часть текста, тут надо смотреть от контекста использования, если это акцентный цвет то что помешает через год разработки ему изменится на сиреневый? Часто бывает так что за 2-4 года разработки продукта у заказчиков меняется виденье продукта и редизайн проекта может случится 1 а то и 2 раза. Про высоту там избыточно сказано когда так делать не надо, приводить все случаи когда надо нет смысла. С компонентами которые "не будут менятся" это утопия, да, в больинстве мест компонент готов и везде одинаков. Но вот конкретно в этом месте в дизайне этот же компонент но немного изменен и перебивать всю мишуру вложеностей уже не приятно. Если что-то намудрено дроби на мелкие части и от них строй логику, сам же про бэм упоминаешь

1. Верно, по БЭМ классы задаются всем элементам. В видео Вадим говорит именно о контенте, который будет меняться в админ-панели. Если вёрстка натягивается на CMS систему, то динамическому контенту, который будет меняться из админ-панели, классы не задают. Стили для такого контента записывают через вложенность от родителя. 2. Плохая практика называть классы или модификаторы судя из того как элемент выглядит. Сегодня он зеленый, завтра красный, после завтра синий. Поэтому лучше задавать классы или модификаторы исходя из того что это за элемент : brand-color, accent-color, inverse-color, second-color, primary-color. 3. Речь не шла о картинках, а скорее о блоках, секциях, контенте, который может добавиться в будущем на сайте. 4. Стилизация элементов через большую вложенность действительно плохое решение. Большая вложенность селекторов неизменно ведёт к большой связанности кода. Если вы захотите поменять какой-то один селектор, вам неизбежно придётся поменять его во всех каскадах. К тому же, переиспользование кода при таком подходе стремится к нулю. Итог: больший вес селекторов - больший бардак, больший вес файла - медленная загрузка. 5. Поддержка у браузеров формата AVIF - 83.16%, у WEBP - 96.76%.

@@user-gk1su2vw4e 2 правило именования модификаторов по БЭМ написанное черным по белому если меняем цвет то пишем название цвета 5 какая поддержка AVIF в 2023 году? Вы про picture слышали что-то? 4 если у вас кнопка дизайнера то что вы собрались менять? Размер задаётся только элементу блока а не блоку. Если поменяется 2 цвета то что там мешает повесить модификатор на кнопку и дописать вложенность? 1 про админу вообще ничего не понятно. Что вы предлагаете делать если дизайнер намутил сложный дизайн и у вас p имеют разный отступ снизу? Т.е тут даётся совет новичкам они решат где-то не задавать стили и их вёрстка превращается в ужас. Если дают такие опасные советы то нужно развёрнуто пояснять что к чему и как определить где именно применять такой метод. Переписать стили с .блок__р на .блок р куда легче потом.

@@user-gk1su2vw4e по второму пункту уточню Если у вас по модификатору цвет зеленый, а вы потом ставите красный то только когда вы ставите после зелёного красный вы переименовываете модификатор или пишете новый с названием праймери, не как иначе. Если это не предполагается изначально. А если кто-то решил поменять цвет то он должен или вешать новый модификатор или переименовывать старый. Т.е. это ни разу не ошибка называть модификатор названием цвета

А чого б це з вами торгувати? Оце вигадали! І це не ваша справа, на якій він мові. Ми тут що хочемо, те й робимо.

@@alinan674 да будет МИР!!!

На стримах Вадим верстал не user.generated лендосы

а вот по поводу вложенности селекторов вопрос. Как её избежать, если SCSS это очень удобная штука

@@AntonioBenderas он говорит об избыточной вложенности. 2-3 уровня вложенности это нормально, как раз по БЭМ, блок, внутри элемент и иногда модификатор. Плохо, когда блок, внутри ещё блок, внутри элемент, внутри какой нибудь псевдоэлемент, а внутри псевдокласс, внутри модификатор... И так лалее

@@AntonioBenderas у него не только лендосы на стримах. И как бы странно, столько лет делать такой учебный материал, чтобы потом вдруг в 12 минутном ролике сказать - хей, ребятки, вы делаете ошибку давая имена классам контент которых может быть сгенерирован. Я, например, впервые слышу про генерацию контента. Я думаю логично было либо расширить ролик, либо снять про это ролик отдельно, я имею ввиду про эту вечеринку. Потому как я, конечно, учусь не только по роликам Вадима, и ни у кого не встречал упоминание об этом. Да, многие советуют использовать конструкции типа p+p last - child и тд, вместо именования, но я не встречал этому иных объяснение, кроме как универсальность кода