This project is a desktop-browser-based restaurant website built using JavaScript, CSS, and HTML. The main objectives include demonstrating knowledge of npm, JavaScript ES6 modules, and website development with webpack.
For detailed lessons on these concepts, visit The Odin Project - Project: Restaurant Page.
- The website should consist of three pages: Home, Menu, and Contact.
- Only the
<html>,<body>, and<div id="content">tags should be present in index.html. - All content must be dynamically created using JavaScript inside a
<div>, which is then appended to<div id="content">. - Create a module for each page, a style sheet, and an index.js as the entry point.
- The index.js should contain eventListeners that clear the content and reload the respective page upon clicking its tab.
This project allowed me to improve various skills and integrate previously learned concepts:
Problem Solving
- Recognizing problems
- Planning solutions
- Applying the divide and conquer strategy
Error Correction
- Utilizing Chrome Developer Tools
- Researching solutions online
Clean Code Writing
- Maintaining consistent indentation
- Adopting descriptive naming conventions
- Adhering to principles like YAGNI, DRY, and KISS
CSS
- 🆕 Using 'position: sticky' with the setting of calc() in sibling elements
- Implementing CSS resets
- Incorporating custom fonts
- Applying advanced styling properties
- Prioritizing the use of relative units
- Defining and utilizing custom properties
Javascript & DOM Manipulation
- 🆕 Implementing ES6 modules
- 🆕 Developing a webpage entirely with DOM manipulation
- Using event delegation
- Applying ternary operators
- Creating and manipulating objects
- Understanding various data types
- Implementing conditionals, methods, loops, and functions
- Applying
appendChild()andappend() - Modifying styles and HTML content
- Building eventListeners
Emmet
- Writing HTML using abbreviations
- Applying shortcut keys for efficiency
Git
- 🆕 Using .gitignore
- 🆕 Deploying bundled website to GitHub Pages
- Managing code with branching
npm
- 🆕 Generating the package.json file
- 🆕 Installing packages
- 🆕 Writing scripts as task runners
webpack
- 🆕 Organizing directories for entry and output
- 🆕 Managing assets
- 🆕 Using webpack-dev-server as a development tool
-
google-webfonts-helper by Mario Ranftl
-
UI Designing Tool by Figma.com
-
ColorSpace by mycolor.space
-
Graphic Design Tool by Canva.com
-
ChatGPT-4 by ChatGPT
-
Interior Images by PAKUTASO
-
Food Images by photoAC
JavaScript Related:
CSS Related:
-
Before and After pseudo elements explained - part one: how they work by Kevin Powell
-
How to Fix Issues With CSS Position Sticky Not Working? by DESIGNCIZE
Npm Related:
Design Related: