Free Web Learning Resources

I compiled a list of free learning resources for those of you learning HTML, CSS, JavaScript and frameworks. They're tried and tested and they provide results. These are not my contributions, all rights and many thanks go to the authors.

Below are the resources, in two variants: written or video. Time to learn!

Module 1: HTML Basics

• HTML Elements
• Attributes
• Links
• Images
• Forms
• Tables
• Layouts
• Scripts
• HTML 5 Basics
• Resources:
  • Written: HTML Tutorial
  • Video: HTML Crash Course For Absolute Beginners

Module 2: HTML Advanced

• HTML5
• Input field types and manipulation
• Forms validation
• Including scripts head/body/async
• JSON/JSONP

Module 3: CSS

• CSS Basics
  • Written: CSS Tutorial
  • Video: CSS Crash Course For Absolute Beginners
• CSS Specificity
• Flex
  • Interactive: Flexbox Froggy
  • Video: Flexbox CSS in 20 minutes
• Grid
  • Written: Learn CSS Grid
  • Video: CSS Grid Layout Crash Course
• PreProcessors

Module 4: JavaScript Basics

• Basics
• JS Data types
• Comparison == vs ===
• Operator precedence
• Null/Undefined/Undeclared
• Local/Global variables
• DOM handling
• Resources for Basics:
  • Written: JavaScript First Steps
  • Video: Modern JavaScript Tutorial
• Arrays
  • Basics
  • Written: Array Methods
  • Video: 8 Must Know JavaScript Array Methods
• Localstorage
• Exceptions
• Event handling
  • Written: MDN - Events
  • Video:
    • Javascript Events Tutorial
    • Javascript Events Tutorial Part 2

Module 5: HTTP

• Basic HTTP Requests, Response, Methods, Codes
  • Written: HTTP Tutorial
  • Video: HTTP Crash Course & Exploration
• GET vs POST
• Auth

Module 6: JavaScript Advanced

• OOP JavaScript
  • Written:
    • Object Basics
    • Classes
  • Video: Object Oriented JavaScript
• Ajax / XHR
  • Written:
    • MDN - Ajax - Getting Started
    • MDN - Fetch API - Using Fetch
  • Video:
    • AJAX Crash Course (Vanilla JavaScript)
    • Fetch API Introduction
• Scope, Hoisting & Closures
  • Written:
    • Closures
    • Scoping
    • Global Object
  • Video:
    • JS Hoisting and Lexical Scope in 8 minutes
    • Closures in JavaScript | Inside a loop, inner function and setTimeoout
• Strict mode
• Promises & Async/Await
  • Written: Async
  • Video: The Async Await Episode I Promised
• Timeout and Event Loop
  • Written: JavaScript Event Loop Explained
  • Video: What the heck is the event loop anyway?
• RegEx
• SOLID principles
• ES6, ES7,… ES10

Module 7: Web Developer Tooling

• Developer Tools
  • Elements panel
  • Sources panel
  • Console
  • Network panel
  • Performance panel
• Unit Testing frameworks: Jasmine
  • Download the latest Jasmine standalone package, unzip it, and create a new spec file
  • Follow the examples here
• Npm
  • Video: Introduction to NPM and the package.json
  • Article: NPM Guide
• Useful website to check if a feature is supported: http://caniuse.com/

Module 8: Git basics

• Git basics

Framework: React

• React & Redux
  • Written Tutorial:
    • Getting Started
    • React Tutorial
    • Redux - Getting Started
  • Video Tutorial: Complete React Tutorial with Redux
• MobX

Framework: React Native

• React Native

Framework: Angular, Typescript & RxJS

• Typescript introduction
• Angular Intro & Tutorial - Written
  • Angular Intro
    • Angular Architecture
    • Modules
    • Components
    • Services and DI
  • Angular Tutorial
  • In-Depth Learning
    • Components & Templates
    • Reactive Forms
    • Observables
    • Observables in Angular
    • HttpClient
    • Routing
    • Component Lifecycle
    • Dependency Injection
  • Angular Material
• Angular Intro & Tutorial - Video
  • Learn Angular - Full Tutorial Course
• RxJS
  • RxJS Mapping
  • RxJS Patterns
• Unit Tests with Angular - Read it while writing tests, use it for reference