Skip to content
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
571 lines (486 sloc) 33.3 KB
                                                 SKILL TREE
                                        RESOURCES FOR LEARNING JAVASCRIPT

Lessons & Exercises

How to learn and share the knowledge on your journey

We highly recommend to take a moment and familiarize yourself with the method we recommend from our personal experience of years of learning and teaching :-)

Video Lessons & Exercises

Title Level
Build your Portfolio Page with yo and csjs basic
WizardAmigos JavaScript eLearning app (video lessons with support chat) 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 🍬🍬🍬🍬🍬


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
Introduction to Beaker Browser beginner
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


Title Level
DAT advanced


Title Level
Node VMS advanced


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


Title Level
Epidemic Broadcast Trees advanced

SMART CONTRACTS (ethereum based)

Title Level
Cryptozombie Tutorial beginner
MetaMask Browser Wallet - tool beginner
Solidity contracts - Zeppelin templates intermediate
Testnet & Testether intermediate
ERC20 Token - tutorial Intermediate
Smart Contracts in Remix - tutorial Intermediate
web3 JavaScript advanced
Remix IDE Docs advanced
Ethereum dev wiki advanced

🍬🍬🍬🍬🍬 JAVASCRIPT 🍬🍬🍬🍬🍬


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


Title Level
Intro basic


Title Level
JS syntax basic


Title Level
Comment your JS code basic


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


Title Level
JS datatypes basic


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


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


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


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


Title Level
JS booleans basic
Boolean values basic


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


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


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


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


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


Title Level
Callbacks, Promises and more intermediate


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


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


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


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

🍬🍬🍬🍬🍬 MARKDOWN 🍬🍬🍬🍬🍬


Title Level
commonmark basic
github flavoured markdown basic

🍬🍬🍬🍬🍬 HTML 🍬🍬🍬🍬🍬


Title Level
HTML basics basic
Intro to HTML basic


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


Title Level
HTML attributes basic
Classes basic


Title Level
Links basic
File paths basic


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


Title Level
YouTube basic


Title Level
Lists basic
HTML lists basic


Title Level
Forms basic
Form elements basic
Input types basic


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

🍬🍬🍬🍬🍬 CSS 🍬🍬🍬🍬🍬


Title Level
Intro to CSS basic
CSS basics basic


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


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


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


Title Level
CSS icons basic
Fontawesome documentation and example basic


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


Title Level
Intro to animations intermediate


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

🍬🍬🍬🍬🍬 NPM 🍬🍬🍬🍬🍬


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


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

🍬🍬🍬🍬🍬 GIT 🍬🍬🍬🍬🍬


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

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


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



Title Level
Path to a free self-taught education in Computer Science intermediate
Programming, computer architecture and design etc. intermediate
You can’t perform that action at this time.