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