This project is a dynamic, single-page restaurant website built as part of The Odin Project's curriculum. The primary focus was on using JavaScript to generate all the content dynamically and bundling the files using Webpack.
- Purely Dynamic: All content, including the pages, is generated and manipulated using JavaScript.
- Tabbed Browse: Seamlessly switch between Home, Menu, and About Us pages without a page reload.
- Module Bundling: Uses Webpack to bundle JavaScript modules, CSS, and assets for an optimized workflow.
- HTML5
- CSS3
- JavaScript (ES6 Modules)
- Webpack
- npm
You can view the live version of the project here:
To get a local copy up and running, follow these simple steps.
Make sure you have Node.js and npm installed on your machine. You can download them from nodejs.org.
-
Clone the repository:
git clone https://github.com/devxsameer/restaurant-page.git
-
Navigate into the project directory:
cd restaurant-page -
Install the dependencies specified in
package.json:npm install
-
Start the Webpack development server: This command will open a live server, usually at
http://localhost:8080.npm run dev
And you're all set! The project will automatically open in your default browser. 🔥
- Gained hands-on experience setting up a modern JavaScript project from scratch using
npm init. - Learned to configure
webpack.config.jsfor development (mode: 'development'), setting up entry and output points, and using thewebpack-dev-server. - Practiced organizing code into separate ES6 modules for better maintainability (e.g.,
home.js,menu.js,contact.js) and importing/exporting functions. - Solidified DOM manipulation skills by building the entire page structure with JavaScript functions instead of static HTML.