🔥 Интенсив Wordpress Мастер стартует 19 августа - tpverstak.ru/wordpress-master/ Напиши кодовое слово "мастер" в группу ВК vk.com/frontendblok и получи 10% скидки на интенсив и другие огненные бонусы.
не знал. спасибо. если это конечно правда, нужно будет проверить, в любом случае я буду сначала открывать заголовок или другой блочный элемент, а потом ссылку внутри
@@zerdox4 Пров ерьте обязательно:)Насколько я знаю,это исключение ввели,чтобы можно было в теге a верстать различные карточки, пример товара, для заголовков, я думаю, так не нужно делать:)
@@Денис-ь5ь3г ну да, в ссылку можно вставлять блочные элементы, но как по мне это бред (или просто я знаю недостаточно, нужно будет поискать, если есть интересные доклады или статьи на эту особенность). А пока я готов лучше родителю подвешивать location.href через onclick, чем вкладывать в ссылку блочные элементы. Ну это я про ваш пример (карточки товара)
@@zerdox4 смотрите w3.org все что касается сontent model у тегов. www.w3.org/TR/2018/WD-html53-20181018/textlevel-semantics.html#elementdef-a . У а он transparent так что можно. То о чем говорит Аня было актуально в HTML 4.
Спасибо за видео, а то сперва увидел (перебирая от старых видео к новым) те самые стримы и обошел их стороной именно из-за их продолжительности. И как оказалось, не зря :)
Внезапно неплохое видео. Первые несколько правил навели на мысль, что видео пустое и для совсем новичков. Но потом пошло веселее: даже спустя годы верстки люди могут допускать указанные ошибки. Минус видео в том, что правила даны вперемешку по темам. Но в целом можно разобраться. Список правил, которые мне показались наиболее интересными: 3 - строчные элементы внутри блочных 5, 7 - тестируйте верстку 8 - не центрируйте тексты паддингами. Ни горизонтально, ни вертикально. 9 - padding vs margin - в чем разница 11 - аккуратно. Согласовывать с дизайнером. 12 - cursor: pointer. да ладно. 15 - нормальные ссылки. Особенно в комбинации с 8 хорошее правило 18 - не бойтесь делать дополнительные обертки, когда это необходимо, особенно хорошо в комбинации с правилом 9.
очень полезное шикарное видео, но по настоящему начинаешь понимать, почему эти правила есть, когда сам обожжёшься... Нужно было к каждому правилу добавить небольшой примерчик, который показывает, как может конкретная ошибка сломать все на свете.. Тогда было бы в несколько раз полезней.
По своему опыту могу сказать, что правила о которых рассказано в этом видео будут очень полезны. Их нужно обязательно соблюдать. И тогда, даже в начале деятельности по вёрстке, будут достигаться нормальные результаты.
Хочу поправить насчет пункта №3. Ссылки в HTML5 имеют сквозную модель, поэтому могут содержать хоть потоковые, хоть фразовые теги (понятия строчных и блочных тегов в HTML5 нет). Поэтому в ссылку можно обернуть все что угодно, хоть целую карточку товаров, за исключением других интерактивных элементов (аудио, видео, кнопок, других ссылок и т.д.). Это будет валидно и корректно
Это у неё линзы. Это легко узнать: по краям радужки чёрный цвет. Обычно он бывает у детей, и теряется с возрастом. Я не экперт и не т.п., просто говорю что узнал у тех кто разбирается.
спасибо. но для новичка (лично меня) тяжеловато для понимания, еще не все пройдено, но хочется заранее "подстелить соломки", поэтому неплохо бы было сделать все правила с наглядными примерами.
Это мелочи для джунов, основная ошибка верстальщиков, что они вообще не думают о поддержке проекта, о цмс на которую будут ставить, о том что если блок повторяется на нескольких типовых страницах не надо верстать его каждый раз с новым неймингом, отсутствие переиспользования кода и прочее. В целом, архитектурного понимания проекта.
Анна, спасибо большое за полезную информацию. Хочу только посоветовать вам , без всякой критики и пафоса, - заняться правильным произношением в английском языке. Я слышу, что вы стараетесь правильно произносить, но многие слова говорите не совсем верно, взяв, например, тот же margin ['mɑ:ʤɪn]. Я считаю, что лучше указать человеку на небольшой огрех и таким образом помочь ему, чем промолчать и делать вид, что так и надо. Удачи вам!)
Хотел бы еще добавить что не стоит называть блоки привязываясь к дизайну макета а лучше делать более гибкие семантические названия исходя из функционала блока, то есть не section-slider-advanted или section-gallery-portfolio а просто slider или gallery или grid-gallery потому что сегодня вы используете слайдер для преимуществ или отзывов а завтра захотите еще где то его втулить
Это тоже самое,что не использовать section , для разделения отдельных информационных/логических блоков , только внутри самой секции может быть несколько логических блоков и они должны быть помещены в див- контейнер что бы задать отступы
@@fmleglrmglrml что мешает использовать модификаторы которые будут задавать кастомные стили дизайна но сам блок будет иметь только базовый набор стилей
Я не поняла по поводу недопустимости кириллицы в псевдоэлементах. Помогите, пожалуйста. В смысле, нельзя писать :after { content: "кириллический текст" } ?? А как тогда нужно?
Здравствуй,скажи пожалуйста,как правильно расставлять объекты при верстке (с помощью position: absolute и position:relative или как-либо по-другому) Насколько я знаю при распределении объектов с помощью position,верстка будет ломаться при просмотре на меньших экранах,т.к при абсолютном позиционировании объект вырывается из кода и не масштабируется при изменении размера экрана.Буду очень благодарен за ответ!)
Meruyert Abdreiimova да, конечно. Старт 27 апреля. Есть два уровня обучения: базовый и придвинутый. Базовый для тех, кто ранее не верстал, продвинутый - для тех, кто уже верстал, но хочет практиковаться на более сложных технологиях. Спасибо курсов тут tpverstak.ru/courses/
Вот пример ошибочной разметки codepen.io/anna_blok/pen/ZEzbaeW 1. Отделяем h1 верхним паддингом от навигации 2. Использует нижний маргин для кнопки, чтобы отделить его от нижнего блока 3. Блок page верный, т.к. расширяем его за счет верхнего и нижнего паддинга 4. Было бы верно, если бы мы обернули h1+p+button в div и обозначили бы для него класс. И повесили бы ему паддинг или маргин сверху и снизу (в зависимости от ситуации)
Есть мнение о поисковых роботах, которые первым делом ищут основной заголовок h1, содержащий основную суть сайта. Но когда я работала в тандеме с SMM, они выдавали список с несколькими h1. Имхо - правило устаревшее, нельзя это принимать за истину в 2к19
Э-эх.. Верстальщики верстают. А оптимизаторы потом перевёрстывают. Это особенно касается вложенных друг в друга ссылок и заголовков. Да и для некоторых блоков запрет на индексацию делать нада.
Привет Анна,подскажи пожалуйста как сделать адаптив под разные мониторы,вот у меня весь контент заключен в блок под мой монитор 1920 × 1080,когда в incperct ставлю 1366x768 то остается только 1/3 часть увеличенная,как сделать чтобы он адаптировался под все мониторы ?спасибо)
Подскажите пожалуйста, а что делать если я хочу от блока до блока установить margin. то есть расстояние на котором они будут находиться. Учитывая что первый объект это квадрат (ширина, высота) а второй это ul (список) и между объектом получается расстояние 60px до первого пикселя у слова в ul. Но ul уже имеет свою высоту. Как узнать или убрать margin-top и margin-bottom в списках? Дайте пожалуйста совет(
Анна, добрый день. Хотел поинтересоваться ведете ли вы индивидуальные курсы, если да, то сможете ли прочитать курс по предложенной мной программе? Цель выучить определенные темы быстро. Если вам интересно, то как можно с вами связаться?
ничего глупее не слышал насчет вкладывания блочных элементов в строчные. Как по твоему реализовывать карточки тогда? Этому правилу лет 10 и примерно тогда оно стало устаревшим. Вкладывать в ссылку блочные элементы не только можно, но и нужно
🔥 Интенсив Wordpress Мастер стартует 19 августа - tpverstak.ru/wordpress-master/
Напиши кодовое слово "мастер" в группу ВК vk.com/frontendblok и получи 10% скидки на интенсив и другие огненные бонусы.
Анна display inline-Блок или display block-Блок?
С такой подачей материала и полчаса не жалко слушать!!! Спасибо, выделил для себя некоторые моменты на что буду обращать внимание.
видно, что вы хорошо разбираетесь в этой теме, было интересно
Полезный урок для начинающих. Хорошо, что есть люди которые делают такой контент:)
В тег можно можно вставлять блочные элементы, это тэг исключение, можно проверить в валидаторе или почитать на w3 org
не знал. спасибо. если это конечно правда, нужно будет проверить, в любом случае я буду сначала открывать заголовок или другой блочный элемент, а потом ссылку внутри
@@zerdox4 Пров ерьте обязательно:)Насколько я знаю,это исключение ввели,чтобы можно было в теге a верстать различные карточки, пример товара, для заголовков, я думаю, так не нужно делать:)
@@Денис-ь5ь3г ну да, в ссылку можно вставлять блочные элементы, но как по мне это бред (или просто я знаю недостаточно, нужно будет поискать, если есть интересные доклады или статьи на эту особенность). А пока я готов лучше родителю подвешивать location.href через onclick, чем вкладывать в ссылку блочные элементы. Ну это я про ваш пример (карточки товара)
@@Денис-ь5ь3г ну или просто смириться, написать 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 - строчные элементы внутри блочных
5, 7 - тестируйте верстку
8 - не центрируйте тексты паддингами. Ни горизонтально, ни вертикально.
9 - padding vs margin - в чем разница
11 - аккуратно. Согласовывать с дизайнером.
12 - cursor: pointer. да ладно.
15 - нормальные ссылки. Особенно в комбинации с 8 хорошее правило
18 - не бойтесь делать дополнительные обертки, когда это необходимо, особенно хорошо в комбинации с правилом 9.
Чёт со spisok-huisok в голос проорал. blyaaa
Нужно было ещё в конце после слов "На самом деле таких ошибок может быть гораздо больше", вставить image со словом ДОХУЯ)))))
Анна умничка, сконцентрировала внимание на ошибках, а это важно
Все доходчиво и понятно росказано, спасибо вам.
очень полезное шикарное видео, но по настоящему начинаешь понимать, почему эти правила есть, когда сам обожжёшься...
Нужно было к каждому правилу добавить небольшой примерчик, который показывает, как может конкретная ошибка сломать все на свете.. Тогда было бы в несколько раз полезней.
По своему опыту могу сказать, что правила о которых рассказано в этом видео будут очень полезны. Их нужно обязательно соблюдать. И тогда, даже в начале деятельности по вёрстке, будут достигаться нормальные результаты.
Ура, я соблюдаю все эти правила 🤗
Забыли за accessibility и диватоз
Чётко и ясно! Люблю когда английский звучит как английский))))
Видимо я прошел через все ошибки и все эти ошибки для меня очевидны (я рад)
Очень интересное и полезное видео для начинающих верстальщиков. Очень все доходчиво!
Да уж, не ожидала , но ролик оказался полезным для меня.У меня имеется одна ошибка, озвученная в данном видео. Буду искоренять.
какая7
Хочу поправить насчет пункта №3. Ссылки в HTML5 имеют сквозную модель, поэтому могут содержать хоть потоковые, хоть фразовые теги (понятия строчных и блочных тегов в HTML5 нет). Поэтому в ссылку можно обернуть все что угодно, хоть целую карточку товаров, за исключением других интерактивных элементов (аудио, видео, кнопок, других ссылок и т.д.). Это будет валидно и корректно
Все верно!
Спасибо за ролик)
У тебя очень красивые голубые глаза😄😍😍
Это у неё линзы. Это легко узнать: по краям радужки чёрный цвет. Обычно он бывает у детей, и теряется с возрастом. Я не экперт и не т.п., просто говорю что узнал у тех кто разбирается.
Спасибо Вам Анна, очень понятно обьясняете!
🤗
спасибо. но для новичка (лично меня) тяжеловато для понимания, еще не все пройдено, но хочется заранее "подстелить соломки", поэтому неплохо бы было сделать все правила с наглядными примерами.
Я не допускаю ошибок в верстке, но мне тоже интересно
Обратите внимание на правило под номером 6. Оно Вам пригодится.
Я тоже не допускаю ошибок, ведь не ошибается лишь тот кто ни чего не делает))
значит ты застрял на одном уровне или очень медленно прогрессируешь
Весьма интересно и достаточно насыщенно! Заметен опыт)
Как поставить два лайка? Анна, умничка! Спасибо.
Благодарю Вас за видео.
Очень полезно. Спасибо.
Спасибо за очень интересное видео!
Божественные таймкоды)
Супер! Умничка)
Супер, спасибо!
Спасибо за науку, будем учитывать.
Это мелочи для джунов, основная ошибка верстальщиков, что они вообще не думают о поддержке проекта, о цмс на которую будут ставить, о том что если блок повторяется на нескольких типовых страницах не надо верстать его каждый раз с новым неймингом, отсутствие переиспользования кода и прочее. В целом, архитектурного понимания проекта.
Анна, спасибо большое за полезную информацию. Хочу только посоветовать вам , без всякой критики и пафоса, - заняться правильным произношением в английском языке. Я слышу, что вы стараетесь правильно произносить, но многие слова говорите не совсем верно, взяв, например, тот же margin ['mɑ:ʤɪn]. Я считаю, что лучше указать человеку на небольшой огрех и таким образом помочь ему, чем промолчать и делать вид, что так и надо. Удачи вам!)
Тема видео не об этом, и ваше мнение не спрашивали про инглиш
@@Василий-б1й5р А я не спрашивал твоего мнения, так что гудбай!)
Отличное видео и очень интересная ведущая, мне нравится ;)
Глаза ух))). Остальное всё по делу. Спасибо
!Правило 21 проверяйте сайт в , internet explorer .
Edge+
Про твое правило давно уже стоит забыть
Согласен, это золотая правила!
Вот бы найти хорошее видео с ответом на вопрос : как центрировать различные объекты при верстке
Уже есть такие видео. На моем канале аж целых 2 ролика
Почитай про флексбокс
Спасибо, Аня. )
Походу я смотрю Вас больше потому что ваша внешность привлекательна.😂🔥❤️
Спасибо Анна, однозначный палец вверх.
Очень поверхностно. Многие правила не раскрыты. Плюс что с глазами? ОоООоо
Хотел бы еще добавить что не стоит называть блоки привязываясь к дизайну макета а лучше делать более гибкие семантические названия исходя из функционала блока, то есть не section-slider-advanted или section-gallery-portfolio а просто slider или gallery или grid-gallery потому что сегодня вы используете слайдер для преимуществ или отзывов а завтра захотите еще где то его втулить
Это тоже самое,что не использовать section , для разделения отдельных информационных/логических блоков , только внутри самой секции может быть несколько логических блоков и они должны быть помещены в див- контейнер что бы задать отступы
@@fmleglrmglrml что мешает использовать модификаторы которые будут задавать кастомные стили дизайна но сам блок будет иметь только базовый набор стилей
@@vladi4507 ничего,я отвечал на вопрос
Молодец, все по делу.
Полезные вещи есть, спасибо
Я не поняла по поводу недопустимости кириллицы в псевдоэлементах. Помогите, пожалуйста. В смысле, нельзя писать :after { content: "кириллический текст" } ?? А как тогда нужно?
Здравствуй,скажи пожалуйста,как правильно расставлять объекты при верстке (с помощью position: absolute и position:relative или как-либо по-другому) Насколько я знаю при распределении объектов с помощью position,верстка будет ломаться при просмотре на меньших экранах,т.к при абсолютном позиционировании объект вырывается из кода и не масштабируется при изменении размера экрана.Буду очень благодарен за ответ!)
Любопытный жест при перечислении в самом начале😇
Часто бываешь в Европе?
Всё уже освоил и на всём набил шишки, только про использовании кириллицы в псевдоэлементах впервые узнал Оо
Анна, что за редактор ты используешь в ролике?)
Подключил normalize думал скинет марджины и паддинги везде, чтобы руками не сбрасывать, но он зачем-то добавляет отступы для h1, которые только мешают
Потому что нужен reset.css для этого
спасибо за нужную информацию)
Ну.... начало было простецкое....
Но потом стало интересно. :)
Ещё одна типичная ошибка новичков. Сразу ищут работу после hello world
Будут ли ещё такие курсы? Так хочу научиться профессионально верстать 😢
Meruyert Abdreiimova да, конечно. Старт 27 апреля. Есть два уровня обучения: базовый и придвинутый. Базовый для тех, кто ранее не верстал, продвинутый - для тех, кто уже верстал, но хочет практиковаться на более сложных технологиях. Спасибо курсов тут tpverstak.ru/courses/
Типичный Верстальщик • Анна Блок а можно линк или где следить за новостями о курсе? Благодарю!
Meruyert Abdreiimova какую соцсеть вы обычно используете? У нас есть ВК, Телеграм, Инстаграм.
Типичный Верстальщик • Анна Блок telegram
Meruyert Abdreiimova канал - tpverstak (можно найти в поиске)
По поводу ссылки и заголовка. Валидно и правильно обернуть h1 в ссылку. Может менее красиво, но ничего неправильного в этом нет. Тег a транспарентен.
Правило №18 не совсем понял, спасибо!
Вот пример ошибочной разметки codepen.io/anna_blok/pen/ZEzbaeW
1. Отделяем h1 верхним паддингом от навигации
2. Использует нижний маргин для кнопки, чтобы отделить его от нижнего блока
3. Блок page верный, т.к. расширяем его за счет верхнего и нижнего паддинга
4. Было бы верно, если бы мы обернули h1+p+button в div и обозначили бы для него класс. И повесили бы ему паддинг или маргин сверху и снизу (в зависимости от ситуации)
Здравствуйте. Почему картинку нельзя , запихнуть внутрь ссылки???
Где о таком было сказано?
@@annblok_webdev Блочный элемент нельзя помещать внутрь строчного.
Почему заголовок Н1 рекомендуется иметь только один на странице ?
Есть мнение о поисковых роботах, которые первым делом ищут основной заголовок h1, содержащий основную суть сайта. Но когда я работала в тандеме с SMM, они выдавали список с несколькими h1. Имхо - правило устаревшее, нельзя это принимать за истину в 2к19
@@annblok_webdev 2k19 -глупо засорять кириллицу
Документ
h1.зелёный
{
color: green;
}
Нет транслитерации
Насчет object-fit:cover непонятно почему именно это значение свойства надо использовать.
Красатоша!! Лайк и подписка)
Хороший и очень полезный урок! Хотя в вёрстке я ошибок не допускаю.
0:23 какие ошибки не стоит делать начинающим верстальщикам, а если ты уже не начинающий, то тебе можно?)
То-есть мне не стоит куда попало совать тег , и использовать !?
Нужно использовать каждый тег по назначению и смыслу
@@annblok_webdev, (без сарказма) Вот это открытие)
Что за прога для редактирования кода используемая вами на фоне?
Codepen
@@annblok_webdev Спасибо!
Спасибо ты лучшая
Не могу понять это линзы или родной цвет радужки?
Э-эх.. Верстальщики верстают. А оптимизаторы потом перевёрстывают. Это особенно касается вложенных друг в друга ссылок и заголовков. Да и для некоторых блоков запрет на индексацию делать нада.
Здравствуйте, а какое приложение вы используете при верстке для открытия psd макета?
Photoshop преимущественно, либо Avocode / Zeplin
@@annblok_webdev Спасибо)
Привет Анна,подскажи пожалуйста как сделать адаптив под разные мониторы,вот у меня весь контент заключен в блок под мой монитор 1920 × 1080,когда в incperct ставлю 1366x768 то остается только 1/3 часть увеличенная,как сделать чтобы он адаптировался под все мониторы ?спасибо)
Как называется редактор которым вы пользуетесь?
На видео Codepen
Wait a second, so why do I see the title and the description are in English but the video itself in whatever language it is? 🙄
Roses are red, violets are blue, the title is in English, the video should be too! 😄
Подскажите пожалуйста, а что делать если я хочу от блока до блока установить margin. то есть расстояние на котором они будут находиться. Учитывая что первый объект это квадрат (ширина, высота) а второй это ul (список) и между объектом получается расстояние 60px до первого пикселя у слова в ul. Но ul уже имеет свою высоту. Как узнать или убрать margin-top и margin-bottom в списках? Дайте пожалуйста совет(
Полезно для начинающих. Но что то настолько серьезное лицо и голос, что я весь ролик ждал подвоха. Как будто где то накосячил.
spisok-huisok - сильный нейминг, но делать я так конечно же не буду.
ошибка в написании hyisok-sosisok
Анна, добрый день.
Хотел поинтересоваться ведете ли вы индивидуальные курсы, если да, то сможете ли прочитать курс по предложенной мной программе? Цель выучить определенные темы быстро.
Если вам интересно, то как можно с вами связаться?
Привет! Подскажи как проверять php файлы на валидацию, используем на работе ninjucks
я сейчас только учусь верстать и обольщен, что большинство ошибок мне удалось избежать просто немного подумав
Здорово 👍🏻
Аня, только обратил внимание... Ты носишь линзы? Уже испортила зрение?
Анна inline Блок
Вопрос можно научитьсч ко всем htmlcssjsphp front ?
Спасибо полезно
Начало 1:54
Спасибо за контент. Глаза стеклянные. Девочка красивая
Нууууу я хоть и не начинающий, но на валидаторе не проверяю, а так по всем пунктам соответствую)
А где стримы по разбор работ ?
Пока не провожу их
ничего глупее не слышал насчет вкладывания блочных элементов в строчные. Как по твоему реализовывать карточки тогда? Этому правилу лет 10 и примерно тогда оно стало устаревшим. Вкладывать в ссылку блочные элементы не только можно, но и нужно
Правило №18 "Ну мы с вами понимаем, что это неверная стратегия....". - нужны аргументы, иначе всё будут делать это, но толком не понимая зачем.
В комментариях уже оставила ссылку на конкретный пример)
Только вы забыли предупредить, что object-fit не работает в IE
if (вы оказались на лыжах без колес на асфальте) {
значит с вашим внутренним календарём что-то не так;
}
Некоторые ошибки из этого списка принебрегают и опытные специалисты когда сроки поджимают))
Вы сбросите стили, потом сбросите то что написали для сбрасывание дефольтных стилей. Это не профессионально.
Правило 17.. А лучше ..))
Глаза очень красивые )))
Не понял, почему обязательно нужно оборачивать в див и делать ему марджины.
Ты похожа на логотип Старбакс))
Это линзы?
C трудом дослушал, не знаю как можно допускать таких ошибок.