{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "---\n",
    "layout: post\n",
    "title: Web Programming Basics\n",
    "description: An introduction to key topics in Web Programming\n",
    "courses: { compsci: {week: 6} }\n",
    "type: hacks\n",
    "permalink: /basics/home\n",
    "comments: true\n",
    "---"
   ]
  },
  {
   "cell_type": "raw",
   "metadata": {},
   "source": [
    "<table>
    <tr>
        <td><img src="/han3//images/logo.png" height="60" title="Frontend" alt=""></td>
        <td><a href="/han3/basics/home">Home</a></td>
        <td><a href="/han3/basics/html">HTML</a></td>
        <td><a href="/han3/basics/datatypes">Data Types</a></td>
        <td><a href="/han3/basics/dom">DOM</a></td>
        <td><a href="/han3/basics/javascript">JavaScript</a></td>
        <td><a href="/han3/basics/js-debug">JS Debugging</a></td>
    </tr>
</table>"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "\n",
    "# A guide to basic concepts in Web Notebook\n",
    "- Making a menu\n",
    "- Use menu to Guide topics\n",
    "- Make your own custom page and menu\n",
    "- Making a page dynamic through JavaScript\n",
    "- Review usage of Styles in GitHub Pages\n",
    "\n",
    "# How to import this setup into your student repository\n",
    "- NOTE: To copy files between repostories, open two vscode windows and you can drag and drop\n",
    "- Copy the file _includes/nav_basics.html into the _includes folder of your student repository\n",
    "  - This creates the navigation between the different pages in the Web Dev Basics\n",
    "- Copy the following files from _notebooks into your _notebooks folder\n",
    "  - 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\n",
    "- In the basics homepage (2023-03-28-basics-home.ipynb), you need to make an edit\n",
    "  - In the top cell, modify the courses to say `{ compsci: { week: 5 } }` (this will move this into your schedule page)\n",
    "\n",
    "# Seeing javascript console output in visual studio\n",
    "- When printing outputs from javascript to the console you will need to open the developer console\n",
    "  - Go to Help->Toggle Developer Tools and click console on the top bar of the developer window"
   ]
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 3",
   "language": "python",
   "name": "python3"
  },
  "language_info": {
   "name": "python",
   "version": "3.9.12"
  },
  "orig_nbformat": 4
 },
 "nbformat": 4,
 "nbformat_minor": 2
}