Целью проектной работы было создание сервиса Mesto: интерактивной страницы, куда можно добавлять фотографии, удалять их и ставить лайки.
- CSS (позиционирование, флексбокс, грид, формы, адаптивная верстка на различные экраны от минимум 320рх до 1280рх, псевдоклассы);
- HTML5;
- БЭМ методолгия;
- Nested БЭМ - структура файлов;
- Использование макета для разработки из Figma;
- Реализация Popup для кнопки редактирования профиля с помощью JavaScript;
- Git - работа с ветками;
- Работа с DOM.
4 спринт: реализация верстки и создание активной кнопки для редактирования профиля.
5 спринт: реализация добавления новой карточки в сетку с изображениями (создание формы добавления карточки, добавление самого изображения, реализация лайка, реализация удаления карточки, возможность открытия модального окна для просмотра изображения).
6 спринт: реализация универсальной функции по валидации полей (текстовых и поля для ссылки url), реализация двух способов по закрытию всех попапов с помощью клика на оверлэй или по кнопке Esc.
7 спринт: выполнить рефакторинг уже написанного кода из 6 спринта, используя парадигму программирования ООП.
8 спринт: выполнить рефакторинг кода из 7 спринта, используя парадигму программирования ООП. А именно: создать несколько классов и настроить связи между ними. Осуществить сборку проекта с помощью Webpack.
9 спринт: выполнить рефакторинг кода, задеплоить проект, осуществить связь с сервером и реализовать возможность смены аватара и удаления только своих карточек.
- Реализовать задачи по JavaScript согласно следующим спринтам
- подключение normalize.css;
- страница валидна;
- верстка адаптивна и работает на всех брейкпоинтах;
- все блоки сверстаны и отображают все требования согласно ТЗ (макет Figma);
- все ссылки активные;
- все изображения совпровождаются атрибутом alt;
- теги и элементы используются согласно БЭМ;
- создана сетка с помощью flex или grid-layout;
- присутствуют файлы index.html, index.css, README.md, директории blocks и images;
- ссылки видоизменяются при наведении*
- необходимые элементы DOM вынесены в переменные;
- консоль не выдает ошибок;
- Popup открывается и закрывается при нажатии на кнопку редактирования и кнопку закрытия соответственно;
- С помощью JavaScript реализовано изменение информации в профиле;
- С помощью JavaScript реализованы возможности добавления новой карточки, ее лайк, удаление и просмотр;
- С помощью JavaScript реализованы возможности валидации полей и закрытия попапов по клику на фон или по кнопке Esc;
- ООП программирование;
- Webpack;
- API;
- Gh-pages - project deployment;