Ошибки начинающих при верстке сайтов на HTML и CSS

[@SeoquickUa]

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

[@BrainsCloud]

именно так )

[@igr3943]

Ребята знают, о чём говорят))) небось частенько поправляют труды новичков и не только!

[@MrIncredible-mu5ec]

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

[@klirmio21]

1) 0:20 - Семантика 2) 1:23 - margin/padding 3) 4:55 - Фиксированная высота 4) 6:49 - Межстрочный отступ 5) 8:15 - Адаптация изображений 6) 9:53 - Логика блоков 7) 12:26 - Шрифты элементов форм 8) 13:59 - Ресайз текстового поля 9) 15:45 - Стилизация состояния фокуса 10) 17:33 - Оптимизация селекторов 11) 19:25 - Кнопки 12) 20:59 - Элементов может быть больше 13) 22:28 - Декоративные элементы

[@alexr4795]

Одно из самых полезных видео по вертске! Опыт, о котором не всегда прочтешь в статьях

[@maximvoloshin7602]

Много полезных мыслей, особенно про динамику контента. Одно печалит - слово «правильно». Ведь нет никакого «правильно» ни в вёрстке, ни в жизни. Есть «выгодно, потому что...». Семантика выгодна для людей с ограниченными возможностями и для роботов. Обёрточные блоки выгодны, когда есть возможность уменьшить объём кода. И padding можно применить к абзацу, если это выгодно по какой-либо причине. Думаю, стоит учить новое поколение разработчиков слову «баланс», а «правильно» не применять вовсе.

[@BrainsCloud]

Лови новый видос! Как твое лето? Загорел?

[@evgeniiryshkov7745]

Дима, исправь пожалуйста ошибку в названии видоса. Сейчас: "Ошибки начинающих при верстк[и]". А нужно сделать: "Ошибки начинающих при верстк[е]"

[@webit9026]

к сожалению загорела, а вот на море накупаться... хотя -все- _пол_ лета впереди

[@talapius]

Чувак, спасибо тебе большое за видосы. Очень помогает в обучении.

[@АнтонКуклин-и2у]

Учитель! Как вы научились такому мастерству вёрстки?)

[@01pigoso]

Самый классный канал для начинающих.Столько полезной информации,такая ясная и четкая подача,приятный спокойный голос,именно спокойный,а не скучно-монотонный.👍🔥🤩🌟

[@chejkokqwerty7994]

Доходчивый и познавательный контет вот, что мне нравится во всех ваших уроках, спасибо Дмитрий!

[@ВячеславСмагин101]

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

[@АлексКот92]

Узнал себя в 90% ошибок... По неопытности не осознаешь это, как ошибки. Спасибо за видео, крайне полезный контент, побольше бы таких!

[@eheheyeah]

Некоторое и не осознаешь по неопытности как ошибки, большое спасибо!

[@meshikime6469]

Отличный контент, отдельное спасибо за "верстку сайта с нуля". Намного интереснее учить делая что-то, а что не понял шарить на мдн. Респект автору.

[@Legat74]

Спасибо Дмитрий! В хорошем дизайне видно какие элементы активны и как это выглядит)).

[@BrainsCloud]

согласен, но это такая редкость )

[@yuriyzadorozhnyi3849]

Щиро дякую за контент , для початківця , яким я являюсь , це крутий канал .

[@yusheero]

Спасибо Дмитрий за такие нюансы. Ты избавил меня от лишних подзатыльников 😂

[@sergoilo1105]

спасибо! полезно, познавательно!

[@PavelM01]

Не ошибки, а прям урок! )) Спасибо, много полезного )

[@grindco732]

это вот прям супер видео, спасибо! такое ощущение как-будто ты за спиной у меня постоял 25 минут и тыкнул меня носом во все мои ошибки!) сохранил даже в закладки... все почему-то дают информацию о том как и что делать, но мало кто говорит как делать качественно, анализировать свою собственную работу, какие нюансы стоит учесть! спасибо, надеюсь еще будут подобные разборы ошибок или даже не ошибок, а просто подборка оптимальных решений для разных ситуаций

[@progerlife6690]

Кросс) Посмотрел ради удовольствия)Так как с версткой знаком)Спасибо и лайк))

[@kharkiv_inres5127]

Реально годний контент. Більше таких відео! Підбірка супер

[@lazylemur7761]

