Загальне планування складається зі створення ідеї, розробки структури проекту, опрацювання макета проекту.

Створення ідеї: необхідно вибрати тему проекту (сайта сервісу) й відповідно до неї дібрати текстові та графічні матеріали.

Розробка структури проєкту: потрібно визначити кількість розділів сайта, класифікувати матеріал за розділами, приступити до формування навігаційного меню.

Опрацювання макета проєкту: потрібно скласти макет проекту, використовуючи графічний редактор.

Переважна більшість сучасних сайтів має блочну верстку. Розглянемо основні елементи веб-сторінки сайта: блок (або контейнер — div), заголовок (хедер), у який входять назва сайта та логотип, навігація, контент, нижній колонтитул (футер, підвал).

Блокова верстка сайту, або як її ще називають верстка div'ами, - це верстка сайту на основі елементів <div>. Така верстка сайту має ряд переваг: стислість коду, висока швидкість завантаження коду й т.д.

<div id="blok1"> вміст блоку 1</div>

<div id="blok2"> вміст блоку 2</div>

<div id="blok3"> вміст блоку 3</div>

...

Тег <div> - це так званий контейнер (блок), який може містити форматований текст, зображення та ін. Важливою особливістю блоків є їх здатність накладатися один на одного при верстці. Ця особливість надає блокам набагато більше можливостей по верстці сайту, ніж, приміром, таблиці.

Верстка div активно використовує CSS для гнучкого й зручного форматування елементів веб-сторінок. За допомогою CSS можна з точністю до пікселя задати розташування блоків на сторінці, необхідні відступи, колір, розмір шрифтів і багато іншого.

Позиціонування елементів веб-сторінки за допомогою стилів 

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

Тег визначається атрибутом POSITION, який може набувати таких значень:

• static — статичне; задане за умовчанням і передбачає розміщення чергового об'єкта на вільному місці після попереднього;

• relative — відносне; визначає розташування об'єкта відносно того місця, яке б він зайняв, якби для нього було використане статичне позиціювання;

• absolute — абсолютне; передбачає розміщення об'єкта шляхом задавання точного місця його розташування на сторінці.

Для відносного та абсолютного позиціювання використовують чотири властивості: 

•left (ліворуч)  та

•right (праворуч), які задають відступи для розміщення об'єкта по горизонталі, 

•top (згори) та

•bottom (знизу) — по вертикалі.

Необхідно задавати по одному значенню позиції по горизонталі та вертикалі. При цьому елементи можуть накладатися один на інший: нижче буде розташований об'єкт, описаний першим, а зверху — той, який описали останнім. Якщо потрібна зміна стандартного порядку накладання, застосовують шари. 

Шар об'єкта задають за допомогою властивості Z-index , значенням якої можуть бути лише ціле число та auto (за умовчанням). 

Об'єкт і з більшим значенням z-index розміститься поверх об'єкта з меншим значенням цієї властивості, перекриваючи його. Якщо ж об'єкти матимуть однакові її значення, то зверху розташується об'єкт, описаний нижче за текстом у HTML-документі.

Адаптивна верстка - це верстка, при якій сайт однаково добре відображається на всіх можливих пристроях: комп'ютерах, планшетах, телефонах. Адаптивні сайти з’явилися завдяки зростанню попиту тих користувачів, які хочуть завантажувати веб-сторінки з ідеальною структурою на всіх своїх пристроях. Саме зараз адаптивний дизайн стає обов'язковим. Він значно спрощує регулярний серфінг в Інтернеті незалежно від того, який пристрій вибрав користувач для доступу до сайтів, які його цікавлять.

Основні особливості адаптивного дизайну:

• застосування гнучкого макета на основі сітки (англ. flexible, grid-based layout);

• використання гнучких зображень (англ. fl exible images);

• робота з медіа-запитами (англ. media queries);

• плавна перебудова блоків у разі зміни розміру екрана (наприклад, під час повертання планшета)