Что такое верстка сайта простыми словами

Модульность и виды подходов к вёрстке

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

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

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

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

Основными инструментами для вёрстки являются фреймы, таблицы и div. В стандарте HTML5 фреймы больше не поддерживаются, а для работы стали доступны «семантические» блоки: header, main, nav, section, article, aside, footer. Однако блоки не дают определённых преимуществ, а являются лишь «синтаксическим сахаром».

Табличный подход

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

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

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

На момент 2011 года табличная верстка считается устаревшей.

Вёрстка слоями

Слой (от имени тега <layer>) — разработка компании Netscape, использованная в браузере Netscape Navigator. Тег позволял показывать или скрывать его содержимое, устанавливать положение относительно окна браузера, накладывать слои друг на друга и включать содержимое блока из файла. В спецификацию HTML не был включён.

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

Блочная вёрстка — верстка с помощью тега <div> и описывающего их множество таблицы стилей (CSS). Тег появился вследствие сознательного отказа консорциума «CSS Positioning (CSS-P)» от тега <layer>, чтобы создать аналогичный тег, но с поддержкой CSS в духе остальных тегов. С помощью блочной верстки реализуют концепцию семантической вёрстки.

Вёрстка фреймами

Вёрстка фреймами — верстка с помощью одноимённого тега <frame>, который имеет иной способ позиционирования, а внутри себя включает отдельные html-страницы.

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

Фреймы плохо индексируются поисковыми системами, поскольку на страницах с содержимым нет ссылок на другие страницы сайта и наоборот, в навигационной странице нет никакого содержимого. Переход из поисковой страницы происходит на одну страницу, без загрузки других фреймов — навигации и логотипа. Внутренние страницы нельзя добавить в закладки, потому что браузер не показывает изменения в адресной строке, отображая всегда только адрес сайта. Совместимость между браузерами противоречива. Одни и те же параметры интерпретируются браузерами всегда по-своему.

Верстка таблиц и формул

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

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

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

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

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

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

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

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

Обратите внимание, что если формуле в вашем тексте предшествует короткая конечная строка какого-то текста, то формулу сверху отбивать не нужно, даже частично

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

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

Адаптивная верстка сайта: что это такое

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

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

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

Профессия веб-верстальщика: обязанности, знания и навыки специалиста

Итак, верстальщик сайтов – кто это такой? Это специалист, который создает HTML страницы из предварительного сделанного макета. Макет – это не что иное, как дизайн будущего сайта, разработанный веб-дизайнером.

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

Что должен знать верстальщик сайтов

Чтобы создавать уникальные и качественные HTML страницы, специалист данного направления обязан уметь оперировать:

• фотошопом;
• основными инструментами языка программирования РНР и HTML.

Это еще не все, что нужно знать для верстки сайтов

Чтобы работа продвигалась успешно, важно иметь, хотя бы, базовые знания в сфере HTML. Без этого рассматриваемый процесс будет неосуществим

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

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

4. Grid (сетка).

Как правило .psd макет веб-дизайнер разбивает на колонки(12, 24 и прочие извращения). Самостоятельно подгонять под сетку с помощью отступов, это издевательство над собой. Поэтому лучше воспользоваться сетками от фреймворков. Самая известная от Bootstrap. Bootstrap — это свободный набор инструментов. Который закрывает сразу множество задач по верстке. Поэтому советую изучить его и использовать как повседневный инструмент в верстке.

Есть еще менее известные сетки, но не значит, что они хуже остальных, например:Skeleton илиSmart-Grid(Дмитрий Лаврик), — это вообще самое лучшее что может быть в сетках для быстрой и качественной верстки сайтов.

CSS верстка сайтов

Что такое CSS и как с помощью этого верстать сайты и html страницы?
Сейчас для верстки используют такие технологии! Только успевай учится и применять. Но все же как ни крути база для верстки это CSS ( Cascading Style Sheets — каскадные таблицы стилей).

Основа верстки строится на прописывании стилей для каждого элемента сайта. Стили можно прописывать внутри тегов  HTML параметром style=” (тут пишут стили)” . Например:

<div style="width:100%; height:200px; color:#fff;">Это блок с какой то информацией</div>

Но чаще всего, для удобства и быстрой работы сайта, все стили сайта собирают в файле с расширением .CSS и подключают эти внешние стили на страницах сайта между тегами <head></head> таким образом:

<head> <link href="style.css" rel="stylesheet"> </head>

В параметре href=”” нужно указать путь к вашему файлу стилей CSS . Можно также указывать несколько файлов для страницы вот так:

