This paper is mainly for the students who are completely white in the front end, do a simple front end learning path planning, there may be a lot of incomplete or wrong places, head a little confused, feel less things, and unexpected, welcome to point out more. A simple resource link will be attached. Only some core points will be listed. Other things that are not particularly core will not be listed here. You can touch and explore slowly in the learning process, essentially to improve efficiency.

The base class

Learning about the front end starts with mastering the web, which is the foundation of all websites, and understanding it.

  • HTTP
  • The browser

Front-end base class

The front-end base class is the single most important thing to get started with. The three listed below correspond to the framework, style and logic of a web page, all of which are indispensable in development.

HTML&HTML5 should be studied. You need to understand common labels and standards.

CSS Learn CSS and CSS3. CSS may be a lot of people do not pay too much attention to, some people who have worked for many years to CSS also know a little about it. CSS things are more miscellaneous, properties can affect each other, and the same effect has many ways to achieve, it can be said that the real entry is easy to master difficult, began to learn to feel CSS things are very good, and then learn the deeper will find the more content. The advice is that if you want to get into the front-end business, start with a solid CSS foundation, which will always be a valuable asset.

Finally, Javascript is the most important, which will occupy most of your time in your future work, js related basic concepts such as closures, basic API should have a certain grasp, new API should also have some understanding, at least ES6 related syntax need to master.

When you’re ready to develop web pages, you’ve officially opened the front door.

  • HTML(HTML5)
  • CSS(CSS3)
  • Javascript based
  • ES6

Some of the content in front of the shallow, want to deeper grasp or need to read more, recommend a few read books, classic but out of date

  • CSS world
  • The Definitive Javascript Guide

Framework class

At present, the more mature front-end development will use the framework for development, front-end bearing a lot of business logic, modern website volume is also relatively large, the original development mode has been unable to support large-scale website development, so will choose the front-end framework. React or Vue are popular frameworks. You can choose either of them. You can choose according to your actual business and personal preference.

  • React
  • Vue(choose one of two)

When you use frames, you open the door to a whole new world of React buckets and Vue buckets. But don’t panic, everything is meant to solve a problem, and when we know the goal of a library or tool, we can sort it out. Let’s take our time.

Since I use React a lot, from the perspective of React, you can find the target library or tools if you use Vue, because the problems to be solved by any framework are similar. The following are some of the problems that arise when working with frameworks, and we will introduce the relevant libraries and tools from the perspective of the problem.

How to solve the problem of single-page routing

SPA (i.e. single page application) is common in modern websites. Only HTML is returned by the server. Page routing is controlled by the front end. Here is the React solution

  • React-Router

How to solve the problem of application status synchronization

For a web application, we have a lot of data or state to deal with, and the data processing of a single component can be handled in the way provided by the framework. But if it’s global data, like login data, how do we share it, how do we modify it, how do we notify it, how do we track it, there’s a lot of issues that need to be resolved. At present, there are many data processing schemes, such as Redux, Mobx and so on. Introduction of words recommended to learn Redux first, because the idea is quite clever, very few source code, it is very convenient for us to learn and master the novice.

  • Redux

Utility class

Now we use the framework, we have a lot of code and a lot of pages, how do we organize that code together, how do we deal with various types of files like images, how do we subcontract to optimize loading on demand. This is where the packaging tool comes in. There is only one type of Webpack here, but there are other packaging tools such as Rollup, Parcel, etc., all of which have their own advantages and disadvantages, but Webpack is the most comprehensive and stable.

  • Webpack

Typescript

Typescript is singled out because of its growing popularity and indeed its prominence in terms of front-end stability and code maintainability. Typescript is a superset of Javascript that brings types to JS. If you are interested, you can learn

  • Typescript

The subject class

Simple list of some questions, if you can answer the following questions show that you are a qualified mature front, the mind of the first time think of the problem listed here, later thought of slowly add, have time to add the answer, we can first search, a lot of online

  • What are HTTP and TCP, and what is the communication process of TCP
  • What new features will HTTP2 and HTTP3 bring
  • What is HTTPS, what problem does it solve, and if so, how
  • HTTP method GET,POST usage scenarios, why
  • The process by which the browser parses the HTML and renders the page
  • What is a process, what is a thread, what is the difference
  • What are closures and prototype chains in JS
  • What does this point to in JS, how does it differ in arrow functions, and how does this behave when combined with apply and bind
  • What are box models? What are they
  • Master the layout of the CSS
  • Use CSS to implement child elements in as many ways as possible to center them horizontally and vertically within their parent elements
  • How do I clear floating problems
  • What is BFC? What is the application
  • What is event capture and event bubbling, and what is the application
  • The browser’s EventLoop process
  • What are redraw and reflow, what are the consequences, and how can it be avoided
  • Front-end modular IIFE, AMD, CJS, ES6 Module are what, what is the difference, what is the application scenario
  • What Promise is, what problem it solves. How to handle errors with Promise? How to use promise.resolve and promise.all
  • If you want to optimize the site performance to optimize what points, what is the measure
  • Website security should pay attention to what problems, how to solve these problems
  • How to do cross-domain, what are the solutions, and what are the technical details and principles of these solutions
  • What are anti – shake and throttling, how to apply, how to achieve
  • What does the browser store have and what are the application scenarios
  • What about browser caching
  • What is the mobile web adaptation scheme
  • Implementation principle of single-page routing
  • V8 engine garbage collection process
  • What is the React lifecycle
  • React principle, virtual DOM, Diff, Fiber, what’s the process
  • Redux idea and realization principle
  • How does the packaging tool organize files and what is the process
  • How is a simple template engine implemented
  • Ability to write common regular expressions, independent of search
  • Common design patterns

Source code implementation series

Recently in writing a source code implementation series, to help themselves and you can have a deeper understanding of some of the things we usually use, if you are also interested in can pay attention to, will always be updated, there are questions or ideas welcome to discuss in the discussion area