Семантика, семантическая верстка

  Рет қаралды 48,209

От 0 до 1

От 0 до 1

Жыл бұрын

Друзья, миллион споров, разговоров, качелей, когда люди говорят про семантику, иногда это заходит до фанатизма и светлой веры в теги как в религию, а в семантическую верстку как в институт. В этом видео мы поговорим про семантику, посмотрим справочники и самое главное семантически сверстаем сайтец.
Кодекс - html.spec.whatwg.org/multipage/
W3C - validator.w3.org/
Сайт курса по верстке - from0to1.com.ua/
Друзья, вы можете писать разметку по видео, или если вам так лучше взять
готовую разметку и макет на patreon - / from0to1
Подпишитесь на канал, если вам понравилось данное видео:
bit.ly/2IFzwBZ

Пікірлер: 177
@alksrlv
@alksrlv 3 ай бұрын
Смотреть твои видео одно удовольствие!👍И с пользой, и с юмором - ну просто кайф, подача уникальная. Спасибо тебе🤝
@ayla3524
@ayla3524 Жыл бұрын
Огромное спасибо за то что ты делаешь не смотря на тяжелое для вас время 🙏🏻 Дай Бог здоровья и долгих лет жизни тебе и твоей семье.
@vadymprokopchuk
@vadymprokopchuk Жыл бұрын
Благодарю
@user-bm5ge3mr9u
@user-bm5ge3mr9u Жыл бұрын
Рад сново видеть тебя! Вадим тебе 100% воздастся за твои труды! Как всегда жирный лайк! Береги себя и семью!
@vadymprokopchuk
@vadymprokopchuk Жыл бұрын
Благодарю
@user-hm4pv5ou7j
@user-hm4pv5ou7j Жыл бұрын
Спасибо, как вовремя! Я как раз искала информацию по этой теме. Просто подарок судьбы!
@IvanKhavilov
@IvanKhavilov Жыл бұрын
Как всегда супер. Доходит с первого раза. Новым видосам радуюсь как фильмам MARVEL)))
@J-Lany
@J-Lany Жыл бұрын
Топовый спикер!! С тех пор, как наткнулась на первое видео (не помню какое), смотрю только его! 🍾 Бодро, понятно и с душой ❤ Спасибо 🙏🏾
@artofmotivation9231
@artofmotivation9231 Жыл бұрын
Спасибо тебе большое за твои видео, можно сказать я на них вырос, сейчас работаю как реакт разрабочик, всё благодаря тебе
@danielkollm6893
@danielkollm6893 Жыл бұрын
Отлично!!! Как раз вовремя, очень кстати! А вообще, всегда с большим удовольствием и пользой проходят вечеринки! :)
@nioque
@nioque Жыл бұрын
Огромная благодарность за полезный материал!
@Aleksandrovich_Pavel
@Aleksandrovich_Pavel Жыл бұрын
Класс, спасибо огромное, за твои старания!🙏 Мир - круглый🌍😎
@JoeCode01
@JoeCode01 6 ай бұрын
Мир - плоский
@internationaluser86
@internationaluser86 Жыл бұрын
Годно, полезно даже бывалому верстальщику. 80% видео знал, но остальные 20% оказались очень полезными
@vadymprokopchuk
@vadymprokopchuk Жыл бұрын
спасибо
@solnceyarkoe
@solnceyarkoe Жыл бұрын
Спасибо, дорогой человек! 🌠 Мир всем!🙏🌍
@kemalgurbansahadow9631
@kemalgurbansahadow9631 8 ай бұрын
Аналогия про кодекс и барбоссу просто класс. От души посмеялся. Тут не только сухая теория но есть тонкий юморок.
@user-zl6mg7mr2u
@user-zl6mg7mr2u Жыл бұрын
Сижу,скучаю...А тут видосик от Вадима.Смотрю и запоминаю.Лайкосик загружен 😎
@anonymous_ua
@anonymous_ua Жыл бұрын
Большое спасибо за контент, очень приятно слушать тебя, полезно и чётко!
@kseniiaazovtseva6139
@kseniiaazovtseva6139 Жыл бұрын
Спасибо за урок) вы крутой, очень нравится, то что вы делаете. Доступно и познавательно)
@serjmarkelov9915
@serjmarkelov9915 Жыл бұрын
Спасибо, что в это непростое время несешь позитив и знания! Легко быть позитивным, когда светит радуга, но реальный характер проявляется в тяжелейших условиях. Спасибо, Вадос)
@user-xr4rd3pm1v
@user-xr4rd3pm1v Жыл бұрын
спасибо!! Шикарное видео!!! Самое главное => в вёрстке нет тега DIV, не одного. Красава !!! 👍
@andreykarolik7455
@andreykarolik7455 Жыл бұрын
Спасибо, все понятно. Очень приятный ритм повествования. Сперва подумал, что два часа - многовато, но уже в процессе понял, что так лучше запоминается. А в более сжатых видео других авторов просто делал много пауз, чтобы разобрать код, в итоге по времени ровно столько же, если брать на круг.
@user-zj6hf5od6y
@user-zj6hf5od6y Жыл бұрын
Спасибо огромное за канал!
@trener_win
@trener_win Жыл бұрын
Приятный человек, отличный материал, спасибо!
@user-vj3cu3wv9l
@user-vj3cu3wv9l Жыл бұрын
рад снова слышать твой голос!)
@pilot1847
@pilot1847 9 ай бұрын
Большое спасибо, доступным языком и все подробно, очень помог 👍
@sergeytikhonov6544
@sergeytikhonov6544 Жыл бұрын
как раз сейчас пытаюсь в этом разобраться и тут такой подгон!
@_Zola
@_Zola Жыл бұрын
Сижу верстаю твой марафон и тут на видосик, пошел за чайком.
@focus7033
@focus7033 Жыл бұрын
Тут кстати можно ещё о многом рассказать, жду еще видео по этой тематике )
@quercus4181
@quercus4181 Жыл бұрын
Огромное спасибо за то что ты делаешь несмотря на тяжелое для вас время. Город Герой Харьков!
@vadymprokopchuk
@vadymprokopchuk Жыл бұрын
спасибо
@user-gp5zx6xu1r
@user-gp5zx6xu1r Жыл бұрын
Спасибо за классный видос! Все как всегда круто. Подскажи пожалуйста, корректно ли упускать в таблицах thead и tbody (ты сделал просто через tr и td) . И второй вопрос по поводу декор изображений типа социальных иконок - Использование img best practice или использовать тег ( читал что есть негласная договоренность юзать именно его в случае с иконками, хоть он и заточен совсем под другое). Заранее благодарю за ответ!
@dmch-lr6ig
@dmch-lr6ig Жыл бұрын
Эх, хороший ты дядька, очень классно всё объясняешь, очень интересно, спасибо тебе большое. Я хотел бы купить курс, но мне к сожалению нельзя, но я не теряю надежд, что когда-то станет можно. Всех благ
@maximandreevskiy2154
@maximandreevskiy2154 Жыл бұрын
Классный и очень полезный контент)) Большое спасибо)))
@user-hx1qi7sw1q
@user-hx1qi7sw1q Жыл бұрын
Як завжди класний урок! Дякую)
@ElenaGalevskaja
@ElenaGalevskaja Жыл бұрын
Дякую, Вадим! суперовая тема :)
@senianga1
@senianga1 Жыл бұрын
тоже спорный вариант.... в данном случае наверное через CSS задать будет проще...
@yakub8798
@yakub8798 Жыл бұрын
спасибо за урок много полезного узнал
@user-zo6rp1xn8i
@user-zo6rp1xn8i Жыл бұрын
Спасибо! Посмотрю с удовольствием!;!👍
@user-db3fl4ri1l
@user-db3fl4ri1l Жыл бұрын
Отличное видео, от отличного человека
@user-bl4te2kg8v
@user-bl4te2kg8v Жыл бұрын
Супер, впрочем как всегда!!!
@vadymprokopchuk
@vadymprokopchuk Жыл бұрын
спасибо
@ruinxr9
@ruinxr9 4 ай бұрын
Благодарю за урок и за отличную практику 👍
@vadymprokopchuk
@vadymprokopchuk 3 ай бұрын
спасибо
@user-mk3ck6rk1s
@user-mk3ck6rk1s Жыл бұрын
Спасибо за материал. Будет ли продолжение в планее стилизации?
@OOOOOOOOOOOOOOOOOOOOOO333
@OOOOOOOOOOOOOOOOOOOOOO333 Жыл бұрын
Спасибо, очень полезно Интересно что это за тема у вас в VSСode ?
@sofiaalevi
@sofiaalevi Жыл бұрын
благодарю за информативное видео
@Serhii_P.
@Serhii_P. Жыл бұрын
Спасибо. И весело и понятно и главное правильно.
@julichka6527
@julichka6527 Жыл бұрын
Благодарю, было оочень полезно!
@vadymprokopchuk
@vadymprokopchuk Жыл бұрын
круть!
@diego199705vlad
@diego199705vlad Жыл бұрын
WoW. Супер, спасибо. 👍😄
@Hacker_Gamer777
@Hacker_Gamer777 Жыл бұрын
Лайк со старта
@zp300788sea
@zp300788sea 6 ай бұрын
Спасибо!!!Все легко и понятно.
@vadymprokopchuk
@vadymprokopchuk 6 ай бұрын
супер, так и задумано)
@yarovyy_max
@yarovyy_max Жыл бұрын
Дякую за чудовий урок
@vadymprokopchuk
@vadymprokopchuk Жыл бұрын
Дякую
@tatianaagapkina8658
@tatianaagapkina8658 Жыл бұрын
Ура, новый видос, хотела бы с латте маккьято посмотреть, но придется с тем, что под рукой
@MonteCrush.
@MonteCrush. Жыл бұрын
Очень важный урок на самом деле))
@vadymprokopchuk
@vadymprokopchuk Жыл бұрын
да да)
@user-ve7tx3ud6n
@user-ve7tx3ud6n Жыл бұрын
Спасибо Вадим.
@gomuncool1004
@gomuncool1004 Жыл бұрын
Спасибо, как всегда топ
@user-kc7id7jf6h
@user-kc7id7jf6h Жыл бұрын
Спасибо огромное))))
@denisvolkov4784
@denisvolkov4784 Жыл бұрын
Признавайся, Мурыча смотрел? Спасибо за контент мужик, это полезно.
@simurwtime
@simurwtime Жыл бұрын
Привет с ХТЗ! Спасибо за видео!
@vadymprokopchuk
@vadymprokopchuk Жыл бұрын
привет хтз!
@whoisleshalight8514
@whoisleshalight8514 Жыл бұрын
Было бы круто увидеть курс по wp
@flowcsgo804
@flowcsgo804 7 ай бұрын
И gg Good luck well played ауф ежжи экщкере бой марк руффало
@user-vo3ep1lr4e
@user-vo3ep1lr4e Жыл бұрын
СПАСИБО ОГРОМНОЕ,
@vladislav2023
@vladislav2023 8 ай бұрын
Я в ритме танца мне некуда деваться!)Вадя молодчик!✊️👍
@vanyg4786
@vanyg4786 Ай бұрын
Спасибо большое
@sivilrishar2927
@sivilrishar2927 Жыл бұрын
Ставлю жирный лайкосик под твой шикарный видосик )
@vadymprokopchuk
@vadymprokopchuk Жыл бұрын
спасибо
@sivilrishar2927
@sivilrishar2927 Жыл бұрын
@@vadymprokopchuk тебе спасибо 🥰
@g_a_m_b_e_t_t_o_r8920
@g_a_m_b_e_t_t_o_r8920 Жыл бұрын
Супер хороший контент ! Один вопрос 1:11:59 почему table без thead , tbody ?
@bogdanlazy1997
@bogdanlazy1997 10 ай бұрын
Король нативной рекламы прыжков с парашютом (just kidding) 😂 Спасибо за контент, дико крутая подача))
@user-dy5sv1gx4v
@user-dy5sv1gx4v Жыл бұрын
Приятно вас смотреть, спасибо!
@whoisleshalight8514
@whoisleshalight8514 Жыл бұрын
Спасибо
@WhiteHeterosexualMenHere
@WhiteHeterosexualMenHere Жыл бұрын
Хорош, Спасибо!
@zelenyigor6919
@zelenyigor6919 Жыл бұрын
Спасибо !!! Вадос, плиз скажи, а когда будем уже верску натягивать на WP ?
@vadymprokopchuk
@vadymprokopchuk Жыл бұрын
та хз, посмотрим
@HaivoX
@HaivoX 10 ай бұрын
Вопрос, вот есть верхнее меню, оно может быть навигацией, при клике прокручиваться к определенному блоку, а есть меню которое ссылается на разные страницы, а верстка меняется при разных вариантах, или по дефолту? и можно вот так писать пункты меню?
@hjgfgjughjgfhiiyk9714
@hjgfgjughjgfhiiyk9714 Жыл бұрын
Я смотрел куча роликов по верстке и своим содержанием мне они не нравились. Мне повезло что нашел данный ролик.
@user-ho2wd2ts6n
@user-ho2wd2ts6n Жыл бұрын
Спасибо!!!
@adaewandrei3725
@adaewandrei3725 Жыл бұрын
Спасибо!
@LenovoLenovo-lm1lh
@LenovoLenovo-lm1lh Жыл бұрын
Вадос огонь👌🔥
@Vladimir_Alexsandrovich_I
@Vladimir_Alexsandrovich_I Жыл бұрын
Вообще классная тема
@user-dv8co2zg9f
@user-dv8co2zg9f Жыл бұрын
Отличный материал! Наверно это первое видео, где я вижу прямые отсылки к спеке. Недавно тут спорил с одним "блохером" по поводу тега i. Он им все иконки делал в макете. Кто не знает, в последней спецификации HTML он уже не просто делает текст курсивом, а выполняет определенную семантическую задачу. Так вот, забавно было слушать, что спецификация фигня, главное это какой-то его сомнительный опыт и, как она сказал SEO.
@IgorBobyrev
@IgorBobyrev 2 ай бұрын
Нужно чтобы и семантика была правильной, и валидатор не ругался, и другие задачи выполнялись. Например, спецы натяжки верстки на Вордпресс просят подзаголовки оформлять тегом strong, а не Н#, не знаю почему. Может быть, по семантике не важно H1 один на сайте или несколько, но SEO однозначно требует, чтобы он был один. Если для заказчика SEO не нужно, то да, но опять же, если вам ничего не сказали, лучше учесть требования SEO, чем подкладывать им бомбу замедленного действия, чтобы когда им понадобится, они ничего не переделывали
@TarasAndriutsa
@TarasAndriutsa Жыл бұрын
благодарю за те що ти робиш це рухає вперед усю країну та планету
@user-nm2xm7dr3w
@user-nm2xm7dr3w Жыл бұрын
It's just awesome
@Nikolaishmidt
@Nikolaishmidt Жыл бұрын
Спасибо большое, Очень понравилась манера подачи! успехов вам и каналу. Скорейшей победы, чтобы наступил мир!
@user-uu4ig6kz5h
@user-uu4ig6kz5h Жыл бұрын
Спасибо.
@all_my_life
@all_my_life Жыл бұрын
Елемент , як правило, використовується разом з іншою інформацією в елементі , чи можна також використовувати в різниз та якщо там вказані поштові адреси, номери телефонів, адреси сайтів і електронної пошти, ICQ і так далі ? (тому що завжди накидував тупо в футері і все було ок) 😅
@vadymprokopchuk
@vadymprokopchuk Жыл бұрын
так, можна
@shani_desu
@shani_desu Жыл бұрын
Вадим, подскажите пожалуйста по такому вопросу: в секции "О нас" вы использовали dl-список для описания преимуществ. Можно ли через html добавить так же картинки/иконки в данном случае и правильно ли это будет? Или же корректнее делать через css? За видео бесконечное спасибо, очень помогаете новичкам!)
@Dendosha
@Dendosha Жыл бұрын
Не знаю, как следует это делать правильно, но валидатор ругается на наличие img в dl
@Dendosha
@Dendosha Жыл бұрын
На 1:01:31 Вадим сказал, что эти картинки вставляются в псевдоэлементы (т.е. через css)
@shani_desu
@shani_desu Жыл бұрын
@@Dendosha Да, не досмотрел просто изначально видео. Спасибо за ответ)
@Dendosha
@Dendosha Жыл бұрын
@@shani_desu Не за что)
@Vlad2807
@Vlad2807 Жыл бұрын
Добрый день, ответьте пожалуйста на несколько вопросов: 1. Когда-то было, что H1 был оберткой для логотипа, это уже не правильно? 2. dl список, как быть с картинками которые есть в макете их через СSS ставить с помощью псевдоелементов или как? 3. я так понимаю что на main можно будет повестить базовые какие-то свойства которые есть на всем сайте, div.container использовать уже чисто для того чтобы дать ширину сайту? 4. Более детально хотелось бы про ссылку и button, я так понимаю что button можно использовать когда будет какой-то попап или для работы с формами или для создания кнопок для вызова javascript событий, а при переходе лучше использовать ссылку или скрол по странице ? 5. Так и не понял зачем там кнопка под видео, какая ее роль? 6. А можно ли копирайт писать в span, помню раньше так делали или уже это не правильно?
@user-vj3cu3wv9l
@user-vj3cu3wv9l Жыл бұрын
Знаешь было бы интереснее если бы ты по очереди показывал теги и где они используются с мини вырезками из HTML кода
@user-wq3po9si9i
@user-wq3po9si9i Жыл бұрын
А макета в открытом доступе нет?
@luxarmiger5729
@luxarmiger5729 Жыл бұрын
Привет, Вадим! А мне удобнее верстать один блок, стилить его и затем делать для него адаптив и только потом переходить к следующему. Кстати, подобный подход я не сам придумал, а видел у кого-то из блогеров на стриме. Почему мне так больше нравится? - просто потому, что пока помнишь логику, названия классов, идешь, как говориться "по свежему следу".
@vadymprokopchuk
@vadymprokopchuk Жыл бұрын
Можно так, все зависит и от сложности макета
@luxarmiger5729
@luxarmiger5729 Жыл бұрын
@@vadymprokopchuk Вадим, я тебя тоже люблю (по-человечески). Ты отличный парень. Несколько лет смотрю твои ролики, уже родным стал...
@alexasanchobetherestors9962
@alexasanchobetherestors9962 Жыл бұрын
Мне тоже так удобнее. Отработал с одним блоком (включая адаптив), перешёл к следующему. И нет выноса мозга в конце, типо: "а чего у меня все поехало?! "
@user-xp6bb4zh7p
@user-xp6bb4zh7p Жыл бұрын
ти супер❣
@BRILLIANTIC1
@BRILLIANTIC1 Жыл бұрын
Дякую за рекомендації в кінці. Бо до цього верстав переважно тегами div і якось лякає така кількість тегів, у яких є особисте призначення... Але буду практикуватись, звичка до кожного тега прийде с часом UPD: спочатку здалось що відео лажа :) але потім втягнувся у твій стиль і ок зайшло. Рекомендація від мене: при монтажі відео вирізай великі паузи, можливо заминки і т.д., так відео буде трохи коротше, надалі не буде лякати глядачів кількістю хвилин. Але шуточки твої норм :)
@user-fi4eh3un9i
@user-fi4eh3un9i 8 ай бұрын
Лучший))
@seoonlyRU
@seoonlyRU Жыл бұрын
неплохо, неплохо))) лайк от СЕООНЛИ
@user-hs9zw4mk6o
@user-hs9zw4mk6o Жыл бұрын
Есть возможность скачать вашу свежую готовую сборку Gulp?
@pwufora
@pwufora Жыл бұрын
24:00 почему здесь, именно те, что справа, не могут быть ?
@fruit1941
@fruit1941 Жыл бұрын
Здраствуйте, у кого то была такая проблема в галп сборке то что на канале - TypeError: del is not a function. Т.е. где то на этом моменте происходит ошибка - function cleanDist() { return del('dist') } - Starting 'cleanDist'... [08:24:47] 'cleanDist' errored after 1.65 ms
@valehsalimov
@valehsalimov Жыл бұрын
Привет. Скорее всего ты установил последнюю версию пакета del и там есть изменения Загугли del npm - там описан новый способ работы Теперь он подключается import { deleteAsync, deleteSync } from 'del'; Соответственно там уже нет как таковой функции del, теперь deleteAsync либо deleteSync Я сильно не углублялся - просто в своей сборке заменил импорт и вместо del написал deleteSync
@localhost666
@localhost666 4 ай бұрын
Как называется тема для VSCode?
@icegouse
@icegouse Жыл бұрын
По таблице пару тегов не хватает. Я бы все таки использовал там параграф. А выделение уже тогда внутри его. Ибо на стилях проблемы будут.
@MrTopolevsky
@MrTopolevsky 9 ай бұрын
Дякую!
@anyutapererva4420
@anyutapererva4420 Жыл бұрын
Дякую за відео. Дякую за підтримку українців. Всі ми одна велика родина, яка називається Україна. Зашла на Ваш сайт та було приємно здивована, що курс не доступний для РФ та РБ. Буду дивитися далі. Вам наснаги та процвітання, та всім нам перемоги. Слава Україні!
@vadymprokopchuk
@vadymprokopchuk Жыл бұрын
Героям Слава!
@user-vj4rs5lv6p
@user-vj4rs5lv6p Жыл бұрын
@@vadymprokopchuk А що ж ти не захищаєш "Батьківщину", а бігаєш від повістки?
@user-kz5go4mp8w
@user-kz5go4mp8w Жыл бұрын
привіт, дякую за корисні відоси) Якщо будеш обирати тему для наступних відосів, зроби огляд основних css медіазапитів. Є деякі корисні, які ніхто не юзає. Типу any-hover)
@TarasAndriutsa
@TarasAndriutsa Жыл бұрын
super
@sevensevensev
@sevensevensev Жыл бұрын
спасибо мужик, ты крут, даже нет, крутость за пределами метагалактики
@user-pb1zu5wz9r
@user-pb1zu5wz9r Жыл бұрын
если работаешь с ВП то не редко бывает так что в ul вкладывается span т.е не симантично. Прокомментируй пж
@vadymprokopchuk
@vadymprokopchuk Жыл бұрын
это вп, там норм, проблемы с семантикой там не на первом месте
@ig89
@ig89 Жыл бұрын
Вадим как у тебя дела братишка? Очень любим тебя
@vadymprokopchuk
@vadymprokopchuk Жыл бұрын
спасибо, так как и у всех сейчас
@hachipoli822
@hachipoli822 Жыл бұрын
😍😍😍😍
@pwufora
@pwufora Жыл бұрын
1:11:53 почему здесь не может быть ?
БЭМ методология. Практический пример
1:39:41
ПООСТЕРЕГИСЬ🙊🙊🙊
00:39
Chapitosiki
Рет қаралды 47 МЛН
Why You Should Always Help Others ❤️
00:40
Alan Chikin Chow
Рет қаралды 47 МЛН
Шокирующая Речь Выпускника 😳📽️@CarrolltonTexas
00:43
Глеб Рандалайнен
Рет қаралды 11 МЛН
Countries Treat the Heart of Palestine #countryballs
00:13
CountryZ
Рет қаралды 12 МЛН
Grid сетки в CSS. Часть 1
24:29
Александр Дудукало
Рет қаралды 9 М.
flex-basis, flex-grow, flex-shrink. flexbox погружение
43:31
Верстка под cms
34:31
От 0 до 1
Рет қаралды 16 М.
Как создать выпадающее меню в React JS за 5 минут | React Dropdown Menu
5:12
Типичный Веб Разработчик
Рет қаралды 8 М.
FLEXBOX начало. Флексбокс верстка.
44:38
От 0 до 1
Рет қаралды 45 М.
37 ошибок верстальщиков. Не делай так!
44:50
MaxGraph - cайты как страсть
Рет қаралды 55 М.
Как я стал Верстальщиком
38:12
От 0 до 1
Рет қаралды 76 М.
ПООСТЕРЕГИСЬ🙊🙊🙊
00:39
Chapitosiki
Рет қаралды 47 МЛН