Быстрая вёрстка: какие инструменты использовать и каких правил придерживаться

Виды вёрстки

Выделяют два наиболее распространённых вида:

• Табличная вёрстка;
• Блочная вёрстка.

Табличная вёрстка

С неё начинался веб — первые простейшие страницы на одном только HTML в содержали набор таблиц, внутри которых располагался контент.

При табличной вёрстке страница поделена на соседствующие друг с другом ячейки. Напоминает стандартную работу с таблицами в Excel.

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

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

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

Табличная вёрстка создаётся с помощью тега <table>. Он задаёт основные параметры таблицы — длину, ширину и другие. Ниже в иерархии идёт тег <tr>, создающий новую строку, а под ним уже располагаются теги <td>, задающие столбцы.

Блочная вёрстка

Более современный тип вёрстки — блочный.

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

Именно поэтому тег

— это номер №1 в такой верстке, потому что на его основе можно выделить шапку сайта, категории, отдельные текстовые элементы, логотип и так далее. При этом отдельный блок может содержать в себе отдельные HTML-элементы. Например, служит для выделения цитатыЕсли в этом блоке нужны заголовки, то в помощь

и так далее — важно лишь, чтобы это выглядело удобно для потенциального пользователя. 

Блочная верстка идет бок о бок с так называемым CSS. С помощью CSS можно менять размеры, цвет, границы, расположение и другие свойства блоков <div>. Например, в HTML-редакторе прописывается <div class=»one»></div>, а его фоновый цвет задаётся background: red. В итоге получится красный блок. А если мы хотим ограничить его размеры 200 пикселями, то напишем так: width: 200px и height: 200px. 

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

<div> обеспечивает адаптивный дизайн — это ценится в современных стандартах разработки и юзабилити.

Кто такой верстальщик сайтов и чем он занимается?

Верстальщик – это специалист, который создает HTML-шаблон для сайта на основе макета, предоставленного веб-дизайнером.

Говоря простыми словами, дизайнер рисует будущий сайт в виде условной «картинки». Однако браузеры (Google Chrome, Яндекс.Браузер и другие) картинки не понимают. Им нужен специальный код, который показывает программе, где вывести меню на странице, фотографии, текст и другие элементы, и какими они должны быть. Все это кодируется при помощи языка разметки HTML и каскадных таблиц стилей CSS.

Давайте разберемся, что делает верстальщик сайта, на примере. Вначале дизайнер присылает макеты в формате .PDF. Далее работа идет следующим образом:

• Из макета верстальщик берет фоны, логотип сайта, различные изображения, которые используются в дизайне, и сохраняет их в виде отдельных файлов на своем компьютере.
• Далее создает HTML-код, который сохраняется в отдельном файле. Этот код умеют читать и понимать браузеры. Отдельно к HTML-коду добавляются CSS-файлы, в которых описывается оформление разных элементов на страницах (размер шрифта, цвет шрифта, оформление таблиц, списков и т.д.).

• Далее файлы с HTML-кодом и CSS передаются разработчикам, которые интегрируют их в CMS – систему управления сайтом.

Однако верстка сайтов – далеко не все, что может делать верстальщик. В его обязанности может также входить:

• Верстка промо-страниц и лендингов.
• Верстка писем для E-mail рассылок.
• Устранение багов (ошибок) в верстке сайтов.
• Выполнение различных доработок: оптимизация HTML и CSS кода для ускорения загрузки сайта, внедрение адаптивного дизайна, кроссбраузерная верстка (т.е. такая верстка, которую одинаково интерпретируют разные браузеры).

• Верстка макетов веб-сайтов на основе PSD-макетов дизайнеров.

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

Почему семантика важна

Чтобы сделать сайт доступным. Зрячие пользователи могут без проблем с первого взгляда понять, где какая часть страницы находится — где заголовок, списки или изображения. Для незрячих или частично незрячих всё сложнее. Основной инструмент для просмотра сайтов не браузер, который отрисовывает страницу, а скринридер, который читает текст со страницы вслух.

Этот инструмент «зачитывает» содержимое страницы, и семантическая структура помогает ему лучше определять, какой сейчас блок, а пользователю понимать, о чём идёт речь. Таким образом семантическая разметка помогает большему количеству пользователей взаимодействовать с вашим сайтом. Например, наличие заголовков помогает незрячим в навигации по странице. У скринридеров есть функция навигации по заголовкам, что ускоряет знакомство с информацией на сайте.

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

Классический пример — расписание поезда «Сапсан» в выдаче Google.

Разработчики tutu.ru сверстали таблицу тегом table вместо div и их сниппет оказался в выдаче Google по важному коммерческому запросу. Семантика прописана в стандартах

Многие разработчики по старинке пользуются конструкциями типа

Семантика прописана в стандартах. Многие разработчики по старинке пользуются конструкциями типа <div id=»nav«> для обозначения навигации или других структурных элементов страницы. Тем временем в стандарте HTML есть несколько семантических тегов, которые рекомендуется использовать для разметки страниц вместо и . для каждого семантического элемента описана его роль.

Ну и представьте, насколько проще читать вместо . Или вот такой код. Смотрите и сразу понятно, что тут и зачем.

Верстка сайта: с чего начать

Прежде всего, необходимо иметь макет. Дизайнер создает его в графическом редакторе. Верстальщик получает уже готовый макет.

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

• Вырежите иконки, кнопки, картинки. Сложите графику в отдельную папку.
• Выпишите шрифты, которые необходимо будет отразить в CSS.
• Создайте файлы index.html и styles.css (можно назвать их по-другому). HTML – это будущая сверстанная страница сайта, CSS – файл стилей.
• Начинайте с шапки. Пропишите базовые элементы в теге head файла HTML. Здесь следует указать кодировку, путь к таблице стилей, title и т.д.
• Стратегия верстки. С левого угла дизайн-макета по диагонали вниз начинайте описывать страницу. Сначала «одевайте» в HTML шапку сайта (слева направо), потом спускайтесь ниже и заканчиваете переносом в код правой нижней части макета. Вы можете нарушить данное правило и производить верстку так, как вам удобно.
• Сначала верстайте структуру веб-страницы в HTML. Затем в CSS выносите идентификаторы и классы. Это можно делать параллельно с версткой. Каждый класс должен иметь адекватное название, которое дает понимание, что он означает. Смешно и непрофессинально выглядят названия типа «verh_shapki», «cherny_shrift_konec» и т.п.
• Закрывайте все теги, проверяйте правильность их вложения.
• Работа над HTML заканчивается, и верстальщик полностью переходит на работу с файлом стилей: дополняет его, дорабатывает и т.п.
• Стилизация выполняется в определенном порядке. Сначала элементу задаются общие правила (фон блока, отступы), затем специфические свойства типа цвета рамок, размещение картинок внутри блока и т.п..
• Возвращайтесь обратно к HTML-файлу, если странице необходима динамика. Для этого предусмотрены JavaScript-библиотеки. Например, можно сделать меняющийся слайдер или адаптивное меню. Код библиотек должен быть минимизирован.
• Тестирование и проверка на ошибки. Проверьте, как ведет себя страница в разных браузерах при разных разрешениях монитора. Можно пользоваться онлайн-сервисами или специальными инструментами типа
• Изучите страницу на валидность – отсутствие ошибок в коде.

Краткая предыстория

Привет, Хабр. Я читаю тебя без малого 10 лет, но ни разу не писал статей. Сначала сказать было нечего, потом — некогда. Но сегодня звёзды сошлись и подвернулась подходящая тема. Модульная сетка.

Казалось бы, набросать сетку — дело пяти минут. Всё разжёвано до нас, и бутстрапы есть на любой вкус, и «Аннушка уже пролила своё масло…». Но на практике у дизайнеров частенько возникают вопросы. Многих вводят в ступор даже небольшие отступления от привычных 12-колоночных сеток, потому что им не до конца понятны принципы построения.

Когда-то эту тему хорошо раскрывал цикл статей Алексея Черенкевича, но тексты пропали из открытого доступа. И хотя их ещё можно найти в архивах, сами тексты за прошедшие годы несколько устарели.

Notepad++

Это лучший редактор для Windows который я советую заменить стандартным, а все потому что мало того, что он может использоваться как обычный блокнот, а также имеет возможность подсвечивать синтаксис, выдавать подсказки, выводит и позволяет работать с кодировками файлов, так еще и имеет возможность работать с дополнительными плагинами.

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

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

