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

Рет қаралды 23,048

Күн бұрын

↓↓↓ Тайм коды в описании под видео ↓↓↓
Показываю ошибки в верстке сайта на примере страницы оформления заказа. В конце как исправить плохую верстку.
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
💻 Бесплатный курс "Создай свой первый сайт на 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

Пікірлер: 74

@enterkvas 2 жыл бұрын

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

@SutrasSriSri 3 жыл бұрын

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

@WebCademy 3 жыл бұрын

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

@magicckiller9643 Жыл бұрын

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

@ink718 2 жыл бұрын

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

@manofsteppe179 3 жыл бұрын

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

@user-lm9ee1gn5p 2 жыл бұрын

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

@niceman5890 Жыл бұрын

Спасибо!

@alexandrs.1706 2 жыл бұрын

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

@user-og5xl6hv2o Жыл бұрын

Super!

@mb_later_man 2 жыл бұрын

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

@Sashad2003 2 жыл бұрын

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

@PreslerX Жыл бұрын

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

@user-ey1eq4ch4j Жыл бұрын

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

@pupizoid100 Жыл бұрын

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

@mak_whisk Жыл бұрын

Спасибо

@FA1F.W Жыл бұрын

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

@vladtroy6145 Жыл бұрын

спасибо

@TarasAndriutsa Жыл бұрын

thank you

@TarasAndriutsa Жыл бұрын

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

@rozelia_777 Жыл бұрын

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

@user-fd5le5bx9j 2 жыл бұрын

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

@WebCademy 2 жыл бұрын

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

@user-fd5le5bx9j 2 жыл бұрын

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

@TarasAndriutsa Жыл бұрын

you have been very useful for me

@Mirniyinostranes 8 ай бұрын

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

@spacenomoe 3 жыл бұрын

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

@WebCademy 3 жыл бұрын

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

@WebCademy 3 жыл бұрын

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

@ii-yj5qj 3 жыл бұрын

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

@WebCademy 3 жыл бұрын

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

@TarasAndriutsa Жыл бұрын

дякую

@user-ey1eq4ch4j Жыл бұрын

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

@frm-bestandfunnyvideos1661 2 жыл бұрын

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

@user-ml3zo9sd6b Жыл бұрын

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

@dogvscatfunny9956 Ай бұрын

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

@TarasAndriutsa Жыл бұрын

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

@vuviy1711 2 жыл бұрын

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

@_Fantom_. Жыл бұрын

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

@user-mf5wi8cc9g 2 жыл бұрын

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

@TarasAndriutsa Жыл бұрын

but you are vearry cool

@user-ho8qs1hb3u Ай бұрын

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

@errorgrisha 9 ай бұрын

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

@user-zg2fl7hg2r 3 жыл бұрын

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

@WebCademy 3 жыл бұрын

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

@romastyi83 2 жыл бұрын

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

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

@user-lu4rn4tm3v 3 жыл бұрын

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

@WebCademy 3 жыл бұрын

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

@manofsteppe179 3 жыл бұрын

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

@user-dq3ip9zz1r 3 жыл бұрын

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

@1MrAnonymous11 2 жыл бұрын

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

@user-hz8db3ih3t 2 жыл бұрын

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

@ParnithaRE1 4 ай бұрын

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

@Liverpoolfc_1892 Жыл бұрын

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

@WebCademy Жыл бұрын

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

@user-cb6yk8im4w 10 ай бұрын

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

@TarasAndriutsa Жыл бұрын

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

@worldchanger104 Жыл бұрын

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

@kaliningradskyiuser3087 Жыл бұрын

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

@WebCademy Жыл бұрын

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

@TarasAndriutsa Жыл бұрын

i dont know what your name

@SuperTRISTAN888 2 жыл бұрын

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

@user-jj5rt7dd9e Жыл бұрын

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

@lesters Жыл бұрын

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