/frontend-intership-toxin

Primary LanguagePug

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 (единый макет дизайна), который состоит из четырех отдельных страниц:

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

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

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 библиотеки: