MetaLamp 2 task - Hotel website layout and UI Kit

Ссылка на стартовую страницу проекта

Второе задание - практика верстки макета сайта по поиску номеров отеля из Figma.

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

• Разработка велась под последние версии Chrome и Firefox (last 3 version)
• Применен подход отзывчиво-адаптивной (responsive) верстки для разрешений экрана от 320px до 1980px
• Компонентный подход выполнен по принципу разделения интерфейса на независимые блоки (методология БЭМ)
• Для соблюдения компонентного подхода были использованы такие инструменты, как сборщик проектов Webpack (version 5), шаблонизатор Pug(Jade) и препроцессор SCSS
• Для преобразования кода ECMAScript 2015+ в обратно совместимую версию JavaScript использован Babel, а для обратной совместимости новых свойств CSS применен PostCSS (autoprefixer, css-mqpacker, cssnano)
• В проекте используется стайлгайд от AirBnB для соблюдения лучшей читаемости, единообразия и чистоты кода
• Для проверки JavaScript и SCSS кода на соответствие стайлгайду AirBnB в проекте используются линтеры eslint и stylelint
• Использован шрифт, находящийся в свободном доступе: Montserrat. Все шрифты подключены локально в форматах: woff2, woff, ttf и svg.
• Также некоторые элементы дизайна выполнены иконочными шрифтами Material Icons и Font Awesome 5
• Для контроля максимального соответствия макету использовалось браузерное расширение PerfectPixel

В проекте выполнен Ui Kit (единый макет дизайна), который состоит из четырех отдельных страниц:

• Colors & Types
• Headers & Footers
• Form & Elements
• Cards

А также макет сайта, который включает в себя 5 страниц:

• Landing
• Sign in page
• Registration page
• Search room
• Room details

Развертывание

Clone repository:

  https://github.com/fullstack-development/frontend-intership-toxin.git

npm install - installing dependencies

Development server:

npm start - start of the project on the server localhost:8081

Linting code:

npm run lint - linting javascript code

npm run lint:fix - fix javascript syntax errors

Deploying project:

npm run deploy - deploying the project to gh-pages

Сторонние библиотеки

В проекте использованы сторонние JavaScript библиотеки:

• Air Datepicker (version 2.2.3)
• Inputmask (version 5.0.6)
• jQuery (version 3.6.0)
• jQuery UI Slider (version 1.12.1)
• Pagination.js (version 2.1.5)
• Slick (version 1.8.1)