Ошибки новичка в HTML и CSS

Абсолютное позиционирование — Одно из первых ощущений силы, которое вы получаете, изучая CSS, — это то, что вы можете контролировать положение и размер любого элемента на странице, используя, по сути, координаты X, Y и размеры. Конечно, абсолютное позиционирование используется, но, как правило, не для реального содержимого страницы. Абсолютно расположенные объекты игнорируют все остальные объекты и ограничивают способность оставаться гибким с контентом.

Установка высоты (когда вам это не нужно) — это жажда контроля. Соблазнительно принудительно устанавливать высоту объекта, чтобы он «выглядел так, как вы этого хотите», но это действительно может испортить содержимое внутри этого объекта. В общем, не устанавливайте высоту, позволяйте вашим объектам расти в соответствии с тем, что находится внутри, и управляйте позиционированием с помощью margin, padding, и float. Посмотрите, что происходит в поле ниже, вы можете сделать высоту точно в соответствии с настройками шрифта, но затем, если пользователь увеличит контент, содержимое вырывается из поля и выглядит не очень.

«Много divov» — <div> — это общие разделители страниц, предназначенные для разбиения содержимого страницы на значимые разделы. CSS использует это совсем немного, что новички действительно замечают и зацепляют. Затем, когда они увидят, что вы можете управлять всеми видами вещей, предоставляя классы и идентификаторы div, они просто начинают использовать div для всего:

<div id="header">
  <div class="bold">Heading</div>
</div>

<div id="subheader">
  <div class="bold">Sub Heading</div>
</div>

<div>This is the content</div>

Это не нужно, а на самом деле, несколько вредно, так как поисковые системы обращаются к HTML, чтобы лучше понять содержание вашей страницы. Тег <h1> обозначает «заголовок», и, таким образом, поисковый робот придает больший вес странице и она становится семантически правильной

<h1>Heading</h1>
  <h2>Sub Heading</h2>
  <p>This is the content</p>

HTML дает вам теги для описания вашего контента. Используй их.

«Бессмысленные class» — когда новички применяют классы к вещам, которые им действительно не нужны. применять class = ”link” к тегу <a> совершенно бессмысленно, просто стилизуйте тег <a>. Если вам нужна ссылка на вашей странице в стиле, отличном от других ссылок, может быть целесообразно использовать класс, но примените имя класса, которое более наглядно, например, «footer_link» или «bold_link». Но помните, что если у вас есть пять ссылок в нижнем колонтитуле, имеет гораздо больше смысла стилизовать #footer a в вашем CSS, чем давать каждой ссылке класс в вашем HTML и вносить путаницу в код.

Смотрите еще

10 лучших бесплатных генераторов диаграмм HTML5 и SVG

Диаграммы и графики — это самый простой способ визуального представления данных. Люди часто используют диаграммы и графики в информационных панелях , таблицах, отчетах и ​​виджетах — все эти компоненты интерфейса содержат диаграммы. Итак, давайте взглянем на десять лучших бесплатных генераторов диаграмм HTML5 и SVG, которые можно встроить в ваш сайт. RAWGraphs Создавайте веб-визуализации из файлов CSV, Excel или JSON. RAWGraphs позволяет экспортировать визуализации в виде […]

Список бесплатных ресурсов для дизайна

Являетесь ли вы экспертом / новичком в сети и графическим дизайнером; бесплатные ресурсы для дизайна помогут вам распределить время по проекту и получить безупречный конечный результат. Интернет — это настоящая страна чудес бесплатных дизайнерских ресурсов, которые могут улучшить ваши проекты. В этом посте есть множество бесплатных ресурсов для дизайна, которые вы можете добавить в закладки. 25+ бесплатных ресурсов […]