Программа абсолютно бесплатная и не имеет никаких ограничений. Заходите на сайт notepad-plus-plus.org и качаете. Установка по большому счету, в этом же редакторе можно и программировать, и верстать без использования всяких IDE, но все же для этих целей я рекомендую другую программу о ней ниже.

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

Оптическая компенсация

Дизайнерам-перфекционистам бывает трудно понять этот момент. Сетка — это просто методология для упрощения расчетов. Это не символ веры, не закон мироздания, и не панацея. Более того, математические пропорции по чисто физиологическим причинам не являются идеальными для человеческого восприятия. Сетка не учитывает возникновение оптических иллюзий и искажений.

Поэтому, если ваш глаз сообщает вам, что какой-то элемент нужно сдвинуть на пару пикселей правее направляющей сетки, вы можете сделать это. (Не факт, что верстальщик заметит и сохранит ваш оптический костыль, но всё же).

Отдельный важный момент: элементы в сетке выравниваются по визуальной массе, а не по габаритным границам. Это значит, что (в идеале) круг, выровненный по левому полю, почти всегда окажется на несколько пикселей левее квадрата, который выровнен по тому же полю. А мелкий подстрочник под крупным заголовком почти всегда нужно смещать вправо, потому что оптически левый край первой буквы заголовка окажется правее, чем «по расчетам». Это частности оптической компенсации.

Таких тонкостей довольно много

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

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

Виды верстки сайтов

Фиксированная верстка или статическая

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

Резиновая верстка

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

Табличная верстка или верстка таблицами

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

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

Блочная верстка, верстка блоками или div-верстка.

Это, пожалуй, самая распространенная верстка сегодня. Сетка страниц конструируется из множества блоков

и , которые вложены друг в друга. Для доступа к ним используются атрибуты id и class. Откройте исходный код (Ctrl + U) практически любой веб-страницы, и вы увидите такую верстку.

Адаптивная верстка или мобильная верстка

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

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

Гибкая верстка или flex верстка

Сначала применяется блочная верстка, а потом нужные блоки превращают во флекс-контейнеры (флексбоксы). Если говорить сложным языком, в стилях элемента указывают display: flex; элементу можно указать направление главной оси и выравнивание. Эти возможности стали доступны с приходом стандарта CSS3. Теперь страницы становятся очень гибкими. Если по-простому – элементы объединяются в специальные контейнеры, задаются простые настройки и браузеры сами выстраивают элемент максимально органично. Этот механизм является наиболее перспективным, и, хотя технология плохо поддерживается старыми браузерами, в будущем ее применения будет расширяться.

Также хорошая верстка должна обладать некоторыми свойствами.

Семантическая верстка

Стала логичным продолжением блочной верстки, появилась в HTML5. Простыми словами – теги должны соответствовать информации, находящейся в них. Новые теги делают станицу более структурированной и понятными. Поисковики любят такие страницы.

Валидная верстка или по-другому верстка без ошибок

Это верстка, выполненная в соответствии со стандартами W3C. Проверить HTML-страницу на корректность вы можете с помощью специального валидатора W3C, а невалидно сверстанные страницы нагоняют.

Кроссбраузерная верстка.

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

Сейчас, при всем многообразии используемых программ, очень важно, чтобы все пользователи видели на экране одно и то же, чтобы ничего не съезжало и не перекашивалось

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

Сайты без адаптивной верстки считаются отстающими и несовременными, потому что доля посещений с мобильных устройств растет изо дня в день. Совсем скоро сайты, имеющие адаптивную верстку под мобильные устройства, оставят своих конкурентов позади.

В digital-агентстве PALAX работают высокопрофессиональные верстальщики, которые сделают так, чтобы Ваш сайт отлично смотрелся на любых современных устройствах.

Xampp

Да, я уже хвастался таким инструментом как prepros внутрь которого уже есть встроенный локальный сервер, но на самом деле не всегда его достаточно.

Локальный сервер штука очень полезная, а все потому, что если ты верстаешь для какой-то там cms то без него вообще практически не обойтись – разве что у тебя есть хостинг и ты предпочитаешь разрабатывать на нем. Хотя это лишнее даже если ты делаешь сайт с командой, а не сам.

