🔥 Интенсив Wordpress Мастер стартует 19 августа - tpverstak.ru/wordpress-master/ Напиши кодовое слово "мастер" в группу ВК vk.com/frontendblok и получи 10% скидки на интенсив и другие огненные бонусы.

@user-dm4yi9ch3n

4 жыл бұрын

Анна display inline-Блок или display block-Блок?

С такой подачей материала и полчаса не жалко слушать!!! Спасибо, выделил для себя некоторые моменты на что буду обращать внимание.

видно, что вы хорошо разбираетесь в этой теме, было интересно

Все доходчиво и понятно росказано, спасибо вам.

Чёт со spisok-huisok в голос проорал. blyaaa

@arktikmoon

3 жыл бұрын

Нужно было ещё в конце после слов "На самом деле таких ошибок может быть гораздо больше", вставить image со словом ДОХУЯ)))))

Спасибо за видео, а то сперва увидел (перебирая от старых видео к новым) те самые стримы и обошел их стороной именно из-за их продолжительности. И как оказалось, не зря :)

Ты молодец, без воды и по делу

Хороший у вас образовательный канал, а главное коротко и просто изложена подача информации

Анна умничка, сконцентрировала внимание на ошибках, а это важно

Полезный урок для начинающих. Хорошо, что есть люди которые делают такой контент:)

Очень интересное и полезное видео для начинающих верстальщиков. Очень все доходчиво!

Спасибо Вам Анна, очень понятно обьясняете!

@annblok_webdev

3 жыл бұрын

🤗

Чётко и ясно! Люблю когда английский звучит как английский))))

По своему опыту могу сказать, что правила о которых рассказано в этом видео будут очень полезны. Их нужно обязательно соблюдать. И тогда, даже в начале деятельности по вёрстке, будут достигаться нормальные результаты.

Благодарю Вас за видео.

Очень полезно. Спасибо.

очень полезное шикарное видео, но по настоящему начинаешь понимать, почему эти правила есть, когда сам обожжёшься... Нужно было к каждому правилу добавить небольшой примерчик, который показывает, как может конкретная ошибка сломать все на свете.. Тогда было бы в несколько раз полезней.

Как поставить два лайка? Анна, умничка! Спасибо.

Спасибо за очень интересное видео!

Ура, я соблюдаю все эти правила 🤗 Забыли за accessibility и диватоз

Внезапно неплохое видео. Первые несколько правил навели на мысль, что видео пустое и для совсем новичков. Но потом пошло веселее: даже спустя годы верстки люди могут допускать указанные ошибки. Минус видео в том, что правила даны вперемешку по темам. Но в целом можно разобраться. Список правил, которые мне показались наиболее интересными: 3 - строчные элементы внутри блочных 5, 7 - тестируйте верстку 8 - не центрируйте тексты паддингами. Ни горизонтально, ни вертикально. 9 - padding vs margin - в чем разница 11 - аккуратно. Согласовывать с дизайнером. 12 - cursor: pointer. да ладно. 15 - нормальные ссылки. Особенно в комбинации с 8 хорошее правило 18 - не бойтесь делать дополнительные обертки, когда это необходимо, особенно хорошо в комбинации с правилом 9.

Супер! Умничка)

Весьма интересно и достаточно насыщенно! Заметен опыт)

Хочу поправить насчет пункта №3. Ссылки в HTML5 имеют сквозную модель, поэтому могут содержать хоть потоковые, хоть фразовые теги (понятия строчных и блочных тегов в HTML5 нет). Поэтому в ссылку можно обернуть все что угодно, хоть целую карточку товаров, за исключением других интерактивных элементов (аудио, видео, кнопок, других ссылок и т.д.). Это будет валидно и корректно

@dmitrijponkin

4 жыл бұрын

Все верно!

Спасибо, Аня. )

Видимо я прошел через все ошибки и все эти ошибки для меня очевидны (я рад)

Спасибо за науку, будем учитывать.

Супер, спасибо!

!Правило 21 проверяйте сайт в , internet explorer .

@vladi4507

4 жыл бұрын

