It is suitable for quick introduction to the front-end, concise and clear, directly clicks on the learning video, without too much introduction to each part.

Phase 1: Getting started with the front end

1. HTML5

2. css3

Conclusion: follow the video to write a static project of h5+css3

Recommended video learning link:

Dark horse programmer pink teacher front-end introductory tutorial, zero-based must-see h5(html5)+css3+mobile front-end video tutorial_哔哩哔哩_bilibili

Phase Two: JavaScript

①JavaScript Basic Grammar

② Advanced JavaScript (WebAPI/Dom Bom)

③JavaScript framework (jQuery)

④Data visualization (echarts)

Conclusion: Follow the video to write a dynamic project of h5+css3+javascript, write an echarts data visualization project

Recommended video learning link:

JavaScript basic grammar-dom-bom-js-es6 new grammar-jQuery-data visualization echarts dark horse pink teacher front-end basic video tutorial (more than 500 episodes) continued_哔哩哔哩_bilibili

The third stage of server-side programming

[ Used to bridge JavaScript and vue.js]

1. node js basics

Recommended video learning link:

Dark horse programmer Node.js full set of introductory tutorials, nodejs new tutorials include es6 modularization + npm + express + webpack + promise, etc._Detailed explanation of Nodejs actual combat cases_哔哩哔哩_bilibili

2.ajax

Recommended video learning link:

[Silicon Valley] 3 hours Ajax introduction to proficiency_哔哩哔哩_bilibili

3.promise

Recommended video learning link:

Shang Silicon Valley Web front-end Promise tutorial from entry to mastery_哔哩哔哩_bilibili

4.axios

[Axios is a secondary package of ajax technology through promise] (interact with the backend to obtain backend data)

Recommended video learning link:

Getting Started with Axios and Source Code Analysis of Shang Silicon Valley Web Front-End_哔哩哔哩_bilibili

5. Understand and learn es6 grammar, http protocol rules

Recommended video learning link:

Shang Silicon Valley Web front-end ES6 tutorial, covering ES6-ES11_哔哩哔哩_bilibili

[This part does not need to spend too much time, you can learn by reading related documents, no video learning is required]

6. TypeScript

Recommended video learning link:

Shang Silicon Valley TypeScript Tutorial (TS New Class by Mr. Li Lichao)_哔哩哔哩_bilibili

The fourth stage Vue.js

① Frame: Vue.Js [vue2, vue3]

Recommended video learning link:

Shang Silicon Valley Vue2.0+Vue3.0 full set of tutorial丨vuejs from entry to master_哔哩哔哩_bilibili

②Learn to use UI component library (website rapid prototyping tool)

Element ui（pc端）Element - The world's most popular Vue UI framework

vant ui（mobile端）Vant 4 - A lightweight, customizable Vue UI library for mobile web apps.

③Vue project actual combat

The following is the recommended practical video link:

[This recommendation is based on actual shopping mall projects, which are also the most widely used types. In addition, there are also movie bookings, travel and other types of projects]

Shang Silicon Valley VUE project actual combat, front-end project-Shangpinhui (large/heavy)_哔哩哔哩_bilibili

The fifth stage WeChat Mini Program

Recommended video learning link:

Dark horse programmers front-end WeChat applet development tutorial, the whole process of WeChat applet from basic to release_Enterprise-level mall actual combat (including multi-terminal deployment of uni-app project)_哔哩哔哩_bilibili

Phase 6 React.js Basics

[React: A JavaScript library for building user interfaces ]

Recommended video learning link:

Shang Silicon Valley React tutorial (2022 plus update, B station super hot react tutorial)_哔哩哔哩_bilibili

Front-end learning route (concise and clear, direct learning path)

Phase 1: Getting started with the front end

1. HTML5

2. css3

Phase Two: JavaScript

①JavaScript Basic Grammar

② Advanced JavaScript (WebAPI/Dom Bom)

③JavaScript framework (jQuery)

④Data visualization (echarts)

The third stage of server-side programming

1. node js basics

2.ajax

3.promise

4.axios

5. Understand and learn es6 grammar, http protocol rules

6. TypeScript

The fourth stage Vue.js

① Frame: Vue.Js [vue2, vue3]

②Learn to use UI component library (website rapid prototyping tool)

③Vue project actual combat

The fifth stage WeChat Mini Program

Phase 6 React.js Basics

Guess you like