Ошибки начинающих при верстке сайтов на HTML и CSS
Вставка
- Опубліковано 16 тра 2024
- В этом видео разберем частые ошибки, которые делают начинающие верстальщики при верстке сайта на 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
Когда пытаешься сверстать первый сайт, то не обращаешь внимание на какие-то мелкие ошибки и недочеты. К сожалению, если их вовремя не заметить и не убрать, то они перейдут от одного сверстанного сайта к другому. )) Спасибо, было полезно!
именно так )
Ребята знают, о чём говорят))) небось частенько поправляют труды новичков и не только!
я как-то видел вёрстку, где внутри тега был тег . И это делал человек с неплохими отзывами на фрилансе. Что обидно, ведь есть начинающие фрилансеры, которые делают в разы лучше, и при этом на них мало обращают внимания.
Много полезных мыслей, особенно про динамику контента. Одно печалит - слово «правильно». Ведь нет никакого «правильно» ни в вёрстке, ни в жизни. Есть «выгодно, потому что...». Семантика выгодна для людей с ограниченными возможностями и для роботов. Обёрточные блоки выгодны, когда есть возможность уменьшить объём кода. И padding можно применить к абзацу, если это выгодно по какой-либо причине. Думаю, стоит учить новое поколение разработчиков слову «баланс», а «правильно» не применять вовсе.
Не ошибки, а прям урок! )) Спасибо, много полезного )
отличная скорость подачи материала и даёт четкое понятие, что ожидает тебя по ту сторону учёбы) спасибо, подписка с первого видео, ну и лайк конечно же
Доходчивый и познавательный контет вот, что мне нравится во всех ваших уроках, спасибо Дмитрий!
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 - Декоративные элементы
Спасибо ! Хотелось бы чтобы это была рубрика и чаще выходила в люди . Этот формат полезный.
Кросс) Посмотрел ради удовольствия)Так как с версткой знаком)Спасибо и лайк))
Спасибо, что делаешь полезный контент для нас!
Некоторое и не осознаешь по неопытности как ошибки, большое спасибо!
Спасибо Дмитрий за такие нюансы. Ты избавил меня от лишних подзатыльников 😂
Самый классный канал для начинающих.Столько полезной информации,такая ясная и четкая подача,приятный спокойный голос,именно спокойный,а не скучно-монотонный.👍🔥🤩🌟
Отличный контент, отдельное спасибо за "верстку сайта с нуля". Намного интереснее учить делая что-то, а что не понял шарить на мдн. Респект автору.
Просто супер!
Спасибо за труды💪🏼
Спасибо огромное! Отличная манера подачи материала, посмотрел пока всего три твоих видео, но многие вещи которые не до конца понимал прояснились! Творческих успехов тебе! Буду дальше смотреть, подписался! Ещё раз спасибо!
Спасибо. Все четко и по делу.
Все пригодилось, часто допускаю такие ошибки.
Огромное спасибо вам за ваш труд. И то что делитесь практическими знаниями.Все очень понятно и доступно. ))
да , это очень полезно
Спасибо большое за качественную подачу материала. Подчерпнул для себя интересные приемы)
Спасибо Дмитрий! В хорошем дизайне видно какие элементы активны и как это выглядит)).
согласен, но это такая редкость )
Спасибо за видео, все четко без воды
Очень зачетное видео, приятно смотреть и слушать, отличная подача, затронуты реально самые распространенные ошибки(недочеты)... 👍
Реально годний контент. Більше таких відео! Підбірка супер
Очень круто! Ждём продолжения!!
Лови новый видос! Как твое лето? Загорел?
Дима, исправь пожалуйста ошибку в названии видоса. Сейчас: "Ошибки начинающих при верстк[и]". А нужно сделать: "Ошибки начинающих при верстк[е]"
к сожалению загорела, а вот на море накупаться... хотя -все- _пол_ лета впереди
Чувак, спасибо тебе большое за видосы. Очень помогает в обучении.
Учитель! Как вы научились такому мастерству вёрстки?)
Узнал себя в 90% ошибок... По неопытности не осознаешь это, как ошибки. Спасибо за видео, крайне полезный контент, побольше бы таких!
Отличный контент. Крайне полезная информация от профессионала. Спасибо!
Дмитрий, очень профессионально, 5+
Одно из самых полезных видео по вертске! Опыт, о котором не всегда прочтешь в статьях
Спасибо за видос! Информативно и полезно, особенно новичкам подойдёт
Спасибо за труд!
Спасибо за видео. Очень структурно и наглядно
*Ого, буквально 2 недели назад начал учиться верстке, и по вашему ролику понял что ошибок очень много допускаю, спасибо!*
Фуф, рад что прошел курсы по scss в начале) Шикарный голос и очень полезные замечания, думаю теперь что курсы с преподавателем были бы намного полезнее самостоятельного изучения)
Очень полезно!! Огромное спасибо автору
это вот прям супер видео, спасибо! такое ощущение как-будто ты за спиной у меня постоял 25 минут и тыкнул меня носом во все мои ошибки!) сохранил даже в закладки... все почему-то дают информацию о том как и что делать, но мало кто говорит как делать качественно, анализировать свою собственную работу, какие нюансы стоит учесть! спасибо, надеюсь еще будут подобные разборы ошибок или даже не ошибок, а просто подборка оптимальных решений для разных ситуаций
Зачётный контент!!! Спасибо.
Благодарю Вас !!! Очень полезное видео, много у себя ошибок обнаружил и исправился после ваших подсказок!
Очень полезно!Спасибо Дмитрий!!!
Очень годный ролик. Многое для себя подчеркнул
Ну хватит уже "подчеркивать", ребзя. "Почерпнул"
Отличный материал, спасибо)
Крутой канал, даже для меня как опытного нашел не мало фишек на разных уроках твоего канала которые вообще не использовал, спасибо! С меня подписка и лайки под видосами
Спасибо! Ты отлично объясняешь!
Верстаю уже лет 30 и ничего из этого не знал, даже не думал, что так можно было, спасибо, полезно🤓
Отличный материал, отличная подача. Не 80/20 где 80-сопли в отличие от большинства. Спасибо большое!
Спасибо за топ контент🙏
Большое вам спасибо Дмитрий
Щиро дякую за контент , для початківця , яким я являюсь , це крутий канал .
Классно-понятно! Больше таких видео!
Ай всё. Подписался, видио сохранил для себя. Очень приятный голос, полезный контент.Все круто!И спасибо!
Спасибо большое за видео! Всё очень наглядно, и для меня было полезно)👍
Доступная подача.
Благодарю
спасибо за информацию!!! лайк зачетный!
Супер! Спасибо за полезную информацию.
классный разбор! нужно ещё! :)
Круто! После видосика пошел переделывать свою страничку)) из 11 ошибок представленных в видео, у себя нашел 5 )) Спасибо, полезное видео!
где ты раньше был боже, какой же балдежный контент
Отличные советы, обязательно пересмотрю завтра, чтобы закрепить. Поставленная речь и приятная музыка порадовали, однако я бы поработал над произношением английского. Спасибо за контент 🙏💕
Спасибо большое за видео, полезно!
Отличное и познавательное видео!
Спасибо за контент !
Спасио за видео! Полезно и доходчиво. Лучше сразу это предусмотреть, чем потом править сайтмного раз.
спасибо, очень правильный подход к вёрстке. как заказчик говорю
А вот это по делу! СПАСИБО! 👍
P.S. но кто учится верстке по твоим урокам, то меньше ошибок допускает. Это факт! Очень нравится твой стиль верстки и подача уроков.
Хжжжжж
Жхх
Клас! Спасибо большое! Полезные замечания!!
Спасибо большое))) Все просто и понятно!!!!
Очень крутое видео!!! Много полезного узнал об верстки, чего не знал.
Вы мой первый Учитель! 😁 Спасибо вам! С вами я иду на правильный путь!
Желаю успехов на вашем пути!
Спасибо, познавательно!
Спасибо! Быстро интерестно доступно
Спасибо друг! Хорошая шпаргалка для начинающих.
Благодарю! Много полезного почерпнул из этого видео (:
Дмитрий спасибо!)
Спасибо большое автору!
Спасибо, хорошие замечания)))
как всегда отличный контент
Супер! Все очень познавательно!
Ох как мне повезло найти это видео до верстки))
Очень полезно. Спасибо
Очень круто и полезно, спасибо
на счет адаптив картинки хорошая тема была, лайк за это
вы очень меня нравились я тоже учусь без вашего видео я ничего не с мог слелать вы очень хороший и професионал программист😘
Очень полезное видео! Спасибо
Спасибо, действительно полезное видео.
Димочка, очень полезное видео!!
Когда будут ещё верстки сайтов?
Очень полезный контент, спасибо за это💪
когда-нибудь будут
Очень полезно, спасибо!
Круто! Спасибо!)
Очень полезно и круто!
Спасибо, очень полезно!!
Видос - шикардос!!!1!!!!!!1!!
Спасибо большое 💓
Очень полезный материал
Спасибо, полезное видео
спасибо! полезно, познавательно!
Прекрасный голос и подача материала
Про различия маржинов и паддингов интересно было
Thank you for information !!!
Супер! Спасибо!
Спасибо, очень годно объясняешь