Toxin is a hotel website for room reservations, which is an educational project for learning front-end development, a part of MetaLamp's Education Program. It is based on Figma's design, which was made specifically for studying purposes.
Compatible with
- node v18.10.0
- npm 8.19.2
- Learn and understand how to build relatively big and complicated projects from scratch, using Pug, Scss, Js
- Search, install and implement jQuery plugins into project
- Work with Webpack and Figma
- Code with BEM methodology
- Use PixelPerfect extension to match web elements according to the design
- Create responsive and flexible web-pages
- Landing
- Landing / Dates Dropdown
- Landing / Guests Dropdown
- Search room / Filter
- Search room / Filter / Preferences Dropdown
- Search room / Filter / Preferences Expandable Checkbox list
- Room details
- Registration
- Sign in
- webpack
- material-icons
- FortAwesome-Free
- air-datepicker
- chart-js
- imask
- jquery
- moment
- noUiSlider
- paginationjs
git clone https://github.com/Riemelt/Toxin.git
cd Toxin
npm iRun on dev-server
npm startBuild in development mode
npm run devBuild in production mode
npm run build├───dist # built web-pages
├───pixel-perfect # exported png images of figma's design for pixel-perfect
└───src
├───assets # image, font, favicon files
├───components # bem blocks, one folder per component
├───layouts # layouts with general page structure
├───main-styles # scss variables, global styles, fonts loading
├───pages # final web-pages and all entry points, one folder per page
├───utilities # js helper functions
├───.eslintrc.js # eslint rules for js
├───.gitignore # list of folders to ignore to commit such as node_modules and dist
├───package-lock.json # node_modules dependencies
├───package.json # project info and dependencies
├───README.md # project info and documentation
├───webpack.config.js # bundler config