Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update project_restaurant_page.md #28636

Merged
merged 1 commit into from
Aug 14, 2024
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Update project_restaurant_page.md
Should be http instead of https for localhost link
MisterCage840 authored Aug 14, 2024
commit b600a8811bd22329a7f01d460af51cb324265951
Original file line number Diff line number Diff line change
@@ -30,7 +30,7 @@ When creating a new repo on GitHub, there is an option to specify a `.gitignore`
```

1. Set up an HTML skeleton inside of `src/template.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 serve`. Open [https://localhost:8080](https://localhost:8080) in your browser and check your JavaScript is running.
1. Inside of `src/index.js` write a `console.log` or `alert` statement and then run `npx webpack serve`. Open [http://localhost:8080](http://localhost:8080) in your browser and check your JavaScript is running.
1. Inside `div#content`, create a homepage for your restaurant. You might want to include an image, headline, and some text about how wonderful the restaurant is; you do not have to make this look too fancy. It’s okay to hard-code these into the HTML for now just to see how they look on the page.
1. Now remove everything inside `div#content` from the HTML (so you still have the `<header>` and `<nav>` with an empty `<div id="content">` below it) and instead create them by using JavaScript only, e.g. by appending each new element to `div#content` once the page is first loaded. Since we're all set up to write our code in multiple files, let's write this initial page-load function inside of its own module and then import and call it inside of `index.js`.
1. Next, set up your restaurant site to use tabbed browsing to access the Menu and Contact pages. Look at the behavior of this [student's live preview site](https://web.archive.org/web/20221024060550/https://eckben.github.io/bearysBreakfastBar/) for visual inspiration.