SKILL TREE
                                        RESOURCES FOR LEARNING JAVASCRIPT

Lessons & Exercises

Video Lessons & Exercises

Title	Level
WizardAmigos JavaScript eLearning app (video lessons with support chat)	basic
Build your Portfolio Page with yo and csjs	intermediate
Build a simple Quiz with Firebase	intermediate

---

Article Lessons & Exercises

Title	Level
How to use CodePen for building simple projects	basic

---

Interactive Coding Lessons & Exercises

Title	Level
basic media query	basic
How to do css grid layouts	intermediate
How to spin things	basic
Funky animated cube	intermediate
E-business card	basic
Portfolio page	intermediate
Quiz app	intermediate
Random Names Color Box Gallery	intermediate
Wizard Logo SVG	basic
SVG Graph	intermediate
Attach a file	basic
How to run a project locally	intermediate
Choo - little deeper knowledge about frontend coding	intermediate
P2P Workshop	advanced

---

In addition to WizardAmigos lessons, we recommend you to check out the following resources:

---

🍬🍬🍬🍬🍬 P2P (PEER-TO-PEER) WEB 🍬🍬🍬🍬🍬

P2P

Title	Level
Working offline as a JavaScript developer	intermediate
NodeUp Podcast	intermediate
Mesh networking	advanced
P2P social networking	advanced
How to build a P2P Photos app	intermediate
Host outside of Beaker	intermediate
Create a markdown site	intermediate
Share files secretly	intermediate
Publish software securely	intermediate
Web APIs by example	intermediate
Read files using DatArchive API	intermediate
Write files using DatArchive API	intermediate
Diff, commit, revert with DatArchive API	intermediate
Listen for file changes with DatArchive API	intermediate
Create or fork a site with DatArchive API	intermediate

DAT

Title	Level
DAT	advanced

SMART CONTRACTS (dat based)

Title	Level
Node VMS	advanced

SSB

Title	Level
Intro	beginner
Scuttlebutt	intermediate
Guide	advanced
Scuttlebot	advanced
Scuttlebot Docs	advanced

P2P DATA STRUCTURES

Title	Level
Epidemic Broadcast Trees	advanced

Ethereum

Title	Level
Node VMS	advanced

SMART CONTRACTS (ethereum based)

Title	Level
Cryptozombie Tutorial	beginner
MetaMask Browser Wallet	beginner
ERC20 Token	Intermediate
Smart Contracts in Remix	Intermediate
web3 JavaScript	advanced
Remix IDE Docs	advanced

---

🍬🍬🍬🍬🍬 JAVASCRIPT 🍬🍬🍬🍬🍬

Games

Title	Level
Code Combat - learn how to code by playing a game	basic

Introduction

Title	Level
Intro	basic

JAVASCRIPT SYNTAX RULES

Title	Level
JS syntax	basic

Comments

Title	Level
Comment your JS code	basic

VARIABLES

Title	Level
JS variables	basic
Variables	basic
Assignement	basic
Declare JavaScript variables	basic
Case sensitivity in variables	basic
Assignement operator	basic
Initializing variable with assignement operator	basic

DATA TYPES

Title	Level
JS datatypes	basic

DATA STRUCTURES

Title	Level
10 Common Data Structures Explained with Videos + Exercises	basic

NUMBERS

Title	Level
JS operators	basic
Numbers and operators	basic
Arithmetic	basic
Number methods	basic
Add two numbers	basic
Substract one number from another	basic
Multiply two numbers	basic
Divide one number by another	basic
Increment a number	basic
Decrement a number	basic
Decimal numbers	basic
Remainder - modulo	basic
Augmented addition	basic

STRINGS

Title	Level
Handling text - strings	basic
Useful string methods	basic
JS strings	basisc
String methods	basic
Declare string variables	basic
Escaping literal quotes in strings	basic
Quoting strings with single quotes	basic
Escape sequences in strings	basic
Concatenating strings with + operator	basic
Concatenating strings with += operator	basic
Constructing strings with variables	basic
Appending variables to strings	basic
Find the length of a string	basic
Find the first character in a string	basic
Find the last character in a string	basic
Find the N-th character in a string	basic
Reverse a String	basic

ARRAYS

