Верстка макета

Введение в CSS

<head><link>

Используйте таск-менеджер

Использование таск менеджера, например, Gulp — важнейший элемент быстрой работы над версткой. С помощью таск-менеджера вы сможете автоматизировать такие моменты, как: создание рабочего веб-сервера с автообновлением страницы при сохранении в редакторе кода; удобное использование препроцессоров; автоматизация рутиных задач, таких, как оптимизация изображений, сжатие CSS, JS, если нужно, то и HTML и многие другие задачи.

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

Более подробно изучить Gulp вы можете в уроке Gulp 4 — Актуальное и исчерпывающее руководство для самых маленьких.

Изменение порядка следования flex-элементов

По умолчанию flex-элементы отображаются во flex-контейнере в том порядке, в котором они расположены в HTML коде. Для изменения порядка следования одних flex-элементов относительно других в CSS Flexbox можно использовать свойство . Данное CSS свойство выстраивает flex-элементы во flex-контейнере в порядке возрастания их номеров.

order: 0;
/*
  0 (по умолчанию)
  целое положительное или отрицательное число
*/

Например:

<div class="flex-container">
  <div class="flex-container_element-1">...</div>
  <div class="flex-container_element-2">...</div>
  <div class="flex-container_element-3">...</div>
  <div class="flex-container_element-4">...</div>
</div>
CSS:
.flex-container {
  display: flex;
}
/* переместим 2 flex-элемент в конец */
.flex-container_element-2 {
  order: 2;
}
/* передвинем 3 элемент до 2 */
.flex-container_element-3 {
  order: 1;
}
/* расположим 4 flex-элемент до 1 */
.flex-container_element-4 {
  order: -1;
}

Очень удобная и полная навигация по сайту.

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

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

SEO.
Такая навигация существенно облегчит пользование сайтом поисковым роботам а так же пользователям.

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

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

Базовая стилизация

Начинается самое интересное — работа с внешним видом. Прописываем в базовые стили. Для крупных блоков пока ничего не делаем.

Этапы базовой стилизации

Добавление классов в разметку;
Подключение нестандартных шрифтов (локально или из сервиса);
Подключение normalize. css (по желанию);
Указываем параметры шрифта — название, размер, цвет, жирность;
Указываем высоту строки;
Описание фоновых параметров (фоновый цвет);
Описание состояний интерактивных элементов, которые описаны в стайлгайде. На этом этапе задавайте только текстовые параметры и параметры фона;
Все цвета вынесены в кастомные свойства в селектор

Пример проекта с базовой стилизацией:

Построение сетки

Построение сеток производится в общем стилевом файле style. css.

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

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

C помощью свойства c разными цветами для разных блоков;
С помощью свойства (для удобства также можно использовать разные цвета).
Свойство лучше не использовать, так как оно влияет на ширину блока и может что-нибудь сломать.

Пример проекта, где уже добавлены сетки:

Начните с текста

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

Взгляните на эти две кнопки:

Кнопки с разным интерлиньяжем

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

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

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

Как узнать параметры текста в Фотошопе

Как узнать, каким шрифтом набран текст, какого он размера и начертания? Выберите инструмент «Text» (нажмите латинскую на клавиатуре) и кликните на текст, который вас интересует. Текст выделится рамкой, а в верхней панели покажутся параметры этого текста:

Здесь видно шрифт — «Open Sans», начертание — «Regular» и размер — 18px. Если у вас не установлен шрифт из макета, то Фотошоп при клике заменит шрифт на похожий. Будьте внимательны. Перед этим он покажет предупреждение, мол, шрифта такого-то нет:

Этот шрифт из предупреждения и используйте. Если вы нажмёте «Отмену», параметры шрифта всё равно отобразятся, и шрифт не изменится. Если вы нажали «ОК» и шрифт поменялся, верните тексту прежний вид: снимите выделение, нажав , и отмените действие по ( в Mac OS).

Про межстрочное расстояние вам расскажет иконка папки на панели текста:

Она откроет окошко с параметрами текста, там и написан интерлиньяж:

Бывает, что вместо числа там написано «Auto». Как тогда узнать ? Просто измерьте от верха строчных одной строки до верха строчных следующей. Или от низа, как вам удобнее. Это и будет :

Межстрочное расстояние

