About

A simple restaurant website.

The main objectives of this project was to practice on the use and configuration of Webpack, and the use of JavaScript ES6 modules.

This website was created as part of The Odin Project, an online course on web development.

Live preview

Languages

• HTML
• SCSS: Used for styling utilizing the 7-1 file structure
• JavaScript: Separated the code in modules based on function and utility

Tools

• Webpack: Project management/bundler
• Babel
  • Babel preset-env: Enables the use of the latest JavaScript without needing to micromanage which syntax transforms are needed by the target environment
• SASS: It is a CSS extension that' s used to add features like variables, nested rules, mixins, inline imports, inheritance and more, all with fully CSS-compatible syntax.
• PostCSS: A tool for transforming CSS with JavaScript
  • PostCSS Preset Env: Enables the use of the latest CSS features by modifying the end CSS code to ensure browser compatibility
  • Autoprefixer: Automatically add vendor prefixes in CSS to ensure browser compatibility
• Webpack Bundle Analyzer: Visualize size of webpack output files with an interactive zoomable treemap
• Webpack Dev Server: Serves the webpack app and provides live browser reloading on file changes
• ESLint: Linter that statically analyzes the JavaScript code to quickly find problems