From 5ca4e44dc1418695a44ba254af40ee5ae2422d98 Mon Sep 17 00:00:00 2001
From: Can Sirin <cansirin12@gmail.com>
Date: Sat, 9 Mar 2024 00:59:44 -0800
Subject: [PATCH] Update project_restaurant_page.md (#857)

---
 .../project_restaurant_page.md                        | 11 +++++------
 1 file changed, 5 insertions(+), 6 deletions(-)

diff --git a/content/odin/javascript/organizing_your_javascript_code/project_restaurant_page.md b/content/odin/javascript/organizing_your_javascript_code/project_restaurant_page.md
index 0cde084d..d09a9146 100644
--- a/content/odin/javascript/organizing_your_javascript_code/project_restaurant_page.md
+++ b/content/odin/javascript/organizing_your_javascript_code/project_restaurant_page.md
@@ -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.
 
@@ -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>