Данный проект представляет собой одностраничный сайт.
- Страница сайта расположена по адресу: https://izhubrov.github.io/mesto/.
- Собранный через Webpack проект расположен по адресу: https://github.com/izhubrov/mesto.
- Применяемое API, сервер: https://mesto.nomoreparties.co
Расположен в онлайн-сервисе для разработки интерфесов - графическом редакторе Figma по адресам:
- https://www.figma.com/file/2cn9N9jSkmxD84oJik7xL7/JavaScript.-Sprint-4?node-id=0%3A1
- https://www.figma.com/file/bjyvbKKJN2naO0ucURl2Z0/JavaScript.-Sprint-5?node-id=0%3A1
- https://www.figma.com/file/kRVLKwYG3d1HGLvh7JFWRT/JavaScript.-Sprint-6?node-id=0%3A1
- Установите Node.js
- Установите Git Bash для Windows OS
- Склонируйте проект https://github.com/izhubrov/mesto.git
- Установите необходимые зависимости из package.json
- Для локального запуска введите команду npm run dev
- Для сборки проекта введите команду npm run build
- Для работы с gh-pages установите пакет gh-pages следующей командой npm install gh-pages --save-dev
- Для деплоя проекта введите команду npm run deploy
- Основным требованием при верстке сайта являлось его корректное отображение на различных разрешениях экрана с плавным появлением Popup форм редактирования профиля пользователя, добавления карточек через форму Popup и увеличением картинки.
- Должна быть реализована возможность удаления карточек, лайка и увеличения изображения через Popup.
- Должна быть реализована проверка на валидность полей ввода Popup с помощью встроенного API JavaScript.
- Должна быть реализована возможность закрытия Popup с помощью нажатия клавиши Escape и клика на фон.
- Создание карточки, форм Popup и проверка на валидность формы должна быть реализована через Классы с применением основ Объектно-ориентированного программирования.
- Проект должен быть собран с помощью пакета Node package manager (NPM) сборщика проектов Webpack.
- При сборке проекта должна быть применена транспиляция с помощью NPM-пакета Babel (новый синтаксис JS превращается в старый, решается проблема совместимости).
- Для того, чтобы Webpack умел работать с HTML документом должен быть установлен плагин HTMLWebpackPlugin c возможностью очищения директории с выходным проектом с помощью плагина CleanWebpackPlugin.
- Для обработки Webpack файлов с расширением .css должны быть установлены пакеты CssLoader и MiniCSSExtractPlugin.
- Код должен быть минифицирован (удаление пробелов, комментариев и переносов строк) с помощью пакета PostCssLoader и плагина CssNano.
- В код должны добавляться префиксы с помощью AutoPrefixer plagin.
- Флекс-бокс верстка.
- Грид таблицы.
- Выразительные семантические теги (section, ul, footer).
- Позиционирование элементов (относительное, фиксированное, абсолютное, z-index).
- Относительные пути к файлам.
- Трансформация с плавностью перехода.
- Методология наименования классов CSS БЭМ Nested.
- Относительные размеры блоков.
- Вычисляемые значения (функция calc).
- Оптимизация шрифтов (сглаживание, подгонка размера текста, рендеринг).
- Метатег корректного масштабирования страницы (@media).
- Подключение локального шрифта Inter через директиву @font-face.
- Выбор элементов в Document Object Model (DOM) дереве (метод querySelector).
- Функции открытия, закрытия и отправки формы Popup.
- Функции удаления, лайка и увеличения изображения карточки.
- Функции проверки на валидность полей ввода Popup.
- Добавление в DOM-дерево карточек через шаблоны template.
- Отмена стандартной обработки событий браузера методом события preventDefault().
- Метод addEventListener для ослеживания событий "submit" для корректной отправки формы и события "mousedown" и "keydown" для закрытия формы.
- Методы добавления и удаления классов css элементов через свойство classList и методы Add и Remove для отображения и скрытия формы.
- Основы объектно-ориентированого программирования - классы при создании карточек, форм и проверки валидности полей.
- Сборка проекта осуществляется с NPM пакета Webpack.
- Настроена транспиляция с помощью NPM-пакета Babel.
- Для работы с HTML документом установлен плагин HTMLWebpackPlugin и CleanWebpackPlugin.
- Для работы с файлами с расширением .css должны установлены пакеты CssLoader и MiniCSSExtractPlugin.
- Код минифицирован с помощью пакета PostCssLoader и плагина CssNano.
- В код добавляются префиксы с помощью AutoPrefixer plagin.
C помощью метода fetch и промисов (Promise).
- Осуществляется загрузка карточек с сервера.
- Загружается профиль и аватар пользователя с сервера.
- Загружаются лайки пользователей и возможность ставить самому лайки с отправкой данных на сервер.
- Возможно удаление карточек, созданных самим пользователем.
Сайт получился отзывчивым (резиновым и адаптивным), корректно отображается на устройствах с разрешением от 320px и есть возможность изменять данные сайта с проверкой на валидность. Проект реализован на классах и собирается с помощью сборщика Webpack. Проект взаимодействует с сервером.