Learning Path¶
Web Basics¶
Traditionally, web development is always based on three components: HTML, CSS and JS. No matter what other languages/frameworks/fancy tools you have used to build your web app (e.g. Elm), they will always be compiled into these three components (WASM is a special case and we will not cover).
You shall remember this site, and always refer to it for authentic explanations: MDN.
You can also find some official tutorials here, which shall be enough for learning these three things. Besides these, we have some other tutorials.
Foreword
Do not try to remember everything, but try to understand as much as you can. Typically, you shall spend most of your time learning JS/TS, and then HTML/CSS.
HTML¶
- W3School: yet another useful site.
Most likely, you won't and you don't need to remember all tags of HTML. You can go through the tags quickly, write some examples, and remember their usage. Each time you want to use some tag, you can search the document.
CSS¶
- Also refer to MDN and W3School.
It would be very unlikely for you to remember hundreds of CSS properties and their values. You can always search the document.
You are recommended to go over and remember some important properties (e.g. box-model, display, position, margin & padding, height & with). Among them, Grid & Flex are extremely important. Not only they are used widely in our project, but also they are most used in modern web development. You can also search about what is responsive web design.
After mastering CSS, you can learn some modern CSS tools. In the process of learning CSS, you may find that the traditional CSS is not so powerful. Therefore, people developed some modern CSS tools to boost CSS developing:
Javascript¶
- A recent found nice tutorial: zh.javascript
- Eloquent.js
- MDN or W3School for reference
Note
We suggest you write JS code in an HTML file and open it with a browser. Compile with node.js directly is different from the DOM environment.
After mastering basic JS, we suggest you to master ES6:
Trivia
ECMAScript is a more official name for Javascript. ES6 is a standard for ECMAScript. This is similar to C++11, C++20 to C++.
Typescript¶
Typescript is nothing but Javascript with types. Developers have been complaining about shitty type system of JS. Therefore, someone decided to develop a type system for JS. The type annotations are only helpful when developing. Typescript files are compiled into JS files if you want to run them.
Please refer to official documentation.