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


  • 2016-React In-depth: An exploration of UI development #Book#:Our goal with this GitBook is to document our process, share our research and try to organize our experiences into a single living document. Too be honest, this is a pretty lofty goal. We may not achieve this goal, but hopefully we can get some helpful thoughts down.

  • 2016-SurviveJS - React #Book#: This book shows you how to build a little Kanban application using React. During the process you will learn the basics and will be able to take the skills to your own projects.

  • 2017-React Bits #Book#: A compilation of React Patterns, techniques, tips and tricks.

  • 2017-Learning React, 1st Edition #Book#: If you want to learn how to build efficient user interfaces with React, this is your book. Authors Alex Banks and Eve Porcello show you how to create UIs with this small JavaScript library that can deftly display data changes on large-scale, data-driven websites without page reloads. Along the way, you’ll learn how to work with functional programming and the latest ECMAScript features.

  • 2017-Mastering Full-Stack React Web Development #Book#: Learn how to create dynamic full-stack applications with ReactJS and other leading JavaScript tools – smarter web development starts here.

  • 2017-React Design Patterns and Best Practices #Book#: Build modular applications that are easy to scale using the most powerful components and design patterns that React can offer you right now About This Book.

  • 2017-React Express #Series#: The all-in-one beginner's guide to modern React application development!

  • 2017-React and React Native #Book#: Use React and React Native to build applications for desktop browsers, mobile browsers, and even as native mobile apps.

  • 2018-React in patterns #Book#: A book about common design patterns used while developing with React. It includes techniques for composition, data flow, dependency management and more.

  • 2018-React From Zero #Book#: Everything runs in the browser without a manual pre-compilation.

  • 2020-react-book #Book#: Book covering fundamentals on React.

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 #Project#: 💥 Listing some playful open-source's challenges of jobs to test your knowledge

Course | 课程

  • 2020-Web Dev For Beginners #Course#: 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'.




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

  • 2015-Real World #Project#: 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 #Project#: A collection of UI element samples written with vanilla web platform features.

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