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

В этом видео разберем частые ошибки, которые делают начинающие верстальщики при верстке сайта на HTML и CSS. Разберем ошибки на практике и поделюсь своими советами.
Главы видео:
00:00 - 00:00:19 - Введение
00:00:19 - Семантика
00:01:23 - margin/padding
00:04:55 - Фиксированная высота
00:06:49 - Межстрочный отступ
00:08:15 - Адаптивные изображения
00:09:53 - Логика блоков и элементов
00:12:28 - Работа с элементами форм
00:13:59 - Верстка textarea
00:15:45 - Стилизация :focus
00:17:33 - Оптимизация селекторов
00:19:25 - Стили на разных тегах
00:20:59 - Элементов может быть больше
00:22:29 - Декоративные элементы
// О проекте =================
Меня зовут Дмитрий Валак. Я занимаюсь разработкой сайтов уже много лет, специализируюсь больше на front-end разработке и верстке сайтов, но и программирование тоже изучаю. Здесь буду делиться с вами информацией на разные темы по веб-разработке - HTML, CSS, Javascript, JQuery, Vue, PHP, MySQL, React, Gulp и тд.
На сайте проекта brainscloud.ru вы найдете много полезных закрытых материалов, а так же сможете поработать со мной лично, при наличии такого желания.
// Соц. сети =================
Мой ВК - odimaz
Группа BC - brainscloud
Мой Instagram: / dmitryvalak
#верстка #версткасайта #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]

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

[@BrainsCloud]

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

[@evgeniiryshkov7745]

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

[@webit9026]

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

[@talapius]

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

[@user-dr5xc9vu1h]

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

[@01pigoso]

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

[@stammeqt]

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

[@user-uk7vq2ou9g]

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

[@chejkokqwerty7994]

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

[@PavelM01]

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

[@eheheyeah]

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

[@bestlife9681]

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

[@meshikime6469]

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

[@danil_litvinov]

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

[@user-bl1hg3it5v]

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

[@SIPIKEXE]

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

[@Legat74]

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

[@BrainsCloud]

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

[@guska8710]

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

[@overlord9659]

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

[@FelixX138]

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

[@progerlife6690]

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

[@dj6man784]

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

[@arthurosipov8283]

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

[@sergeikeller1861]

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

[@user-gr9ge3ek2y]

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

[@kharkiv_inres5127]

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

[@user-jn8wj8ck4n]

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

[@grindco732]

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

[@danil_zavyalov]

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

[@n1azar]

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

[@sevakvart1111]

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

[@yurakhomitskyi8762]

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

[@MaximVernigorov]

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

[@user-ej4fm1ng6y]

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

[@yuriyzadorozhnyi3849]

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

[@user-pf4ji5nb3o]

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

[@reflexop1074]

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

[@volodymyrsolianin2860]

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

[@user-ql4xu5qu2u]

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

[@electronik9708]

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

[@ZHenyuli4ka]

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

[@superzrus4607]

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

[@paid_actor__]

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

[@tau3732]

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

[@missisipi9992]

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

[@bigthinks2290]

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

[@tommyangello3582]

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

[@user-qp6pf7jh9x]

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

[@user-eb3yr9wc4k]

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

[@alexf1515]

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

[@olegbilko3683]

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

[@Lok1goD]

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

[@dosodsin3624]

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

[@user-to9vh6ng2k]

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

[@rtnjo6936]

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

[@lazylemur7761]

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

[@glock-18]

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

[@gratecray5455]

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

[@crazyraccoon6995]

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

[@german_ny]

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

[@user-kp6en8gi9t]

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

[@user-jb3cd5uk2j]

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

[@Slesar_MSR]

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

[@donvanetti4270]

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

[@igorkulibaba7287]

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

[@user-nm7yi4ol6z]

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

[@Aviritius]

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

[@TheMatros063]

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

[@user-xt6lx6lo2c]

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

[@sdfzzy]

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

[@vitalhit]

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

[@user-rr7jh7qk5m]

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

[@artema9267]

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

[@crazydew1118]

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

[@fluffyraccoon5648]

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

[@allabott8128]

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

[@kristinaalex8025]

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

[@OSK-IBA]

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

[@BrainsCloud]

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

[@user-mf4hx3tc4u]

Спасибо большое))) Все просто и понятно!!!!

[@vinetempl7879]

Благодарю! Много полезного почерпнул из этого видео (:

[@ismadev9155]

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

[@bunnybugs6623]

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

[@sergoilo1105]

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

[@victors9585]

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

[@aleksandrtarnopolskyi3646]

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

[@tanya8111]

Очень полезное видео! Спасибо

[@uk-lych_sveta]

Спасибо, действительно полезное видео.

[@BulatKarasaev]

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

[@Noteeeeeee]

Спасибо, очень полезно!!

[@victorirzunov3108]

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

[@user-rt4pn7xt4e]

как всегда отличный контент

[@Frontend-Developer-UA]

Очень круто и полезно, спасибо

[@noNickFifth]

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

[@alex.v145]

Очень полезный материал

[@user-xy1fp7sy8m]

Спасибо, хорошие замечания)))

[@Mykhailo_Vdovychenko]

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

[@argentalantbekuulu3428]

Хжжжжж

[@argentalantbekuulu3428]

Жхх

[@dmitrypashula5489]

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

[@user-oj8oc8ur4v]

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

[@joker6745]

Thank you for information !!!

[@AironMS2]

Очень полезно и круто!

[@mixfix4501]

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

[@DShpak27]

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

[@jahongirmusayev658]

Очень полезно, спасибо!