Edge+

@iamanangel9178

4 жыл бұрын

Про твое правило давно уже стоит забыть

@thekamol

4 жыл бұрын

Согласен, это золотая правила!

Спасибо Анна, однозначный палец вверх.

Божественные таймкоды)

В тег можно можно вставлять блочные элементы, это тэг исключение, можно проверить в валидаторе или почитать на w3 org

@zerdox4

4 жыл бұрын

не знал. спасибо. если это конечно правда, нужно будет проверить, в любом случае я буду сначала открывать заголовок или другой блочный элемент, а потом ссылку внутри

@user-sh9es2uw1k

4 жыл бұрын

@@zerdox4 Пров ерьте обязательно:)Насколько я знаю,это исключение ввели,чтобы можно было в теге a верстать различные карточки, пример товара, для заголовков, я думаю, так не нужно делать:)

@zerdox4

4 жыл бұрын

@@user-sh9es2uw1k ну да, в ссылку можно вставлять блочные элементы, но как по мне это бред (или просто я знаю недостаточно, нужно будет поискать, если есть интересные доклады или статьи на эту особенность). А пока я готов лучше родителю подвешивать location.href через onclick, чем вкладывать в ссылку блочные элементы. Ну это я про ваш пример (карточки товара)

@zerdox4

4 жыл бұрын

@@user-sh9es2uw1k ну или просто смириться, написать a{display:block}

@caezar47

4 жыл бұрын

@@zerdox4 смотрите w3.org все что касается сontent model у тегов. www.w3.org/TR/2018/WD-html53-20181018/textlevel-semantics.html#elementdef-a . У а он transparent так что можно. То о чем говорит Аня было актуально в HTML 4.

Отличное видео и очень интересная ведущая, мне нравится ;)

Полезные вещи есть, спасибо

Молодец, все по делу.

Спасибо за ролик) У тебя очень красивые голубые глаза😄😍😍

@m4.l1k

2 жыл бұрын

Это у неё линзы. Это легко узнать: по краям радужки чёрный цвет. Обычно он бывает у детей, и теряется с возрастом. Я не экперт и не т.п., просто говорю что узнал у тех кто разбирается.

спасибо за нужную информацию)

Красатоша!! Лайк и подписка)

спасибо. но для новичка (лично меня) тяжеловато для понимания, еще не все пройдено, но хочется заранее "подстелить соломки", поэтому неплохо бы было сделать все правила с наглядными примерами.

Спасибо полезно

Да уж, не ожидала , но ролик оказался полезным для меня.У меня имеется одна ошибка, озвученная в данном видео. Буду искоренять.

@KostiaBazrov

4 жыл бұрын

какая7

Глаза ух))). Остальное всё по делу. Спасибо

Я не допускаю ошибок в верстке, но мне тоже интересно

@hat7092

4 жыл бұрын

Обратите внимание на правило под номером 6. Оно Вам пригодится.

@user-ib6dk9gz7n

4 жыл бұрын

Я тоже не допускаю ошибок, ведь не ошибается лишь тот кто ни чего не делает))

@harrydrago1256

4 жыл бұрын

значит ты застрял на одном уровне или очень медленно прогрессируешь

Спасибо ты лучшая

Это мелочи для джунов, основная ошибка верстальщиков, что они вообще не думают о поддержке проекта, о цмс на которую будут ставить, о том что если блок повторяется на нескольких типовых страницах не надо верстать его каждый раз с новым неймингом, отсутствие переиспользования кода и прочее. В целом, архитектурного понимания проекта.

Документ h1.зелёный { color: green; } Нет транслитерации

Очень поверхностно. Многие правила не раскрыты. Плюс что с глазами? ОоООоо

Подписка! 👍

spisok-huisok - сильный нейминг, но делать я так конечно же не буду.

@AntiBandera

3 жыл бұрын

ошибка в написании hyisok-sosisok

Ну.... начало было простецкое.... Но потом стало интересно. :)

Любопытный жест при перечислении в самом начале😇 Часто бываешь в Европе?

Четко