<head> 
<link href="style.css" rel="stylesheet">

<link href="main.css" rel="stylesheet">

</head>

Каким образом прописываются стили в файле с расширением .CSS?

Для начала скажу, что для верстки страницы к ее элементам присваивается определенный класс или id. Если сказать просто, то разница состоит в том, что элементов одинаковым классом может быть бесконечное множество на странице, а определенный id элемента только один.

Указываются эти классы и id так:

<a href="#" class="ssilka"> Ля ля ля</a> 
<a href="#" id="menu-link"> Тополя</a>

Наименования классов и id произвольны, но должны быть прописаны только латинскими буквами и цифрами.

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

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

Для классов это указывается так:

.class-name{ тут прописываются стили}

Для id :

#id-name{тут прописываются стили}

Вот кусок стилей из моего файла style.css

.cod { 
color: #124377;
border-radius: 5px; 
border: 1px solid #A58888; 
background-color: #fff; 
width: auto; 
}
.zayavka{
 width:100%; 
float:left; 
background: #093e43; 
color: #fff; text-align:center;
font-size:150%; padding: 3%;
} 
.zayavka a{
 color: #fff;
 }

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

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

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

Ребята, , чтобы быть в теме новостей блоггинга и веб-мастерства.

Основные правила

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

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

Сплошной текст верстать совсем несложно

Обратим внимание, что оформление начальных полос при этом может быть трех видов, все это способы верстки текста:

• со спуском;
• со спуском, но с инициалами;
• со шмуцтитулом в виде «шапки».

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

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

Если текста на странице немного, его нужно вмещать в предыдущую полосу, либо увеличить таким образом, чтобы он занимал не менее четверти полосы на следующей странице

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

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

Это основные способы преобразования верстки текста, которые можно применять и для сложного текста.

Идеальная вакансия

• Умеет делать адаптивную кроссбраузерную оптимизированную вёрстку, совместимую с современными браузерами. В вёрстке использует SVG.
• Идеально знает CSS. Использует препроцессор Sass. Знает флексы. Умеет делать CSS-анимации и использует БЭМ. Знает библиотеку Bootstrap.
• Знает HTML. В своей работе использует canvas. Шаблонизирует HTML с помощью PUG.
• Использует Git. Умеет работать в GitHub.
• Может натянуть вёрстку на CMS: Bitrix и WordPress.
• JavaScript пишет с помощью jQuery, но не чурается ES6.
• Умеет автоматизировать свою работу с Node.js, npm-скипты, Autoprefixer, Gulp или Webpaсk.
• Уверенно владеет Photoshop и Illustrator или знает Figma или Sketch.
• Имеет своё портфолио, инициативный, готов пройти испытательный срок

Верстальщический вундерлист

Кроссбраузерная оптимизированная вёрсткаSVGSass CanvasPUGGitНатянуть вёрстку на CMSBootstrapjQueryнечто, npm-скрипты, Autoprefixer, Gulp, Webpack

А портфолио откуда брать?

• Найти бесплатных макетов и наверстать.
• Придумать самому, если есть Дизайнерская Жилка.
• Пройти полноценную подготовку к работе и получить пару проектов в портфолио. 

Что об этом всём думают ребята из индустрии?

Катя Иванова, перевела бабушку на ReactПо опыту: нужно точно, быстро и адаптивно. 
Точно — значит по макету: надо уметь открыть psd и померить отступы. Быстро — значит код легко изменять и его можно переиспользовать: надо знать препроцессоры и уметь правильно разделить макеты на компоненты (приходит с опытом). Адаптивно то и значит: надо знать про медиа-запросы и уметь нафлексить флексами резиновую вёрстку, или на гридах. 
Чтобы собрать своё добро, нужно знать, где скачать Node.js, как скачать пакет из npm и уметь пользоваться Webpack или Gulp (если он ещё не умер): пожать, минифицировать, запустить хот-релоад. И да, Git, нужно выучить десяток базовых команд. Это необходимый минимум.
В идеале нужно освоить базовый JavaScript и React, чтобы верстать компоненты сразу на нём. И вот еще чуть-чуть, и ты уже фронтендер 😀
Нынче если ищут именно верстальщика, а не полноценного фронта, значит последний уже есть, а вёрстки много и/или она сложная. Значит можно не знать JavaScript, но стоит освоить любой шаблонизатор, одну из популярных методологий, познакомиться с существующими библиотеками компонентов.
Чтобы тебя все хотели, нужно много и быстро верстать. А для этого нужно активно пользоваться доступными инструментами и подходами и уметь выбирать подходящие. Что, конечно, выходит далеко за рамки знания HTML и CSS.

