zuev720 / mq26-diploma Goto Github PK

GitHub-pages

Макет диплома для курса MQ основан на макете диплома для курса HTML. Вы можете взять код предыдущего диплома за основу и доработать его в соответствии с требованиями к диплому текущего курса.

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

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

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

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

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

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

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

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

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

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

На устройствах с шириной экрана от 1200px и более вам нужно реализовать дизайн макета NOEMI_mq_desktop.psd.

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

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

Вёрстка раздела «Сейчас в тренде» должна отличаться при портретной (вертикальной) ориентации экрана и при пейзажной (горизонтальной).

Для устройств с шириной экрана, попадающей в диапазон от 641px до 1200px, при портретной ориентации экрана карточки трендов должны быть выстроены в две колонки, а при пейзажной ориентации — в четыре.

Для устройств с шириной экрана от 640px и меньше, при портретной ориентации экрана должна быть одна колонка с карточками, а при пейзажной — две.

Каждый макет содержит всплывающую форму на слое Popup, этот слой по умолчанию скрыт. Свёрстанная форма должна отображаться по центру экрана, поверх вуали, затемняющей страницу. Страница под вуалью не должна прокручиваться.

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

После того, как закончите с вёрсткой всплывающего окна добавьте блоку класс _hidden и задайте этому классу свойства, скрывающие блок.

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

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

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

Все эти элементы имеют специальные теги в стандарте 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. В итоговом отчете не должно быть ошибок или предупреждений.

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

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

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

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

Этот пункт встречался в дипломе для курса HTML.

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

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

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

В рамках курса мы не рассматриваем CSS-методологии. Например БЭМ, OOCSS, SMACSS и другие. Поэтому при работе над дипломом не используйте их.

В рамках дипломного проекта не следует использовать готовые библиотеки (например, normalize.css, reset.css, bootstrap и другие). Весь код вы должны написать самостоятельно.

В рамках курса мы не рассматриваем способы организации кода с использованием CSS-препроцессоров и PostCSS. Поэтому в дипломе вам не следует их использовать.

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

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

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

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