https://github.com/lucajahnen/restaurant-page
A restaurant page
https://github.com/lucajahnen/restaurant-page
odin-project webpack
Last synced: 6 months ago
JSON representation
A restaurant page
- Host: GitHub
- URL: https://github.com/lucajahnen/restaurant-page
- Owner: LucaJahnen
- Created: 2024-07-22T16:38:32.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-07-24T08:26:56.000Z (almost 2 years ago)
- Last Synced: 2025-02-11T17:56:16.893Z (over 1 year ago)
- Topics: odin-project, webpack
- Language: JavaScript
- Homepage: https://restaurant354.netlify.app/
- Size: 239 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Restaurant Page Challenge - TheOdinProject
This is my solution to the [Restaurant Page Challenge](https://www.theodinproject.com/lessons/node-path-javascript-restaurant-page) provided by [TheOdinProject](https://TheOdinProject.com).
## The challenge
The Challenge was to create a Restaurant Page that has multiple pages. Each Page should be its own module.
## Built with
- [webpack](https://webpack.js.org/)
- [HtmlWebpackPlugin](https://webpack.js.org/plugins/html-webpack-plugin/)
- [style-loader](https://webpack.js.org/loaders/style-loader/)
## My Process
First, I set up the html navigation and the made sure it was working and the home page would show up when the page was loaded. I asked [ChatGPT](https://chatgpt.com/) for some dummy data and then thought of a basic layout for desktop and mobile. The main task was to generate html elements using javascript which took some time because I hadn't done this before.
### Assets
I decided to download the [Poppins](https://fonts.google.com/specimen/Poppins) ttf-files from [Google Fonts](https://fonts.google.com/) to practice using assets in webpack.
Each file looked similar to this:
```js
export default function Home() {
const element = document.createElement("div")
element.textContent = "home"
return element
}
```
## Hosting
To host this project I used [netlify](https://netlify.com) and first had some issues because I didn't specify the dist folder and didn't tell netlify to use npx webpack to build.