Xampp может создать для тебя локальный apache server который в своем наборе может работать не только php файлами и но так же имеет и базу данных. Так ты легко можешь поставить себе какой-то там WordPress и верстать шаблоны именно для него. Причем эта программа абсолютно бесплатная без всяких там условностей.

С чего начинается сайт

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

Например, адаптивная верстка. Раньше у заказчика спрашивали – нужна ли ему мобильная версия сайта. Теперь об этом практически не разговаривают. Конечно нужна. Что такое адаптивная верстка? Сайт выполняют в двух вариантах.

Мобильная, облегченная версия, где самым главным будет скорость загрузки и информативность. Кроме того, не совсем стандартные размеры, если сравнивать с версией для отображения на компьютере. За ноутбуком люди, как правило, могут проводить дольше времени, а скорость соединения будет выше. Потому дизайн здесь будет посложнее.

История профессии

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

С развитием компьютерной техники и Интернета издательское дело претерпело революционные изменения. Многие полиграфические мощности уже закрылись, газеты и журналы массово перебираются во Всемирную сеть или как минимум имеют параллельную онлайн-версию. По этой причине профессия трансформировалась, и сейчас в основном работодателям нужен HTML-верстальщик. Современная информационная индустрия требует создания огромного количества многостраничных сайтов, поэтому спрос на таких IT-сотрудников очень велик.

Как точно не нужно делать

Не используйте семантические теги для украшательств. Для этого есть CSS.

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

Здесь сразу несколько ошибок:

1. Тег должен использоваться для выделения в тексте цитат, а не просто случайного выделения текста. Так совпало, что в браузерах этот блок по умолчанию выделен, но это не значит, что нужно его использовать таким образом.
2. Тег тоже использован для визуального «сдвига» текста. Это неверно, потому что этот тег должен быть использован только для обозначения списков, а во-вторых, в тег можно вкладывать только теги и ничего больше.
3. Тег использован, чтобы визуально раздвинуть текст. На самом деле этот тег используется для выделения параграфов.

А любое выделение, сдвиг или иные превращения текста можно выполнить с помощью CSS.

Поэтому используйте семантические теги по назначению.

Верстаем основную часть страницы

Далее настраиваем самый большой блок, на котором будет размещён весь уникальный контент. Он будет занимать 500px и располагаться в правой части сайта. Установим правила позиционирования, оформления заголовков, абзацев и ссылок (обо всех свойствах мы уже говорили в статьях по CSS).

#right
{
float: right;
width: 500px;
padding-right: 10px;
}

#right h4
{
	margin: 0;
	padding: 0px;
	font-size: 12px;
	color: #D72020;
}

#right a
{
color: #D72020;
text-decoration: none;
}

#right p {
	margin: 0;
	padding: 0;
	padding-bottom: 10px;
}

#right h2 {
	margin: 0;
	padding: 0;
	padding-top: 10px;
	color: #D72020;
}

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

Заполним контейнер right. Изображения поместим в простую таблицу.

<h2>Галерея</h2><br />
		<h2>Кухни</h2><br />
		<table cellspacing = 40>
		<tr>
		<td><img src="images/1mini.jpg" alt = "1"></td>
		<td><img src="images/2mini.jpg" alt = "2"></td>
		</tr>
		<tr>
		<td><img src="images/1mini.jpg" alt = "1"></td>
		<td><img src="images/2mini.jpg" alt = "2"></td>
		</tr>
		<tr>
		<td><img src="images/1mini.jpg" alt = "1"></td>
		<td><img src="images/2mini.jpg" alt = "2"></td>
		</tr>
		</table>

Контент получил разметку, но ему явно не хватает белого фона, полноценно который появится ещё не скоро.

Как сделать сайт максимально качественным

Теперь совет будет для тех, кто не готов сталкиваться с некоторыми трудностями. Порой, если вы создаёте себе свой собственный блог, можно в несколько раз упростить себе жизнь. Всё делается путём установки элементарной CMS, системы управления сайтом.

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

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

Да, когда вы делаете сайты на заказ, то предельно важно сделать реально уникальный дизайн. И простого шаблона может просто не хватить