Структура и стилевая база препроцессора

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

Важно не следовать каким-то зазубренным до автоматизма теориям и якобы «лучшим практикам», а гибко и к месту применять возможности, и даже, вероятно — все время немного экспериментировать, стараясь расти и меняться к лучшему. Категорически важно только то, что ваши стили должны быть действительно всегда четко и понятно организованы

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

Но давайте уже организуем препроцессор, если с SCSS:

То есть, на самом деле — порядок сборки всей кухни имеет значение, конечно же:

Итак, «стилевой базой» мы будем называть некое основное ядро стилей, доступный всем остальным компонентам системы общий код препроцессора. Более детально, он состоит из условно двух разных видов файлов:

1. Растворяемые при компиляции инструменты-помощники, сущности позволяющие генерировать лаконичный, оптимальный, связный код:

   1. функции
   2. переменные
   3. параметризуемые примеси
   4. включения-плейсхолдеры

2. Компилируемые глобальные стили:

   1. анимации keyframes
   2. типографика
   3. базовая нормализация основных HTML-элементов
   4. сетки
   5. утилитарные классы-помощники для разметки

В папки и вы можете добавлять файлы по необходимости.

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

У меня вот, например, можно посмотреть — есть различные такие заготовки-«болванки» для быстрого старта на разных комбинациях актуальных технологий:

Какие сложности есть в верстке сайтов?

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

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

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

 
Чтобы сделать плавную анимацию при наведении на конфетки слева, пришлось прописать 4 стиля, потому что не все браузеры понимают стандарт.

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

Чтобы реализовать адаптивность сайта, прописываются разные дополнительные стили, что, кроме большего объема работы, влечет за собой продумывание поведения элементов (часто это задача дизайнера). Самый банальный пример: меню «гамбургер», заменяющее обычное на мобильных устройствах.

Вот примеры адаптивных сайтов, которые я верстала (меняем ширину окна и наблюдаем за изменениями):

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

5. Таск-менеджер | Сборщик проектов | Менеджер задач | Ваш личный раб

Вот она рыба мечты. Вот кто настоящий волшебник. Этот комплекс программ для верстки сайтов, реально закроет множество задач верстки сайта и разработки проекта в целом.Здесь тоже есть большие боссы:

• Grunt
• Gulp
• WebPack

Сам использую Gulp. Grunt немного по медленнее, и на тот момент когда я начинал изучать Таск-менеджеры, был на пике Gulp.Ну и WebPack вроде как лучше всех, я садился разбирать, но так у меня и не пошло.Gulp который я настроил, закрывает задачи на моих проектах

• Расставляет префиксы CSS для всех браузеров
• Минимизирует CSS удаляя пробелы, и переносы
• Создает файлы .map указывая номер строк браузеру для того что бы дебажить изначальный код
• Группирует медиа запросы(что бы не повторялись для разных элементов DOM в одной ширине)
• Преобразует препроцессорный код в обычный CSS
• Минимизирует изображения
• Уродует и минимизирует код JavaScript
• Объединяет все файлы CSS в один(уменьшая количество обращений к серверу)
• Минимизирует файлы HTML
• Отслеживает изменения в редактируемых файлах и самостоятельно обновляет браузер во время верстки
• Конфигурирует файл Smart-Grid

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

Была ли эта статья полезной?

Заключение

Фактически многие из этих тем небольшие. Однако держать кучу различных факторов в голове очень сложно. За 15 лет я общался менее чем с десятью верстальщиками (да и вообще программистами), которых отнёс бы к категории Senior (верстальщиков, программистов хороших было сильно больше).
Навскидку – на полноценное изучение и практику только вёрстки с нуля вполне можно затратить год (и более, если уходить в проектирование компонентов).

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

Также планирую создать полноценный бесплатный курс с подробным рассмотрением каждой из тем-прямоугольников со схемы. Буду рад предложением, отзывам, пожеланиям и так далее.
Курс, вероятно, будет в формате видеоуроков с полным текстовым и графическим дублированием. Если дело пойдёт, приложу в будущем ссылки в комментарии.

upd
Много сообщений о том, что верстальщик без знания фреймворка не нужен. В основном это пишут разработчики в крупных проектах. И, для них, это вполне так. Но есть ещё много студий делающих лендинги, различные шаблоны для вордпресов и других CMS. Это вполне себе хороший рынок и возможность зарабатывать. Есть довольно много совершенно небольших проектов, с гораздо меньшими требованиями, которые верстальщик способен закрыть на отлично.