Ошибки в HTML верстке сайтов. Никогда не верстай так

Подписаться 55 тыс.

Просмотров 23 тыс.

50% 1

↓↓↓ Тайм коды в описании под видео ↓↓↓
Показываю ошибки в верстке сайта на примере страницы оформления заказа. В конце как исправить плохую верстку.
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
💻 Бесплатный курс "Создай свой первый сайт на HTML5 и CSS3"
От установки редактора, до публикации в сети.
👉 Получить уроки, конспекты, макет и код из уроков: webcademy.ru/htmlsite/
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
💻 Курс по созданию и верстке сайтов: webcademy.ru/htmlstart/
Обучение с наставником, 3 месяца, результат, гарантия.
Научим создавать веб-сайты и зарабатывать на этом.
Старт обучения: 01 Июля 2024 года.
💻 Курс "Frontend разработчик. JavaScript + React": webcademy.ru/jscourse/
Обучение с наставником, 3 месяца, результат, гарантия.
Старт обучения: 08 Июля 2024 года.
💻 Курс "Разработка сайтов на PHP + MySQL":
webcademy.ru/phpcourse/
Создание сайтов с системой управления.
Присоединиться к курсу можно прямо сейчас.
🏁 Обучение с нуля
💁‍♂️ Обучение с наставником
🎯 Доведение с нуля до результата
🏢 Помощь с трудоустройством
💵 Поможем взять первый заказ на фрилансе
💳 возможна рассрочка
💳 если курс не понравится, вернём деньги в первую неделю
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
💈 Сайт школы ВебКадеми: webcademy.ru/
💈 Вступайте в группу Вконтакте: webcademy
💈 Подписывайтесь на Telegram: t.me/webcademynews
Тайм коды:
00:00 Начало
00:52 Sticky-footer
02:54 Семантика
04:12 Неправильная верстка таблицы
06:54 Поля ввода и цвет текста
08:24 Бесплатный и платный курс от ВебКадеми
09:19 Верстка контента, ссылки
14:09 Правильная верстка. Исправление работы
20:50 Отличие хорошей верстки, от плохой
Сайт школы ВебКадеми: webcademy.ru/
Вконтакте: webcademy
Telegram канал: t.me/webcademynews

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

11 июн 2024

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 74

@SutrasSriSri 3 года назад

Юра! Одно удовольствие смотреть твой разбор. Так здорово разложил всё. А решение с таблицей - просто супер! Спасибо!

@WebCademy 3 года назад

Сергей, спасибо! Рад видеть тебя на канале 👋

@enterkvas 3 года назад

Огромное спасибо Вам, Юрий! Оч познавательно, оч полезно! Успехов!

@magicckiller9643 Год назад

Спасибо, Юрий Прекрасный обзор, многое подчеркнул для себя))

@ink718 2 года назад

Очень интересно и приятно смотреть спасибо

@Sashad2003 2 года назад

Таблица это хорошо но не факт что она подойдёт под мобильную версию. Иногда лучше сделать гридом

@manofsteppe179 3 года назад

Спасибо! Четко, как всегда. По макету сразу вспомнил bootstrap, можно было и не париться и на нем сверстать на скорую руку. Бывало что сам пихал эти псевдоклассы везде) Позновательно!

@mb_later_man 2 года назад

Хорошее видео!! не знал что, кто-то верстает таблицы флексами)) буду теперь иметь в виду)) а по итогу h1 где должен быть? логотип в h1(Site Name -Site Caption)?

@niceman5890 Год назад

Спасибо!

@user-lm9ee1gn5p 2 года назад

Класс, спасибо

@alexandrs.1706 2 года назад

Спасибо! Интересное и познавательное видео.

@PreslerX Год назад

Фундаментальный ui косяк, был в том, что нужно каждый товар выводить на новой строке со своей ценой, и последней строкой итоговая стоимость корзины/заказа. Можно сделать раскрываемым списком, чтобы было удобно и лаконично при переходе на эту страницу.

