This project is part of The Odin Project - Full Stack JavaScript Path. The main goals are configuring Webpack, using Npm and a code design with ES6 Modules. As content the page is around a Soup Restaurant which does not exist.
- HTML
- CSS
- JavaScript
- Npm
- Webpack
-
Run npm init in your project directory to generate a package.json file.
-
Run npm install webpack webpack-cli --save-dev to install webpack to the node_modules directory of your project.
-
Create a src and dist directory with the following contents:
- an index.js file in src;
- an index.html file in dist.
-
Create a webpack.config.js file that looks just like our file from the tutorial.
-
Set up an HTML skeleton inside of dist/index.html with single
<div id="content">. -
Create a bare-bones homepage for a restaurant. Include an image, headline, and some copy about how wonderful the restaurant is. It’s okay to hard-code these into the HTML for now just to see how they look on the page.
-
Now remove those elements from the HTML (so leave only the
<html>,<body>, and<div id="content">tags) and instead create them by using JavaScript only -
Next, set up your restaurant site to use tabbed browsing to access the Contact and Menu pages.
-
Put the contents of each ‘tab’ inside of its own module.
-
Write the tab-switching logic inside of index.js. You should have event listeners for each tab that wipes out the current contents and then runs the correct ‘tab module’ to populate it again.
-
Backgrounds:
- bg-home.jpg: Photo by Albert Vincent Wu on Unsplash.
- bg-about.jpg: Photo by Gabriel Gurrola on Unsplash.
- bg-menu.jpg: Photo by Lauren Mancke on Unsplash.
- bg-contact.jpg: Photo by Lindsay Moe on Unsplash.
-
Dish on menu:
- img-soup-0.jpg: Photo by Nathan Dumlao on Unsplash.
- img-soup-1.jpg: Photo by Sandie Clarke on Unsplash.
- img-soup-2.jpg: Photo by Cala on Unsplash.
- img-soup-3.jpg: Photo by Green and Great on Unsplash.
- img-soup-4.jpg: Photo by Rina Berg on Unsplash.
- img-soup-5.jpg: Photo by Gianluca Gerardi on Unsplash.
- img-soup-6.jpg: Photo by Ting Tian on Unsplash.