ฝัง
- เผยแพร่เมื่อ 17 มี.ค. 2023
- Топ 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
Единственная вечеринка на которую мне хочется после 20 лет
круть, туса)
Наш любимый диджей вечеринок!!!! Спасибо за видео, бегу за чаем и устраиваюсь за компьютером.
круть!
Учимся у лучших, чтобы стать лучшими.
10🐺/10
спасибо
Каждый видос как маленький праздник для меня. Спасибо за хорошее настроение!
круто, спасибо
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
Спасибо, добрый человек
Спасибо огромное!
Спасибо большое, Вадим тебя можно слушать бесконечно. Это гениально сгенерированные примеры просто нечто❤️🔥
Благодарю)
Вадим, мое почтение, ты лучший из всех преподавателей, очень легко и весело с тобой учиться, спасибо что ты есть. Жаль что все так выходит в нашем мире... Сил тебе!
Вадим, спасибо большое за марафоны и за эти самые топовые вечеринки. Тебя слушать одно удовольствие и учится очень легко на все 💯.
Отличная подача материала.
Удачи тебе. Здоровья и мирного неба тебе и твоим близким✌️
дизайнер руководствуется логикой. Это может быть странно.... Я долго смеялся с этого)) Вадим, ты лучший 🦾
Ты как всегда, все четко и понятно! Спасибо за курс! Считаю, что решение пойти на него было одним из лучших моих решений)) Успехов во всем!!!
Благодарю! отлично поработали! мне очень приятно
Всё чётко. Как всегда. А можно видео для новичков какими словами правильно называть классы в той или иной ситуации? С конкретными примерами.
Вадим, спасибо тебе за отличный контент! Так держать! Подписка, лайк однозначно!
Все просто и понятно как всегда ! Красава Вадик!
классный видос, спасибо, ждем возвращение, гуру!
Спасибо за эту вечеринку)
Спасибо, Вадим!
Как всегда жирный лайк!))
Спасибо за доступное изложение полезной информации.
Заглянул я как-то на эту вечеринку, и Вадим подсадил меня на верстку…🎉
Выслушал вас, все понял и принял , так доступно и понятно обьяснить нужно иметь талантище. Спасибо!!!
спасибо) долго работал над этим)
Привет, Давно не встречал вас. Бороду отпустили не узнать. Смотрю все окей: жив ,здоров.,а значит будут еще видосы.
Крутой видос! Спасибо. Сделаешь видео про фишки в верстке для новичков? Что-то типа margin: 0 auto (чтобы выравнить по ширине контента). Думаю будет полезно для старта, чтобы так сказать получить пул знаний и дальше только практика
Спасибо, очень интересно!
Вадян ты очень крутой специалист! Удачи тебе во всех твоих проектах!
Подача материала просто супер )
спасибо
Дивлюся ваше перше відео! Ваша вєчєрінка мені офігєть як подобається, ваша буква ггг, одразу мені сказала, що свій чувак і все по темі теж топ 💙😉
Спасибо Вадим.
Очень полезное видео особенно для новачков!
Интересно будет ли продолжение по gulp сборке?
У Вадима всегда самые крутые вечеринки!!!!!!
Спасибо тебе большое!👍👍👍
Сегодня я взял свой первый заказ на 20$ благодаря вам ,хочу сказать большое спасибо за ваш труд
Не подскажите на какой площадке лучше искать заказы?
Интересная тема
Жаль смотреть пока некогда.......
Всем успехов в обучении. Мира и добра.
спасибо за годный контент!!! 2-ая часть, продолжение будет?
опа, go-surf (складний лендос) не так давно заверстав)) а відео тільки побачив, цікаво буде подивитися)
супер, молодцем!
Четенько🤘
по красоте )
Спасибо за контент? Скоро будет видос про совершенствование сборки gulp для работы с картинками и шрифтами
Локи-король вечеринок это хорошо было😂
Все разжёвано проглотил с удовольствием) Спасибо.
не по колокольчику, а по зову сердца!)
ты же мой родной=)
Спасибо
Вадим, спасибо тебе огромное за курс) В очередной раз благодарю) Заскакивал с некоторым багажом знаний больше полутора лет назад) Как раз с задержкой на пару недель залетал) В итоге - знания упорядочились значительно, курс с ментором - пушка! Стал увереннее искать работу, в итоге первый заказ через пару месяцев только нашёл (за сомнительную "шляпу" не брался намеренно), продолжал фрилансить вполне успешно, а вот уже более полугода на удалёнке официально) Люблю вёрстку) Спасибо!
Рад, что продолжаешь учить людей качеству) Успехов!)
Народ, рекомендую от чистого сердца) Да, буд-то заказанное, сам раньше к таким комментам скептически относился, если не сказать более. Но что поделать, когда от души человеку и его делу благодарен?) В общем, думайте, что хотите. Было не шибко просто, но я достиг своей цели, и иду дальше) И во многом благодаря Вадиму и его курсу с ментором)
И по теме. Учитывание сих неочевидных ошибок - огромнейший плюс к вашему успеху в деле. Решил вот посмотреть, убедиться в своём пути, послушать интересную речь с юмором - не прогадал, как обычно) всё чётко и праивильно) А как иначе у Вадима) Больше думаем головой - и всё будет лучше) Неочевидные резонансные моменты порой должны только давать повод к размышлению и нахождению ответа, а не к опусканию рук) Думаем и работаем!)
Вадим,подскажите как Вы относитесь к webflow? Я с самого начала работаю только с традиционной вёрсткой..хотелось бы услышать Ваше мнение
👏👍
Здравствуйте, продолжение gulp ближайшее время будет ? Или не ждать и самому пытаться настроить
Пожалуйста а можете сказать, сколько Вам времени пришлось чтобы выучить это все, я знаю что развиваться надо постепенно, но интересно хотя бы когда Вы изучили и нормально без всяких спокойно начали верстать, просто строчить без бб, сколько времени прошло (дней) на прокачку навыков? сколько часов на изучения вообщем и в день? где Вы набрали первых своих клиентов?
я: да я же сделал все как Вадим показывал
так-же я :
Спасибо большое ❤. 13:08 где можно найти видео об форм изображение
Добрый день. Большое спасибо Вам за очередное классное видео.
Можно вопрос? У меня такая проблема в vs code, между фигурными скобками (при нажатии на энтер) когда одна скобка опускается вниз, перестала появляться пустая строка. Получается так
{
}, а должно быть вот так
{
}.
Что может быть? Я уже все настройки пересмотре, снес vs code и заново установил и все равно осталась эта проблема.
Пожалуйста, помогите. Это отнимает столько времени.
Слушаем и впитываем !
топчик
Хочется спросить, а задавать высоту через min-height тоже плохая практика?
Спрошу под этим видео. Хотел спросить: Есть задача сделать документацию на веб. В наличии много документов (текст+фото+видео) по ремонту и обслуживанию. Нужно сделать это все интерактивным переход от одного документа к другому, запуск видео, просмотр фото. Для этой цели подумываю сделать в видео HTML. Все это должно находиться локально без контакта с интернет. На какие средства стоит обратить внимание ? Нудны какие то решения вроде конструкторов сайта или может wordpress ?
Вадим, спасибо за ваши видео.
Сейчас уже поздно спустя 3 недели записываться на ваш курс начавшийся 20 марта. Вы наверно столько работы в него вложили, что будет жаль сделать его одноразрвым. Повтора не будет?
Или может будет можно этот курс купить в записи для самостоятельного изучения?
можете мне в телеграм написать, ник @silver8light
При каких разрешениях (и ниже) стоит убирать Hover на мобильных устройствах?
spasibo oqromnoe
Вадос в своих уроках на ютубе вроде бы и сам hover не убирает при адаптиве
это чтобы веселее было =)
Добрый день, Вадим! Готовится ли курс по посадке вёрстки на WP?
неа, лежит в долгом ящике, а был готов на 25%
На это курс уже не успел наверно. Когда будет следующий?
Вадик,давай новые видосики выпускай !
А можно ссылку на новый сайт с курсом?
Привет , можешь снять видео как натягивать верстку на wordpre? спс за ведео очень помогают
МЕТОД БДСМ - ТОП!
Здравствуйте, столкнулся с такой проблемой, добавлял на свой сайт статью через файловый менеджер, внес изменения в файл, обновил страницу браузера, статья добавилась, а спустя несколько часов, статья просто пропала и файл который я редактировал, откатился до прошлой версии до моих изменений. Если редактировать файл по FTP то точно такая же проблема, через пару часов восстанавливается старая версия файла. Я уже весь интернет обшарил, но ничего не нашел по этой проблеме, в тех. поддержке не могут понять чего я от них хочу и как мне помочь. Так что вся надежда на вас, заранее спасибо
будут ли уроки по git?)
Спасибо что рассказал про план обучения по твоим видосам, учусь по твоим марафонам, стараюсь где-то сделать сам, а потом смотрю как это сделал ты. Уже месяц занимаюсь, но прогресс не чувствуется, включаю следующий видос, думаю щас как сам сделаю весь сайт и спотыкаюсь уже через 15 минут верстки. Может кто подскажет, так и должно быть, или всё таки я как-то неправильно учусь?
У Вадима только курс на 1,5 месяца рассчитан, где тебя в темпе вальса ведут с кучей инфы и нюансов и очередности по сложности... и даже после этого надо еще поверстать, что бы закрепилось всё. А ты самостоятельно ... скорее всего по вершкам прошелся
@@Arkady-777 ты прав, скорее всего так и есть
Не переживай, делай дальше и всё получится, здесь главное практика)
К сожалению поздно появился пк и поздно узнал про верстку, нет возможности выдешить достаточное время на самообучение.
Но в общем если на чем-то спотыкаюсь, то ищу информацию в интернете. Как правило находится. Поэтому практика реально рулит, особенно если макет ставит интересные задачи.
А можно привести пример на чем спотыкнулись вы? Модет и помочт чем-то получится
@@computercomputer3293 так не, я же говорю, ставлю ролик на паузу, пытаюсь сделать дальше и довольно быстро наступает момент, когда не понимаю как делать дальше. Потом включаю ролик, смотрю как надо делать, пробиваю себе смачный фэйспалм, от понимания того что тормоз и делаю дальше. Свои проекты пока не делал, что бы совета искать) А так спасибо)
Почему РФ И РБ не доступен курс ?
Лайк,подписка.
Сижу в тюрьме и учусь.... Спасибо😜👍
молодцом, пожалуйста
@@vadymprokopchuk Вадим,будет желанье и возможность,сделать курс по js,что б была вечериночка😁 с удовольствием записался бы на курс,но... Подневольный человек и естт есть ограничения🤷
Привет сделай пожалуйста пооду по gulp
Когда будет продолжение gulp ?
Вы с Харькова?
Доброго дня Вадим! Хотілося би дізнатися чи буде відео або парочку відео про веб-доступність і як її приміняти в проектах, так як дуже мало інформації про це і як її правильно приміняти, а також відео у вас або вашої дружини які розміри шрифтів використовувати на мобільних пристроях?
Написал вам огромную простыню что делать, а ютуб походу посчитал за спам и удалил его(
Так что теперь коротко.
Используйте семантику, вам как минимум не придется проставлять атрибут 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 и запускайте их для проверки страницы, они подскажут все грубые ошибки и некоторые мелкие, подскажут как исправить и дадут линку на спеку. В первом исправляйте преимущественно красные ошибки, всеостальные больше рекомендации.
Все что больше это уже специфика она либо описана в таске либо ее выцепит тестировщик, а зная проблему решение нагуглиться.
Если остались вопросы пишите, попробую ответить
гарна ідея, дякую, я дружині про коментар скажу=))
Как отключить :hover на планшетах и мобильных устройствах?
Медиа запрос any-hover проигнорирует hover на моб.устройствах
я думал метод БДСМ - это когда заказчик просит сверстать под IE8
Вроде @media (any-hover hover)
Где найти монтера? шоб проверял работы,подсказывал,указывал на ошибки,помогал исправлять.
Непонятен момент "как защитить user content". Поясните кто-то.
А как можно убрать hover на мобильных устройствах ?
Когда будешь адаптировать сайт тогда и уберёшь
А это нормально что по програме вашего курса, вы на 3 уроке учите Flex?
а что вас смущает? =)
@@vadymprokopchuk то что на этом этапе, не особо понимают где ставить margin а где padding, и почему свойство width и height не работает на тег span, а у вас сразу флекс и js на 3 уроке,мне кажется если бы я так учил вёрстку, то бросил бы это дело сразу после 2 урока)
@@boombla_5234 в одном уроке несколько видео, так что до момента изучения флексов уже есть ответы на вопросы которые вы писали выше
Вадип ты просто хаха😅😅
Без тайм-кодов миллениалы могут и побить =)
уже добрые люди написали, так что сейчас опубликую
Смотрите Вадоса! Он дело говорит
БРИГАДА!!!
Как найти и пользоваться флексбоксом
Не пойму логику: курс не доступен резидентами РФ, но курс на русском языке. Т.е. он для русских, живущих за пределами РФ и для русскоговорящих украинцев? Из РФ можно оплачивать без проблем через Юмани. Спасибо за очередное видео!!!
А чого б це з вами торгувати? Оце вигадали! І це не ваша справа, на якій він мові. Ми тут що хочемо, те й робимо.
@@alinan674 да будет МИР!!!
По БЭМ классы задаются везде, если ты не задаешь классы то 100% сделаешь хуже.
Бэкенд не может в классы?типо что?
Типо воздать шаблон и переменную это что-то сложное?
Текст--грин
Грин это модификатор, он не может быть красным потому что есть БЭМ
Картинкам 50 на 50нужно задавать высоту потому что юзер ставит потом чёрти что и если не задать высоту то будет трешь
Если ты делаешь кнопку которую намудрил дизайнер то можно делать 5 влоденностей т.к если для всех спанов писать классы то получится ахинея. А по сути это полноценный блок который не будет менятся.
Qjery в 2023 году, серьезно?
В видео же четко сказано куда классы не задавать. Это всякие текстовые и пост редакторы, никто в своем уме не пилит их с нуля есть уже проверенные готовые, и текста так и генерятся только тегами и своими классами, соответственно и стилить придется в основном селектор тега, незнаю погугли 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 по второму пункту уточню
Если у вас по модификатору цвет зеленый, а вы потом ставите красный то только когда вы ставите после зелёного красный вы переименовываете модификатор или пишете новый с названием праймери, не как иначе. Если это не предполагается изначально.
А если кто-то решил поменять цвет то он должен или вешать новый модификатор или переименовывать старый.
Т.е. это ни разу не ошибка называть модификатор названием цвета
Бдсм? Ты серьезно 😅
спс, Валос. ти топ
какое то неочевидное видео.... открываем любое твое видео и что мы видим?..... у каждого параграфа есть класс у каждой ссылки и картинки есть класс... что получается, ты учил все это нас неправильно? намеренно, или сам только недавно понял про именование user.generated?
На стримах Вадим верстал не user.generated лендосы
а вот по поводу вложенности селекторов вопрос. Как её избежать, если SCSS это очень удобная штука
@@AntonioBenderas он говорит об избыточной вложенности. 2-3 уровня вложенности это нормально, как раз по БЭМ, блок, внутри элемент и иногда модификатор. Плохо, когда блок, внутри ещё блок, внутри элемент, внутри какой нибудь псевдоэлемент, а внутри псевдокласс, внутри модификатор... И так лалее
@@AntonioBenderas у него не только лендосы на стримах. И как бы странно, столько лет делать такой учебный материал, чтобы потом вдруг в 12 минутном ролике сказать - хей, ребятки, вы делаете ошибку давая имена классам контент которых может быть сгенерирован. Я, например, впервые слышу про генерацию контента. Я думаю логично было либо расширить ролик, либо снять про это ролик отдельно, я имею ввиду про эту вечеринку. Потому как я, конечно, учусь не только по роликам Вадима, и ни у кого не встречал упоминание об этом. Да, многие советуют использовать конструкции типа p+p last - child и тд, вместо именования, но я не встречал этому иных объяснение, кроме как универсальность кода