Проект Mesto: базовая функциональность (Проектная работа 4)
Проект Mesto: карточки и попапы (Проектная работа 5)
Проект Mesto: валидация форм и попапы (Проектная работа 6)
Проект Mesto: ООП и разбиение на модули (Проектная работа 7)
Проект Mesto: рефакторинг и сборка Вебпаком (Проектная работа 8)
Проект Mesto: подключение к серверу (Проектная работа 9)
Описание
Место - это сайт-сервис в виде интерактивной страницы, на которой пользователи могут делиться фотографиями, удалять их и ставить лайки.
Функциональность
Сайт выполнен в виде профиля, в котором можно редактивать имя и сферу деятельности, а также можно добавлять любимые фотографии. На данный момент на сайте размещены фотографии разных мест России.
- Редактирование профиля
- Добавление фотографий и лайков
- Удаление фотографий и лайков
- Открытие фотографий в полном размере
Технологии
Создан сайт-сервис. Использована адаптивная верстка на Grid Layout и технологии Flexbox. Позиционирование элементов и семантика языка HTML. Использование media queries для задания специфических правил для разных размеров экранов. Реализованы диалоговые окна. Выполнена файловая структура по методологии БЭМ.
Часть логики написана на JavaScript. Реализованно: / открытие и закрытие модальных окон для форм «Редактировать профиль», добавления карточки «Новое место» и модального окна с картинкой / закрытие модального окна кликом на overlay / закрытие модального окна нажатием на Esc / редактирование имени и информации о себе / возможность ставить лайк карточке / при загрузке на странице есть 6 карточек, которые добавляет JavaScript / поля формы заполненны значениями, которые отображаются на странице / удаление карточки / валидация форм
- HTML5
- CSS3
- Positioning Elements
- Flexbox
- Grid Layout
- Adaptive UI
- Media Queries
- Nested File Structure
- BEM Methodology
- JavaScript
- Webpack
Cсылки на макеты в Figma: 1, 2, 3
Работа выполнена по заданию от компании Яндекс
Проверено по чек листам | 4, 5, 6, 7 | check-list 1 | check-list 2 | check-list 3 | check-list 4 |