This is intended as a basic guide to using HTML, CSS and Javascript to build a menu and basic website. It assumes you know how HTML and CSS work and provides a quick intro on how to use those with javascript to create dynamic HTML pages.
Each lesson is a different branch of this repo. Once the dev build is watching files and running in the browser you can checkout whichever branch you want to look at and the web page will update to reflect the changes.
The readme file for each branch explains what each part of the code is doing for each lesson.
Use your browser dev tools to inspect menu elements and CSS properties and play with the values and options described in each lesson to see how they alter the menu.
This is a webpack project with both a dev and build option.
Install required node packages with npm i
Run the examples with npm run dev
Build files for the web with npm run build
Lesson 01 - Static HTML and CSS
Create a static menu with HTML and CSS
Lesson 02 - CSS Transitions
Add hover effects to buttons using CSS Transitions
Lesson 03 - Creating Elements With Javascript
Create HTML elements from json data using javascript
Lesson 04 - Adding Functionality With Events and Callbacks
Adding extra user feedback and usability to the menu
Lesson 05 - Extra: Using The Menu
Make the menu toggle in and out of view and update page content