Build a simple restaurant webpage and use JavaScript only to render the content.
- Initialise this project.
- 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. Go ahead and link the main.js file in a script tag. main.js is the file that will be generated by webpack.
- create a webpack.config.js and do the basic configurations.
- Set up an HTML skeleton inside of dist/index.html with single .
- Inside of src/index.js write a simple 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.
- 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 , , and tags) 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 it’s own module and then import and call it inside of index.js.
- Next, set up your restaurant site to use tabbed browsing to access the Contact and Menu pages. Look at
#7 on this hongkiat post
for visual inspiration. - If you are using GitHub pages to host your completed page you need to do a tiny bit more work to get it to show up. After running webpack the full bundled version of your site is available in the dist folder, but GH pages is looking for an index.html in the root directory of your project.
- HTML5
- CSS
- Bootstrap
- Javascript ES6
- webpack
To get a local copy up and running follow these steps:
Mozilla Firefox
- Javascript enabled
- Fork/Clone this project to your local machine
- Open folder in your local enviroment and run these lines of code to get started:
- Double click on index.html
- To view in IDE just open project folder in your prefered IDE
👤 Tendongze Godson
- Github: tGodson
- Twitter: @tendongze95
- Linkedin: linkedin
Contributions and feature requests are welcome!
Start by:
- Forking the project
- Clone the project to your local machine by running
git clone https://github.com/tGodson/Restaurant-page.git
cd
into the project directory- Run
git checkout -b your-branch-name
- Make your contributions
- Push your branch up to your forked repository
- Open a Pull Request with a detailed description to the development(or master if not available) branch of the original project for a review
Give a ⭐️ if you like this project!