mattvick / learn-javascript

Learn Javascript

Learn JavaScript

Day 0 - Learn the basics directly in the browser console

1. Open Google Chrome
2. Open any webpage
3. Press Command + Option + J (Mac) to Open the the Chrome DevTools console - Other ways to open Chrome DevTools
4. Constants, strings and semicolons const greeting = 'Hello';
5. Variables and numbers var amount = 4;
6. Work through the Language basics crash course
   1. Variables
   2. Comments
   3. Operators
   4. Conditionals
   5. Functions
   6. Events

Day 1 - Project and account setup

Topics

• Where to find help
• Terminal and commands - iTerm2
• macOS package management - Homebrew
• JavaScript runtime - Node.js
• JavaScript package management - Node Pagage Manager (NPM), Yarn
• Code editor - Visual Studio Code
• Linting - ESLint
• Rapid prototyping playground - Quokka.js

JavaScript Documentation

MDN Web Docs (previously Mozilla Developer Network):

• Reference
• Tutorials - these appear to be focused on building web pages

Computer setup tasks

Download and install the following applications:

1. Visual Studio Code
2. iTerm2
3. Homebrew

Project setup tasks

1. Open iTerm
2. Create a directory mkdir learn-javascript- choose your own directory name
3. Change to the created directory cd learn-javascript - use the directory name you chose
4. Create a Visual Studio Code workspace

JavaScript setup tasks

1. Brew install Yarn brew install yarn - if needed brew install Node.js brew install node
2. Create a package.json file yarn init
3. Create an index.js file touch index.js

ESLint setup tasks

1. Install ESLint Visual Studio Code extension
2. Create an ESLint config file npx eslint --init
3. Set the no console rule to off in the ESLint config 'no-console': 'off',

Quokka.js setup tasks

1. Install Quokka.js Visual Studio Code extension

Day 2 - Coding

First steps

1. Variables
2. Numbers
3. Arrays

More

1. Objects and properties (literal notation) const data = {}; - read more
2. Scope
3. Error handling try {} catch {}

To do more...

Day 3 - Git setup and pushing changes

Typically when setting up a new project this would be the first step. To gently indroduce you to new concepts I've waited until day 3 to introduce this.

Topics

• Version control and source repositories - Git
• Code sharing, issue tracking - GitHub, GitLab, BitBucket

Account and authentication setup tasks

1. Create a GitLab account
2. Generate an SSH key pair
3. Add the public SSH key to your GitLab account
4. Verify that you can connect

Computer setup tasks

1. Download and install GitHub Desktop
2. Install GitLens Visual Studio Code extension

Repository setup tasks

1. Initialise a local Git repository git init - if needed install Git
2. Create a remote Git repository on GitLab
3. Add the remote repository to our project git remote add origin https://github.com/mattvick/learn-javascript.git
4. Add a .gitignore file to tell Git to ignore certain files echo "/node_modules" >> .gitignore
5. Add a read me file echo "# Learn JavaScript" >> README.md
6. Add all changes in the working directory to Git's staging area git add .

Commit and push changes

1. Commit changes to Git with a message git commit -m "Initial commit"
2. Push changes to GitLab git push -u origin master

Using GitHub Desktop

1. Viewing file diffs (changes)
2. Commit and push changes
3. Pulling changes

Day 4 - Git branches and merging

1. Fetching vs pulling
2. Merging via merge requests

To do more..

Day 5 - Asynchronous JavaScript

1. Event loop
2. Read more

To do more..

Day 6 - ES6

To do more..

Day 7 - TypeScript

To do more..

Day 8 - React

To do more..