Крутой канал, даже для меня как опытного нашел не мало фишек на разных уроках твоего канала которые вообще не использовал, спасибо! С меня подписка и лайки под видосами

[@SIPIKEXE]

Очень зачетное видео, приятно смотреть и слушать, отличная подача, затронуты реально самые распространенные ошибки(недочеты)... 👍

[@Артемий-ф6н]

Все пригодилось, часто допускаю такие ошибки.

[@n1azar]

Спасибо. Все четко и по делу.

[@paid_actor__]

где ты раньше был боже, какой же балдежный контент

[@alexf1515]

Верстаю уже лет 30 и ничего из этого не знал, даже не думал, что так можно было, спасибо, полезно🤓

[@ИльяПрохоров-б4п]

11:44 Ты открыл мне Америку, я про это никогда не задумывался, спасибо)

[@danil_zavyalov]

Очень круто! Ждём продолжения!!

[@dj6man784]

Ох как мне повезло найти это видео до верстки))

[@Lok1goD]

Круто! После видосика пошел переделывать свою страничку)) из 11 ошибок представленных в видео, у себя нашел 5 )) Спасибо, полезное видео!

[@Mykhailo_Vdovychenko]

А вот это по делу! СПАСИБО! 👍 P.S. но кто учится верстке по твоим урокам, то меньше ошибок допускает. Это факт! Очень нравится твой стиль верстки и подача уроков.

[@argentalantbekuulu3428]

Хжжжжж

[@argentalantbekuulu3428]

Жхх

[@rtnjo6936]

Фуф, рад что прошел курсы по scss в начале) Шикарный голос и очень полезные замечания, думаю теперь что курсы с преподавателем были бы намного полезнее самостоятельного изучения)

[@Garik-e8l]

Супер! Все очень познавательно!

[@bestlife9681]

Спасибо ! Хотелось бы чтобы это была рубрика и чаще выходила в люди . Этот формат полезный.

[@dosodsin3624]

Очень годный ролик. Многое для себя подчеркнул

[@НурияВещагина]

Ну хватит уже "подчеркивать", ребзя. "Почерпнул"

[@АндрейВикулов-ы8м]

Супер! Спасибо за полезную информацию.

[@reflexop1074]

вы очень меня нравились я тоже учусь без вашего видео я ничего не с мог слелать вы очень хороший и професионал программист😘

[@crazyraccoon6995]

За адаптацию картинок, спасибо, а остальное я считаю совершенно очевидным. Большинство "ошибок" - это банальное не знание основ современной вёрстки.

[@german_ny]

object-fit лучше использовать для адаптации изображения. Способ из видео не всегда работает.

[@джамп]

Отличные советы, обязательно пересмотрю завтра, чтобы закрепить. Поставленная речь и приятная музыка порадовали, однако я бы поработал над произношением английского. Спасибо за контент 🙏💕

[@ZHenyuli4ka]

Ай всё. Подписался, видио сохранил для себя. Очень приятный голос, полезный контент.Все круто!И спасибо!

[@donvanetti4270]

Спасибо за труд!

[@наталиворон]

Очень полезно!Спасибо Дмитрий!!!

[@superzrus4607]

*Ого, буквально 2 недели назад начал учиться верстке, и по вашему ролику понял что ошибок очень много допускаю, спасибо!*

[@alexandercelevra2393]

Штошь, неплохо. Вёрстка для самых маленьких. Приятно было посмотреть. Когда я начинал кроме уроков Попова не было ничего толкового ещё. Про схлопывание margin'ов не упоминули, что очень важно при таком подходе. При работе с псевдоселекторами состояний ссылок лучше сразу запоминать порядок ‘LOVE’ (1. L - link 2. V - visited) and ‘HATE’ (3. H - hover 4. A - active). Я уже думал больше нигде не увижу Brackets, странный выбор редактора в сегодняшних реалиях. Best regards

[@OSK-IBA]

Вы мой первый Учитель! 😁 Спасибо вам! С вами я иду на правильный путь!

[@BrainsCloud]

Желаю успехов на вашем пути!

[@StarkeshBrose]

Большое спасибо за видео. Помню пол года назад, я смотрел видос по верстке Mogo и думал, что делает этот дядька. Не понимал ни свойств ничего просто тупа повторял, ну а сейчас все предельно понятно и знаю что делаю. Начал сейчас читать большую книгу css и также много таких мелких моментов оттуда подчеркиваю. Так что тем кто давно верстает, также советую ее прочитать лишним не будет. Так сказать залезете под капот. Еще раз благодарю за предоставленную информацию.

