Front End Engineer learning route (to organize HTML, CSS, JavaScript and so on a full set of learning materials)

Article reprinted: Le Byte

First, the entry front three musketeers

1, the HTML HTML is quite simple to learn, no matter whether you have programming foundation, I think can be started quickly, for beginners, I recommend looking for an introductory video to look at, and then follow the video playing code is ok, introductory tutorial to get a free online video, search “introduction to HTML” can casually, Or watch a beginner’s tutorial. After watching the video, you can also take a look at the text version of the tutorial, I do not know if you have seen ruan Yifeng wrote a tutorial, I think he wrote a great tutorial, so here I also recommend you take a look at ruan Yifeng wrote this HTML tutorial, can let you understand more thoroughly: Vs-code is one of the most popular HTML editors in the world. You can use vS-Code to write Code in a variety of languages.

2, CSS has nothing to say, and HTML complement each other, you in the process of learning HTML, in fact, has been in contact with CSS, so you learn HTML, feel a few hours can learn CSS, or the same, recommend to find a video to start quickly, not to say. HTML is a tag language. There are all kinds of tags in it. Many beginners may forget these tags after learning it. Forget it, it’s okay, you don’t have to memorize the tags, what you need to do is to have an idea in your mind that when you implement a function, you know that HTML has a tag that can do that function, and then turn to the corresponding tutorial, and you can use that tag according to the tutorial. With the number of times many, also remember, so learned HTML and CSS, must practice a lot, just to open a web page, on the gourd ladle, write their own a similar to it.

JavaScript is a little harder than HTML and CSS, but if you have a background in other programming languages, such as C, Python, or Java, you can easily learn JavaScript. For HTML and CSS, I recommend you to find a video for a quick start. But for JavaScript, if you are not pressed for time, I recommend you to use books to learn systematically. Some knowledge, while you have time, you must learn systematically, so that you can lay a deep foundation, if you feel difficult, You can also use the video to start quickly, and then go back to study books, system over, through systematic learning, you will understand a lot of principles, learn a lot of design ideas, I have seen a “High-performance JavaScript- Chinese”, feel good, I recommend this one. After learning JavaScript, you can learn to learn ES6, interview seems also often asked, you can take a look at ruan Yifeng wrote a beginner tutorial: ES6 tutorial

Before learning the framework, you must first use HTML + CSS + JavaScript to do some projects, because the underlying implementation of these frameworks is actually implemented by JavaScript. However, There are people who know how to use Vue, but have not learned JavaScript, which is obviously not appropriate. If you have experienced HTML + CSS + JavaScript, you can better understand the benefits of Vue and React. But for beginners, you can learn Vue first, Vue may be better to get started, before the internship, I was forced to learn Vue for a few days. You can go to site B to find some courses or buy some courses, but after you read the course, when you do the project, you will actually encounter a lot of problems, especially in the part of the network request, and in the process of solving the problem, you will understand some principles better. To what extent? Half of my advice for beginners is to follow a tutorial, go through it, then do the project, and then search for whatever you come across, regardless of how much you’ve learned. I recommend Vue. However, after learning Vue, if you have time, I suggest you can learn React by watching videos. It seems that a few hours or a day or two is enough.

No matter what position you are taking, data structure is a course that must be learned. From the point of view of interview, the interview is basically better than asking, especially for school recruitment. On a personal level, learning data structures and algorithms will take you a long way. However, data structure and algorithm this thing, can be deep or shallow, but I think at least to master the following basic knowledge: 1, time complexity, space complexity 2, linked list, queue, stack 3, tree: elementary: binary tree, search binary tree, advanced: AVL tree, red black tree, etc. 4, graph (graph has many kinds of algorithms, depth/breadth search, shortest path, minimum survival tree, etc.), for graph, in fact, whether interview or work, are quite rarely used, there is a certain difficulty to learn, if you don’t have much time, I think you can not learn. However, if you are a major student, then I think it is best for you to finish all these in the second semester of your freshman year. It is not a problem if you do not finish learning them. Some people may first teach discrete Mathematics to pave the way for data structures and algorithms. Book recommendations: You’ve learned JavaScript, so you can write these data structures in JavaScript. As for books, I don’t know what to recommend. After learning basic data structure, I think it is very important for you to keep brushing questions. For example, you can keep brushing one or two questions every day. It will be difficult to brush questions at the beginning, but it will be much faster when you become proficient. I think at least finish the “Finger offer”, after that, you can go to the top 100 hot questions in Leetcode. Of course, if you want to be more systematic about learning algorithms, you can read the algorithm Learning Path I wrote earlier: Talk about the algorithm learning Path

