TOP 20 typical errors in website layout
ฝัง
- เผยแพร่เมื่อ 26 มิ.ย. 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-Блок?
С такой подачей материала и полчаса не жалко слушать!!! Спасибо, выделил для себя некоторые моменты на что буду обращать внимание.
видно, что вы хорошо разбираетесь в этой теме, было интересно
Ты молодец, без воды и по делу
Все доходчиво и понятно росказано, спасибо вам.
Анна умничка, сконцентрировала внимание на ошибках, а это важно
Хороший у вас образовательный канал, а главное коротко и просто изложена подача информации
Очень интересное и полезное видео для начинающих верстальщиков. Очень все доходчиво!
Спасибо Вам Анна, очень понятно обьясняете!
🤗
Спасибо за видео, а то сперва увидел (перебирая от старых видео к новым) те самые стримы и обошел их стороной именно из-за их продолжительности. И как оказалось, не зря :)
Очень полезно. Спасибо.
Чётко и ясно! Люблю когда английский звучит как английский))))
Полезный урок для начинающих. Хорошо, что есть люди которые делают такой контент:)
Благодарю Вас за видео.
Ура, я соблюдаю все эти правила 🤗
Забыли за accessibility и диватоз
Спасибо за очень интересное видео!
Спасибо за науку, будем учитывать.
Чёт со spisok-huisok в голос проорал. blyaaa
Нужно было ещё в конце после слов "На самом деле таких ошибок может быть гораздо больше", вставить image со словом ДОХУЯ)))))
Супер! Умничка)
Спасибо, Аня. )
Как поставить два лайка? Анна, умничка! Спасибо.
Внезапно неплохое видео. Первые несколько правил навели на мысль, что видео пустое и для совсем новичков. Но потом пошло веселее: даже спустя годы верстки люди могут допускать указанные ошибки. Минус видео в том, что правила даны вперемешку по темам. Но в целом можно разобраться.
Список правил, которые мне показались наиболее интересными:
3 - строчные элементы внутри блочных
5, 7 - тестируйте верстку
8 - не центрируйте тексты паддингами. Ни горизонтально, ни вертикально.
9 - padding vs margin - в чем разница
11 - аккуратно. Согласовывать с дизайнером.
12 - cursor: pointer. да ладно.
15 - нормальные ссылки. Особенно в комбинации с 8 хорошее правило
18 - не бойтесь делать дополнительные обертки, когда это необходимо, особенно хорошо в комбинации с правилом 9.
Супер, спасибо!
По своему опыту могу сказать, что правила о которых рассказано в этом видео будут очень полезны. Их нужно обязательно соблюдать. И тогда, даже в начале деятельности по вёрстке, будут достигаться нормальные результаты.
Божественные таймкоды)
Видимо я прошел через все ошибки и все эти ошибки для меня очевидны (я рад)
Полезные вещи есть, спасибо
Хочу поправить насчет пункта №3. Ссылки в HTML5 имеют сквозную модель, поэтому могут содержать хоть потоковые, хоть фразовые теги (понятия строчных и блочных тегов в HTML5 нет). Поэтому в ссылку можно обернуть все что угодно, хоть целую карточку товаров, за исключением других интерактивных элементов (аудио, видео, кнопок, других ссылок и т.д.). Это будет валидно и корректно
Все верно!
Молодец, все по делу.
В тег можно можно вставлять блочные элементы, это тэг исключение, можно проверить в валидаторе или почитать на 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.
Отличное видео и очень интересная ведущая, мне нравится ;)
Спасибо Анна, однозначный палец вверх.
очень полезное шикарное видео, но по настоящему начинаешь понимать, почему эти правила есть, когда сам обожжёшься...
Нужно было к каждому правилу добавить небольшой примерчик, который показывает, как может конкретная ошибка сломать все на свете.. Тогда было бы в несколько раз полезней.
Спасибо полезно
!Правило 21 проверяйте сайт в , internet explorer .
Edge+
Про твое правило давно уже стоит забыть
Согласен, это золотая правила!
Спасибо ты лучшая
Спасибо за ролик)
У тебя очень красивые голубые глаза😄😍😍
Это у неё линзы. Это легко узнать: по краям радужки чёрный цвет. Обычно он бывает у детей, и теряется с возрастом. Я не экперт и не т.п., просто говорю что узнал у тех кто разбирается.
Весьма интересно и достаточно насыщенно! Заметен опыт)
Глаза ух))). Остальное всё по делу. Спасибо
Да уж, не ожидала , но ролик оказался полезным для меня.У меня имеется одна ошибка, озвученная в данном видео. Буду искоренять.
какая7
Привет Анна,подскажи пожалуйста как сделать адаптив под разные мониторы,вот у меня весь контент заключен в блок под мой монитор 1920 × 1080,когда в incperct ставлю 1366x768 то остается только 1/3 часть увеличенная,как сделать чтобы он адаптировался под все мониторы ?спасибо)
Ну.... начало было простецкое....
Но потом стало интересно. :)
Красатоша!! Лайк и подписка)
Подписка! 👍
спасибо за нужную информацию)
Спасибо за видео. Можно ли использовать флекс для вертикального центрирования текста в кнопке? На сколько это правильно?
Смотря какая разметка
спасибо. но для новичка (лично меня) тяжеловато для понимания, еще не все пройдено, но хочется заранее "подстелить соломки", поэтому неплохо бы было сделать все правила с наглядными примерами.
Четко
Анна, что за редактор ты используешь в ролике?)
Я не допускаю ошибок в верстке, но мне тоже интересно
Обратите внимание на правило под номером 6. Оно Вам пригодится.
Я тоже не допускаю ошибок, ведь не ошибается лишь тот кто ни чего не делает))
значит ты застрял на одном уровне или очень медленно прогрессируешь
Это мелочи для джунов, основная ошибка верстальщиков, что они вообще не думают о поддержке проекта, о цмс на которую будут ставить, о том что если блок повторяется на нескольких типовых страницах не надо верстать его каждый раз с новым неймингом, отсутствие переиспользования кода и прочее. В целом, архитектурного понимания проекта.
Спасибо,
Привет! Подскажи как проверять php файлы на валидацию, используем на работе ninjucks
Всё уже освоил и на всём набил шишки, только про использовании кириллицы в псевдоэлементах впервые узнал Оо
Анна, добрый день.
Хотел поинтересоваться ведете ли вы индивидуальные курсы, если да, то сможете ли прочитать курс по предложенной мной программе? Цель выучить определенные темы быстро.
Если вам интересно, то как можно с вами связаться?
Походу я смотрю Вас больше потому что ваша внешность привлекательна.😂🔥❤️
Глаза очень красивые )))
Подскажите пожалуйста, а что делать если я хочу от блока до блока установить margin. то есть расстояние на котором они будут находиться. Учитывая что первый объект это квадрат (ширина, высота) а второй это ul (список) и между объектом получается расстояние 60px до первого пикселя у слова в ul. Но ul уже имеет свою высоту. Как узнать или убрать margin-top и margin-bottom в списках? Дайте пожалуйста совет(
Вопрос можно научитьсч ко всем htmlcssjsphp front ?
Анна, спасибо большое за полезную информацию. Хочу только посоветовать вам , без всякой критики и пафоса, - заняться правильным произношением в английском языке. Я слышу, что вы стараетесь правильно произносить, но многие слова говорите не совсем верно, взяв, например, тот же margin ['mɑ:ʤɪn]. Я считаю, что лучше указать человеку на небольшой огрех и таким образом помочь ему, чем промолчать и делать вид, что так и надо. Удачи вам!)
Тема видео не об этом, и ваше мнение не спрашивали про инглиш
@@user-cp3mv5px3j А я не спрашивал твоего мнения, так что гудбай!)
2:14 жиза 🤣🤣🤣
spisok-huisok - сильный нейминг, но делать я так конечно же не буду.
ошибка в написании hyisok-sosisok
Здравствуй,скажи пожалуйста,как правильно расставлять объекты при верстке (с помощью position: absolute и position:relative или как-либо по-другому) Насколько я знаю при распределении объектов с помощью position,верстка будет ломаться при просмотре на меньших экранах,т.к при абсолютном позиционировании объект вырывается из кода и не масштабируется при изменении размера экрана.Буду очень благодарен за ответ!)
Красивые глаза)
Очень поверхностно. Многие правила не раскрыты. Плюс что с глазами? ОоООоо
Здравствуйте, а какое приложение вы используете при верстке для открытия psd макета?
Photoshop преимущественно, либо Avocode / Zeplin
@@annblok_webdev Спасибо)
Ты похожа на логотип Старбакс))
Я новичок, не знал про существование такой вещи как валидатор)
Только что взял и проверил свой последний проект и он оказался без ошибок! УХАХАХ, Я ПОРАБОЩУ МИР!)
PS. Дико угарел с пункта №1)
Документ
h1.зелёный
{
color: green;
}
Нет транслитерации
Что за прога для редактирования кода используемая вами на фоне?
Codepen
@@annblok_webdev Спасибо!
Ох эти ваши глаза 🔥
Хороший и очень полезный урок! Хотя в вёрстке я ошибок не допускаю.
впервые слышу про CSS-валидатор)
Любопытный жест при перечислении в самом начале😇
Часто бываешь в Европе?
Э-эх.. Верстальщики верстают. А оптимизаторы потом перевёрстывают. Это особенно касается вложенных друг в друга ссылок и заголовков. Да и для некоторых блоков запрет на индексацию делать нада.
Правило №18 не совсем понял, спасибо!
Вот пример ошибочной разметки codepen.io/anna_blok/pen/ZEzbaeW
1. Отделяем h1 верхним паддингом от навигации
2. Использует нижний маргин для кнопки, чтобы отделить его от нижнего блока
3. Блок page верный, т.к. расширяем его за счет верхнего и нижнего паддинга
4. Было бы верно, если бы мы обернули h1+p+button в div и обозначили бы для него класс. И повесили бы ему паддинг или маргин сверху и снизу (в зависимости от ситуации)
По поводу ссылки и заголовка. Валидно и правильно обернуть h1 в ссылку. Может менее красиво, но ничего неправильного в этом нет. Тег a транспарентен.
Полезно для начинающих. Но что то настолько серьезное лицо и голос, что я весь ролик ждал подвоха. Как будто где то накосячил.
Вот бы найти хорошее видео с ответом на вопрос : как центрировать различные объекты при верстке
Уже есть такие видео. На моем канале аж целых 2 ролика
Почитай про флексбокс
Начало 1:54
Это линзы?
Спасибо за контент. Глаза стеклянные. Девочка красивая
Нууууу я хоть и не начинающий, но на валидаторе не проверяю, а так по всем пунктам соответствую)
Ещё одна типичная ошибка новичков. Сразу ищут работу после hello world
Не могу понять это линзы или родной цвет радужки?
Хотел бы еще добавить что не стоит называть блоки привязываясь к дизайну макета а лучше делать более гибкие семантические названия исходя из функционала блока, то есть не 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 (можно найти в поиске)
Насчет object-fit:cover непонятно почему именно это значение свойства надо использовать.
Правило 17.. А лучше ..))
Как называется редактор которым вы пользуетесь?
На видео Codepen
Некоторые ошибки из этого списка принебрегают и опытные специалисты когда сроки поджимают))
я сейчас только учусь верстать и обольщен, что большинство ошибок мне удалось избежать просто немного подумав
Здорово 👍🏻
if (вы оказались на лыжах без колес на асфальте) {
значит с вашим внутренним календарём что-то не так;
}
А где стримы по разбор работ ?
Пока не провожу их
Актуально, понятно, типично) Жаль только ни одна ссылочка у меня сверху не появилась. Подробный нейминг CSS классов есть на гитхабе github.com/yoksel/common-words
Источник по ссылке был указан
Подключил normalize думал скинет марджины и паддинги везде, чтобы руками не сбрасывать, но он зачем-то добавляет отступы для h1, которые только мешают
Потому что нужен reset.css для этого
Анна inline Блок