Тёмный

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

BrainsCloud
Подписаться 177 тыс.
Просмотров 201 тыс.
50% 1

В этом видео разберем частые ошибки, которые делают начинающие верстальщики при верстке сайта на 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

Опубликовано:

 

8 май 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 333   
@SeoquickUa
@SeoquickUa 3 года назад
Когда пытаешься сверстать первый сайт, то не обращаешь внимание на какие-то мелкие ошибки и недочеты. К сожалению, если их вовремя не заметить и не убрать, то они перейдут от одного сверстанного сайта к другому. )) Спасибо, было полезно!
@BrainsCloud
@BrainsCloud 3 года назад
именно так )
@igr3943
@igr3943 3 года назад
Ребята знают, о чём говорят))) небось частенько поправляют труды новичков и не только!
@MrIncredible-mu5ec
@MrIncredible-mu5ec Год назад
я как-то видел вёрстку, где внутри тега был тег . И это делал человек с неплохими отзывами на фрилансе. Что обидно, ведь есть начинающие фрилансеры, которые делают в разы лучше, и при этом на них мало обращают внимания.
@klirmio21
@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 - Декоративные элементы
@user-uk7vq2ou9g
@user-uk7vq2ou9g Год назад
отличная скорость подачи материала и даёт четкое понятие, что ожидает тебя по ту сторону учёбы) спасибо, подписка с первого видео, ну и лайк конечно же
@chejkokqwerty7994
@chejkokqwerty7994 3 года назад
Доходчивый и познавательный контет вот, что мне нравится во всех ваших уроках, спасибо Дмитрий!
@eheheyeah
@eheheyeah 3 года назад
Некоторое и не осознаешь по неопытности как ошибки, большое спасибо!
@maximvoloshin7602
@maximvoloshin7602 3 года назад
Много полезных мыслей, особенно про динамику контента. Одно печалит - слово «правильно». Ведь нет никакого «правильно» ни в вёрстке, ни в жизни. Есть «выгодно, потому что...». Семантика выгодна для людей с ограниченными возможностями и для роботов. Обёрточные блоки выгодны, когда есть возможность уменьшить объём кода. И padding можно применить к абзацу, если это выгодно по какой-либо причине. Думаю, стоит учить новое поколение разработчиков слову «баланс», а «правильно» не применять вовсе.
@PavelM01
@PavelM01 3 года назад
Не ошибки, а прям урок! )) Спасибо, много полезного )
@bestlife9681
@bestlife9681 3 года назад
Спасибо ! Хотелось бы чтобы это была рубрика и чаще выходила в люди . Этот формат полезный.
@01pigoso
@01pigoso Год назад
Самый классный канал для начинающих.Столько полезной информации,такая ясная и четкая подача,приятный спокойный голос,именно спокойный,а не скучно-монотонный.👍🔥🤩🌟
@meshikime6469
@meshikime6469 3 года назад
Отличный контент, отдельное спасибо за "верстку сайта с нуля". Намного интереснее учить делая что-то, а что не понял шарить на мдн. Респект автору.
@stammeqt
@stammeqt Год назад
Спасибо Дмитрий за такие нюансы. Ты избавил меня от лишних подзатыльников 😂
@guska8710
@guska8710 3 года назад
Спасибо, что делаешь полезный контент для нас!
@sergeikeller1861
@sergeikeller1861 3 года назад
Просто супер! Спасибо за труды💪🏼
@progerlife6690
@progerlife6690 3 года назад
Кросс) Посмотрел ради удовольствия)Так как с версткой знаком)Спасибо и лайк))
@danil_litvinov
@danil_litvinov 3 года назад
Спасибо огромное! Отличная манера подачи материала, посмотрел пока всего три твоих видео, но многие вещи которые не до конца понимал прояснились! Творческих успехов тебе! Буду дальше смотреть, подписался! Ещё раз спасибо!
@n1azar
@n1azar 3 года назад
Спасибо. Все четко и по делу.
@yurakhomitskyi8762
@yurakhomitskyi8762 3 года назад
Спасибо за видео, все четко без воды
@user-jn8wj8ck4n
@user-jn8wj8ck4n 3 года назад
Все пригодилось, часто допускаю такие ошибки.
@danil_zavyalov
@danil_zavyalov 3 года назад
Очень круто! Ждём продолжения!!
@SIPIKEXE
@SIPIKEXE 10 месяцев назад
Очень зачетное видео, приятно смотреть и слушать, отличная подача, затронуты реально самые распространенные ошибки(недочеты)... 👍
@kharkiv_inres5127
@kharkiv_inres5127 3 года назад
Реально годний контент. Більше таких відео! Підбірка супер
@sevakvart1111
@sevakvart1111 3 года назад
Дмитрий, очень профессионально, 5+
@arthurosipov8283
@arthurosipov8283 3 года назад
Спасибо большое за качественную подачу материала. Подчерпнул для себя интересные приемы)
@alexr4795
@alexr4795 5 месяцев назад
Одно из самых полезных видео по вертске! Опыт, о котором не всегда прочтешь в статьях
@user-gr9ge3ek2y
@user-gr9ge3ek2y 2 года назад
Отличный контент. Крайне полезная информация от профессионала. Спасибо!
@superzrus4607
@superzrus4607 3 года назад
*Ого, буквально 2 недели назад начал учиться верстке, и по вашему ролику понял что ошибок очень много допускаю, спасибо!*
@electronik9708
@electronik9708 3 года назад
Спасибо за видос! Информативно и полезно, особенно новичкам подойдёт
@donvanetti4270
@donvanetti4270 3 года назад
Спасибо за труд!
@yuriyzadorozhnyi3849
@yuriyzadorozhnyi3849 Год назад
Щиро дякую за контент , для початківця , яким я являюсь , це крутий канал .
@igorkulibaba7287
@igorkulibaba7287 3 года назад
Зачётный контент!!! Спасибо.
@overlord9659
@overlord9659 3 года назад
Огромное спасибо вам за ваш труд. И то что делитесь практическими знаниями.Все очень понятно и доступно. ))
@FelixX138
@FelixX138 Год назад
да , это очень полезно
@Aviritius
@Aviritius 2 года назад
Доступная подача. Благодарю
@volodymyrsolianin2860
@volodymyrsolianin2860 2 года назад
Спасибо за видео. Очень структурно и наглядно
@user-bl1hg3it5v
@user-bl1hg3it5v 3 года назад
Узнал себя в 90% ошибок... По неопытности не осознаешь это, как ошибки. Спасибо за видео, крайне полезный контент, побольше бы таких!
@MaximVernigorov
@MaximVernigorov 3 года назад
Благодарю Вас !!! Очень полезное видео, много у себя ошибок обнаружил и исправился после ваших подсказок!
@alexf1515
@alexf1515 Год назад
Верстаю уже лет 30 и ничего из этого не знал, даже не думал, что так можно было, спасибо, полезно🤓
@artema9267
@artema9267 3 года назад
Спасибо за топ контент🙏
@grindco732
@grindco732 Год назад
это вот прям супер видео, спасибо! такое ощущение как-будто ты за спиной у меня постоял 25 минут и тыкнул меня носом во все мои ошибки!) сохранил даже в закладки... все почему-то дают информацию о том как и что делать, но мало кто говорит как делать качественно, анализировать свою собственную работу, какие нюансы стоит учесть! спасибо, надеюсь еще будут подобные разборы ошибок или даже не ошибок, а просто подборка оптимальных решений для разных ситуаций
@user-ej4fm1ng6y
@user-ej4fm1ng6y 3 года назад
Отличный материал, отличная подача. Не 80/20 где 80-сопли в отличие от большинства. Спасибо большое!
@user-jb3cd5uk2j
@user-jb3cd5uk2j 3 года назад
Очень полезно!! Огромное спасибо автору
@user-eb3yr9wc4k
@user-eb3yr9wc4k 3 года назад
Очень полезно!Спасибо Дмитрий!!!
@missisipi9992
@missisipi9992 Год назад
Отличный материал, спасибо)
@lazylemur7761
@lazylemur7761 3 года назад
Крутой канал, даже для меня как опытного нашел не мало фишек на разных уроках твоего канала которые вообще не использовал, спасибо! С меня подписка и лайки под видосами
@paid_actor__
@paid_actor__ 3 года назад
где ты раньше был боже, какой же балдежный контент
@rtnjo6936
@rtnjo6936 3 года назад
Фуф, рад что прошел курсы по scss в начале) Шикарный голос и очень полезные замечания, думаю теперь что курсы с преподавателем были бы намного полезнее самостоятельного изучения)
@bigthinks2290
@bigthinks2290 3 года назад
Классно-понятно! Больше таких видео!
@tau3732
@tau3732 Год назад
Спасибо большое за видео! Всё очень наглядно, и для меня было полезно)👍
@Legat74
@Legat74 3 года назад
Спасибо Дмитрий! В хорошем дизайне видно какие элементы активны и как это выглядит)).
@BrainsCloud
@BrainsCloud 3 года назад
согласен, но это такая редкость )
@tommyangello3582
@tommyangello3582 3 года назад
классный разбор! нужно ещё! :)
@gratecray5455
@gratecray5455 3 года назад
Спасибо! Ты отлично объясняешь!
@olegbilko3683
@olegbilko3683 3 года назад
Спасио за видео! Полезно и доходчиво. Лучше сразу это предусмотреть, чем потом править сайтмного раз.
@allabott8128
@allabott8128 3 года назад
Спасибо большое за видео, полезно!
@aleksandrtarnopolskyi3646
@aleksandrtarnopolskyi3646 3 года назад
Спасибо за контент !
@ZHenyuli4ka
@ZHenyuli4ka 3 года назад
Ай всё. Подписался, видио сохранил для себя. Очень приятный голос, полезный контент.Все круто!И спасибо!
@user-kp6en8gi9t
@user-kp6en8gi9t 3 года назад
Супер! Спасибо за полезную информацию.
@user-qp6pf7jh9x
@user-qp6pf7jh9x 3 года назад
Отличное и познавательное видео!
@user-vr4xb9zk1i
@user-vr4xb9zk1i 2 года назад
Большое вам спасибо Дмитрий
@sdfzzy
@sdfzzy 3 года назад
спасибо, очень правильный подход к вёрстке. как заказчик говорю
@Lok1goD
@Lok1goD 2 года назад
Круто! После видосика пошел переделывать свою страничку)) из 11 ошибок представленных в видео, у себя нашел 5 )) Спасибо, полезное видео!
@vitalhit
@vitalhit 3 года назад
Очень крутое видео!!! Много полезного узнал об верстки, чего не знал.
@user-nm7yi4ol6z
@user-nm7yi4ol6z 2 года назад
спасибо за информацию!!! лайк зачетный!
@user-mf4hx3tc4u
@user-mf4hx3tc4u 3 года назад
Спасибо большое))) Все просто и понятно!!!!
@bunnybugs6623
@bunnybugs6623 3 года назад
Спасибо! Быстро интерестно доступно
@glock-18
@glock-18 Год назад
Отличные советы, обязательно пересмотрю завтра, чтобы закрепить. Поставленная речь и приятная музыка порадовали, однако я бы поработал над произношением английского. Спасибо за контент 🙏💕
@slava_po
@slava_po 3 года назад
Дмитрий спасибо!)
@user-xt6lx6lo2c
@user-xt6lx6lo2c 2 года назад
Супер! Все очень познавательно!
@user-rr7jh7qk5m
@user-rr7jh7qk5m 2 года назад
Спасибо, познавательно!
@TheMatros063
@TheMatros063 3 года назад
Спасибо друг! Хорошая шпаргалка для начинающих.
@fluffyraccoon5648
@fluffyraccoon5648 3 года назад
на счет адаптив картинки хорошая тема была, лайк за это
@alexg0490
@alexg0490 3 года назад
Спасибо большое автору!
@user-rt4pn7xt4e
@user-rt4pn7xt4e 3 года назад
как всегда отличный контент
@user-xy1fp7sy8m
@user-xy1fp7sy8m 3 года назад
Спасибо, хорошие замечания)))
@kristinaalex8025
@kristinaalex8025 3 года назад
Клас! Спасибо большое! Полезные замечания!!
@tanya8111
@tanya8111 2 года назад
Очень полезное видео! Спасибо
@vinetempl7879
@vinetempl7879 3 года назад
Благодарю! Много полезного почерпнул из этого видео (:
@victorirzunov3108
@victorirzunov3108 3 года назад
Очень полезно. Спасибо
@Frontend-Developer-UA
@Frontend-Developer-UA 2 года назад
Очень круто и полезно, спасибо
@reflexop1074
@reflexop1074 2 года назад
вы очень меня нравились я тоже учусь без вашего видео я ничего не с мог слелать вы очень хороший и професионал программист😘
@uk-lych_sveta
@uk-lych_sveta 3 года назад
Спасибо, действительно полезное видео.
@victors9585
@victors9585 3 года назад
Видос - шикардос!!!1!!!!!!1!!
@dj6man784
@dj6man784 2 года назад
Ох как мне повезло найти это видео до верстки))
@jahongirmusayev658
@jahongirmusayev658 3 года назад
Очень полезно, спасибо!
@user-fd5le5bx9j
@user-fd5le5bx9j 3 года назад
Круто! Спасибо!)
@Noteeeeeee
@Noteeeeeee 2 года назад
Спасибо, очень полезно!!
@dosodsin3624
@dosodsin3624 3 года назад
Очень годный ролик. Многое для себя подчеркнул
@user-to9vh6ng2k
@user-to9vh6ng2k 2 года назад
Ну хватит уже "подчеркивать", ребзя. "Почерпнул"
@AironMS2
@AironMS2 3 года назад
Очень полезно и круто!
@dmitrypashula5489
@dmitrypashula5489 3 года назад
Димочка, очень полезное видео!!
@smuzi_flow
@smuzi_flow 3 года назад
Очень полезно! Спасибо
@BulatKarasaev
@BulatKarasaev 3 года назад
Прекрасный голос и подача материала
@user-td6zx2sm5y
@user-td6zx2sm5y 3 года назад
Супер! Спасибо!
@user-oj8oc8ur4v
@user-oj8oc8ur4v 2 года назад
Спасибо, полезное видео
@dimberlight679
@dimberlight679 3 года назад
четко, ясно и главное понятно
@sergoilo1105
@sergoilo1105 2 года назад
спасибо! полезно, познавательно!
@user-kx9dd1sh9k
@user-kx9dd1sh9k 11 месяцев назад
Спасибо большое 💓
@alex.v145
@alex.v145 2 года назад
Очень полезный материал
@elnurbda
@elnurbda 3 года назад
спасибо за видео ролик. узнал нового.
@MJ0101_
@MJ0101_ 3 года назад
как приятно слушать
@crazydew1118
@crazydew1118 3 года назад
Класс, видео выпущено в моё 18-тилетие
@inspirostudio
@inspirostudio 3 года назад
Спасибо. Очень полезно
@joker6745
@joker6745 Год назад
Thank you for information !!!
Далее
Я не знал, что HTML так может...
0:54