Junior front-end разработчик

1. Макет, все его детали, отступы, шрифты и стили шрифтов должны быть 1 к 1 соблюдены в верстке. Если с этим возникают проблемы - используем Pixel perfect.
2. Использовать БЭМ.
3. По умолчанию основное разрешение - 1920px.
4. Адаптивные версии под разрешения менее 1920px должны максимально сохранять пропорции в процентном соотношении как показано в макете. Обязательная проверка на MAC OS.
5. Тексты не должны дублироваться в коде, верстаем адаптивно. По возможности то же самое касается остальных элементов.
6. Мобильная версия должна подключаться при разрешении менее 767px.
7. Скрипты должны работать во всех браузерах (Chrome,Mozilla,Safari,Microsoft Edge).
8. Заголовки h1–h6 не должны использоваться как элементы дизайна или вёрстки и использоваться в текстовой части страницы. У заголовков должны быть прописаны стили в файле стилей (CSS).
9. Картинки должны содержать атрибут alt=””.
10. Уместное использование айдишников (только для скриптов и якорей).
11. По возможности избегать position: absolute.
12. Блоки по возможности делать так чтобы их можно было спокойно вытащить из родительского блока (не было жесткой привязки к родителю).
13. Картинки которые будут подгружаться из базы данных сайта - не должны быть прописаны в файле css. Сохранять картинки в максимальном качестве. Все картинки выводить с помощью тега img.
14. Формы для заявок должны быть сверстаны предельно просто, как образец - Контакты | Сезон MACARONS.
15. Повторяющиеся блоки (например - каталог товаров, список новостей итп.) не должны отличаться между собой в коде.
16. Тег <br> не используем вообще. Нельзя теги выделения (strong, u, i) делать вложенными. Например, <strong><i>текст</i></strong>.
17. Используйте только один из тегов выделения. (примечание: тег <b> устарел, используем только <strong>).
18. Если согласно дизайну названия должны быть капслоком - только через css.
19. Оборачивать кнопки (кроме форм) в ссылки и логотип сайта тоже.
20. Для карт использовать яндекс карты.
21. Слайдер swiper.
22. Если можно обойтись без прописывания стилей, лучше обойтись. Например, если можно, то так не делать:

                <div class="«wrap»">
                    <div class="«wrap-item»"></div>
                    <div class="«wrap-item»"></div>
                </div>
            

    Лучше вот так:

                <div class="«wrap»">
                    <div></div>
                    <div></div>
                </div>
            

23. Пример верстки для хлебных крошек (можно менять классы на свое усмотрение):

                <ul class="breadcrumbs__list" itemscope itemtype="http://schema.org/BreadcrumbList">
                    <li class="breadcrumbs__item" itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
                        <a itemprop="item" href="#" class="breadcrumbs__link">
                            <span itemprop="name">Главная</span>
                        </a>
                        <meta itemprop="position" content="1" />
                    </li>
                    <li class="breadcrumbs__item" itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
                        <a itemprop="item" href="#" class="breadcrumbs__link">
                            <span itemprop="name">Название раздела</span>
                        </a>
                        <meta itemprop="position" content="2" />
                    </li>
                    <li class="breadcrumbs__item" itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
                        <a itemprop="item" href="#" class="breadcrumbs-item breadcrumbs-item-current">
                            <span itemprop="name"> Название статьи </span>
                        </a>
                        <meta itemprop="position" content="3" />
                    </li>
                </ul>
            

Результат заливаете на хост, скидывать нам ссылку для просмотра. Основная + мобильная версия в полном объеме готовности. Мольная версия в приоритете.

Результат отправить на наш официальный телеграм @requestdesign.

!Обязательно кроме тестового задания отправьте, пожалуйста, на наш официальный телеграмм @requestdesign ваше резюме и ссылку на портфолио.

Если вы еще не оставили отклик на hh, сделайте это, пожалуйста, перед тем, как отправите тестовое задание.

Спасибо и желаем удачи!