Вёрстка адаптивного дизайна

Требуется уверенный уровень знаний вёрстки и начальный уровень адаптации под различные размеры экранов. Делать карусель не нужно. Любые задачи на JavaScript можно игнорировать. Минимальная поддерживаемая ширина экрана 320px, максимальная - 1920px. Рекомендуется приступать к вёрстке начиная с ширины 320.

Потребуются знания

• CSS3;
• семантическая разметка;
• CSS Media Queries;
• CSS Fonts;
• Оптимизация под мобильные браузеры.

Поддерживаемые браузеры

• IE 9+;
• FF 4+;
• Chrome 24+;
• Safari 4+;
• Opera 10+;
• Android Browser 4.0+
• iOS 6+ Safari

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

Для корректной работы на мобильных устройствах можно использовать мета-тег

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, maximum-scale=1.0, minimum-scale=1.0" />

Можно использовать любой сброс стилей: normalize или reset.

Шрифт, макеты (PSD) и скриншоты находятся в папке /psd.

Настройка окружения

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