Youth Training Camp | "Web Standards and Front-end Development"

About Front-end Development#

Origin, Architecture, and Evolution#

"Suppose all the information stored on computers everywhere were linked. Suppose I could program my computer to create a space in which everything could be linked to everything."

——Tim Berners-Lee, inventor of the World Wide Web

"Imagine if all the information stored on computers everywhere were linked. Imagine if I could program my computer to create a space in which everything could be linked to everything." It feels a bit like everything is interconnected.

The Web was born in early 1989, initially consisting of only three technologies:

  • HTML
  • HTTP
  • URL

CSS and JavaScript were introduced a few years later.

Evolution of Web technologies:


  • Read-only era: The client was like a static page, and updating the page required sending a network request. It was not possible to update the page without refreshing it.
  • Experience era: The client transitioned from static to dynamic, gaining the ability for dynamic interaction. It became possible to send requests to the server through JavaScript in the background and update the content in the webpage by modifying the DOM. Technologies like Google Maps used this approach.
  • Agile era: The current mainstream era, where user experience is highly valued. Front-end development has gained attention, becoming modular and component-based. This era has seen the emergence of well-known frameworks like React and Vue, as well as build tools like Webpack.

Application Areas of Front-end Development#

To Business (Enterprise)

Byte's Volcano Engine, public cloud, etc. These are websites that provide various services to enterprises, with large scale and profitability.

To Customer (Client)

The earliest websites served as a means of information sharing. Now, there are websites that directly reach customers, including e-commerce platforms, online education, mobile H5, etc. These are applications for customers.

To Develop (Developers)

Tools that improve web development efficiency, such as code editors, etc.


Desktop browsers: Chrome, Firefox, Edge, etc.

Mobile browsers: Android, iOS


Terminals and Cross-platform

Command line/terminal

Desktop Cross-platform

  • Electron
  • NW.js

Mobile Cross-platform

  • React Native
  • Flutter

Languages, Frameworks, and Tools#

  • Basic languages, this diagram is too busy this diagram is concise and clear, in addition to the three major components of front-end development, there is also WebAssembly.


  • Frameworks


Browsers, Networks, Servers#

Browsers Recommended articles:



An overview of HTTP - HTTP | MDN (


Learning Roadmap#

Frontend Developer Roadmap: Learn to become a modern frontend developer


About Web Standards#

W3C and Ecma Members#


W3C Specification Development Process#


  • Explainer demo
  • Find the right community/group
  • Web IDL for APIs link
  • Step-by-step algorithms
  • Github, Markdown, respec, bikeshed, etc.
  • Get an early review w3ctag/design-reviews
  • Write web-platform-tests (WPT) tests.

Ecma TC39 Specification Development Process


  • Championing a proposal at TC39
  • How to write a good explainer
  • Presenting a Proposal to TC39
  • Reading a proposal draft
  • Stage 3 Proposal Reviews
  • How to experiment with a proposal before Stage 4
  • Implementing and shipping TC39 proposals

How to Participate - Pay Attention to Meetings#

W3C Meetings W3C Technical Plenary / Advisory Committee Meetings Week (TPAC) is W3C's annual global technical conference, bringing together members of W3C working groups (working groups, interest groups, community groups, etc.), Advisory Board (AB), Technical Architecture Group (TAG), member representatives (AC), invited experts, and global community members. Through 1-2 weeks of concentrated interaction and communication, the conference delves into the future direction of open web platform technologies.

  • Annual Conference

    • AC
    • TPAC (Technical Plenary and Advisory Committee)
  • Working Group Meetings

    • Monthly meetings
    • Various workshops

Summary and Thoughts#

As a front-end engineer, it is important to grasp web standards, understand browsers and networks, and stay updated with the latest technologies. The learning roadmap discussed in this lesson provides a good overview of front-end development, and the recommended articles have given me a deeper understanding of browsers. Highly recommended!

Most of the content quoted in this article comes from the lectures of Mr. Li Songfeng and MDN.

Ownership of this post data is guaranteed by blockchain and smart contracts to the creator alone.