@user-ey1eq4ch4j Год назад

Согласен. В примере это вообще ужас какой-то, а не верстка. За такую таблицу заказа верстальщику руки надо отбить.

@pupizoid100 Год назад

А тэг section семантический? его часто используют в подобных примерах?

@FA1F.W Год назад

Спасибо за Ваше видео. Вы padding-ами указываете отступы в таблице. А как же адаптивность под другие устройства? Не лучше ли изначально при верстке давать ширину в % чтобы потом меньше ломать голову при адаптации под мобильные устройства?

@user-og5xl6hv2o Год назад

Super!

@TarasAndriutsa Год назад

сейчас еще зайду на ваш бесплатный курс посмотрю что там

@mak_whisk Год назад

Спасибо

@rozelia_777 Год назад

Можно ли увидеть как вы адаптируете таблицу под планшеты и смартфоны?)) Очень хочется это увидеть, если у вас есть такое видео на канале. Как сделать таблицу гибкой?

@TarasAndriutsa Год назад

thank you

@vladtroy6145 Год назад

спасибо

@vuviy1711 2 года назад

а адптивность у таблиц нормальная?

@user-fd5le5bx9j 2 года назад

Круто! Мощнейший препод! 1 0месяцев назад, когда случайно попал на твой канал, че-то посмотрел мельком, подумал, вот лысый, только деньги хочет и т.д. но, спустя 10 месяцев, снова попал на твой канал и офигел, как же я был неправ! Все очень круто, попутное объяснение, даже тех моментов, которые не заявлены в уроке, которые расширяют кругозор в верстке и тд. Теперь есть точное понимание - брать однозначно твои платные курсы - ибо там никакой воды, сплошной концентрат опыта и актуальных, работающих знаний!

@WebCademy 2 года назад

Благодарю за откровенный позитивный комментарий!) Независимо от выбора желаю успехов в изучении веб-разработки и получении новой специальности!)

@user-fd5le5bx9j 2 года назад

@@WebCademy спасибо!!)) Прости, за предвзятость) шикарно делаешь качественный, полезный контент! Хоть и просмотров, лайков можно было желать больше, тем не менее, люди тебя не забудут и будут благодарны впредь))

@frm-bestandfunnyvideos1661 2 года назад

Spasibo, a shto takoe стики футер ?

@TarasAndriutsa Год назад

you have been very useful for me

@ii-yj5qj 3 года назад

Юрий а как сделать стики футер будете показывать?)

@WebCademy 3 года назад

Сделаю видео, скоро будет разбор тестового, там он будет. 👌

@user-ey1eq4ch4j Год назад

Да, всё понятно и логично. Но есть вопрос - как будет с адаптивностью у табличной формы на малых брейкпонтах, ниже 1000 пикселов ширины. Таблицы исходно не адаптивны, и надо городить какие-то дополнительные и довольно громоздкие костыли (видел такую реализацию с применением flex-box). Не проще ли сразу грамотно спроектировать такую форму сразу на флексах, а еще лучше - на гридах с применением autofit или autofill, с автоматическим добавлением ROW? Я вообще таблицы использую неохотно, разве что в файле для скачивания, где надо формировать список переменной высоты с несколькими рядами .

@spacenomoe 3 года назад

Видео очень вовремя. Верстаю макеты для портфолио. Вопрос: является ли ошибкой схожие классы в вёрстке с разными названиями. У меня десятки классов, наверное можна было обойтись меньшим числом. Большая ли это ошибка и стоит ли париться по этому поводу? И ещё, на что обращает внимание заказчик или работодатель когда смотрит портфолио?

@WebCademy 3 года назад

Если задумываетесь о структуре классов, как называть, какие свойства на них вешать и как не делать лишних дублей, то рекомендую посмотреть в сторону методологии БЭМ нейминг, она решает эту проблему.