Я новичок, не знал про существование такой вещи как валидатор) Только что взял и проверил свой последний проект и он оказался без ошибок! УХАХАХ, Я ПОРАБОЩУ МИР!) PS. Дико угарел с пункта №1)

Спасибо за видео. Можно ли использовать флекс для вертикального центрирования текста в кнопке? На сколько это правильно?

@annblok_webdev

4 жыл бұрын

Смотря какая разметка

Спасибо,

Э-эх.. Верстальщики верстают. А оптимизаторы потом перевёрстывают. Это особенно касается вложенных друг в друга ссылок и заголовков. Да и для некоторых блоков запрет на индексацию делать нада.

Привет Анна,подскажи пожалуйста как сделать адаптив под разные мониторы,вот у меня весь контент заключен в блок под мой монитор 1920 × 1080,когда в incperct ставлю 1366x768 то остается только 1/3 часть увеличенная,как сделать чтобы он адаптировался под все мониторы ?спасибо)

2:14 жиза 🤣🤣🤣

Здравствуй,скажи пожалуйста,как правильно расставлять объекты при верстке (с помощью position: absolute и position:relative или как-либо по-другому) Насколько я знаю при распределении объектов с помощью position,верстка будет ломаться при просмотре на меньших экранах,т.к при абсолютном позиционировании объект вырывается из кода и не масштабируется при изменении размера экрана.Буду очень благодарен за ответ!)

Полезно для начинающих. Но что то настолько серьезное лицо и голос, что я весь ролик ждал подвоха. Как будто где то накосячил.

Хороший и очень полезный урок! Хотя в вёрстке я ошибок не допускаю.

Привет! Подскажи как проверять php файлы на валидацию, используем на работе ninjucks

Анна, добрый день. Хотел поинтересоваться ведете ли вы индивидуальные курсы, если да, то сможете ли прочитать курс по предложенной мной программе? Цель выучить определенные темы быстро. Если вам интересно, то как можно с вами связаться?

Походу я смотрю Вас больше потому что ваша внешность привлекательна.😂🔥❤️

Анна, спасибо большое за полезную информацию. Хочу только посоветовать вам , без всякой критики и пафоса, - заняться правильным произношением в английском языке. Я слышу, что вы стараетесь правильно произносить, но многие слова говорите не совсем верно, взяв, например, тот же margin ['mɑ:ʤɪn]. Я считаю, что лучше указать человеку на небольшой огрех и таким образом помочь ему, чем промолчать и делать вид, что так и надо. Удачи вам!)

@user-cp3mv5px3j

Жыл бұрын

Тема видео не об этом, и ваше мнение не спрашивали про инглиш

@dimalesnoy9270

Жыл бұрын

@@user-cp3mv5px3j А я не спрашивал твоего мнения, так что гудбай!)

Глаза очень красивые )))

Всё уже освоил и на всём набил шишки, только про использовании кириллицы в псевдоэлементах впервые узнал Оо

Красивые глаза)

Вот бы найти хорошее видео с ответом на вопрос : как центрировать различные объекты при верстке

@annblok_webdev

4 жыл бұрын

Уже есть такие видео. На моем канале аж целых 2 ролика

@alexandersmurov1738

4 жыл бұрын

Почитай про флексбокс

Подскажите пожалуйста, а что делать если я хочу от блока до блока установить margin. то есть расстояние на котором они будут находиться. Учитывая что первый объект это квадрат (ширина, высота) а второй это ul (список) и между объектом получается расстояние 60px до первого пикселя у слова в ul. Но ul уже имеет свою высоту. Как узнать или убрать margin-top и margin-bottom в списках? Дайте пожалуйста совет(

Ох эти ваши глаза 🔥

Ты похожа на логотип Старбакс))

Анна inline Блок

Правило 17.. А лучше ..))

Начало 1:54

Правило №18 не совсем понял, спасибо!

@annblok_webdev

4 жыл бұрын

