Web Learning & Practices List

本文上承接 AwesomeReference: 程序员成长道路上的阅读学习资料工具集锦,子索引包含:

Overview | 概述

  • 2015-Modern Web Development: This is the script for a talk I gave at Google Dev Fest MN in 2015. It was meant to be a lighthearted history of web development and a commentary on its future.

  • 2015-我的前端之路:数据流驱动的界面: 笔者从 jQuery 时代一路走来,经历了以 BootStrap 为代表的基于 jQuery 的插件式框架与 CSS 框架的兴起,到后面以 Angular 1 为代表的 MVVM 框架,以及到现在以 React 为代表的组件式框架的兴起。

  • 2016-我的前端之路:工具化与工程化: 近年来,随着浏览器性能的提升与移动互联网浪潮的汹涌而来,Web 前端开发进入了高歌猛进,日新月异的时代。这是最好的时代,我们永远在前行,这也是最坏的时代,无数的前端开发框架、技术体系争妍斗艳,让开发者们陷入困惑,乃至于无所适从。

  • 2017-What is the Future of Front End Web Development?: What websites are being asked to do is rising. Developers are being asked to build very complicated things very quickly and have them work very well and very fast.


  • 2019-前端开发 20 年变迁史: 我们经历了前端的洪荒时代、Prototype 时代、jQuery 时代、后 jQuery 时期、三大框架割据时代,这其中均是由国外开发者主导,直到如今的小程序时代,才是中国开发者独创的。

  • 2021-五分钟了解互联网 Web 技术发展史: 1991 年 8 月,第一个静态页面诞生了,这是由 Tim Berners-Lee 发布的,想要告诉人们什么是万维网。从静态页面到 Ajax 技术,从 Server Side Render 到 React Server Components,历史的车轮滚滚向前,一个又一个技术诞生和沉寂。

Vision | 领袖意见

Practices | 大厂实践

Resource | 资源


  • web.dev #Blog#: As the web advances, users’ expectations get higher. With web.dev’s guidance, you can give your users the best possible experience, wherever they are.

Book | 书籍

Blog | 博客

  • 2018-How JavaScript works #Blog#: the series dedicated to exploring JavaScript and its building components. In the process of identifying and describing the core elements, we also share some rules of thumb we use when building SessionStack.

  • 2019-前端精读 #Blog#: 前端精读周刊。帮你理解最前沿、实用的技术。


  • Front End Interview Handbook 🗃️: Almost complete answers to “Front-end Job Interview Questions” which you can use to interview potential candidates, test yourself or completely ignore.

  • Frontend Case Studies: A curated list of technical talks and articles about real-world enterprise frontend development

  • How JavaScript works #Series#: the series dedicated to exploring JavaScript and its building components.

  • 2018-Roadmap to becoming a web developer in 2018: Below you find a set of charts demonstrating the paths that you can take and the technologies that you would want to adopt in order to become a frontend, backend or a devops.

  • 2020-fe interview: 前端面试每日 3+1,以面试题来驱动学习,提倡每日学习与思考,每天进步一点!每天早上 5 点纯手工发布面试题(死磕自己,愉悦大家),3000+道前端面试题全面覆盖。

  • 2020-frontend-challenges : 💥 Listing some playful open-source’s challenges of jobs to test your knowledge

Course | 课程

  • 2020-Web Dev For Beginners 🎥: Azure Cloud Advocates at Microsoft are pleased to offer a 12-week, 24-lesson curriculum all about JavaScript, CSS, and HTML basics. Each lesson includes pre- and post-lesson quizzes, written instructions to complete the lesson, a solution, an assignment and more. Our project-based pedagogy allows you to learn while building, a proven way for new skills to ‘stick’.



  • 2021-浏览器工作原理与实践 #Series#: 极客浏览器工作原理与实践,追求重点和难点,剔除陈旧的知识。

  • 2022-《前端小课》 #Series#:《前端小课》是通过图片、文字、代码、视频等多种方式写成的一本多媒体电子书。全书分为不同的小书,每本小书旨在讲透一个知识点。比如 CSS 布局、JavaScript 基础、动画。以最基础的编程知识为起点,即使不懂编程的小白也能够通过本书学会编程,顺利进入互联网行业。


  • 2015-todomvc : Helping you select an MV* framework - Todo apps for React.js, Ember.js, Angular, and many more.

  • 2015-Real World : RealWorld solves this by allowing you to choose any frontend (React, Angular 2, & more) and any backend (Node, Django, & more) and see how they power a real world, beautifully designed fullstack app called “Conduit”.

  • ui-element-samples : A collection of UI element samples written with vanilla web platform features.

  • fbjs : A collection of utility libraries used by other Facebook JS projects.