DylanDrechsel/lesson-plans

Lesson Plans I have been creating and using to teach a small class (4 people) of friends JavaScript!

Javascript Lessons

• Windows/WSL Install Guide: https://fireship.io/lessons/windows-10-for-web-dev/
• Mac Install Guide: https://drive.google.com/drive/folders/1dqU8xaOMIXkBWEI8qgI1DXbQmw2WY78I

Great YouTube Channels

• Web Dev Simplified (https://www.youtube.com/c/WebDevSimplified) --> JavaScript/Web Dev Tutorials
• FreeCodeCamp (https://www.youtube.com/c/Freecodecamp) --> Javascript/Coding Tutorials
• Fireship.io (https://www.youtube.com/c/Fireship) --> Javascript Tutorials / Computer Related Topics
• Ana Tudor (https://www.youtube.com/c/anatudor) --> CSS Design
• Codedamn (https://www.youtube.com/c/Fireship) --> Cool Computer Related Topics
• Computerphile (https://www.youtube.com/user/Computerphile) --> Cool Computer Related Topics

VS Code Extension

• Auto Close Tag
• Bearded Theme
• Beautify
• Bracket Pair Color
• ESLint
• GitLens
• Live Server
• Material Icon Theme
• Path Intellisense

To Mimic My VS Code

1. Install all the Extensions above.
2. With VS Code open hit (crtl + shift + p) and a search menu should appear at the top of the text editor.
3. Search for "Preferences: Open Settings (JSON)" and hit enter. It should open a file called "settings.json".
4. Copy and Paste the code block below into that setting.json file.

{
    "workbench.colorTheme": "Bearded Theme Black & Gold",
    "workbench.colorCustomizations": {
    "editor.background": "#000000",
    "editorLineNumber.foreground": "#999999",
    "editorGutter.background" : "#0f0f0f"    
    },
    "editor.tokenColorCustomizations": {
        "comments": "#646464"
    },
    "files.autoSave": "afterDelay",
    "workbench.iconTheme": "material-icon-theme",
    "javascript.updateImportsOnFileMove.enabled": "always",
    "json.maxItemsComputed": 15000,
    "window.zoomLevel": 1
}

5. Save the file and then restart VS Code.    

Introduction to Javascript Lessons

Lesson One: Will consist of setting up coding enviorments and installing the proper software. Then going over Variable Declaration and how to comment your code. Finally will learn how to make a new git branch (dev), and push to dev branch to your GitHub Repo and merge to into the master branch.

• Install coding env (WSL/Ubuntu, VS Code, Postgresql (psql), Node, Npm, GitHub cli, Zsh)
• Create Github Repo for "Introduction to Javascript" and make a commit, then push to master branch
• Learn proper code formatting conventions
• Learn about Variable Declaration and console logs
• Learn to properly comment code