📖 Сайт бронирования номеров

О чём проект?

📖 Сайт бронирования номеров - многостраничный сайт, созданный из компонентов

Зачем этот проект?

Проект - практика верстки многостраничного отзывчевого сайта, состоящего из самописных компонентов

Сайт создан под Google Chrome

Практика навыков:

• Создание сборки webpack
• Создание универсальных компонентов с дальнейшим их использованием
• Алгоритмы на JQuery
• Создание собственных скриптов: календарь, превью комнаты, навигация, меню гостей, меню комнат
• Простые CSS анимации
• Общая логика страницы, SessionStorage

Демо

Ссылка на сайт

Процесс создания

Этап 1 - создание универсальных елементов (поле ввода, кнопки, слайдеры...)

Этап 2 - создание универсальных блоков (форма регистрации, календарь...)

Этап 3 - создание страниц из универсальных блоков (приветствие, каталог номеров, описание номеров, регистрация/вход, страница ошибки)

Под каждый элемент этапа создается собственная папка, где находится весь код элемента

Используемые библиотеки

1. HtmlWebpackPlugin
2. CleanWebpackPlugin
3. MiniCssExtractPlugin
4. simple-pug-loader
5. css-loader
6. sass-loader
7. normalize.css
8. jQuery
9. ion-rangeslider
10. jquery-mask-plugin
11. echarts
12. webpack
13. webpack-cli
14. webpack-dev-server

Инструкции по сборке и запуску проекта

Все элементы (компоненты, карточки, страницы) ноходятся в папке src

2 версии проекта

1. HTML, CSS, JS
2. Pug, SCSS, JS

Запуск проекта c помощью Webpack:

1. Клонирование проекта https://github.com/Mohiroo/task-2.git
   - npm run d - создание версии разработчика
   - npm run p - создание версии для сайта
   - npm run s - создание локального сайта