restaurant-page

Live Demo

About

A dynamic restaurant homepage built with JavaScript modules and Webpack, demonstrating DOM manipulation, tab navigation, and modular CSS styling. Bundled using split Webpack configs for development and production.

Features

• Dynamic content: Homepage, Menu, and About sections generated via JavaScript.

• Tabbed navigation: Switch between Home, Menu, and About without page reload.

• Responsive design: Flexbox and CSS Grid layouts for structured content.

• Category-specific styling: Menu items styled according to their type.

• Images with alt text: All food images include descriptive alt attributes.

• Footer with author link: Includes copyright and GitHub link.

Installation

1. Clone the repository:

   git clone https://github.com/nishadnp/restaurant-page.git
   cd restaurant-page

2. Install dependencies:

   npm install

3. Start development server:

   npm run start

4. Open http://localhost:8080 in your browser.

Build

npm run build

This bundles the application into the dist folder for production.

Deployment

Deployed via GitHub Pages:

npm run deploy

Project Structure

src/
├─ index.js         # Entry point
├─ home.js          
├─ menu.js          
├─ about.js         
├─ styles.css      
├─ assets/         
└─ template.html    # Base HTML 

Author

Nishad Np | @nishadnp