The front end is evolving faster and faster, with countless technology releases every day.

Want to get to the front end but don’t have an ideal path?

Have you been in this world for a long time or do you feel like you’re moving bricks around?

Then you might need this technology learning roadmap!

We divide the front end of learning into three realms:

  • Write basic web page alone
  • Write web pages efficiently online
  • Make web pages accessible to more people

Here we present a detailed learning roadmap by introducing these three realms.

Write basic web page alone

What is a single machine? In fact, a person 🌚

You’re developing your site on your own using basic Web technologies, not sharing the code with anyone else (you probably don’t know the code sharing rules of the application world), and you’re just running your site in a local environment without even having a clue how it’s accessible to anyone else.

This stage is also the most basic part of becoming a front-end engineer. Most beginners are still at this stage, so let’s take a look at what skills are needed at this stage.

HTML + CSS + JavaScript

Yes, in fact, we are familiar with the front three musketeers, although it seems to be the most basic content, but need to understand a lot of content, just like we need to learn 26 letters first, learn a variety of Chinese character foundation, to write or create poetry. To understand these three technologies, what content and what learning resources are recommended?

HTML

HTML stands for Hypertext Markup Language. It is used on the front end to provide structure for web pages that you can style using CSS and interact with using JavaScript.

There are roughly 6 stages to learning HTML:

  • Learn basic knowledge: www.w3schools.com/html/html_i…
  • Write semantic HTML:www.w3schools.com/html/html5_…
  • Learn about forms and validation: developer.mozilla.org/en-US/docs/…
  • Follow conventions and best practices: github.com/hail2u/html…
  • To understand the accessibility: www.w3schools.com/accessibili…
  • Understanding of the fundamentals of SEO: developers.google.com/search/docs

CSS

CSS, or cascading style sheets, is the language for styling the front end of any web site. CSS is the fundamental technology of the World Wide Web, alongside HTML and JavaScript.

There are 3 stages to learning basic CSS:

  • Learn the basics: www.w3schools.com/css/

  • Learn how to layout, which includes the following knowledge:

    • Floats: css-tricks.com/all-about-f…
    • Positioning: css-tricks.com/absolute-re…
    • The Display shows: www.freecodecamp.org/news/the-cs…
    • Box model: developer.mozilla.org/en-US/docs/…
    • CSS grid: cssGridgarden.com/
    • Flex Flex box layout: Flexboxfroggy.com/
  • Media inquiry learning and Web responsive design: www.freecodecamp.org/learn/respo…

JavaScript

JavaScript allows you to add interactivity to a page. Common examples you might see on web sites are sliders, click-to-click interactions, pop-up Windows, and so on.

There are five stages to learning basic JavaScript:

  • Basic syntax: javascript.info/
  • Learning the DOM operation: www.freecodecamp.org/news/what-i…
  • Learn Fecth API with Ajax (XHR) : developer.mozilla.org/en-US/docs/…
  • Learning JavaScript:www.javascripttutorial.net/es6/ ES6 and modularity

  • Understand advanced knowledge

    • Hositing:developer.mozilla.org/en-US/docs/…

    • Event model: javascript.info/bubbling-an…

    • Scope:

      • Developer.mozilla.org/en-US/docs/…
      • www.freecodecamp.org/news/var-le…

    • Prototype: developer.mozilla.org/en-US/docs/…

    • Shadow DOM:www.youtube.com/watch?v=7To…

    • Strict mode: developer.mozilla.org/en-US/docs/…

With that in mind, you’re basically a basic front-end engineer, you can write all kinds of basic interfaces, and you should have produced a lot of demos along the way.

Write web pages efficiently online

Notice the key words in this section: online, efficient.

In this phase, you will learn the following:

  • How do you share your code in a programmer’s way and try to participate in other people’s code improvements
  • Write websites efficiently
  • Understand how web sites interact, how do you get to them

Based on the above objectives, the key technologies in this phase are as follows:

  • Git, making
  • Principles of Internet and Network

  • Development framework:

    • JS/HTML: Reatc/Redux, Vue/Vuex, etc
    • CSS: Sass, Styled Components, and TailwindCSS, etc
    • Build: Webpack, Babel, Npm Scripts, etc
    • Package management: Yarn and Npm

  • The development of specification

    • CSS: BEM, etc
    • JavaScript: Airbnb JavaScript Style Guide etc

Git

Git is a version control system.

Version control systems allow you to track changes in your code base/files over time. They allow you to go back to a previous version of the code base without any problems. In addition, they help to collaborate with people working on the same code — if you’ve ever worked on a project with someone else, you probably already know the frustration of copying and merging someone else’s changes into your code base; Version control can get you out of this problem.

You can learn it by following the link below:

  • www.youtube.com/watch?v=zbK…
  • www.youtube.com/watch?v=SWY…
  • Youtu. Be/Y9XZQO1n_7c…

Github

GitHub is an Internet hosting provider that uses Git for software development and version control. It provides Git’s distributed version control and source code management capabilities, as well as its own features.

You can learn it by following the link below:

  • github.com/
  • Docs.github.com/en/get-star…

Internet

The Internet is a global network of computers that are connected to each other and communicate through a standardized set of protocols.

  • Understand how the Internet works?

    • www.vox.com/2014/6/16/1…
    • Web.stanford.edu/class/msand…

  • What is HTTP?

    • www.cloudflare.com/en-gb/learn…
    • Developer.mozilla.org/en-US/docs/…
    • Kamranahmed. Info/blog / 2016/0…

HTTP is an application layer communication protocol based on TCP/IP, which standardizes the communication mode between clients and servers. It defines how to request and transfer content over the Internet.

  • What is a browser? How do they work?

    • www.html5rocks.com/en/tutorial…
    • www.browserstack.com/guide/brows…
    • Developer.mozilla.org/en-US/docs/…

A Web browser is a software application that enables users to access and display Web pages or other online content through its graphical user interface.

  • What is DNS? How do they work?

    • www.cloudflare.com/en-gb/learn…

The Domain Name System (DNS) is the telephone book of the Internet. Humans access information online through domain names such as NyTimes.com or ESPn.com. Web browsers interact through Internet protocol (IP) addresses. DNS translates domain names into IP addresses so that browsers can load Internet resources

  • What is a domain name?

    • Developer.mozilla.org/en-US/docs/…

A name is a unique and easy-to-remember address used to access a web site, such as “google.com” and “facebook.com.” With the DNS system, users can use domain names to connect to websites.

  • What is a host?

    • www.youtube.com/watch?v=htb…

Web hosting is an online service that allows you to publish web site files to the Internet. Therefore, anyone with access to the Internet can visit your site.

JavaScript framework

React

  • reactjs.org/
  • Reactjs.org/tutorial/tu…

React is the most popular front-end JavaScript library for building user interfaces. React can also use Node to render on the server and use React Native to power mobile applications.

Redux

  • redux.js.org/
  • Redux.js.org/introductio…

Redux is a predictable state container for JavaScript applications. It helps you write applications that behave consistently, run in different environments (client, server, and native), and are easy to test. Most importantly, it provides a great developer experience, such as real-time code editing combined with a time-travel debugger.

There are also Mobx and Recoil players.

This is the React ecosystem, and the JavaScript community has other very competitive frameworks like Vue and Angular.

CSS framework

Styled Components

  • Github.com/styled-comp…

Taking advantage of tagging template text (recently added to JavaScript) and the power of CSS, styled- Components allow you to write actual CSS code to set the styling of components. It also removes the mapping between components and styles — using components as low-level style constructs!

CSS Modules

  • www.ruanyifeng.com/blog/2016/0…

Added local scope and module dependencies to CSS

Sass

  • www.ruanyifeng.com/blog/2012/0…

Adding programming elements to CSS is called a CSS preprocessor

TailwindCSS

  • tailwindcss.com/

For a set of helper classes, adding these default helper classes directly to HTML tags can quickly complete a set of professional websites.

Building related

Webpack

  • webpack.js.org/

Webpack is a module packer. Its primary purpose is to bundle JavaScript files for use in a browser, but it can also transform, bundle, or package almost any resource or asset.

In addition to Webpack, the front end circle is popular at present:

  • A better choice for packaging libraries: Rollup
  • Bundless solution based on browser-based ESM: Vite

Npm scripts

  • www.ruanyifeng.com/blog/2016/1…

Combine Yarn, Npm, and Pnpm package management to execute a series of scripts

Babel

  • www.ruanyifeng.com/blog/2016/0…

Babel is a widely used transcoder that converts ES6 code into ES5 code for execution in existing environments

The development of specification

BEM

  • en.bem.info/
  • Juejin. Cn/post / 684490…

Block, element, decorator methods (often called BEM) are popular naming conventions for classes in HTML and CSS. Developed by the Yandex team, its goal is to help developers better understand the relationship between HTML and CSS in a given project.

JavaScript Style Guide

  • Github.com/airbnb/java…

One of the most logical ways to write JavaScript

Here’s what you should know by now:

  • How does the web page work
  • How to use framework (JS, CSS framework), modern front-end engineering collection tools to help you write interfaces efficiently
  • When writing code, follow the relevant specifications and write code that is easier for others to understand
  • Track your code using Git, the version control system, and share your code with other programmers via Github

Let the web page be used by more people

If you want your website to be used by more people, or even if you want to develop a product to accomplish your entrepreneurial goals, then you may need some additional knowledge to help you.

Here’s what you need to know at this stage:

  • Make sure your site is secure: HTTPS, Cors, content security policies, etc
  • Make sure your apps have as few bugs as possible: TypeScript, Jest, Cypress, Enzyme, React Testing Library
  • Allows users to use PWA, Storage, Web Socket, Service Workers, etc
  • Make your site accessible faster: Lighthouse, Devtools, Performance Metrics, RAIL Model, PRPL Pattern
  • Make your site better indexed: SSR
  • Scatter your apps across platforms: React Native, Flutter, Electron
  • Make your site also able to handle more complex dynamics: WebAssembly, etc

Web security

HTTPS

  • www.cloudflare.com/en-gb/learn…
  • Developers.google.com/web/fundame…
  • Developers.google.com/web/fundame…

HTTPS is a secure way to send data between a Web server and a browser.

CORS

  • Developer.mozilla.org/en-US/docs/…

Cross-domain Resource sharing (CORS) is an HTTP header based mechanism that allows a server to indicate any source other than itself (domain, schema, or port) from which the browser should allow resources to be loaded.

CSP (Content Security Policy)

  • Developer.mozilla.org/en-US/docs/…
  • Developers.google.com/web/fundame…

Content security policy is a computer security standard used to prevent cross-site scripting, clickjacking, and other code injection attacks from executing malicious content in the context of trusted web pages.

Testing tools

Jest

  • jestjs.io/

Jest is a delightful JavaScript testing framework that focuses on simplicity. It works for projects that use Babel, TypeScript, Node, React, Angular, Vue, and more!

React Testing Library

  • Github.com/testing-lib…

The React DOM is a complete test helper library

Cypress

  • www.cypress.io/

Test your application end-to-end

Enzyme

  • Github.com/enzymejs/en…

Test the React helper library

Type checking tool

TypeScript

  • www.typescriptlang.org/
  • www.typescriptlang.org/docs/
  • www.typescriptlang.org/docs/handbo…

TypeScript is a strongly typed javascript-based programming language that gives you better tools at any scale.

offline

The Web’s latest Progressive Web Apps (PWA) technology enables Web sites to have the same functionality as Apps, such as offline use and push notifications.

PWA mainly consists of the following parts:

  • Storage
  • WebSockets
  • Service Workers
  • Location
  • Notifications
  • Device Orientation
  • Payments
  • Credentials

The main reference learning resources are as follows:

  • Developer.mozilla.org/zh-CN/docs/…
  • Github.com/GoogleChrom…

Performance related

Web performance is an objective measure and perceived user experience of load time and runtime. Web performance refers to the time it takes for a Web site to load, become interactive and responsive, and how smooth the content is during user interaction.

Performance is about calculating, measuring, and improving performance. It involves the following:

  • PRPL Pattern
  • RAIL Model
  • Performance Metrics
  • Lighthouse
  • Devtools

The main reference learning resources are as follows:

  • Developer.mozilla.org/zh-CN/docs/…
  • web.dev/

SEO

SEO (Search Engine Optimization) — Search Engine Optimization, the purpose of which is to help our website rank higher when searched by Google or Baidu.

Next.js

  • nextjs.org/
  • Nextjs.org/docs/gettin…
  • www.freecodecamp.org/news/the-ne…

Next.js is an open source development framework built on Top of Node.js that supports React-based Web application features such as server-side rendering and generating static websites.

Multiple platforms

React Native

  • reactnative.cn/
  • Github.com/facebook/re…

Use React to develop mobile applications, such as Android or iOS.

Flutter

  • flutter.cn/
  • flutter-io.cn/

Flutter revolutionizes application development: With a single code base (Dart), it is possible to build, test and publish beautiful applications for mobile, Web, desktop and embedded platforms

Electron

  • www.electronjs.org/
  • Wizardforcel. Gitbooks. IO/electron – do…

Electron (formerly Atom Shell) is an open source framework developed by GitHub. It uses Node.js (as the back end) and Chromium’s rendering engine (as the front end) to develop cross-platform desktop GUI applications. Electron has been used for front-end and back-end development by several open source Web applications, including GitHub’s Atom and Microsoft’s Visual Studio Code.

High-performance applications

WebAssembly

  • Developer.mozilla.org/zh-CN/docs/…
  • Juejin. Cn/post / 703599…

WebAssembly is a new way of coding that can run in modern Web browsers – it is a low-level assembler like language with a compact binary format that runs close to native performance and provides a compilation target for languages such as C/C ++ so that they can run on the Web. It is also designed to coexist with JavaScript, allowing the two to work together.

When you finish learning this part of the content, basically is already a high-level front-end engineer, can be competent for all kinds of RESEARCH and development work in any large factory, of course, it is not easy to stick to here, need continuous efforts, come on 💪

Write in the last

In this paper, in the perspective of three dimensions in 2022 as a front end engineer needs to learn the content, and gives a detailed road map and the corresponding learning resources, some resources are foreign, of course, need to bring your own Internet tools of science, the follow-up will be based on the learning roadmap for perfect, adding detailed Chinese learning resources, stay tuned.

❤️/ Thanks for your support /

That is all the content of this sharing. I hope it will help you

Don’t forget to share, like and bookmark your favorite things

Welcome to the public number programmer bus, from byte, shrimp, zhaoyin three brothers, share programming experience, technical dry goods and career planning, help you to avoid detours into the factory.