Web Programming Basics
The Web Programming topics are focused on learning Frontend programming, GitHub Pages, and Jupyter Notebooks.
![]() |
Home | HTML | Data Types | DOM | JavaScript | Input | Output | Debugging |
GitHub Pages Frontend Development
This mini project is intended to help student make their own submenu, start Web Programming, and learn GitHub Pages. The original topics for these lessons include …
- Making a menu
- Using the menu to Guide topics
- Make your own customized pages and menu
- Making a page that has dynamic actions through JavaScript
- Review usage of Styles in GitHub Pages
- Start the process of debugging
Files in this mini project
Learning how to identify files in GitHub Pages is a key skill. The class will continually share files and have challenges using GitHup Pages and Jupyter Notebooks.
- To copy files between repostories, open two vscode windows and you can drag and drop
- The _includes directory is the default location to place files that you want to share across many files. i
- Copy the file _includes/nav/frontend_basics.html into the _includes folder of your student repository.
- This creates the navigation links between the different pages in this mini project
- The _notebooks directory is the default location to place all .ipynb files. These are interactive notebooks in VSCode and are converted to Web Pages through GitHub Pages Actions.
- Copy all files that contain frontend-basics in the name.
JavaScript console in VSCode for Jupyter Notebooks
- When printing outputs from javascript to the console you will need to open the developer console
- Go to Help->Toggle Developer Tools and click console on the top bar of the developer window