TOP 20 typical errors in website layout
HTML-код
- Опубликовано: 7 июн 2024
- From this video, you will learn about the TOP-20 mistakes made by layout designers.
TimeCodes:
00:00 Introduction
00:36 Training advertisement
01:54 Rule 1
02:18 Rule 2
02:35 Rule 3
03:18 Rule 4
03:42 Rule 5
04:56 Rule 6
05:30 Rule 7
05:49 Rule 8
06:22 Rule 9
06:47 Rule 10
06:59 Rule 11
07:22 Rule 12
07:46 Rule 13
07:59 Rule 14
08:17 Rule 15
08:56 Rule 16
09:14 Rule 17
09:29 Rule 18
10:14 Rule 19
10:29 Rule 20
10:57 Results
CSS Class Names - tpverstak.ru/common-css-class-...
__
Frontend Book PDF- tpverstak.ru/frontendbook
Ask a front-end developer a question - frontendhelp.me/ru
__
Website - tpverstak.ru
VK - tpverstak
Instagram - / annblok
Telegram - t.me/tpverstak
Чат Telegram - t.me/tpverstakchat
__
Courses - tpverstak.ru/courses/
Feedback - topic-149247708_35960122
🔥 Интенсив Wordpress Мастер стартует 19 августа - tpverstak.ru/wordpress-master/
Напиши кодовое слово "мастер" в группу ВК vk.com/frontendblok и получи 10% скидки на интенсив и другие огненные бонусы.
Анна display inline-Блок или display block-Блок?
С такой подачей материала и полчаса не жалко слушать!!! Спасибо, выделил для себя некоторые моменты на что буду обращать внимание.
Ты молодец, без воды и по делу
видно, что вы хорошо разбираетесь в этой теме, было интересно
Все доходчиво и понятно росказано, спасибо вам.
Хороший у вас образовательный канал, а главное коротко и просто изложена подача информации
Полезный урок для начинающих. Хорошо, что есть люди которые делают такой контент:)
Анна умничка, сконцентрировала внимание на ошибках, а это важно
Чёт со spisok-huisok в голос проорал. blyaaa
Нужно было ещё в конце после слов "На самом деле таких ошибок может быть гораздо больше", вставить image со словом ДОХУЯ)))))
Очень интересное и полезное видео для начинающих верстальщиков. Очень все доходчиво!
Спасибо Вам Анна, очень понятно обьясняете!
🤗
Спасибо за видео, а то сперва увидел (перебирая от старых видео к новым) те самые стримы и обошел их стороной именно из-за их продолжительности. И как оказалось, не зря :)
Благодарю Вас за видео.
Очень полезно. Спасибо.
Чётко и ясно! Люблю когда английский звучит как английский))))
Как поставить два лайка? Анна, умничка! Спасибо.
Супер! Умничка)
Спасибо за очень интересное видео!
Ура, я соблюдаю все эти правила 🤗
Забыли за accessibility и диватоз
Супер, спасибо!
Спасибо, Аня. )
Спасибо за науку, будем учитывать.
Внезапно неплохое видео. Первые несколько правил навели на мысль, что видео пустое и для совсем новичков. Но потом пошло веселее: даже спустя годы верстки люди могут допускать указанные ошибки. Минус видео в том, что правила даны вперемешку по темам. Но в целом можно разобраться.
Список правил, которые мне показались наиболее интересными:
3 - строчные элементы внутри блочных
5, 7 - тестируйте верстку
8 - не центрируйте тексты паддингами. Ни горизонтально, ни вертикально.
9 - padding vs margin - в чем разница
11 - аккуратно. Согласовывать с дизайнером.
12 - cursor: pointer. да ладно.
15 - нормальные ссылки. Особенно в комбинации с 8 хорошее правило
18 - не бойтесь делать дополнительные обертки, когда это необходимо, особенно хорошо в комбинации с правилом 9.
Весьма интересно и достаточно насыщенно! Заметен опыт)
Отличное видео и очень интересная ведущая, мне нравится ;)
Божественные таймкоды)
Молодец, все по делу.
Полезные вещи есть, спасибо
В тег можно можно вставлять блочные элементы, это тэг исключение, можно проверить в валидаторе или почитать на w3 org
не знал. спасибо. если это конечно правда, нужно будет проверить, в любом случае я буду сначала открывать заголовок или другой блочный элемент, а потом ссылку внутри
@@zerdox4 Пров ерьте обязательно:)Насколько я знаю,это исключение ввели,чтобы можно было в теге a верстать различные карточки, пример товара, для заголовков, я думаю, так не нужно делать:)
@@user-sh9es2uw1k ну да, в ссылку можно вставлять блочные элементы, но как по мне это бред (или просто я знаю недостаточно, нужно будет поискать, если есть интересные доклады или статьи на эту особенность). А пока я готов лучше родителю подвешивать location.href через onclick, чем вкладывать в ссылку блочные элементы. Ну это я про ваш пример (карточки товара)
@@user-sh9es2uw1k ну или просто смириться, написать a{display:block}
@@zerdox4 смотрите w3.org все что касается сontent model у тегов. www.w3.org/TR/2018/WD-html53-20181018/textlevel-semantics.html#elementdef-a . У а он transparent так что можно. То о чем говорит Аня было актуально в HTML 4.
очень полезное шикарное видео, но по настоящему начинаешь понимать, почему эти правила есть, когда сам обожжёшься...
Нужно было к каждому правилу добавить небольшой примерчик, который показывает, как может конкретная ошибка сломать все на свете.. Тогда было бы в несколько раз полезней.
Спасибо за ролик)
У тебя очень красивые голубые глаза😄😍😍
Это у неё линзы. Это легко узнать: по краям радужки чёрный цвет. Обычно он бывает у детей, и теряется с возрастом. Я не экперт и не т.п., просто говорю что узнал у тех кто разбирается.
Спасибо Анна, однозначный палец вверх.
Хочу поправить насчет пункта №3. Ссылки в HTML5 имеют сквозную модель, поэтому могут содержать хоть потоковые, хоть фразовые теги (понятия строчных и блочных тегов в HTML5 нет). Поэтому в ссылку можно обернуть все что угодно, хоть целую карточку товаров, за исключением других интерактивных элементов (аудио, видео, кнопок, других ссылок и т.д.). Это будет валидно и корректно
Все верно!
Спасибо полезно
Привет Анна,подскажи пожалуйста как сделать адаптив под разные мониторы,вот у меня весь контент заключен в блок под мой монитор 1920 × 1080,когда в incperct ставлю 1366x768 то остается только 1/3 часть увеличенная,как сделать чтобы он адаптировался под все мониторы ?спасибо)
спасибо за нужную информацию)
Красатоша!! Лайк и подписка)
Спасибо ты лучшая
Привет! Подскажи как проверять php файлы на валидацию, используем на работе ninjucks
По своему опыту могу сказать, что правила о которых рассказано в этом видео будут очень полезны. Их нужно обязательно соблюдать. И тогда, даже в начале деятельности по вёрстке, будут достигаться нормальные результаты.
Спасибо за видео. Можно ли использовать флекс для вертикального центрирования текста в кнопке? На сколько это правильно?
Смотря какая разметка
Анна, добрый день.
Хотел поинтересоваться ведете ли вы индивидуальные курсы, если да, то сможете ли прочитать курс по предложенной мной программе? Цель выучить определенные темы быстро.
Если вам интересно, то как можно с вами связаться?
Да уж, не ожидала , но ролик оказался полезным для меня.У меня имеется одна ошибка, озвученная в данном видео. Буду искоренять.
какая7
Анна, что за редактор ты используешь в ролике?)
Глаза ух))). Остальное всё по делу. Спасибо
Видимо я прошел через все ошибки и все эти ошибки для меня очевидны (я рад)
Здравствуй,скажи пожалуйста,как правильно расставлять объекты при верстке (с помощью position: absolute и position:relative или как-либо по-другому) Насколько я знаю при распределении объектов с помощью position,верстка будет ломаться при просмотре на меньших экранах,т.к при абсолютном позиционировании объект вырывается из кода и не масштабируется при изменении размера экрана.Буду очень благодарен за ответ!)
Подскажите пожалуйста, а что делать если я хочу от блока до блока установить margin. то есть расстояние на котором они будут находиться. Учитывая что первый объект это квадрат (ширина, высота) а второй это ul (список) и между объектом получается расстояние 60px до первого пикселя у слова в ul. Но ul уже имеет свою высоту. Как узнать или убрать margin-top и margin-bottom в списках? Дайте пожалуйста совет(
Вопрос можно научитьсч ко всем htmlcssjsphp front ?
спасибо. но для новичка (лично меня) тяжеловато для понимания, еще не все пройдено, но хочется заранее "подстелить соломки", поэтому неплохо бы было сделать все правила с наглядными примерами.
!Правило 21 проверяйте сайт в , internet explorer .
Edge+
Про твое правило давно уже стоит забыть
Согласен, это золотая правила!
Подписка! 👍
Четко
Спасибо,
Я не допускаю ошибок в верстке, но мне тоже интересно
Обратите внимание на правило под номером 6. Оно Вам пригодится.
Я тоже не допускаю ошибок, ведь не ошибается лишь тот кто ни чего не делает))
значит ты застрял на одном уровне или очень медленно прогрессируешь
Ну.... начало было простецкое....
Но потом стало интересно. :)
Здравствуйте, а какое приложение вы используете при верстке для открытия psd макета?
Photoshop преимущественно, либо Avocode / Zeplin
@@annblok_webdev Спасибо)
Что за прога для редактирования кода используемая вами на фоне?
Codepen
@@annblok_webdev Спасибо!
Анна, спасибо большое за полезную информацию. Хочу только посоветовать вам , без всякой критики и пафоса, - заняться правильным произношением в английском языке. Я слышу, что вы стараетесь правильно произносить, но многие слова говорите не совсем верно, взяв, например, тот же margin ['mɑ:ʤɪn]. Я считаю, что лучше указать человеку на небольшой огрех и таким образом помочь ему, чем промолчать и делать вид, что так и надо. Удачи вам!)
Тема видео не об этом, и ваше мнение не спрашивали про инглиш
@@user-cp3mv5px3j А я не спрашивал твоего мнения, так что гудбай!)
Глаза очень красивые )))
Походу я смотрю Вас больше потому что ваша внешность привлекательна.😂🔥❤️
Насчет object-fit:cover непонятно почему именно это значение свойства надо использовать.
Как называется редактор которым вы пользуетесь?
На видео Codepen
Всё уже освоил и на всём набил шишки, только про использовании кириллицы в псевдоэлементах впервые узнал Оо
Не могу понять это линзы или родной цвет радужки?
2:14 жиза 🤣🤣🤣
Красивые глаза)
Аня, только обратил внимание... Ты носишь линзы? Уже испортила зрение?
Правило №18 не совсем понял, спасибо!
Вот пример ошибочной разметки codepen.io/anna_blok/pen/ZEzbaeW
1. Отделяем h1 верхним паддингом от навигации
2. Использует нижний маргин для кнопки, чтобы отделить его от нижнего блока
3. Блок page верный, т.к. расширяем его за счет верхнего и нижнего паддинга
4. Было бы верно, если бы мы обернули h1+p+button в div и обозначили бы для него класс. И повесили бы ему паддинг или маргин сверху и снизу (в зависимости от ситуации)
Хороший и очень полезный урок! Хотя в вёрстке я ошибок не допускаю.
Любопытный жест при перечислении в самом начале😇
Часто бываешь в Европе?
Это мелочи для джунов, основная ошибка верстальщиков, что они вообще не думают о поддержке проекта, о цмс на которую будут ставить, о том что если блок повторяется на нескольких типовых страницах не надо верстать его каждый раз с новым неймингом, отсутствие переиспользования кода и прочее. В целом, архитектурного понимания проекта.
Ох эти ваши глаза 🔥
Будут ли ещё такие курсы? Так хочу научиться профессионально верстать 😢
Meruyert Abdreiimova да, конечно. Старт 27 апреля. Есть два уровня обучения: базовый и придвинутый. Базовый для тех, кто ранее не верстал, продвинутый - для тех, кто уже верстал, но хочет практиковаться на более сложных технологиях. Спасибо курсов тут tpverstak.ru/courses/
Типичный Верстальщик • Анна Блок а можно линк или где следить за новостями о курсе? Благодарю!
Meruyert Abdreiimova какую соцсеть вы обычно используете? У нас есть ВК, Телеграм, Инстаграм.
Типичный Верстальщик • Анна Блок telegram
Meruyert Abdreiimova канал - tpverstak (можно найти в поиске)
Это линзы?
А где стримы по разбор работ ?
Пока не провожу их
Ты похожа на логотип Старбакс))
Здравствуйте. Почему картинку нельзя , запихнуть внутрь ссылки???
Где о таком было сказано?
@@annblok_webdev Блочный элемент нельзя помещать внутрь строчного.
Э-эх.. Верстальщики верстают. А оптимизаторы потом перевёрстывают. Это особенно касается вложенных друг в друга ссылок и заголовков. Да и для некоторых блоков запрет на индексацию делать нада.
Очень поверхностно. Многие правила не раскрыты. Плюс что с глазами? ОоООоо
Почему заголовок Н1 рекомендуется иметь только один на странице ?
Есть мнение о поисковых роботах, которые первым делом ищут основной заголовок h1, содержащий основную суть сайта. Но когда я работала в тандеме с SMM, они выдавали список с несколькими h1. Имхо - правило устаревшее, нельзя это принимать за истину в 2к19
@@annblok_webdev 2k19 -глупо засорять кириллицу
Не понял, почему обязательно нужно оборачивать в див и делать ему марджины.
Вот бы найти хорошее видео с ответом на вопрос : как центрировать различные объекты при верстке
Уже есть такие видео. На моем канале аж целых 2 ролика
Почитай про флексбокс
По поводу ссылки и заголовка. Валидно и правильно обернуть h1 в ссылку. Может менее красиво, но ничего неправильного в этом нет. Тег a транспарентен.
Подключил normalize думал скинет марджины и паддинги везде, чтобы руками не сбрасывать, но он зачем-то добавляет отступы для h1, которые только мешают
Потому что нужен reset.css для этого
Актуально, понятно, типично) Жаль только ни одна ссылочка у меня сверху не появилась. Подробный нейминг CSS классов есть на гитхабе github.com/yoksel/common-words
Источник по ссылке был указан
впервые слышу про CSS-валидатор)
spisok-huisok - сильный нейминг, но делать я так конечно же не буду.
ошибка в написании hyisok-sosisok
Я новичок, не знал про существование такой вещи как валидатор)
Только что взял и проверил свой последний проект и он оказался без ошибок! УХАХАХ, Я ПОРАБОЩУ МИР!)
PS. Дико угарел с пункта №1)
Полезно для начинающих. Но что то настолько серьезное лицо и голос, что я весь ролик ждал подвоха. Как будто где то накосячил.
Правило 17.. А лучше ..))
Нууууу я хоть и не начинающий, но на валидаторе не проверяю, а так по всем пунктам соответствую)
То-есть мне не стоит куда попало совать тег , и использовать !?
Нужно использовать каждый тег по назначению и смыслу
@@annblok_webdev, (без сарказма) Вот это открытие)
Спасибо за контент. Глаза стеклянные. Девочка красивая
Хотел бы еще добавить что не стоит называть блоки привязываясь к дизайну макета а лучше делать более гибкие семантические названия исходя из функционала блока, то есть не section-slider-advanted или section-gallery-portfolio а просто slider или gallery или grid-gallery потому что сегодня вы используете слайдер для преимуществ или отзывов а завтра захотите еще где то его втулить
Это тоже самое,что не использовать section , для разделения отдельных информационных/логических блоков , только внутри самой секции может быть несколько логических блоков и они должны быть помещены в див- контейнер что бы задать отступы
@@fmleglrmglrml что мешает использовать модификаторы которые будут задавать кастомные стили дизайна но сам блок будет иметь только базовый набор стилей
@@vladi4507 ничего,я отвечал на вопрос
Спасибо за видео
Я подписался!
У вас глаза ахренительные!
За глазки лайк.
Игорь Попрядухин привет я тоже куколд
Привет Анна, может подскажешь хороший бесплатный курс по созданию сайта на html и css для начинающих, что бы отработать именно css ?
Рекомендую пройти Любое обучающее видео на Ютубе по вёрстке, а потом скачать в интернете макет и попробовать что-то сделать самому. Если что-то непонятно - искать в интернете
Документ
h1.зелёный
{
color: green;
}
Нет транслитерации