olga-kozhevina / mesto

Mesto - frontend (JS, CSS, HTML) (Я.Практикум - курс Веб-разработчик)

Проект: "Mesto"

Яндекс Практикум - Учебный проект

Описание проекта

Целью проектной работы было создание сервиса Mesto: интерактивной страницы, куда можно добавлять фотографии, удалять их и ставить лайки.

Основные применяемые технологии в рамках данного проекта:

1. CSS (позиционирование, флексбокс, грид, формы, адаптивная верстка на различные экраны от минимум 320рх до 1280рх, псевдоклассы);
2. HTML5;
3. БЭМ методолгия;
4. Nested БЭМ - структура файлов;
5. Использование макета для разработки из Figma;
6. Реализация Popup для кнопки редактирования профиля с помощью JavaScript;
7. Git - работа с ветками;
8. Работа с DOM.

4 спринт: реализация верстки и создание активной кнопки для редактирования профиля.

• Ссылка на макет в Figma

5 спринт: реализация добавления новой карточки в сетку с изображениями (создание формы добавления карточки, добавление самого изображения, реализация лайка, реализация удаления карточки, возможность открытия модального окна для просмотра изображения).

• Ссылка на макет в Figma

6 спринт: реализация универсальной функции по валидации полей (текстовых и поля для ссылки url), реализация двух способов по закрытию всех попапов с помощью клика на оверлэй или по кнопке Esc.

• Ссылка на макет в Figma

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;

Ссылка на сайт проектной работы →