Skip to content
Permalink
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 :-)
methodology: https://github.com/wizardamigos/skilltree/issues/3

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 🍬🍬🍬🍬🍬

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
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

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

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 🍬🍬🍬🍬🍬

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

ASYNC

Title Level
Callbacks, Promises and more 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
You can’t perform that action at this time.