Skip to content

Commit

Permalink
Update project_restaurant_page.md (#857)
Browse files Browse the repository at this point in the history
  • Loading branch information
cansirin authored Mar 9, 2024
1 parent 1b8fc3f commit 5ca4e44
Showing 1 changed file with 5 additions and 6 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -16,15 +16,15 @@ Let's use what we've learned and take a chance to continue practicing DOM manipu
- Quick tip: the `node_modules` folder can get *really* big. It is customary to add a `.gitignore` file to your project so that you don't have to sync the contents of `node_modules` to github. The dependencies that are stored there can be installed from your package.json by running `npm install`, so you don't need to sync them.

1. Create a `src` and `dist` directory with the following contents:
1. an `index.js` file in `src`
1. an `index.js` file in `src`.

1. an `index.html` file in `dist`. Go ahead and link the `main.js` file in a script tag. `main.js` is the file that will be generated by webpack.
1. an `index.html` file in `src`. This file will not need a script tag, because we're using `html-webpack-plugin`, which automatically adds that in. You will also not need to link a CSS stylesheet as you should be importing it into your JavaScript and letting your webpack configuration handle bundling.

1. create a `webpack.config.js` file that looks just like our file from the [tutorial](https://webpack.js.org/guides/getting-started/#using-a-configuration).
1. create a `webpack.config.js` file that looks just like our file from the [tutorial](https://webpack.js.org/guides/getting-started/#using-a-configuration). Don't forget to add the `html-webpack-plugin` config to your `webpack.config.js` and set its `template` option with a path to `src/index.html`.

1. Set up an HTML skeleton inside of `dist/index.html`. Inside the body, add a `<header>` element that contains a `<nav>` with buttons (not links!) for different "tabs" (for example buttons for "Home", "Menu" or "About" etc). Below the `<header>`, add a single `<div id="content">`.
1. Set up an HTML skeleton inside of `src/index.html`. Inside the body, add a `<header>` element that contains a `<nav>` with buttons (not links!) for different "tabs" (for example buttons for "Home", "Menu" or "About" etc). Below the `<header>`, add a single `<div id="content">`.

1. Inside of `src/index.js` write a console.log or alert statement and then run `npx webpack`. Load up `dist/index.html` in a browser to make sure everything is working correctly.
1. Inside of `src/index.js` write a `console.log` or `alert` statement and then run `npx webpack`. Load up `src/index.html` in a browser to make sure everything is working correctly.

- Quick tip #2: if you run `npx webpack --watch` you will not have to rerun webpack every time you make a change.

Expand Down Expand Up @@ -52,5 +52,4 @@ Let's use what we've learned and take a chance to continue practicing DOM manipu
- To learn more about this, here's a short tutorial video on [Node Package Manager Scripts](https://www.youtube.com/watch?v=REdzp64dijs).

1. Recall that the **source branch** for GitHub Pages is set in your repository's settings.

</div>

0 comments on commit 5ca4e44

Please sign in to comment.