[@ИловМакс]

Про различия маржинов и паддингов интересно было

[@sergeikeller1861]

Просто супер! Спасибо за труды💪🏼

[@АлексейПоляков-ш5в]

Отличный контент. Крайне полезная информация от профессионала. Спасибо!

[@tommyangello3582]

классный разбор! нужно ещё! :)

[@danil_litvinov]

Спасибо огромное! Отличная манера подачи материала, посмотрел пока всего три твоих видео, но многие вещи которые не до конца понимал прояснились! Творческих успехов тебе! Буду дальше смотреть, подписался! Ещё раз спасибо!

[@olegbilko3683]

Спасио за видео! Полезно и доходчиво. Лучше сразу это предусмотреть, чем потом править сайтмного раз.

[@ВаняПушок]

Отличный материал, отличная подача. Не 80/20 где 80-сопли в отличие от большинства. Спасибо большое!

[@agentsmit09]

Сайты я редко верстаю, чаще верстаю WPF-приложения. Но пару трюков для себя отметил, которые я ранее не использовал. Оказывается можно проще делать. Спасибо, буду применять.

[@volodymyrsolianin2860]

Спасибо за видео. Очень структурно и наглядно

[@nataliabearden2222]

Дмитрий, изумительная подача материала / качество контента :) * Просто потому, что все остальное так круто: по-английски (1) 'margin' читается больше как 'мАрджин' (2) 'line height' = 'лайн хАйт' ('хэйт' = 'ненависть') (может быть важным, ежели продавать свой опыт на Западе :) ) А так: смотрю канал глубоко за полночь, и только вот сейчас подумалось, что мне по работе это, в общем-то, и не нужно :D Подписалась, поскольку - красота!

[@Slesar_MSR]

Большое вам спасибо Дмитрий

[@crazydew1118]

Класс, видео выпущено в моё 18-тилетие

[@overlord9659]

Огромное спасибо вам за ваш труд. И то что делитесь практическими знаниями.Все очень понятно и доступно. ))

[@FelixX138]

да , это очень полезно

[@guska8710]

Спасибо, что делаешь полезный контент для нас!

[@missisipi9992]

Отличный материал, спасибо)

[@yurakhomitskyi8762]

Спасибо за видео, все четко без воды

[@sevakvart1111]

Дмитрий, очень профессионально, 5+

[@bigthinks2290]

Классно-понятно! Больше таких видео!

[@ВикторВарварин]

Отличное и познавательное видео!

[@MaximVernigorov]

Благодарю Вас !!! Очень полезное видео, много у себя ошибок обнаружил и исправился после ваших подсказок!

[@arthurosipov8283]

Спасибо большое за качественную подачу материала. Подчерпнул для себя интересные приемы)

[@Aviritius]

Доступная подача. Благодарю

[@electronik9708]

Спасибо за видос! Информативно и полезно, особенно новичкам подойдёт

[@allabott8128]

Спасибо большое за видео, полезно!

[@aleksandrtarnopolskyi3646]

Спасибо за контент !

[@artema9267]

Спасибо за топ контент🙏

[@xPyc9x]

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

[@ЕвгенийКавецкий-ц6м]

Очень полезно!! Огромное спасибо автору

[@gratecray5455]

Спасибо! Ты отлично объясняешь!

[@ОльгаЛеонтьева-ц3з]

спасибо за информацию!!! лайк зачетный!

[@igorkulibaba7287]

Зачётный контент!!! Спасибо.

[@kristinaalex8025]

Клас! Спасибо большое! Полезные замечания!!

[@yehorsamoilenko7229]

Когда будут ещё верстки сайтов? Очень полезный контент, спасибо за это💪

[@BrainsCloud]

когда-нибудь будут

[@mixfix4501]

00:00 то самое чувство когда у тебя такая же мышь как на картинке)) (балдежное). Ну а видос Бомба!!!

[@DShpak27]

Отличный автор, спасибо за Вашу работу, единственное, свойство высота height произносится 'хайт', а не 'хейт'

[@elektro-dron4952]

Я только начинаю делать сайты на Photoshop и уже перешла к изучению по верстке сайта. Мне предлогали переходить на конструктор Тильда или Wordpres. Я сказала, что все это хорошо, но мне нужно покавыряться внутри сайта, на каких языках он пишется и как верстается. Пока работаю над сайтом, пишу на HTML5 и CSS3. Видео полезное. Благодарю🙏

