Ошибки начинающих при верстке сайтов на 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 - Декоративные элементы

[@maximvoloshin7602]

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

[@alexr4795]

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

[@01pigoso]

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

[@eheheyeah]

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

[@chejkokqwerty7994]

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

[@BrainsCloud]

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

[@evgeniiryshkov7745]

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

[@webit9026]

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

[@talapius]

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

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

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

[@stammeqt]

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

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

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

[@meshikime6469]

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

[@Legat74]

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

[@BrainsCloud]

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

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

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

[@sergoilo1105]

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

[@PavelM01]

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

[@yuriyzadorozhnyi3849]

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

[@ИловМакс]

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

[@crazyraccoon6995]

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

[@german_ny]

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

[@alexf1515]

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

[@dj6man784]

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

[@reflexop1074]

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

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

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

[@OSK-IBA]

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

[@BrainsCloud]

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

[@grindco732]

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

[@progerlife6690]

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

[@SIPIKEXE]

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

[@n1azar]

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

[@olegbilko3683]

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

[@lazylemur7761]

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

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

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

[@agentsmit09]

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

[@paid_actor__]

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

[@kharkiv_inres5127]

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

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

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

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

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

[@Mykhailo_Vdovychenko]

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

[@argentalantbekuulu3428]

Хжжжжж

[@argentalantbekuulu3428]

Жхх

[@джамп]

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

[@dosodsin3624]

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

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

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

[@bestlife9681]

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

[@Lok1goD]

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

[@superzrus4607]

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

[@danil_zavyalov]

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

[@donvanetti4270]

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

[@Garik-e8l]

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

[@sdfzzy]

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

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

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

[@MaximVernigorov]

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

[@xPyc9x]

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

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

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

[@ZHenyuli4ka]

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

[@StarkeshBrose]

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

[@volodymyrsolianin2860]

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

[@rtnjo6936]

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

[@crazydew1118]

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

[@Slesar_MSR]

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

[@Tkmtermocomplex]

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

[@DShpak27]

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

[@sergeikeller1861]

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

[@sevakvart1111]

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

[@overlord9659]

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

[@FelixX138]

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

[@yurakhomitskyi8762]

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

[@electronik9708]

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

[@alexandercelevra2393]

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

[@yehorsamoilenko7229]

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

[@BrainsCloud]

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

[@tommyangello3582]

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

[@Aviritius]

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

[@De_collapse]

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

[@arthurosipov8283]

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

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

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

[@Sashad2003]

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

[@elektro-dron4952]

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

[@SantaCluster]

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

[@TheMatros063]

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

[@guska8710]

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

[@danil_litvinov]

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

[@allabott8128]

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

[@aleksandrtarnopolskyi3646]

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

[@gratecray5455]

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

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

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

[@missisipi9992]

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

[@tau3732]

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

[@bigthinks2290]

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

[@xPyc9x]

тема про адаптив картинки выручала. если можно было поставить повторный лайк то я бы поставил, палец вверх 👍❤️🤘🏿

[@kristinaalex8025]

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

[@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 спрашиваю, потому что полагал, что автор в теме и имеет что посоветовать.

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

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

[@Ml-or4tx]

Спасибо, очень годно объясняешь

[@BulatKarasaev]

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

[@k3tna]

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

[@artema9267]

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

[@DIEZ919191]

Полезное видео, такое не прочтешь в документации!

[@igorkulibaba7287]

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

[@noNickFifth]

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

[@dmitrypashula5489]

Димочка, очень полезное видео!!

[@-Forever-Young-]

Хорошее видео, но хотелось бы ещё знать почему это должно быть так а не иначе.

[@4sARy]

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

[@slava_po]

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

[@bunnybugs6623]

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

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

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

[@Elena_Raffl]

Спасибо за видео! Как теперь это всё запомнить😅

[@ismadev9155]

Можно побольше таких видео