Шрифты на разных системах отображаются по-разному. На Маке шрифты выглядят немного толще, чем на Виндоуз. Если вы накладываете макет на вашу вёрстку и видите некоторое несовпадение шрифта — не пугайтесь. Просто возьмите параметры шрифта из макета. Не попадайтесь на удочку с жирностью. Если вам кажется, что надпись жирная, проверьте в свойствах текста в Фотошопе. Возможно она не жирная, просто у дизайнера Мак.

Настройка рабочего пространства в программе Adobe Photoshop

Все примеры будут показаны в программе Adobe Photoshop CS5, с интерфейсом на английском языке.

Открыв программу Adobe Photoshop, вы увидите примерно следующее:

Строка главного меню;
Панель параметров;
Панель инструментов;
Дополнительные панели.

Нам нужно настроить набор дополнительных панелей. Для начала зайдите в меню Window – New Workspace:

Введите имя для нового рабочего пространства, например, my workspace, и нажмите Save. Теперь нам нужно выбрать необходимые панели для работы. Заходим в Window и ставим галочки напротив History, Info, Layers, Navigator, Options, Tools. С остальных панелей можете снять галочки, если они установлены.

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

При появлении голубой прозрачной полоски, отпустите курсор, чтобы закрепить панель в этом месте:

Чтобы закрыть ненужные вкладки, кликнете по иконке в правом верхнем углу вкладки, и в выпадающем меню выберите пункт Close:

Первый макет, который мы будем с вами верстать называется simple_text.psd, находится он в папке templates. Откройте его в программе Adobe Photoshop, для этого зажмите клавиши Ctrl+O (или через меню File – Open), и выберите файл.

Включите линейку при помощи горячих клавиш Ctrl+R или через меню View – Rulers:

Теперь кликните два раза по линейке и откройте вкладку Units & Rulers, чтобы настроить единицы измерения. Выберите в блоке Units для Rulers и Type единицы измерения пиксели:

Теперь все готово, можно начинать верстать макет.

Как выполнить адаптивную вёрстку?

Адаптивный веб-дизайн (англ.: responsive Web design) обеспечивает смотрибельность и удобочитаемость сайта на любых устройствах. В двух словах, улучшает юзабилити. Ключевое слово «адаптивный» значит, что дизайн «приспосабливается» под устройство, на котором отображается. Т.е. сайт выглядит по-разному, но наиболее подходящим образом для того устройства, на котором отображается.

HTML5 & CSS3 & JS фреймворки для адаптивной вёрстки

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

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

CSS @media queries

Я считаю, что лучшее решение — самое простое. Потому я воспользовался CSS-возможностью , поддержку которой обеспечивают все современные браузеры. А для поддержки браузерами IE младше 9-й версии можно воспользоваться такой хитростью (добавить в ):

<!-->
<script src="https://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<!-->

Скрипт загрузят только браузеры IE младше 9-й версии, для остальных браузеров это просто комментарий в HTML-коде.

Media queries в действии

Для примера я указал правила только для . Это контейнер , в который «обёрнут» весь отображаемый контент сайта. Т.е. ширина блока соответствует ширине макета. Также для простоты я манипулирую только шириной макета — вы можете применять любые правила CSS.

/* CSS-правила по-умолчанию
Для обычных экранов и браузеров без поддержки CSS @media */
#layout { width: 970px; margin: 0 auto; }
...
/* CSS-правила для телефонов */
@media screen and (max-width: 767px) {
#layout { width: 95%; }
...
}
/* CSS-правила для планшетов */
@media screen and (min-width: 768px) and (max-width: 991px) {
#layout { width: 750px; }
...
}
/* CSS-правила для широких экранов */
@media screen and (min-width: 1200px) {
#layout { width: 1170px; }
...
}

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

Принцип заключается в следующем. Сначала браузер учитывает те стили, которые указаны в верхнем разделе CSS-файла, названном мной «CSS-правила по-умолчанию». Затем идут конструкции , которые заставят браузер учесть новые стили, если выполнится условие вхождения ширины экрана в указанный диапазон. Если же используется какой-то браузер без поддержки media queries (редкий случай) — он просто проигнорирует эти инструкции, отобразив «CSS-правила по-умолчанию» (так решается отсутствие кроссбраузерной поддержки). Потому по-умолчанию я указал правило, соответствующее ширине обычных экранов: ширина макета 970px.

