Middle Ring Restaurant

Project info

A restaurant page with tabbed content that uses JavaScript alone to generate all of the content on the page. The purpose of this project is to practice using JavaScript modules and webpack.

Project description can be found here

Live demo

Live demo available here

Table of Contents

• Features
• Technologies utilized
• Learning outcomes
• Project screenshots
• Behind the Scenes
• Installation

Features

• Custom CSS font
• Responsive design
• Navigation tabs

Technologies utilized

• HTML5
• CSS3
• JavaScript ES6
• webpack

Learning outcomes

This project helped to reinforce the following skills:

• webpack
• JavaScript modules
• DOM manipulation

Project screenshots

Welcome:

Menu:

Resources:

Behind the scenes

Resources

• Middle Ring Restaurant wiki
• Cuisine in the World of Avatar wiki
• Ba Sing Se wiki
• This resource is helpful when deploying to gh-pages after webpack is run.

Installation

• Clone this repository to your desktop.
• Navigate to the top level of the directory by running cd odin-restaurant-page.
• Run npm install to install the required dependencies.
• Open dist/index.html in your browser.
• Run npm run watch to update the dist folder on save
• Refresh page after saving to see changes