Roadmap

Basics

Basic Terminal Usage

Version Control

• Git

  • git

  • github

  • gitlab

• SVN

• Semantic Versioning

Data Structures & Algorithms

Design Patterns

Network

• TCP/IP

• HTTP/HTTPS

  • status code

  • https

  • get post

  • cookie

• SSH

Character Encoding

Principles

• KISS

  Keep It Simple, Stupid

• LESS IS MORE

• DRY

  Don't Repeat Yourself

• YAGNI

  You Aren’t Gonna Need It

Front-end

Web Standard

• HTML

  • Basics

  • Semantic

  • HTML5

  • HTML Component / Shadow DOM

  • SEO

• CSS

  • Basics

    • selectors

    • text

  • Layouts

    • box model

    • display

    • positioning

    • float

    • flex

    • grid

  • CSS3

    • animation

  • Format Context

    • BFC

    • IFC

  • Media Query

• JavaScript

  • EcmaScript

    • syntax & basic constructs

    • context

      • global context

      • functional context

      • block context

      • context chain

      • keyword: this

    • prototype

      • prototype chain

      • inherits

    • closure

    • event loop

  • DOM

    • manipulation

  • BOM

    • location

    • history

    • navigator

    • formData

    • filereader

  • Events

    • capture & bubble

    • event handler

    • event object

    • event type

    • event proxy

    • mock event

• Web Assembly

Development

• Package Management

  • npm

  • yarn

• Modulization

  • Basics

  • Implemetion

    • CommonJS

    • ES Module

    • RequireJS

    • AMD

    • UMD

• Architecture

  • JS

    • Vue-CLI

    • Create-React-APP

    • Boilerplates

  • CSS

    • CSS in JS

      • Styled Component

      • CSS Module

      • Emotion

      • Radium

      • Glamorous

    • Naming Rules

      • BEM

      • OOCSS

• Build Tools

  • Task Runners

    • gulp

    • grunt

  • Linters & Formatter

    • ESLint

    • Prettier

  • Module Bundlers

    • Webpack

    • Parcel

    • Rollup

• Type Checkers

  • Typescript

  • Flow

• Pre/Post Processors

  • ES

    • Babel

  • CSS

    • LESS

    • SASS

    • PostCSS

• Test

  • Concepts

    • Unit

    • Integration

    • Functional

  • Tools

    • Jest

    • Mocha

    • Enzyme

    • Karma

    • ...

Platforms

• Browser

  • Basics

    • Render & Layout Process

    • JS Engine

    • document load events

    • Fonts Render

  • Performance

  • Cross Origin

    • CORS

    • JSONP

    • window.name

    • iFrame

    • image.src

    • document.domain

    • window.postMessage

  • Compatible

  • PWA

    • Storage

    • Service Workers

    • Web Sockets

    • Location

    • Device Orientation

    • Credentials

    • Notifications

• Server

  • Server Side Rendering

    • React

      • Next.js

    • Vue

      • Nuxt.js

    • Angular

      • Universal

  • Static Site Generators

    • Hexo

    • GatsbyJS

• Mobile Applications

  • React Native

  • NativeScript

  • Weex

  • PhoneGap

• Desktop Applications

  • Electron

  • Ionic

  • Carlo

Libs & Frameworks

• FE Framework

  • React

  • Vue

  • Angular

• UI Framework

  • Antd

  • Element

  • Material

  • mint-ui

  • we-ui

• CSS Framework

  • Bootstrap

  • Semantic UI

• Libs

  • Utils

    • underscore

    • lodash

  • DOM

    • Jquery

    • zepto

    • cheerio

  • Network

    • Axios

    • Request

    • whatwg-fetch

Back-end

Languages

• NodeJs

• Python

• Golang

UI & UX

UI

• Devices Size

• Font

  • Basic

  • Web Fonts

• Color

• Layout

  • Chinese

• Responsive Design

Animation

• Common Animation Types

• Relative Math & Physical Knowledgements

Graphs & Images

• Format

DevOps

Languages

OS Concepts

Servers & Terminal

• OS

  • Linux

  • Unix

  • Windows

• Terminal

  • Bash Scripting

  • Editors

    • Vim

    • Emacs

    • PowerShell

    • Nano

  • Commands

    • Text Manipulation

    • Process Monitoring

    • Network

    • System Performance

XMind: ZEN - Trial Version