Для телефонов (имеются ввиду любые устройства с шириной экрана до 767px) браузер применит CSS-правило, согласно которому ширина макета станет 95% (от ширины экрана). А назначенное ранее для правило послужит тому, чтобы макет выровнялся посередине окна, оставив по краям отступы. Для планшетов ширина макета будет 750px, а для широких экранов — 1170px.

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

Разработка макета сайта: работаем поэтапно

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

Техзадание

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

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

Прототип

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

Макет сайта на разных устройствах

Подбор цвета

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

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

Adobe Color
ColorCode
ColrD
Cohensive Colors
ColorHunter

Подбор шрифта

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

Авторские права. Шрифт нужно либо купить, либо найти тот, который можно использовать бесплатно. Бесплатные шрифты ищите на Google Fonts, Font Space, 1001 free fonts.

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

Статья по теме. «Выбираем шрифты для письма: стильные, уместные, безопасные».

Проработка

Теперь можно начинать непосредственно создавать макет сайта.

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

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

Важно! Каждый элемент рисуйте на отдельном слое и логично называйте. Кнопка — button, название товара — item name и так далее

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

Создание гайда

Хорошим тоном будет сделать описание макета сайта для верстальщика. В описании можно зафиксировать все основные характеристики макета:

выбранные цвета,
размеры сетки,
описания базовых элементов и так далее.

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

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

Изучайте jQuery

Если бы данное руководство было написано для Front-End разработчиков, все сводилось бы к изучению JavaScript и его фреймворков, таких, как Angular. Но я не силен во Front-End, как и в программировании в целом, моя стихия — веб-дизайн, поэтому пусть настоящий глубокий фронтенд остается на закуску акулам прграммирования. Чаще в процессе верстки приходится решать несколько другие задачи. А именно: анимация каких-либо блоков, настройка сортинга в таблицах, создание табов и аккордеонов, подключение библиотек, определения фоллбека для SVG файлов, определение параметров документа для несложных операций и прочие мелкие скриптовые работы. Для этих целей нет лучше библиотеки, чем любимой всеми верстальщиками jQuery. Она проста, элегантна и обрасла огромным количеством плагинов, которые решают практически все необходимые задачи маленьких и средних проектов.

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

jQuery не просто так был вынесен в отдельный пункт. Чаще всего узким местом верстки по времени являются многочасовые затупы над скриптами проекта и чем лучше вы разбираетесь в jQuery, тем быстрее выполняете проекты без изнурительного поиска решений на Stack Overflow.

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

Сразу отвечу на самые ожидаемые и каверзные вопросы по верстке:

1. Adobe Muse и подобные инструменты? — да, можно использовать и это будет быстро. Если только ваш проект не крупнее односложного одностраничника, который не нуждается в развитии, продвижении и системе управления.

2. Как быть с Perfect Pixel? — я искренне уверен, что Responsive Design и Perfect Pixel понятия разные и даже не совместимые. Я, как веб-дизайнер, конечно, обладаю некоторыми чертами перфекциониста, но если идея хороша, она будет блистать и в Responsive верстке, если идея плохая, то хоть сколько ее не полируй и подгоняй по пикселам, она не будет работать в результате. Поэтому включите ваш дар убеждения, запаситесь аргументами и проведите беседу с вашим клиентом относительно бесполезности такого излишнего перфекционизма.

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

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

Другие уроки по теме «Верстка»

Создание сайта портфолио с крутой анимацией | Материалы урока
Создание красивого сайта с Parallax эффектом при скролле | Материалы урока
Создание Parallax эффекта на сайте при движении мыши | Материалы урока
Создание красивого сайта с поддержкой темной темы (HTML, CSS, GSAP) | Материалы урока
Создание крутого 3D сайта с анимацией прокрутки | Материалы урока
Создание потрясающей галереи на HTML, CSS и JavaScript | Материалы урока

Шаг 3

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

Теперь, если контента будет много, он будет двигать пустой блок вниз. А это будет опускать и подвал, не давая налезть на него контенту.

Смотрим как это выглядит в коде:

html
>

head
>

title
>
Футер прижат к низу/
title
>

style
type
=
«text/css»
>

