Home HTML Data Types DOM JavaScript JS Debugging

A guide to basic concepts in Web Notebook

  • Making a menu
  • Review foundational topics (see menus HTML, JavaScript, DOM, CSS)
  • Guide to make your own custom page
  • Making page dynamic through JavaScript
  • Looking at Styles in GitHub Pages

How to import this setup into your student repository

  • NOTE: To copy files between repostories, open two vscode windows and you can drag and drop Copy the file _includes/nav_basics.html into the _includes folder of your student repository This creates the navigation between the different pages in the Web Dev Basics Copy the following files from _notebooks into your _notebooks folder 2023-03-28-basics-home.ipynb, 2023-03-28-basics-html.ipynb, 2023-03-29-basics-of-js.ipynb, 2023-08-30-basics-of-js-data-types.ipynb, 2023-08-30-basics-js-with-html.ipynb, 2023-09-20-1_4-js-errors.ipynb In the basics homepage (2023-03-28-basics-home.ipynb), you need to make an edit In the top cell, modify the courses to say { compsci: { week: 5 } } (this will move this into your schedule page) Seeing javascript console output in visual studio 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