Title	Level
Arrays	basic
JS Arrays	basic
Array methods	basic
Array sort	basic
Store Multiple Values in one Variable using JavaScript Arrays	basic
Nest one Array within Another Array	basic
Access Array Data with Indexes	basic
array.push()	basic
array.pop()	basic
array.shift()	basic
array.unshift()	basic
Iterate over Arrays with map	basic
Filter Arrays with filter	basic
Sort Arrays with sort	basic
Reverse Arrays with reverse	basic
Concatenate Arrays with concat	basic
Split Strings with split	basic
Join Strings with join	basic
Condense arrays with reduce	basic

BOOLEAN

Title	Level
JS booleans	basic
Boolean values	basic

COMPARISONS

Title	Level
Comparisons	basic
Comparison with the Equality Operator	basic
Comparison with the Strict Equality Operator	basic
Comparison with the Greater Than Operator	basic
Comparison with the Greater Than Or Equal To Operator	basic
Comparisons with the Logical And Operator	basic
Comparisons with the Logical Or Operator	basic

CONDITIONS

Title	Level
JavaScript If...Else Statements	basic
Conditional logic with If statement	basic
Else statements	basic
Else If statements	basic
Logical Order in If Else Statements	basic
Chaining If Else Statements	basic

LOOPS

Title	Level
For loop	intermediate
While loop	intermediate
Iterate with JavaScript For Loops	intermediate
Iterate Odd Numbers With a For Loop	intermediate
Count Backwards With a For Loop	intermediate
Iterate Through an Array with a For Loop	intermediate
Nesting For Loops	intermediate
Iterate with JavaScript While Loops	intermediate

OBJECTS

Title	Level
Introducing JavaScript objects	basic
JavaScript Objects	basic
Object Properties	basic
Object methods	basic
Object prototypes	intermediate
Build JavaScript Objects	intermediate
Accessing Objects Properties with the Dot Operator	basic
Accessing Objects Properties with Bracket Notation	basic
Accessing Objects Properties with Variables	basic
Updating Object Properties	basic
Add New Properties to a JavaScript Object	basic
Delete Properties from a JavaScript Object	intermediate
Testing Objects for Properties	intermediate
Manipulating Complex Objects	intermediate
Accessing Nested Objects	intermediate
Declare JavaScript Objects as Variables	intermediate
Construct JavaScript Objects with Functions [requirement: functions]	intermediate

FUNCTIONS

Title	Level
JS functions	basic
JS function definition	basic
JS function parameters and arguments	basic
Function invocation	basic
Function closures	intermediate
Write reusable javascript with functions	basic
Passing values to functions with arguments	basic
Return a value from a function with Return	basic
Assignement with a returned value	basic
Queue	intermediate
Functions - reusable blocks of code	basic
Javascripting tutorial	basic
Bing/Call/Apply	intermediate

SCOPE

Title	Level
JS scope	intermediate
Global scope and functions	intermediate
Local scope and functions	intermediate
Global vs local scope in functions	intermediate

REGULAR EXPRESSIONS (REGEX)

Title	Level
Sift through Text with Regular Expressions	intermediate
Find Numbers with Regular Expressions	intermediate
Find Whitespace with Regular Expressions	intermediate
Invert Regular Expression Matches with JavaScript	intermediate
JavaScript Regular Expressions	intermediate

JSON

Title	Level
JavaScript JSON	intermediate
Working with JSON data	intermediate

---

🍬🍬🍬🍬🍬 BROWSER 🍬🍬🍬🍬🍬

DOM (Document Object Model)

Title	Level
Select DOM with JS and change it	basic
Make new DOM purely with JS	basic
How to react to user interaction (e.g. mouse clicks)	intermediate
How to animate your DOM	intermediate
Intro to DOM	basic
DOM methods	basic
DOM document	basic
DOM elements	basic
DOM events	intermediate
Event listener	intermediate
Nodes	intermediate
Dom - video (advanced)	intermediate
Dom - notes	intermediate
Events	intermediate

WEBGL/3D

Title	Level
Skeletal Animation	advanced
Attaching Object to Bones	advanced
Web GL fundamentals	advanced

---

🍬🍬🍬🍬🍬 MARKDOWN 🍬🍬🍬🍬🍬

MARKDOWN