* {margin: 0; padding: 0;} /* обнуляем отступы */
body {
background: #fff;}
html,body {
height: 100%; /* задаем высоту тела документа */}
.main { /* основной блок, который должен растянуться до подвала */
background: #999; /* цвет фона основного блока (для наглядности) */
min-height: 100%; /* задаем минимальную высоту основного блока */}
* html .main { /* хак для ie6 */
height: 100%; /* для ие6, т.к. не понимает min-height */}
.hFooter { /* это распорка в основном блоке — резервируем место для подвала */
height: 40px; /* высота нашего подвала */}
.footer { /* подвал */
background: #0000CC; /* цвет фона подвала (для наглядности) */
color: #fff;
height: 40px; /* высота подвала */
margin-top: -40px; /* делаем отрицательный отступ по высоте равный высоте подвала, чтобы четко вписаться в размер экрана */}
/
style
>

/
head
>

body
>

div
class
=
«main»
>

Это основной блок
div
class
=
«hFooter»
>
div
>

/
div
>

div
class
=
«footer»
>
Это подвал/
div
>

/
body
>

/
html
>

Заметка: при использовании блочной верстки и плавающих основных блоков (колонок) для.hFooter следует добавить clear: both, чтобы подвал расположился под колонками.:

.hFooter
{

clear
:
both
;

height
:
40px
;
}

Если Вы уже немного освоили , тогда может возникнуть вопрос: «Зачем использовать дополнительный элемент, если можно воспользоваться padding-bottom?».

Ответ — так просто его тут использовать нельзя, так как размер блока равен его размерам + ширина внутренних отступов + ширина границ. Связка min-height: 100% и padding-bottom даст высоту сайта больше высоты экрана. В итоге даже при отсутствии контента вовсе, подвал будет за пределами экрана.

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

Модульная конструкция

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

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

Йозеф Мюллер‑Брокманн

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

Изображение: Издательство Студии Артемия Лебедева

Две колонки для текста и иллюстраций создают много возможностей: в одной колонке помещается текст, во второй — иллюстрации. Текст и иллюстрации могут печататься в одной и той же колонке, друг под другом. Кроме того, две колонки ничто не мешает ещё раз разделить и получить четыре.

Йозеф Мюллер‑Брокманн

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

Изображение: Издательство Студии Артемия Лебедева

В модульной вёрстке важно соблюдать аккуратность и знать, сколько строк текста может поместиться в колонке. Йозеф советует рассчитывать это значение по алгоритму — проще всего его объяснить на примере:

Предположим, высота полосы на макете — 57 строк, а одна колонка должна занимать четыре модульных клетки по вертикали. Размеры отступов между ними равны одной строке текста. Высота строки зависит от выбранного вами кегля.
Из 57 строк нужно вычесть три — они нужны для отступов между четырьмя модулями. Оставшиеся 54 будут заполнять колонки. Чем больше в колонке модулей, тем больше нужно выделять пустых строк.
Теперь нужно разделить количество строк под модули на количество самих модулей: 54 / 4 = 13,5.
Получилось дробное число, а в типографике не бывает половины строки. Значит, нужно брать следующее наименьшее число, которое можно разделить на 4 без остатка, — это 52.
В итоге получается колонка из 13 строк с тремя слепыми — 4 × 13 + 3 = 55.

При модульном расположении элементов можно использовать интересные выразительные приёмы

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

Резиновый дизайн и необходимые свойства CSS

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

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

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

Введение в CSS

Популярные CSS параметры

Используйте таск-менеджер

Изменение порядка следования flex-элементов

Очень удобная и полная навигация по сайту.

Базовая стилизация

Построение сетки

Начните с текста

Как узнать параметры текста в Фотошопе

Настройка рабочего пространства в программе Adobe Photoshop

Как выполнить адаптивную вёрстку?

HTML5 & CSS3 & JS фреймворки для адаптивной вёрстки

CSS @media queries

Media queries в действии

Разработка макета сайта: работаем поэтапно

Техзадание

Прототип

Подбор цвета

Подбор шрифта

Проработка

Создание гайда

Изучайте jQuery

Сразу отвечу на самые ожидаемые и каверзные вопросы по верстке:

Другие уроки по теме «Верстка»

Шаг 3

Модульная конструкция

Резиновый дизайн и необходимые свойства CSS