Вот пример ошибочной разметки codepen.io/anna_blok/pen/ZEzbaeW 1. Отделяем h1 верхним паддингом от навигации 2. Использует нижний маргин для кнопки, чтобы отделить его от нижнего блока 3. Блок page верный, т.к. расширяем его за счет верхнего и нижнего паддинга 4. Было бы верно, если бы мы обернули h1+p+button в div и обозначили бы для него класс. И повесили бы ему паддинг или маргин сверху и снизу (в зависимости от ситуации)

Спасибо за контент. Глаза стеклянные. Девочка красивая

Насчет object-fit:cover непонятно почему именно это значение свойства надо использовать.

Некоторые ошибки из этого списка принебрегают и опытные специалисты когда сроки поджимают))

По поводу ссылки и заголовка. Валидно и правильно обернуть h1 в ссылку. Может менее красиво, но ничего неправильного в этом нет. Тег a транспарентен.

Анна, что за редактор ты используешь в ролике?)

Хотел бы еще добавить что не стоит называть блоки привязываясь к дизайну макета а лучше делать более гибкие семантические названия исходя из функционала блока, то есть не section-slider-advanted или section-gallery-portfolio а просто slider или gallery или grid-gallery потому что сегодня вы используете слайдер для преимуществ или отзывов а завтра захотите еще где то его втулить

@fmleglrmglrml

4 жыл бұрын

Это тоже самое,что не использовать section , для разделения отдельных информационных/логических блоков , только внутри самой секции может быть несколько логических блоков и они должны быть помещены в див- контейнер что бы задать отступы

@vladi4507

4 жыл бұрын

@@fmleglrmglrml что мешает использовать модификаторы которые будут задавать кастомные стили дизайна но сам блок будет иметь только базовый набор стилей

@fmleglrmglrml

4 жыл бұрын

@@vladi4507 ничего,я отвечал на вопрос

Вопрос можно научитьсч ко всем htmlcssjsphp front ?

У вас глаза ахренительные!

впервые слышу про CSS-валидатор)

Спасибо за видео Я подписался!

if (вы оказались на лыжах без колес на асфальте) { значит с вашим внутренним календарём что-то не так; }

Нууууу я хоть и не начинающий, но на валидаторе не проверяю, а так по всем пунктам соответствую)

Ещё одна типичная ошибка новичков. Сразу ищут работу после hello world

Актуально, понятно, типично) Жаль только ни одна ссылочка у меня сверху не появилась. Подробный нейминг CSS классов есть на гитхабе github.com/yoksel/common-words

@annblok_webdev

3 жыл бұрын

Источник по ссылке был указан

PHP больше платят гораздо, там больше требуется людей, чем на пайтоне. На php 120 людей, а на python всего 55 людей

Не понял, почему обязательно нужно оборачивать в див и делать ему марджины.

Здравствуйте, а какое приложение вы используете при верстке для открытия psd макета?

@annblok_webdev

4 жыл бұрын

Photoshop преимущественно, либо Avocode / Zeplin

@tsoyroman4394

4 жыл бұрын

@@annblok_webdev Спасибо)

0:23 какие ошибки не стоит делать начинающим верстальщикам, а если ты уже не начинающий, то тебе можно?)

Подключил normalize думал скинет марджины и паддинги везде, чтобы руками не сбрасывать, но он зачем-то добавляет отступы для h1, которые только мешают

@eydeveloper

4 жыл бұрын

Потому что нужен reset.css для этого

Привет Анна, может подскажешь хороший бесплатный курс по созданию сайта на html и css для начинающих, что бы отработать именно css ?

@user-mw7fm4ec5p

2 жыл бұрын

Рекомендую пройти Любое обучающее видео на Ютубе по вёрстке, а потом скачать в интернете макет и попробовать что-то сделать самому. Если что-то непонятно - искать в интернете

Не могу понять это линзы или родной цвет радужки?

Это линзы?

За глазки лайк.

@user-gg1br5zo7m

4 жыл бұрын

Игорь Попрядухин привет я тоже куколд

я сейчас только учусь верстать и обольщен, что большинство ошибок мне удалось избежать просто немного подумав

@annblok_webdev

4 жыл бұрын

Здорово 👍🏻