Title	Level
commonmark	basic
github flavoured markdown	basic

---

🍬🍬🍬🍬🍬 HTML 🍬🍬🍬🍬🍬

HTML

Title	Level
HTML basics	basic
Intro to HTML	basic

ELEMENTS

Title	Level
Say hello to HTML elements	basic
HTML elements	basic
Headings	basic
Paragraphs	basic
Comments	basic
Head	basic

ATTRIBUTES

Title	Level
HTML attributes	basic
Classes	basic

LINKS

Title	Level
Links	basic
File paths	basic

IMAGES

Title	Level
Images	basic
HTML images	basic
Turn an Image into a Link	basic

VIDEOS

Title	Level
Videos
YouTube	basic

LISTS

Title	Level
Lists	basic
HTML lists	basic

FORMS

Title	Level
Forms	basic
Form elements	basic
Input types	basic

SVG

Title	Level
Basics about SVG	intermediate
SVG - video	intermediate
SVG notes	intermediate
Demo project - wizard logo	intermediate

---

🍬🍬🍬🍬🍬 CSS 🍬🍬🍬🍬🍬

CSS

Title	Level
Intro to CSS	basic
CSS basics	basic

SELECTORS

Title	Level
CSS syntax	basic
Use a CSS Class to Style an Element	basic
Style Multiple Elements with a CSS Class	basic

STYLING

Title	Level
Colors	basic
Background color	basic
Backgrounds	basic
Opacity	basic
Colors with opacity	basic
Border	basic
Margin	basic
Padding	basic
Dimension	basic
Max width	basic
Text	basic
Links	basic
Lists	basic
Table	basic
Dropdown	basic
Button	basic
Change the color of text	basic
Adjust the Padding of an Element	basic
Adjust the Margin of an Element	basic
Add a Negative Margin to an Element	basic
Add Different Padding to Each Side of an Element	basic
Add Different Margins to Each Side of an Element	basic
Use Clockwise Notation to Specify the Padding of an Element	basic
Use Clockwise Notation to Specify the Margin of an Element	basic

FONTS

Title	Level
CSS fonts	basic
Text and font styling	basic
Change the Font Size of an Element	basic
Set the Font Family of an Element	basic
Import a Google Font	basic
Specify How Fonts Should Degrade	basic
Google fonts documentation and example	basic

ICONS

Title	Level
CSS icons	basic
Fontawesome documentation and example	basic

LAYOUT AND VISIBILITY

Title	Level
Display visibility	basic
Position	basic
Overflow	basic
Flexbox	intermediate
A guide to flexbox	intermediate
Flexbox game tutorial	intermediate
CSS Grid	intermediate

ANIMATIONS

Title	Level
Intro to animations	intermediate

RESPONSIVENESS (Media Queries)

Title	Level
Responsive web design intro	basic
Viewport	intermediate
Media queries	basic

---

🍬🍬🍬🍬🍬 NPM 🍬🍬🍬🍬🍬

PACKAGE REGISTRY + PACKAGE MANAGER

Title	Level
What are modules	basic
What is NPM	intermediate
Installing Node.js and updating npm	intermediate
Manage Packages with npm	intermediate
NPM and using npm modules - video	intermediate
NPM and using npm modules - notes	intermediate
How to NPM	intermediate

MODULES (commonjs)

Title	Level
require modules	basic
browserify basics	basic
browserify advanced	intermediate

RECOMMENDED BASIC MODULES

Title	Level
require('bel')	intermediate
require('csjs-inject')	basic
require('minixhr')	basic

---

🍬🍬🍬🍬🍬 GIT 🍬🍬🍬🍬🍬

GIT

Title	Level
Notes on Git and Github	intermediate
Git-it tutorial	intermediate

---

🍬🍬🍬🍬🍬 UNIX & COMMAND LINE 🍬🍬🍬🍬🍬

COMMANDS

Title	Level
Unix & Command Line - video	intermediate
Unix & Command Line - notes	intermediate

---

🍬🍬🍬🍬🍬 PROGRAMMING CONCEPTS 🍬🍬🍬🍬🍬

COMPUTER SCIENCE THEORY

Title	Level
Path to a free self-taught education in Computer Science	intermediate
Programming, computer architecture and design etc.	intermediate