https://github.com/sibisov-artem/mesto
Проект: Место
https://github.com/sibisov-artem/mesto
css3 html5 js webpack
Last synced: 3 months ago
JSON representation
Проект: Место
- Host: GitHub
- URL: https://github.com/sibisov-artem/mesto
- Owner: Sibisov-Artem
- Created: 2023-01-11T17:12:08.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2023-09-30T18:26:57.000Z (almost 3 years ago)
- Last Synced: 2025-06-06T22:06:26.774Z (about 1 year ago)
- Topics: css3, html5, js, webpack
- Language: JavaScript
- Homepage: https://sibisov-artem.github.io/mesto/
- Size: 2.41 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# **Проектная работа: "Место" (ванильный JS). Создана в рамках учебы в Яндекс.Практикум**
*Является итоговой работой за 4-9 спринтs*
---
## ***Описание и функциональность***
Данный проект представляет из себя интерактивную страницу, которая позволяет пользователям делиться своими фотографиями.
***На страницы представлены:***
* Профиль пользователя и данные о нём;
* Фото-карточки с возможностью добавления и оценивания.
***Функциональность:***
* Редактирование профиля (имя и профессия);
* Добавление/удаление своих фото-карточек;
* Возможность поставить/снять лайк фото-карточке;
* Просмотр фотографии на полный экран;
* Плавное открытие/закрытие попапов;
* Закрытие попапа по оверлею (фону) и по нажатию на Escape;
* Реализована валидация всех форм;
* Все данные хранятся на сервере, использовано стороннее API.
---
## ***Ссылка на выполненную работу на GitHub Pages:***
**https://sibisov-artem.github.io/mesto/**
---
## ***Используемые технологии:***
### *HTML*
* Семантические теги
* БЭМ-методология
### *СSS*
* БЭМ (Nested)
* Flexbox
* Grid Layout
* Псевдоклассы CSS
* Анимация элементов
* Позиционирование блоков и элементов
* Responsive верстка (отзывчивая) через сочетание адаптивной верстки через медиа-запросы и верстки резиновой через использование относительных размеров блоков
### *JavaScript*
### *Сборка проекта осуществлена с помощью Webpack*
### *Ссылки на макеты Figma:*
* [по 4 спринту](https://www.figma.com/file/2cn9N9jSkmxD84oJik7xL7/JavaScript.-Sprint-4?node-id=0%3A1)
* [по 5 спринту](https://www.figma.com/file/bjyvbKKJN2naO0ucURl2Z0/JavaScript.-Sprint-5?node-id=0%3A1)
* [по 6 спринту](https://www.figma.com/file/kRVLKwYG3d1HGLvh7JFWRT/JavaScript.-Sprint-6?node-id=0%3A1)
* [по 9 спринту](https://www.figma.com/file/PSdQFRHoxXJFs2FH8IXViF/JavaScript.-Sprint-9?node-id=0%3A1)
### *Соответствие макету проводилось с помощью PerfectPixel.*
---
## ***Инструкция по развёртыванию:***
Клонировать репозиторий на свой компьютер через командную строку:
```
git clone https://github.com/Sibisov-Artem/mesto.git
```
или скачать архивом и распаковать.
**Запуск проекта:**
`npm ci` — установка зависимостей
`npm run dev` — запускает проект на локальном сервере