Описание работы: Веб сервис "Mesto" - интерактивная страница, куда можно добавлять фотографии, удалять их и ставить лайки.
Задание 9: Обеспечить работу страницы с сервером: загрузку с сервера карточек, информации о профиле и т.д..
Задание 8: Создать классы: Section, Popup, PopupWithImage, PopupWithForm, UserInfo, преобразовать согласно задания класс Card, создать файл .gitignore и добавить вне го все папки которые не нужно отслеживать, выполнить рефакторинг кода в парадигме ООП. Настройте сборку Вебпаком.
Задание: По макету в Figma необходимо сверстать адаптивный отзывчивый сайт, написать часть логики на JavaScript, опубликовать работу в gh-pages.
- HTML, CSS
- Анимация CSS
- Nested БЭМ
- Flex, Grid Layout, резиновая верстка, адаптивная верстка, отзывчивый интерфейс
- JavaScript
- Git - распределённая система управления версиями проектов
- GitHub - веб-сервис для хостинга IT-проектов и их совместной разработки с использованием системы контроля версий Git
- Внешний вид сайта соответствует макету в Figma
- Файловая структура проекта организована по технологии Nested БЭМ
- Сайт должен быть адаптивным, отзывчивым
- Минимальная ширина: 320px (одна карточка в ряд)
- Максимальная ширина: 1280px (три карточки в ряд)
- На странице присутствуют 6 карточек с фотографиями
- Реализовать диалоговое окно «Редактировать профиль» из макета
- Реализовать обработку ситуации "переполнение содержимого в блоке"
- Реализовать для иконки "сердечко" переход из ненажатого состояния в нажатое (закрашивается в черный цвет)
- Реализовать открытие, закрытие и логику работы попапа «Редактировать профиль» с помощью JavaSript
- При загрузке страницы 6 карточек добавляются с помощью функции JS
- Добавить форму и логику добавления нового места
- Реализовать логику, чтобы пользователь мог сам добавлять и удалять карточки, ставить лайки
- При нажатии на картинку карточки должно появлять окно с изображением на весь экран
- Максимальная ширина попапа с изображением крупным планом - 75vw
- Максимальная высота попапа с изображением крупным планом - 75vh
- Сделать анимацию - планое открытие и закрытие попапов
- Сделать возможным закрытие попапа при нажатии по оверлею или кнопки Escape
- Сделать валидацию форм средствами HTML5 и JS
- Выложить готовую работу на gh-pages
- Чеклист для самопроверки