Ошибки в HTML верстке сайтов. Никогда не верстай так
HTML-код
- Опубликовано: 7 июн 2024
- ↓↓↓ Тайм коды в описании под видео ↓↓↓
Показываю ошибки в верстке сайта на примере страницы оформления заказа. В конце как исправить плохую верстку.
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
💻 Бесплатный курс "Создай свой первый сайт на HTML5 и CSS3"
От установки редактора, до публикации в сети.
👉 Получить уроки, конспекты, макет и код из уроков: webcademy.ru/htmlsite/
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
💻 Курс по созданию и верстке сайтов: webcademy.ru/htmlstart/
Обучение с наставником, 3 месяца, результат, гарантия.
Научим создавать веб-сайты и зарабатывать на этом.
Старт обучения: 01 Июля 2024 года.
💻 Курс "Frontend разработчик. JavaScript + React": webcademy.ru/jscourse/
Обучение с наставником, 3 месяца, результат, гарантия.
Старт обучения: 03 Июня 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
Юра! Одно удовольствие смотреть твой разбор. Так здорово разложил всё. А решение с таблицей - просто супер! Спасибо!
Сергей, спасибо! Рад видеть тебя на канале 👋
Огромное спасибо Вам, Юрий! Оч познавательно, оч полезно! Успехов!
Спасибо, Юрий
Прекрасный обзор, многое подчеркнул для себя))
Спасибо! Четко, как всегда.
По макету сразу вспомнил bootstrap, можно было и не париться и на нем сверстать на скорую руку. Бывало что сам пихал эти псевдоклассы везде) Позновательно!
Очень интересно и приятно смотреть спасибо
Хорошее видео!! не знал что, кто-то верстает таблицы флексами)) буду теперь иметь в виду)) а по итогу h1 где должен быть? логотип в h1(Site Name -Site Caption)?
Класс, спасибо
Спасибо!
Спасибо! Интересное и познавательное видео.
Спасибо за Ваше видео. Вы padding-ами указываете отступы в таблице. А как же адаптивность под другие устройства? Не лучше ли изначально при верстке давать ширину в % чтобы потом меньше ломать голову при адаптации под мобильные устройства?
Таблица это хорошо но не факт что она подойдёт под мобильную версию. Иногда лучше сделать гридом
Super!
Можно ли увидеть как вы адаптируете таблицу под планшеты и смартфоны?))
Очень хочется это увидеть, если у вас есть такое видео на канале. Как сделать таблицу гибкой?
Фундаментальный ui косяк, был в том, что нужно каждый товар выводить на новой строке со своей ценой, и последней строкой итоговая стоимость корзины/заказа. Можно сделать раскрываемым списком, чтобы было удобно и лаконично при переходе на эту страницу.
Согласен. В примере это вообще ужас какой-то, а не верстка. За такую таблицу заказа верстальщику руки надо отбить.
А тэг section семантический? его часто используют в подобных примерах?
Спасибо
сейчас еще зайду на ваш бесплатный курс посмотрю что там
Spasibo, a shto takoe стики футер ?
спасибо
thank you
Круто! Мощнейший препод! 1 0месяцев назад, когда случайно попал на твой канал, че-то посмотрел мельком, подумал, вот лысый, только деньги хочет и т.д. но, спустя 10 месяцев, снова попал на твой канал и офигел, как же я был неправ! Все очень круто, попутное объяснение, даже тех моментов, которые не заявлены в уроке, которые расширяют кругозор в верстке и тд. Теперь есть точное понимание - брать однозначно твои платные курсы - ибо там никакой воды, сплошной концентрат опыта и актуальных, работающих знаний!
Благодарю за откровенный позитивный комментарий!) Независимо от выбора желаю успехов в изучении веб-разработки и получении новой специальности!)
@@WebCademy спасибо!!)) Прости, за предвзятость) шикарно делаешь качественный, полезный контент! Хоть и просмотров, лайков можно было желать больше, тем не менее, люди тебя не забудут и будут благодарны впредь))
а адптивность у таблиц нормальная?
you have been very useful for me
Видео очень вовремя. Верстаю макеты для портфолио. Вопрос: является ли ошибкой схожие классы в вёрстке с разными названиями. У меня десятки классов, наверное можна было обойтись меньшим числом. Большая ли это ошибка и стоит ли париться по этому поводу? И ещё, на что обращает внимание заказчик или работодатель когда смотрит портфолио?
Если задумываетесь о структуре классов, как называть, какие свойства на них вешать и как не делать лишних дублей, то рекомендую посмотреть в сторону методологии БЭМ нейминг, она решает эту проблему.
Смотрят на то как отображается и как работает верстка, проверяют на адаптивность. Семантика, структура кода, имена классов.
Юрий а как сделать стики футер будете показывать?)
Сделаю видео, скоро будет разбор тестового, там он будет. 👌
Да, всё понятно и логично. Но есть вопрос - как будет с адаптивностью у табличной формы на малых брейкпонтах, ниже 1000 пикселов ширины. Таблицы исходно не адаптивны, и надо городить какие-то дополнительные и довольно громоздкие костыли (видел такую реализацию с применением flex-box). Не проще ли сразу грамотно спроектировать такую форму сразу на флексах, а еще лучше - на гридах с применением autofit или autofill, с автоматическим добавлением ROW? Я вообще таблицы использую неохотно, разве что в файле для скачивания, где надо формировать список переменной высоты с несколькими рядами .
по поводу стики футер не совсем понятно, то белый кусок внизу не норм, а вот белый кусок прям по середине будет красиво?) оба варианта не очень, но по середине даже сильнее будет в глаза бросаться, потому что он вообще не логичный
что за тема в ide?
дякую
хочется купить курс зная при этом всю информацию из бесплаиных источников ))
И все-таки не хотелось бы уже использовать древнюю табличную верстку, а верстать на флексах.. И вместо отступов между элементами использовать flexbox свойства.. И так получиться более гибкий адаптив..
but you are vearry cool
А как сделать, чтобы твой проект попал на разбор?
В роликах с разборами в описании есть ссылка чтобы отправить свою работу.
У новичков обычно совсем другие проблемы как правило смещение контента верх или в сторону,а что тут автор рассказывает он только сам это знает.
Блин как бы хотелось обучиться , но блин с Туркмении как оплатить
Есть варианты. Оставляйте заявку, мы с вами свяжемся и вышлем ссылку на оплату.
из Туркмении нужно уезжать))))
Есть момент с таблицами, если сделать меньше контент в первой колонке(не три ссылки, а одну), колонка станет меньше все съедет. Отступы между колонками контролировать невозможно, что будет не по дизайну!
Самое первое, что за sticky footer не понял.
посмотрел видео и исписал 2 листа
Сколько ты таких бредовых комментов написал?
Подобных верстальщиков на фрилансе 99%. Я из-за этого сам начал изучал фронт для реализации своих проектов, даже при наличии возможности оплатить.
Первое, что приходит на ум в процессе просмотра, что эту верстку сверстали специально так криво чисто для видео контента, потому что нельзя так сверстать, когда что то делаешь серьезное.
Второе, по поводу прижатого подвала, так это вообще не ошибка, после таких обзоров предвижу, как начинающие верстальщики сразу начинают все свои верстки делать именно с такими подвалами и везде говорить, что именно так и надо. Вовсе не обязательно сразу бежать и прижимать подвал и те умники, которые на собеседовании проверяют верстку на такой подвал, скорее всего больше ничего не знают про верстку.
Подвал нужно прижимать только тогда, когда этого требует заказчик, когда сайт или его отдельные страницы будут долгое время иметь пустой контент или когда ты сам решил так сделать, но не потому, что именно так и нужно делать и только такой подход правильный.
Как показывает практика, очень много специалистов, хороших специалистов верстают свои шаблоны, которые расходятся по миру и не делают для них прижатого футера, это никакая не ошибка в общем понимании этого значения, так нужно делать только если этого требуют обстоятельства.
Тем более, что вариантов прижать футер много и универсального нет, какой то тебе не нравиться, какой то не подходит под структуру проекта, бывает, что в процессе верстки ты понимаешь, что выбрал не тот вариант для прижатия футера, а так тупо его прижать, чтобы показать на собеседовании, что ты умный, это глупо.
Довольно объемный комментарий.
1. Верстка была сделана не для видео контента. Я раньше проводил разборы верстки по работам подписчиков, там и не такое можно встретить.
2. По поводу sticky footer - тут можно подискутировать, но в целом лучше когда он есть, чем когда его нет, и после надо фиксить верстку. Добавить его несложно, на флексах для этого даже отдельную обертку делать не надо, все вешается на body. В видео отметил этот момент, потому что часто встречаю страницы которые на разрешении в 1440px по высоте - смотрятся не очень, именно из за отсутствия sticky footer.
В целом в моем понимании специалист - это тот кто сразу делает хорошо и качественно, и в силу своего профессионализма может предусмотреть определенные нюансы наперед. Приведу пример, из другой сферы. Делаю ремонт, дал задание строителям сделать розетки на кухне на фартуке. Две группы розеток, в разных концах кухни. Так они их сделали на разной высоте, и еще много других моментов, типа вы не уточнили, мы сделали как сделали.
По поводу того что есть разные способы реализации sticky footer и трудно выбрать какой-то один, для меня говорит о слабом владении этим приемом. Поясню на другом примере. Когда я не особо разбирался в оптимизации сайта под Google Page speed - я был готов спорить и рассказывать что это не столь важно, приводить в пример популярные сайты которые не имеют зеленой зоны в нем и так далее. Детально разобравшись с Google Page Speed и Lighthouse - я не вижу проблемы оптимизации верстки под него. Просто вопрос дополнительно затраченного времени. И в целом там дельные рекомендации, знание которых не будет лишним.
@@WebCademy Может быть вы и правы, если есть трудности с выбором, то может это и говорит о слабом владении, но я не писал, что мне это трудно, я лишь сказал, что есть несколько вариантов, как это сделать. Ну не знаю, я все равно останусь при своем мнении, не прижатый футер, это не ошибка верстки, если он не портит внешний вид сайта и убирать контент, только для того, чтобы посмотреть, прижат ли футер, чтобы убедиться в качестве верстки, это как то не серьезно, ну не тот, это аргумент, чтобы сказать, что так не нужно верстать.
Я ради интереса зашел на блог одного вебмастера у которого много полезной инфы на сайте, много видео уроков на Ютубе про то, как надо верстать и про ошибки верстки и тупо убрал весь контент в коде и подвал чудным образом прилип к шапке. Да и у вашей академии он не прижат, но не обязательно его прижимать, только если нужно.
Если верстаем лендинг, который явно будет на несколько экранов, то sticky footer там конечно не нужен. Если же делаем контентную или сервисную страницу - то есть повод задуматься. Для меня так.
Табличная вёрстка - это уже старая школа. Конечно такой таблицей можно даже весь сайт сверстать, как делали раньше. Лучше использовать гриды или html и хорошо знать JavaScript.
Насчёт таблиц, сейчас их стоит использовать исключительно для табличного контента. А таблица из примера в ролике, как бы это банально и очевидно не звучало, и по смыслу и по внешнему виду является таблицей.
Добавлю свои пять копеек. Таблицы там где они должны быть важны для поисковиков (search engine). Например список продуктов с оглавлением, или же расписание электричек все это по спецификации рекомендуется писать в таблицах.
"Лучше использовать гриды или html и хорошо знать JavaScript." - можно и гвозди микроскопом забивать, но зачем? Таблицы для представления табличных данных ещё вроде никто не отменял.
а я слышал что на таблицах никто не верстает,и поэтому пропустил этот урок)))
так и есть, ты всё правильно сделал)
i dont know what your name
Ну это нормально, поскольку в самом css да html, творится бордак. Почему бордак, потому что существует много способов двигать элементы на странцы, и просто не понятно, а что нужно применить, потому что и так может работать, и так будет работать, а как правильно хер его знает, вот он просто оставил это другим. Я поэтому терпеть не могу вёрстку, там бордак во всём, куча свойств, причем которые делают одно и тоже, и идут вечные споры. Один говорит нужно делать так, другой так, третий вот так. Да и что говорить сам html css насыщен костылями из коробки. Досих пор нет нормального инструмента чтоб делать позиционирования, бордак.
Отчасти я вас понимаю, но в ряде языков программирования тоже есть такая ситуация. Одну задачу можно решить разными способами. Поэтому разработчики выводят лучшие практики и используют их.
Не стоило своим изображением закрывать часть кода. Это создаёт определённое неудобство восприятия.
Про подвал полный бред, разве, что на пустом не готовом сайте да и то сомнительно, дальше смотреть нет смысла.
лысый из бразерс
Юра , можно вашу голову вместе с мозгами купить ?
Иначе ,как мне еще всю эту инфо……. иметь у себя в голове ? Вы крут нереально!
камон какая таблица? Сейчас время смартфонов, все это придется переделывать под мобилу перебивая цссом дефолтную таблицу, что тоже выглядит тупо, нет смысла вообще юзать таблицы сейчас, в 99,9% у вас будет мобильная версия и если вам не нужен геморой то не используйте в таких вариантах таблицу
Спасибо!