Four, computer network whether front-end development or back-end development, in the final analysis is the data through the network in the interaction between multiple hosts, and for the front-end, computer network knowledge, may be more than the back-end, especially HTTP, so, computer network must learn well, but also have to focus on learning.

Five, the browser working principle front-end, basic every day and the browser to deal with, because the various interface on the web page, are rendered by the browser, so it is very necessary to learn about the browser related knowledge. If you hit F12 in your browser, you’ll get a debug screen that has all sorts of things in it, all sorts of network request data, all sorts of script data, if you’re interested, you can explore that. So what exactly do you want to learn? I think we should at least learn about local cookies, localStorage, SessionStorage, how to check the status of an HTTP request, what happens when the browser closes, and so on. In general, what logic does the browser go through from the time we make an HTTP request to the time the page is displayed as before?

Six, advanced learned these above, can learn some help us to build a front-end tool of the project, common has the following several kinds: Node. Js: this must learn, mainly is can help us to quickly build a web project, have to a command, primer can B/tencent class to see the video. Advanced or even more level understanding, generally have to read a book, their own online search. Webpack: Different browsers support different JavaScript features. Build tools can be used to convert JavaScript code to browser-supported features. Using construction tools can also achieve performance optimization, such as compression code, this webpack can be learned, in the future project process, or often use Node.js and Webpack, I think it is good to use at the beginning, later encountered problems, through the problem driven way to in-depth understanding.

Seven, learning order here to talk about the learning order of the problem, that is to say, after learning HTML + CSS + javascript, I should first learn some of the front-end framework ah, or learn data structure and algorithm ah, or learn computer network, browser working principle? I think this time with you, if you are still a freshman sophomore year, the school will have a data structure, computer network course, I think just follow the order of the school to learn, and then, like a brush, I don’t think there are some things to do at the same time there are contradictions, such as I have suggested to brush the topic in this period, keep for a long time, and then do other side. In general, I think you can do it in the same order as I said, and then the algorithm part, when you learn Javascript, you can break through the whole process.

95 pages of front-end beginner module notes include HTML, CSS, HTML5, CSS3, JavaScript, regular expressions, functions, BOM, DOM, jQuery, AJAX, VUE and so on. Need the full version [95 pages] front-end module notes can be downloaded by clicking the card link below

html5/css3

HTML5 Advantages HTML5 abandoned elements HTML5 new elements HTML5 form-related elements and attributes CSS3 New selector CSS3 new properties new deformation animation properties 3D deformation properties CSS3 transition properties CSS3 animation properties CSS3 new increase in column attributes CSS3 added the unit elastic box modelCopy the code

JavaScript

Basic JavaScript Data types Arithmetic operations Coercion assignment operations Relational operations Logic operations ternary operations branch loops Switch while do-while for break and continue array array methods two-dimensional array stringsCopy the code

Regular expression

Create a regular expression metacharacter pattern modifier. The regular method supports the String method of a regularCopy the code

Js object

Define object Object data access JSON built-in object Math method Date methodCopy the code

Object orientation is a programming idea

Define object prototype and prototype chain Prototype chain prototypeCopy the code

Common JavaScript design patterns

Singleton pattern Factory pattern example patternCopy the code

function

Function definitions Local and global variable return values anonymous function self-run function closureCopy the code

BOM

BOM Overview Window method frames [] History History location Navigator Navigation Screen Document DocumentCopy the code

DOM

DOM object methods manipulate DOM node properties in relation to DOMCopy the code

The event

Event class Event object Event stream Event target event delegates event listenersCopy the code

jQuery

JQuery selector Property selector Location selector descendant selector descendant selector selector object child element DOM manipulation jQuery event container ADAPTS tag style manipulation sliding custom animationCopy the code

AJAX

How it works XMLHttpRequest object The difference between XML and HTML Get () and post()Copy the code

HTTP

HTTP message structure URL request processCopy the code

Performance optimization

JavaScript code optimization improves file loading speedCopy the code

webpack

Webpack Features Disadvantages of WebPack Install WebPack basic application profile getting startedCopy the code

vue

MVC pattern MVVM pattern Basic Syntax Instance Property/method lifecycle Calculation Property array update check event object Vue component routing using route navigation nested routines by named viewCopy the code

Article reprinted: Le Byte

The PDF is ready for you. I hope you enjoy ！！！！