Front end engineers learn the route
First, the entry front three musketeers
1, the HTML
HTML is still very simple to learn, whether you have programming foundation, I think you can quickly start, for beginners, I recommend to find a video to watch, and then follow the video to play code, introductory tutorial on the Internet to find a free video, just search “HTML start” can be, Or watch a beginner’s tutorial.
After watching the video, you can also 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 look at ruan Yifeng wrote this HTML tutorial, can let you understand more thoroughly: wangdoc.com/html/
I recommend vS-Code. Pick the editor you like. There are a lot of plugins in vS-Code, and you can write Code in a variety of languages.
2, CSS,
Nothing to say, and HTML complementary, you learn HTML process, in fact, has been exposed to CSS, so after learning HTML, you feel like you can learn CSS in a few hours, or the same, recommend to find a video to quickly start without saying more.
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.
3, JavaScript,
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, the interview seems to often ask, you can take a look at ruan Yifeng wrote a tutorial: wangdoc.com/es6/
Second, the framework
At present, Vue and React are mainly used in front end. Before learning about frameworks, 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 B station to find some courses or buy them
But after you read the course, when you do the project, you will actually encounter a lot of problems, especially in the part of network request, 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.
Data structure
No matter what position you are taking, data structure is a course that must be learned. From the perspective 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 structures and algorithms can be as deep as they are shallow, but I think you should at least have the following basic knowledge:
1. Time complexity and space complexity
2. Linked lists, queues, stacks
3, tree: primary: binary tree, binary tree search, advanced: AVL tree, red black tree, etc., at least master the primary bar.
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
Computer networks
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 it, the computer network must learn, but also have to focus on learning.
5. How browsers work
Learn 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 press F12 in your browser, a “debug” screen appears
There’s a lot of stuff in there, like all kinds of network request data, all kinds of script data, if you’re interested, you can go and look at it.
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
After learning the above, we can learn some tools to help us build a better front-end project. Some common tools are as follows:
Node.js: This must be learned, the main is to help us quickly build a web project, a command is done, you can get started in B station/Tencent class 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.
7. Learning sequence
Here to talk about the learning order, that is to say, after learning HTML + CSS + javascript, I should first learn some front-end framework, or learn data structure and algorithm, 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
The main content includes HTML, CSS, HTML5, CSS3, JavaScript, regular expressions, functions, BOM, DOM, jQuery, AJAX, VUE and so on. Click here to get the full version [95 pages] of front-end module notes
html5/css3
- The advantage of it
- HTML5 deprecated Elements
- New elements in HTML5
- HTML5 form-related elements and attributes
- CSS3 added a selector
- CSS3 Added attributes
- Added morphing animation properties
- 3D deformation properties
- Transition properties of CSS3
- CSS3 animation properties
- CSS3 new increment column properties
- CSS3 added a unit
- Elastic box model
JavaScript
- JavaScript based
- JavaScript data types
- Arithmetic operations
- Casts.
- The assignment operation
- Relationship between operation
- Logical operations
- The ternary operation
- Branch loop
- switch
- while
- do-while
- for
- Break and continue
- An array of
- Array methods
- 2 d array
- string
Regular expression
- Creating regular expressions
- metacharacters
- Pattern modifier
- The regular way
- Support for the String method of re
Js object
- Define the object
- Object data access
- JSON
- Built-in objects
- Math methods
- The Date methods
Object orientation is a programming idea
- Define the object
- Prototype and prototype chain
- Prototype chain
- The prototype
Common JavaScript design patterns
- A singleton
- The factory pattern
- Case model
function
- Definition of a function
- Local variables and global variables
- The return value
- Anonymous functions
- Self-running function
- closure
BOM
- Summary of BOM
- The window method
- Frames [] Frames set
- History Historical records
- The location positioning
- The navigator navigation
- Screen screen
- The document document
DOM
- DOM object methods
- Manipulating relationships between DOM’s
- DOM node attributes
The event
- Event classification
- The event object
- Flow of events
- Event goals
- Event delegate
- Event listeners
jQuery
- JQuery selector
- Property selector
- Position selector
- Descendant selector
- Child selector
- Selector object
- Child elements
- DOM manipulation
- JQuery event
- Container to adapt
- Label style manipulation
- sliding
- Custom animation
AJAX
- The working principle of
- The XMLHttpRequest object
- Differences between XML and HTML
- The get () and post ()
HTTP
- HTTP message structure
- Url Request process
Performance optimization
- JavaScript code optimization
- Improves file loading speed
webpack
- The characteristics of the webpack
- The disadvantage of webpack
- The installation
- Webpack basic application
- Getting Started with Configuration Files
vue
- The MVC pattern
- The MVVM pattern
- Basic grammar
- Instance properties/methods
- The life cycle
- Calculate attribute
- Array update check
- The event object
- Vue components
- Routing using
- Routing navigation
- Embedded routines by
- Named view
