Проект: Mesto Russia

Данный проект представляет собой одностраничный сайт с профилем пользователя и секцией с карточками, где представлены красивейшие места России.

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

В проекте реализована как адаптивность для лучшего восприятия контента на стационарном компьютере или на мобильном телефоне, так и формы-popup для редактирования данных пользователя или добавления карточек с местами с помощью Java Script.

Реализована работа с сервером - пользователь может менять свою фотографию или имя в профиле, ставить лайки понравившимся карточкам, загрузить собственную (и удалить её, если надоела). Все данные сохраняются и после перезагрузки страницы.

Страница расположена по адресу: Mesto Russia

Брифы на проект в Figma расположены по следующим адресам:

Макет проектной работы 4

Макет проектной работы 5

Макет проектной работы 6

Макет проектной работы 9

В работе были применены следующие технологии:

• Семантические теги (article, form, section, figure, button, template).
• Flex-box верстка.
• Построение сетки с помощью Grid.
• Позиционирования элементов.
• Методология наименования классов CSS по БЭМ Nested.
• Применение метатегов для масштабирования страницы (@media).
• Подключения локального шрифта Inter через @font-face.
• Формы-popup для редактирования данных пользователя и добавления новых карточек на страницу.
• Написана часть логики Java Script для слушателей и обработчиков событий (querySelector, addEventListener).
• Написана логика добавления новых карточек на страницу и отрисовка базового набора карточек с помощью шаблонов.
• Реализована возможность удаления карточек и отмечать понравившиеся карточки лайками.
• Реализована плавная анимация открытия/закртытия popap'ов.
• Валидация полей инпутов форм через Java Script.
• Валидация кнопки сабмита формы.
• Проект реализован через независимые классы в рамках ООП.
• Собрана рабочая сборка с помощью WebPack.
• Реализована работа с сервером:
  • загрузка карточек пользователей;
  • обновление данных пользователя (фотография, имя, информация о себе);
  • функционирует счётчик лайков.

Планы по дальнейшей доработке проекта:

• Автотесты.
• Оптимизация кода и масштабирование проекта.
• Улучшение UX и UI проекта.