Ведь человек может предоставить вам готовый вариант сайта в плане визуальной составляющей.

Когда вы делаете площадку для себя или клиент не просит чего-то конкретного, вполне можно обойтись CMS.

Вот ряд плюсов:

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

Как видите, плюсов реально много. А вот непосредственно будет приведён пример такой CMS, работа с которой доставляет исключительно удовольствие.

Что такое валидная верстка?

Понятие верстки тесно переплетается с понятием валидности. Валидная верстка веб-сайта — написание HTML и CSS кода, который соответствует стандартам W3C и успешно проходит тест на валидаторе.

Во-первых, данное понятие имеет огромное значение для SEO оптимизации сайта, поскольку грамотно построенный код положительно влияет на поведение поисковых роботов, а во-вторых валидный код — гарантия того, что верстальщик не допустил логических и синтаксических ошибок при программировании.

Страница даже с незначительными ошибками в коде не пройдёт через валидатор. Следует помнить, что лучший валидатор — браузер, поскольку восприятие сайта браузером — это восприятие сайта посетителем.

Базовые правила верстки сайта

Каковы основные правила качественной и грамотной верстки?

1. Вёрстка обязательно должна быть кроссбраузерной для Firefox, Opera, Safari, Google Chrome и Internet Explorer, который в последнее время теряет актуальность. Сайт должен быть протестирован на разных разрешениях монитора, начиная от 1024 на 768;
2. Вёрстка абсолютно всех страниц сайта должна пройти валидацию. Использование различных CMS, модулей и готовых скриптов, вставка на интернет-ресурс содержимого разных форматов зачастую затрудняют достижение валидности;
3. Внешний вид свёрстанной страницы должен по максимуму соответствовать дизайну: размеры шрифтов, расстояния между строками, отступы должны соответствовать параметрам psd макета. Достичь пиксельной точности зачастую затруднительно, поэтому допускается отклонение отдельных элементов в пределах 3-6 пикселей;
4. CSS стили должны быть вынесены в отдельный документ. В HTML коде допустимо только присутствие идентификаторов и классов;
5. Логотип веб-сайта должен являться ссылкой на главную страницу;
6. HTML страницы должны содержать комментарии к основным элементам, таким, как меню, заголовок, шапка, контент, футер и т.п.
7. Имена идентификаторов и классов должны соответствовать назначению и быть понятными интуитивно (menu, footer, header и т.д.);
8. В таблицах стилей настоятельно рекомендуется использовать одинаковые единицы измерения для всех величин;
9. Надписи на кнопках должны быть написаны на одном языке и либо прописными буквами, либо начинаться с заглавной;
10. Кнопки должны иметь стандартное оформление и быть либо графическими элементами, либо быть настроенными с помощью таблиц стилей;
11. HTML и CSS код должен быть минимизирован. Следует избегать лишних классов и идентификаторов и использовать свойства наследования;
12. Заголовки должны быть написаны исключительно с помощью специальных тегов h1, h2 и т.д;
13. Атрибуты всех тегов должны быть заключены в кавычки.

Как научиться верстать

Существует два типа верстальщиков. Одни знают только html, css и всякие плагины. Другие сочетают в себе профессию фронт-энд-программиста и учат еще и ajax, javascript, xml. Для чайников эти аббревиатуры ничего не означают и могут лишь запугать. Так что не будем о них.

В любом случае начинать нужно с HTML и CSS. Я рекомендую вам скачать бесплатный курс Евгения Попова, чтобы во всем разобраться. Полтора дня на просмотр видео и вы будете готовы сделать что-то сами.

Лучшую стратегию обучения я уже описывал. Не стоит бояться, нужно посмотреть как работают теги. Уже через несколько часов вы сможете написать что-то сами, разобраться в чужом коде. После нескольких выполненных проектов вы уже будете знать их наизусть. А если нет – всегда есть интернет, в котором найдется нужная подсказка.

Если вам понравилась эта статья – подписывайтесь на рассылку и я расскажу вам в разы больше, покажу как работать с кодами, вы узнаете множество нового и плагинах, пойдете как продвинуться в интернете.

Я желаю удачи, легкости в обучении и самого скорого нахождения полезных материалов. До новых встреч.