@WebCademy 3 года назад

Смотрят на то как отображается и как работает верстка, проверяют на адаптивность. Семантика, структура кода, имена классов.

@user-ml3zo9sd6b Год назад

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

@user-mf5wi8cc9g 2 года назад

что за тема в ide?

@TarasAndriutsa Год назад

хочется купить курс зная при этом всю информацию из бесплаиных источников ))

@TarasAndriutsa Год назад

дякую

@_Fantom_. Год назад

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

@Mirniyinostranes 8 месяцев назад

Юра , можно вашу голову вместе с мозгами купить ? Иначе ,как мне еще всю эту инфо……. иметь у себя в голове ? Вы крут нереально!

@dogvscatfunny9956 2 месяца назад

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

@user-zg2fl7hg2r 3 года назад

А как сделать, чтобы твой проект попал на разбор?

@WebCademy 3 года назад

В роликах с разборами в описании есть ссылка чтобы отправить свою работу.

@TarasAndriutsa Год назад

but you are vearry cool

@errorgrisha 10 месяцев назад

Самое первое, что за sticky footer не понял.

@user-ho8qs1hb3u 2 месяца назад

Подобных верстальщиков на фрилансе 99%. Я из-за этого сам начал изучал фронт для реализации своих проектов, даже при наличии возможности оплатить.

@romastyi83 2 года назад

Есть момент с таблицами, если сделать меньше контент в первой колонке(не три ссылки, а одну), колонка станет меньше все съедет. Отступы между колонками контролировать невозможно, что будет не по дизайну!

@Liverpoolfc_1892 Год назад

Блин как бы хотелось обучиться , но блин с Туркмении как оплатить

@WebCademy Год назад

Есть варианты. Оставляйте заявку, мы с вами свяжемся и вышлем ссылку на оплату.

@user-cb6yk8im4w 10 месяцев назад

из Туркмении нужно уезжать))))

@TarasAndriutsa Год назад

посмотрел видео и исписал 2 листа

@worldchanger104 Год назад

Сколько ты таких бредовых комментов написал?

@user-er9tt1oi6s 3 года назад

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

@WebCademy 3 года назад

Довольно объемный комментарий. 1. Верстка была сделана не для видео контента. Я раньше проводил разборы верстки по работам подписчиков, там и не такое можно встретить. 2. По поводу sticky footer - тут можно подискутировать, но в целом лучше когда он есть, чем когда его нет, и после надо фиксить верстку. Добавить его несложно, на флексах для этого даже отдельную обертку делать не надо, все вешается на body. В видео отметил этот момент, потому что часто встречаю страницы которые на разрешении в 1440px по высоте - смотрятся не очень, именно из за отсутствия sticky footer. В целом в моем понимании специалист - это тот кто сразу делает хорошо и качественно, и в силу своего профессионализма может предусмотреть определенные нюансы наперед. Приведу пример, из другой сферы. Делаю ремонт, дал задание строителям сделать розетки на кухне на фартуке. Две группы розеток, в разных концах кухни. Так они их сделали на разной высоте, и еще много других моментов, типа вы не уточнили, мы сделали как сделали.

@WebCademy 3 года назад

По поводу того что есть разные способы реализации sticky footer и трудно выбрать какой-то один, для меня говорит о слабом владении этим приемом. Поясню на другом примере. Когда я не особо разбирался в оптимизации сайта под Google Page speed - я был готов спорить и рассказывать что это не столь важно, приводить в пример популярные сайты которые не имеют зеленой зоны в нем и так далее. Детально разобравшись с Google Page Speed и Lighthouse - я не вижу проблемы оптимизации верстки под него. Просто вопрос дополнительно затраченного времени. И в целом там дельные рекомендации, знание которых не будет лишним.

@user-er9tt1oi6s 3 года назад

@@WebCademy Может быть вы и правы, если есть трудности с выбором, то может это и говорит о слабом владении, но я не писал, что мне это трудно, я лишь сказал, что есть несколько вариантов, как это сделать. Ну не знаю, я все равно останусь при своем мнении, не прижатый футер, это не ошибка верстки, если он не портит внешний вид сайта и убирать контент, только для того, чтобы посмотреть, прижат ли футер, чтобы убедиться в качестве верстки, это как то не серьезно, ну не тот, это аргумент, чтобы сказать, что так не нужно верстать. Я ради интереса зашел на блог одного вебмастера у которого много полезной инфы на сайте, много видео уроков на Ютубе про то, как надо верстать и про ошибки верстки и тупо убрал весь контент в коде и подвал чудным образом прилип к шапке. Да и у вашей академии он не прижат, но не обязательно его прижимать, только если нужно.

@WebCademy 3 года назад

Если верстаем лендинг, который явно будет на несколько экранов, то sticky footer там конечно не нужен. Если же делаем контентную или сервисную страницу - то есть повод задуматься. Для меня так.

@1MrAnonymous11 2 года назад

а я слышал что на таблицах никто не верстает,и поэтому пропустил этот урок)))

@user-hz8db3ih3t 2 года назад

так и есть, ты всё правильно сделал)

@user-lu4rn4tm3v 3 года назад

Табличная вёрстка - это уже старая школа. Конечно такой таблицей можно даже весь сайт сверстать, как делали раньше. Лучше использовать гриды или html и хорошо знать JavaScript.

@WebCademy 3 года назад

Насчёт таблиц, сейчас их стоит использовать исключительно для табличного контента. А таблица из примера в ролике, как бы это банально и очевидно не звучало, и по смыслу и по внешнему виду является таблицей.

@manofsteppe179 3 года назад

Добавлю свои пять копеек. Таблицы там где они должны быть важны для поисковиков (search engine). Например список продуктов с оглавлением, или же расписание электричек все это по спецификации рекомендуется писать в таблицах.

@user-dq3ip9zz1r 3 года назад

"Лучше использовать гриды или html и хорошо знать JavaScript." - можно и гвозди микроскопом забивать, но зачем? Таблицы для представления табличных данных ещё вроде никто не отменял.

@TarasAndriutsa Год назад

i dont know what your name

@ParnithaRE1 4 месяца назад

Не стоило своим изображением закрывать часть кода. Это создаёт определённое неудобство восприятия.

@kaliningradskyiuser3087 Год назад

Ну это нормально, поскольку в самом css да html, творится бордак. Почему бордак, потому что существует много способов двигать элементы на странцы, и просто не понятно, а что нужно применить, потому что и так может работать, и так будет работать, а как правильно хер его знает, вот он просто оставил это другим. Я поэтому терпеть не могу вёрстку, там бордак во всём, куча свойств, причем которые делают одно и тоже, и идут вечные споры. Один говорит нужно делать так, другой так, третий вот так. Да и что говорить сам html css насыщен костылями из коробки. Досих пор нет нормального инструмента чтоб делать позиционирования, бордак.

@WebCademy Год назад

Отчасти я вас понимаю, но в ряде языков программирования тоже есть такая ситуация. Одну задачу можно решить разными способами. Поэтому разработчики выводят лучшие практики и используют их.

@SuperTRISTAN888 2 года назад

Про подвал полный бред, разве, что на пустом не готовом сайте да и то сомнительно, дальше смотреть нет смысла.

@user-jj5rt7dd9e Год назад

лысый из бразерс

@lesters Год назад

камон какая таблица? Сейчас время смартфонов, все это придется переделывать под мобилу перебивая цссом дефолтную таблицу, что тоже выглядит тупо, нет смысла вообще юзать таблицы сейчас, в 99,9% у вас будет мобильная версия и если вам не нужен геморой то не используйте в таких вариантах таблицу