[@SantaCluster]

вордпресс и тильда написаны на php

[@Tkmtermocomplex]

Ну да прям все верстальщики там любят многие Я помню ну там и я тоже я к ним отношусь люблю также верстать на девахи а вот я спасибо за такой видос я же просто не мог только что не мог верстать какой-то там по тебе Когда придумали решил там побаловаться слышишь ты молился и случилось ошибка вот ты буду такие только теперь использовать

[@cajiuk3718]

Про margin и padding это кончено спорно и я бы не сказал, что это ошибка. Каждый ... как он хочет, но надо было сказать в таком случае про схлопывание полей и свойство box-sizing. Чтобы новички понимали почему надо именно padding, а не margin и почему размеры в результате получились не те, которые ожидали. Да и новичкам показывать пример на flex-box верстке не самый удачный пример. Это выглядит, как куча свойств и что за wrap. Я бы новичкам посоветовал не плодить кучу классов, а взять хорошую книгу. Автор которой варится в этой кухне уже годов с цать и заучить селекторы. Хорошее замечание было по поводу тегов, полностью поддерживаю автора. Размер шрифтов лучше не указывать в пикселях, если нацелены на широкую аудиторию и многообразие устройств с различным разрешением экрана. Хотелось бы конечно увидеть в видео не только базовые упражнения, но и какие-нибудь "фичи " или интересные эффекты. Автору спасибо за видео.

[@JuggernautWare]

Какие книги посоветуешь?

[@gleb_bro8710]

@@JuggernautWare Зачем это спрашивать? Ты думаешь, что никто до тебя не задавался этим вопросом? Лучше забей в гугле "Какие книги хороши для изучения html?". По любому найдется Html senior developer который тебе ответит) qna.habr.com/q/25989 - только что погуглил, вот обсуждение про изучение html, css. Посмотри займет 2 минуты, а сэкономит много время на изучении.

[@JuggernautWare]

@@gleb_bro8710 спрашиваю, потому что полагал, что автор в теме и имеет что посоветовать.

[@tau3732]

Спасибо большое за видео! Всё очень наглядно, и для меня было полезно)👍

[@TheMatros063]

Спасибо друг! Хорошая шпаргалка для начинающих.

[@JoystickJunkies23]

Thank you for information !!!

[@sdfzzy]

спасибо, очень правильный подход к вёрстке. как заказчик говорю

[@BulatKarasaev]

Прекрасный голос и подача материала

[@Sashad2003]

Спасибо за урок. Одно хочу подметить: лучше тексты делать не в пикселях а например в "em". Если завтра клиент захочет поменять размер шрифта, запарится везде пиксели менять а с "em" поменял в body размер и все.

[@mnrovski]

Очень полезное видео,спасибо.

[@bunnybugs6623]

Спасибо! Быстро интерестно доступно

[@victors9585]

Видос - шикардос!!!1!!!!!!1!!

[@De_collapse]

Довольно полезное видео для начинающих, однако последний пункт - Декоративные элементы, довольно спорный. Согласен, что делать пустые элементы в html это bad practice и стоит избегать их, но и ставить вместо них псевдоэлементы, я считаю, не правильно, т.к. псевдоэлементы относятся к заголовку, а логически эта черта никак к заголовку не относится, т.е. получается некая логическая ошибка. Я обычно в таких случаях использую тег , ибо он логически подходит. Да, конечно придётся его копировать, но хороший код не значит маленький код. Хочу так же отметить, что в некоторых случаях у заголовка используются псевдоэлементы для различных целей, в таком случае тем более не стоит жертвовать псевдоэлементом. За видео - лайк)

[@noNickFifth]

Мне как начинающему очень полезно. Подписка конечно)

[@vitalhit]

Очень крутое видео!!! Много полезного узнал об верстки, чего не знал.

[@k3tna]

Полезно, спс. Хотя "хейт" и "текстар'ея" - это конечно сильно :D

[@4sARy]

Можно использовать свойство gap 21:40 В случае, если элементов ниже не будет, отступа лишнего не будет.

[@mexvision-3556]

Со space-between осторожнее, если в строке будет 2 элемента, они разъедуться как мои родители в 2007)))

[@slava_po]

Дмитрий спасибо!)

[@АлександрМарков-ч4в]

Видео класс, музыка тоже огонь но она видимо на столько хороша что отвлекает😂