TOP 20 typical errors in website layout
Вставка
- Опубліковано 28 тра 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. Ссылки в HTML5 имеют сквозную модель, поэтому могут содержать хоть потоковые, хоть фразовые теги (понятия строчных и блочных тегов в HTML5 нет). Поэтому в ссылку можно обернуть все что угодно, хоть целую карточку товаров, за исключением других интерактивных элементов (аудио, видео, кнопок, других ссылок и т.д.). Это будет валидно и корректно
Все верно!
очень полезное шикарное видео, но по настоящему начинаешь понимать, почему эти правила есть, когда сам обожжёшься...
Нужно было к каждому правилу добавить небольшой примерчик, который показывает, как может конкретная ошибка сломать все на свете.. Тогда было бы в несколько раз полезней.
Полезный урок для начинающих. Хорошо, что есть люди которые делают такой контент:)
!Правило 21 проверяйте сайт в , internet explorer .
Edge+
Про твое правило давно уже стоит забыть
Согласен, это золотая правила!
По своему опыту могу сказать, что правила о которых рассказано в этом видео будут очень полезны. Их нужно обязательно соблюдать. И тогда, даже в начале деятельности по вёрстке, будут достигаться нормальные результаты.
Внезапно неплохое видео. Первые несколько правил навели на мысль, что видео пустое и для совсем новичков. Но потом пошло веселее: даже спустя годы верстки люди могут допускать указанные ошибки. Минус видео в том, что правила даны вперемешку по темам. Но в целом можно разобраться.
Список правил, которые мне показались наиболее интересными:
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.
Божественные таймкоды)
Видимо я прошел через все ошибки и все эти ошибки для меня очевидны (я рад)
Молодец, все по делу.
Спасибо полезно
Отличное видео и очень интересная ведущая, мне нравится ;)
Спасибо Анна, однозначный палец вверх.
Спасибо ты лучшая
Это мелочи для джунов, основная ошибка верстальщиков, что они вообще не думают о поддержке проекта, о цмс на которую будут ставить, о том что если блок повторяется на нескольких типовых страницах не надо верстать его каждый раз с новым неймингом, отсутствие переиспользования кода и прочее. В целом, архитектурного понимания проекта.
Глаза ух))). Остальное всё по делу. Спасибо
Привет Анна,подскажи пожалуйста как сделать адаптив под разные мониторы,вот у меня весь контент заключен в блок под мой монитор 1920 × 1080,когда в incperct ставлю 1366x768 то остается только 1/3 часть увеличенная,как сделать чтобы он адаптировался под все мониторы ?спасибо)
спасибо. но для новичка (лично меня) тяжеловато для понимания, еще не все пройдено, но хочется заранее "подстелить соломки", поэтому неплохо бы было сделать все правила с наглядными примерами.
Спасибо за ролик)
У тебя очень красивые голубые глаза😄😍😍
Это у неё линзы. Это легко узнать: по краям радужки чёрный цвет. Обычно он бывает у детей, и теряется с возрастом. Я не экперт и не т.п., просто говорю что узнал у тех кто разбирается.
Привет! Подскажи как проверять php файлы на валидацию, используем на работе ninjucks
Я не допускаю ошибок в верстке, но мне тоже интересно
Обратите внимание на правило под номером 6. Оно Вам пригодится.
Я тоже не допускаю ошибок, ведь не ошибается лишь тот кто ни чего не делает))
значит ты застрял на одном уровне или очень медленно прогрессируешь
Весьма интересно и достаточно насыщенно! Заметен опыт)
Спасибо за видео. Можно ли использовать флекс для вертикального центрирования текста в кнопке? На сколько это правильно?
Смотря какая разметка
Да уж, не ожидала , но ролик оказался полезным для меня.У меня имеется одна ошибка, озвученная в данном видео. Буду искоренять.
какая7
спасибо за нужную информацию)
Красатоша!! Лайк и подписка)
Анна, добрый день.
Хотел поинтересоваться ведете ли вы индивидуальные курсы, если да, то сможете ли прочитать курс по предложенной мной программе? Цель выучить определенные темы быстро.
Если вам интересно, то как можно с вами связаться?
Подписка! 👍
Ну.... начало было простецкое....
Но потом стало интересно. :)
Вопрос можно научитьсч ко всем htmlcssjsphp front ?
Подскажите пожалуйста, а что делать если я хочу от блока до блока установить margin. то есть расстояние на котором они будут находиться. Учитывая что первый объект это квадрат (ширина, высота) а второй это ul (список) и между объектом получается расстояние 60px до первого пикселя у слова в ul. Но ul уже имеет свою высоту. Как узнать или убрать margin-top и margin-bottom в списках? Дайте пожалуйста совет(
Спасибо,
Анна, что за редактор ты используешь в ролике?)
Что за прога для редактирования кода используемая вами на фоне?
Codepen
@@annblok_webdev Спасибо!
Здравствуй,скажи пожалуйста,как правильно расставлять объекты при верстке (с помощью position: absolute и position:relative или как-либо по-другому) Насколько я знаю при распределении объектов с помощью position,верстка будет ломаться при просмотре на меньших экранах,т.к при абсолютном позиционировании объект вырывается из кода и не масштабируется при изменении размера экрана.Буду очень благодарен за ответ!)
Всё уже освоил и на всём набил шишки, только про использовании кириллицы в псевдоэлементах впервые узнал Оо
Четко
Очень поверхностно. Многие правила не раскрыты. Плюс что с глазами? ОоООоо
Глаза очень красивые )))
Здравствуйте, а какое приложение вы используете при верстке для открытия psd макета?
Photoshop преимущественно, либо Avocode / Zeplin
@@annblok_webdev Спасибо)
По поводу ссылки и заголовка. Валидно и правильно обернуть h1 в ссылку. Может менее красиво, но ничего неправильного в этом нет. Тег a транспарентен.
2:14 жиза 🤣🤣🤣
Любопытный жест при перечислении в самом начале😇
Часто бываешь в Европе?
Походу я смотрю Вас больше потому что ваша внешность привлекательна.😂🔥❤️
Правило 17.. А лучше ..))
Анна, спасибо большое за полезную информацию. Хочу только посоветовать вам , без всякой критики и пафоса, - заняться правильным произношением в английском языке. Я слышу, что вы стараетесь правильно произносить, но многие слова говорите не совсем верно, взяв, например, тот же margin ['mɑ:ʤɪn]. Я считаю, что лучше указать человеку на небольшой огрех и таким образом помочь ему, чем промолчать и делать вид, что так и надо. Удачи вам!)
Тема видео не об этом, и ваше мнение не спрашивали про инглиш
@@user-cp3mv5px3j А я не спрашивал твоего мнения, так что гудбай!)
spisok-huisok - сильный нейминг, но делать я так конечно же не буду.
ошибка в написании hyisok-sosisok
Красивые глаза)
Нууууу я хоть и не начинающий, но на валидаторе не проверяю, а так по всем пунктам соответствую)
Э-эх.. Верстальщики верстают. А оптимизаторы потом перевёрстывают. Это особенно касается вложенных друг в друга ссылок и заголовков. Да и для некоторых блоков запрет на индексацию делать нада.
Ох эти ваши глаза 🔥
Вот бы найти хорошее видео с ответом на вопрос : как центрировать различные объекты при верстке
Уже есть такие видео. На моем канале аж целых 2 ролика
Почитай про флексбокс
Я новичок, не знал про существование такой вещи как валидатор)
Только что взял и проверил свой последний проект и он оказался без ошибок! УХАХАХ, Я ПОРАБОЩУ МИР!)
PS. Дико угарел с пункта №1)
Хотел бы еще добавить что не стоит называть блоки привязываясь к дизайну макета а лучше делать более гибкие семантические названия исходя из функционала блока, то есть не section-slider-advanted или section-gallery-portfolio а просто slider или gallery или grid-gallery потому что сегодня вы используете слайдер для преимуществ или отзывов а завтра захотите еще где то его втулить
Это тоже самое,что не использовать section , для разделения отдельных информационных/логических блоков , только внутри самой секции может быть несколько логических блоков и они должны быть помещены в див- контейнер что бы задать отступы
@@fmleglrmglrml что мешает использовать модификаторы которые будут задавать кастомные стили дизайна но сам блок будет иметь только базовый набор стилей
@@vladi4507 ничего,я отвечал на вопрос
Хороший и очень полезный урок! Хотя в вёрстке я ошибок не допускаю.
Будут ли ещё такие курсы? Так хочу научиться профессионально верстать 😢
Meruyert Abdreiimova да, конечно. Старт 27 апреля. Есть два уровня обучения: базовый и придвинутый. Базовый для тех, кто ранее не верстал, продвинутый - для тех, кто уже верстал, но хочет практиковаться на более сложных технологиях. Спасибо курсов тут tpverstak.ru/courses/
Типичный Верстальщик • Анна Блок а можно линк или где следить за новостями о курсе? Благодарю!
Meruyert Abdreiimova какую соцсеть вы обычно используете? У нас есть ВК, Телеграм, Инстаграм.
Типичный Верстальщик • Анна Блок telegram
Meruyert Abdreiimova канал - tpverstak (можно найти в поиске)
Правило №18 не совсем понял, спасибо!
Вот пример ошибочной разметки codepen.io/anna_blok/pen/ZEzbaeW
1. Отделяем h1 верхним паддингом от навигации
2. Использует нижний маргин для кнопки, чтобы отделить его от нижнего блока
3. Блок page верный, т.к. расширяем его за счет верхнего и нижнего паддинга
4. Было бы верно, если бы мы обернули h1+p+button в div и обозначили бы для него класс. И повесили бы ему паддинг или маргин сверху и снизу (в зависимости от ситуации)
Насчет object-fit:cover непонятно почему именно это значение свойства надо использовать.
Как называется редактор которым вы пользуетесь?
На видео Codepen
Спасибо за контент. Глаза стеклянные. Девочка красивая
if (вы оказались на лыжах без колес на асфальте) {
значит с вашим внутренним календарём что-то не так;
}
Некоторые ошибки из этого списка принебрегают и опытные специалисты когда сроки поджимают))
впервые слышу про CSS-валидатор)
Ты похожа на логотип Старбакс))
У вас глаза ахренительные!
Аня, только обратил внимание... Ты носишь линзы? Уже испортила зрение?
Здравствуйте. Почему картинку нельзя , запихнуть внутрь ссылки???
Где о таком было сказано?
@@annblok_webdev Блочный элемент нельзя помещать внутрь строчного.
Документ
h1.зелёный
{
color: green;
}
Нет транслитерации
я сейчас только учусь верстать и обольщен, что большинство ошибок мне удалось избежать просто немного подумав
Здорово 👍🏻
Не понял, почему обязательно нужно оборачивать в див и делать ему марджины.
PHP больше платят гораздо, там больше требуется людей, чем на пайтоне. На php 120 людей, а на python всего 55 людей
А где стримы по разбор работ ?
Пока не провожу их
Ещё одна типичная ошибка новичков. Сразу ищут работу после hello world
Полезно для начинающих. Но что то настолько серьезное лицо и голос, что я весь ролик ждал подвоха. Как будто где то накосячил.
Это линзы?
То-есть мне не стоит куда попало совать тег , и использовать !?
Нужно использовать каждый тег по назначению и смыслу
@@annblok_webdev, (без сарказма) Вот это открытие)
Анна inline Блок
Не могу понять это линзы или родной цвет радужки?