Источник статьи: webdesign-master.ru

Видео:

Подготовленный первоначальный шаблон-заготовку, который можно использовать для создания ЛЮБОГО адаптивного сайта можно скачать здесь (содержит Bootstrap и другие необходимые модули).

Результат выполнения урока можно посмотреть здесь.

Скачать готовую HTML верстку из урока отсюда.

Модули и плагины, используемые в уроке:

BOOTSTRAP;
FANCYBOX;
FONT-AWESOME;
OWL-CAROUSEL;
и другие...

Верстать HTML верстку будем в программе Sublime Text с предустановленными плагинами EMMET и LIVERELOAD

Как создаются современные адаптивные сайты 



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

Первым делом, скачиваем архив с нужными файлами.

Затем с помощью онлайн-помощника по созданию прототипа wireframe.cc делаем наброски нашего сайта и приступаем к разработке.

В разделе <body> создаем блок <header> и присваиваем ему класс «top_header». Все то, что будет входить в этот блок, мы будем делать с помощью Bootstrap'а.

Сначала сделаем блок «Вход/Регистрация» (слева) и кнопки соц. сетей (справа):

В коде это будет выглядеть так:

Данный блок у нас будет серого цвета «#43484C». Для этого в main.css добавляем код:

Для выбора картинок для соц. сетей, переходим на сайт fontawesome.io, находим нужные нам иконки и просто добавляем их код в наш код.

После всех наших действий код файлов index.html и main.css будет выглядеть так:

Теперь сделаем, чтобы при уменьшении размера экрана, ссылки «Вход / Регистрация» заменялись на значок.

По аналогии, ищем подходящую иконку и прописываем ее в блоке «buttons», с добавлением некоторых параметров:

А в файле стилей media.css, в блоке ...768px, прописываем такой код:

Теперь при уменьшении ширины экрана, текст исчезает и появляется картинка.

Следующий шаг — это назначить действие на эту картинку (тот же «Вход / Регистрация»).

Первым делом — в файл «common.js» добавляем код, который отвечает за появление текста:

Затем, в файл «media.css» прописываем 2 кода:

и

Двигаемся дальше и, согласно нашему макету, мы должны создать некий логотип:

03

Для этого в файле index.html нужно прописать код (перед закрывающим тегом </header>):

Шрифт мы будем выбирать на сайте fonts4web.ru — выбираем понравившийся шрифт, скачиваем его и распаковываем в папку со шрифтами.

Затем, в файл font.css, вставляем код, предложенный на сайте перед скачиванием шрифта. И затем, в файле main.css, прописываем семейство шрифтов для нашего элемента:

Далее создаем навигационное меню.

Добавляем такой код.

В index.html (после логотипа):

В «main.css»:

В «media.css»:

И в «common.js»:

Создание слайдера



Перед созданием слайдера, добавим описание в блок <h1> и пропишем свойства в main.css (нужно будет скачать и установить шрифт Roboto Condensed):

Теперь приступаем к слайдеру.

Первым делом, в скрипте «карусели» изменим  items с 4 на 1 — т.е., чтобы отображалась только одна картинка.

Теперь пропишем код

index.html:

main.css:

Призыв к действию

Теперь перейдем к созданию секции с призывом к действию. 

Для этого, в index.html после закрывающего тега </header> вставляем такой код:

А в main.css:

Следующий этап — это всплывающее окно. 

Для этого добавляем код в index.html:

В файл main.css:

В common.js:

И настраиваем файл mail.php

Область для контента + сайдбар



В файл index.html добавляем:

В main.css: