Проект направлен о рассказе об уникальных местах России (Проект от Яндекс.Практикума). Сайт отображается в браузерах - Firefox, Google Chrome, Yandex Browser. Сайт имеет одну главную страницу. В работе применены расширенные возможности HTML, CSS, JavaScript, git, Webpack. В Проекте 9 работа Mesto подключена к серверу.
С помощью JS реализовано:
- 6 инициализирующих карточек.
- форма добавления/удаления карточки.
- нажатие на кнопку лайка.
- валидация полей форм.
- модальные окна (popup).
- закрытие модального окна через специальную кнопку, Esc и овелей.
- код объектно-ориентирован.
Организация файловой структуры согласно БЭМ. Стили и картинки в самостоятельных папках и разбиты по блокам. В сайте сделана классическая схема организации файловой структуры БЭМ-проектов:
-
Блоку соответствует одна директория.
-
Код модификаторов и элементов находится в отдельных файлах.
-
Файлы модификаторов и элементов хранятся в отдельных директориях.
-
Директория блока является корневой для поддиректорий его элементов и модификаторов.
-
Имена директорий элементов начинаются с двойного подчеркивания (__).
-
Имена директорий модификаторов начинаются с одинарного подчеркивания (_). Более подробную информацию по БЭМ можно посмтреть
Дизайн страницы сверстан адаптивной версткой для ширины мониторов/экранов в 320, 768, 1024 и 1280 пикселей.
Семантика
- Для вёрстки заголовков применяются несколько тегов от h1 до h6, текстовые блоки размечены тегами p, списки — ul. Присутствуют и используются по назначению элементы header, main, footer, section, nav.
- Не используются элементы b, br, i.
Доступность интерфейса
- Все ссылки и интерактивные элементы имеют состояние наведения :hover.
- Контентные изображения имеют alt с корректным описанием, соответствующим языку страницы.
CSS
- Контент на странице отцентрован.
- Не используется !important.
- Используется главный шрифт Inter, а также вспомогательные: Arial, sans-serif. Размеры, начертания и цвет шрифта, как в макете. Ссылка на макет1 в Figma (для Проекта 4) Ссылка на макет2 в Figma (для Проекта 5) Ссылка на макет3 в Figma (для Проекта 9)
- Для каждого шрифта указаны альтернативные варианты из системных шрифтов. Не подключены лишние шрифты, в папке fonts не лежат лишние шрифты.
- Внутренние отступы для каждой секции задаются отдельно, а не используются отрицательные margin
- Ни одному текстовому блоку не задана фиксированная высота. Блок растягивается, если в него вставляют в 2—3 раза больше текста.
- Отсутствует горизонтальная прокрутка при изменении ширины окна просмотра в отладчике.
- Все картинки оптимизированы, чтобы сайт загружался быстрее - оптимизировать картинки
- BEM Methodology
- CSS (Flexbox, Grid Layout, Animation and Transform)
- Git
- JavaScript (Asynchronous JS, OOP, validation)
- Webpack
В планах доработать и улучшить сайт при помощи отработки навыков по применению JS. Работа с API. Перенос кода на библиотеку Reactjs.