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

Макеты сайта для различных экранов выглядят так:

Исходные файлы макетов хранятся в директории sources репозитория:

• surface_desktop.psd – макет для экрана шириной 1920px,
• surface_768.psd – макет для экрана шириной 768px,
• surface_320.psd – макет для экрана шириной 320px.

О верстке промежуточных состояний подробнее читайте в разделе Промежуточные состояния между макетами.

Также папка sources содержит jpg-изображения – превью макетов для быстрого просмотра. Не верстайте сайт с превью, используйте для верстки psd-макеты.

В поддиректории fonts вы можете найти использующиеся в макете шрифты, а в поддиректории svg — иконки в формате svg.

• Кроссбраузерная верстка
• Семантическое использование тегов
• Семантические названия атрибутов
• Валидная верстка
• Соответствие верстки макету
• Реализация сетки
• Промежуточные состояния между макетами
• Добавление меньшего или большего количества контента в блоки
• Ошибки загрузки изображений
• Оформление кода
• Файловая структура проекта
• Публикация проекта

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

• компьютер с операционной системой Windows и Mac OS,
• планшеты и смартфоны с операционной системой iOS,
• планшеты и смартфоны с операционной системой Android.

Кроме поддержки основных типов устройств также требуется, чтобы верстка корректно работала в следующих браузерах:

• Последняя версия Google Chrome,
• Последняя версия Mozilla FireFox,
• IE 11,
• Последняя версия Edge,
• Последняя версия Opera,
• Последняя версия Safari,
• Последняя версия Mobile Safari,
• Последняя версия Mobile Chrome.

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

В макетах проекта содержатся следующие элементы:

• Разделы,
• Заголовки,
• Ссылки,
• Изображения,
• Подписи,
• Абзацы.

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

К примеру, следующий код является грубой ошибкой:

<div class="header">
  <div class="title">Заголовок сайта</div>
</div>

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

<span class="information">
  <h2 class="title">Заголовок блока</h2>
</span>

Кроме использования семантических тегов также необходимо давать семантические названия значениям атрибутов. Запрещается использовать транслит.

Пример:

<header class="shapka"></header>

Данный пример является грубой ошибкой. Название класса shapka следует заменить на header. Пример корректного названия:

<header class="header"></header>

После полной реализации верстки необходимо ее протестировать с помощью сервиса W3C Markup Validation Service. В итоговом отчете не должно быть ошибок или предупреждений.

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

• толщина шрифта в браузерах и фотошопе,
• межсимвольное расстояние,
• различия в отступах — до 2px.

Реализовать сетку страницы вам нужно при помощи flexbox. Запрещено использовать библиотеки, которые уже имеют готовые классы для сетки (например, Twitter Bootstrap, Zurb Foundation и другие).

Также запрещено использовать следующие способы решения задачи:

• таблицы,
• float-сетка,
• сетка с помощью inline-block элементов,
• CSS Grids.

Дизайнер подготовил три макета отображения страницы для устройств с шириной экрана 320px, 768px и 1920px. Но дизайнер не предоставил отображения страницы в промежуточных состояниях, поэтому их нужно реализовать с помощью принципа «Резиновая верстка».

Таким образом, на экранах с шириной больше 1920px фоновые блоки будут растягиваться на всю ширину экрана, а их контент будет центрироваться.

На устройствах с шириной экрана, попадающей в диапазон от 961px до 1920px, вам нужно реализовать дизайн макета surface_desktop.psd.

Для устройств с шириной экрана, попадающей в диапазон от 641px до 960px, вам нужно реализовать резиновый дизайн макета surface_768.psd.

Для устройств с шириной экрана, попадающей в диапазон от 640px и меньше, вам нужно реализовать резиновый дизайн макета surface_320.psd.

Для верстки изображений в промежуточных состояниях разрешается использовать изображения из макетов, более подходящие для данной ширины экрана. Например, блок «Be active» в макете surface_desktop.psd имеет ширину 960px, а в макете surface_768.psd — 768px. Соответственно, для экрана с шириной 960px больше подойдет версия из макета surface_desktop.psd.

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

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

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

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

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

Файловая структура проекта должна состоять из следующих элементов:

• css — папка, содержащая стили проекта,
• fonts — папка, содержащая шрифты проекта,
• images — папка, содержащая графику проекта,
• index.html — HTML-страница.

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

При разработке проекта и для итоговой демонстрации вам нужно использовать сервис GitHub Pages. Перед работой с сервисом ознакомьтесь с пошаговой инструкцией.