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

День тому

↓↓↓ Тайм коды в описании под видео ↓↓↓
Показываю ошибки в верстке сайта на примере страницы оформления заказа. В конце как исправить плохую верстку.
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
💻 Бесплатный курс "Создай свой первый сайт на HTML5 и CSS3"
7 уроков по 30 мин: webcademy.ru/htmlsite/
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
💻 Курс по созданию и верстке сайтов: webcademy.ru/htmlstart/
Обучение с наставником, 3 месяца, результат, гарантия.
Научим создавать веб-сайты и зарабатывать на этом.
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
💻 Курс "Frontend разработчик. JavaScript + React": webcademy.ru/jscourse/
Обучение с наставником, 3 месяца, результат, гарантия.
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
🏁 Обучение с нуля
💁‍♂️ Обучение с наставником
🎯 Доведение с нуля до результата
🏢 Помощь с трудоустройством
💵 Поможем взять первый заказ на фрилансе
Тайм коды:
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

КОМЕНТАРІ: 74

@enterkvas 2 роки тому

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

@magicckiller9643 Рік тому

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

@manofsteppe179 3 роки тому

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

@ink718 Рік тому

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

@SutrasSriSri 3 роки тому

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

@WebCademy 3 роки тому

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

@user-lm9ee1gn5p 2 роки тому

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

@alexandrs.1706 2 роки тому

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

@niceman5890 Рік тому

Спасибо!

@user-og5xl6hv2o Рік тому

Super!

@mb_later_man 2 роки тому

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

@mak_whisk Рік тому

Спасибо

@Sashad2003 2 роки тому

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

@vladtroy6145 Рік тому

спасибо

@FA1F.W Рік тому

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

@TarasAndriutsa Рік тому

thank you

@TarasAndriutsa Рік тому

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

@PreslerX Рік тому

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

@user-ey1eq4ch4j Рік тому

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

@pupizoid100 Рік тому

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

@rozelia_777 Рік тому

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

@user-fd5le5bx9j 2 роки тому

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

@WebCademy 2 роки тому

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

@user-fd5le5bx9j 2 роки тому

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

@TarasAndriutsa Рік тому

you have been very useful for me

@TarasAndriutsa Рік тому

дякую

@spacenomoe 3 роки тому

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

@WebCademy 3 роки тому

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

@WebCademy 3 роки тому

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

@user-ey1eq4ch4j Рік тому

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

@frm-bestandfunnyvideos1661 2 роки тому

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

@TarasAndriutsa Рік тому

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

@Mirniyinostranes 7 місяців тому

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

@_Fantom_. 11 місяців тому

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

@user-ml3zo9sd6b Рік тому

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

@ii-yj5qj 3 роки тому

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

@WebCademy 3 роки тому

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

@vuviy1711 2 роки тому

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

@dogvscatfunny9956 29 днів тому

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

@TarasAndriutsa Рік тому

but you are vearry cool

@errorgrisha 8 місяців тому

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

@user-mf5wi8cc9g 2 роки тому

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

@user-ho8qs1hb3u 29 днів тому

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

@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 там конечно не нужен. Если же делаем контентную или сервисную страницу - то есть повод задуматься. Для меня так.

@romastyi83 2 роки тому

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

@user-lu4rn4tm3v 3 роки тому

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

@WebCademy 3 роки тому

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

@manofsteppe179 3 роки тому

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

@user-dq3ip9zz1r 3 роки тому

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

@1MrAnonymous11 2 роки тому

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

@user-hz8db3ih3t 2 роки тому

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

@user-zg2fl7hg2r 2 роки тому

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

@WebCademy 2 роки тому

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

@Liverpoolfc_1892 Рік тому

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

@WebCademy Рік тому

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

@user-cb6yk8im4w 9 місяців тому

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

@ParnithaRE1 3 місяці тому

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

@kaliningradskyiuser3087 Рік тому

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

@WebCademy Рік тому

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

@TarasAndriutsa Рік тому

i dont know what your name

@SuperTRISTAN888 2 роки тому

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

@user-jj5rt7dd9e Рік тому

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

@lesters Рік тому

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