After a long time, the front end developed very quickly. The answer was rewritten so as not to mislead people and will not be updated in the future. Anonymity means not to attract too much attention. It doesn't mean anything else.
Go straight to the main topic. Introduction to the front end is a spiral process. You should not only read books repeatedly, but also seize the time to practice. Three months is certainly enough for beginners.
IFE (Baidu Front end Technology Institute) is an excellent practice platform, and the topics are open source. There are more learning materials in the past 15 years, while the number of questions in the past 16 years is larger and more difficult. Therefore, I personally suggest that you first brush the basic questions for 15 years. If you don't know how to do them, you can also refer to other people's codes.
IFE2015： ife/2015_spring/task at master · baidu-ife/ife · GitHub IFE2016： Baidu Front end Technology College
If you want to do something else, you can do it. In essence, you should find something to do for yourself. You can't just read books.
I divided the three months into three stages.
1. HTML + CSS
The entry threshold of the front end is extremely low, which is reflected in HTML and CSS. The running environment is the browser. Chrome is recommended. All you need is an editor. Use VSCode directly.
HTML and CSS are not programming languages. The former is just structural tags, and the latter is style configuration. Getting started is very simple. There are also many online materials for reference MDN
。
I read a book Head First HTML and CSS at that time, which was relatively mindless. Although it was easy to understand, the price was relatively moving. I could just skim through it, and didn't need to buy it.
Quickly brush the part of the MDN that introduces HTML and CSS. It's good to have a general impression of both. You don't need to memorize them. You can't remember them in a short time. brush Muka.com It's barely OK, but in the future, we still need to look at MDN for information. It's recommended that we do it in one step. It's better to look at the original English version.
The next step is to learn CSS. It is very difficult to learn CSS in depth. If you want to get started, you can cut the diagram. recommend:
CSS Authoritative Guide (Fourth Edition). The fourth edition includes CSS3, so you don't need to look at anything else. This book is very boring. It will take a few days to chew it hard. You don't need to remember the attribute details. You must check them later. Focus on the overall situation and quickly go through the key points, such as box model, positioning Elastic box Layout, etc.
The above content takes about 5 days, mainly to read the CSS Authoritative Guide (Fourth Edition). Here is the practice.
After learning HTML and CSS for a few days, I should have some achievements. Open IFE2015 task1 and write a static page.
It is normal that it cannot be written. You can look at other people's code. A small part of it will enlighten you. Check the book or MDN for forgotten attributes, try more, and make progress only by constantly stepping on the pit.
Don't rush to write after cutting a picture. Novice code usually has problems such as disorderly code indentation and unorganized attribute order.
It should be rewritten at this time. Find a code specification before rewriting, such as GitHub - ecomfe/spec: This repository contains the specifications. 。 Of course, code specifications are not unique, as long as they are reasonable and uniform in style.
Take a look at the code submitted by others and see more copies. Of course, you should also judge yourself. Don't listen to the wind and rain. If someone writes poorly, you can rewrite it again, which means you are also responsible for it.
When you start rewriting, you will find that the code writing speed is much faster. After cutting several pages, I should be more proficient. If you see the page layout, you will probably know how to write it, and then you can start to learn JavaScript.
The above content takes about 10 days.
The advanced part can be looked back:
Master the preprocessing tools Sass or Less. The syntax is similar. Do not memorize them. Read the Bootstrap source code all the way. In fact, it is rarely used, mainly to see how a large number of CSS codes are organized, and focus on grid layout and other key implementations of Uncover CSS. It is a collection of tricks and intrigues, so you can increase your knowledge and offer your knees
2. JavaScript
This is a crucial stage. In a broad sense, JavaScript can be roughly divided into language features (ECMAScript) and Web APIs (DOM, BOM, etc.).
We strongly recommend JavaScript Advanced Programming (Version 3), commonly known as the Red Book. The first seven chapters generally talk about language characteristics, which is the top priority. You must read them repeatedly until you fully understand them. Students with C/C++foundation should have no problems. DOM、 Event flow Forms, JSON, Ajax, and the last few chapters are also quite important. They are common Web APIs. The rest of the chapters can be skimmed or skipped directly. For example, useless things like XML can be skipped. There are also those chapters that list a large number of APIs, and then refer to the Recommended JavaScript Language Quintessence, commonly known as the Butterfly Book. It's an ultra-thin book that can be read in half a day. JavaScript is a language with many pitfalls. Removing the pitfalls is "essence". It's good to go over it. If you don't understand it, look back later. The ECMAScript (ES for short) specification has added new features every year since 2015, while the Hongbao Book was written earlier, and many knowledge points have not kept up. ES6 (also known as ES2015) and later language features are also compulsory, and Ruan Yifeng's《 Introduction to ES6 Standards 》However, this book is dominated by APIs, so I still want to leave a general impression. I will write something similar in the future and check whether there is a more concise writing method under the new language features. It is not necessary to memorize strongly recommended JS You Don't Know 。 The original version is in English. Students in need can search the Chinese version by themselves. This is a very wonderful book, which captures all the details of JavaScript. The answers to the questions you cannot understand in the previous books, such as the direction of this, can usually be found here. The authoritative Guide to JavaScript, also known as the Rhino Book, is not recommended. It is like a dictionary. I just flipped through it and didn't read it carefully. It's hard to comment further. There is a reference to jQuery in the comments. I don't think I need to read it at all. It's easy to learn when writing ancestral projects. Native APIs are still preferred
The above content takes about one month. If you have some programming experience, there should be no pressure. After all these books are finished, you are almost ready to start talking and laughing with others. Start to practice, IFE2016 Phase II questions are basically brushed casually.
Advanced:
TypeScript。 With Static language Experienced students can learn to use the package management tool npm directly without difficulty, and learn to find the desired package in the community, such as npms.io Try to use webpack to build a project, and compile the code of ES new features through Babel to be compatible with the old browser. to configure webpack It's painful. You can run it first. Fine optimization can be adjusted slowly later. Check more data to configure ESLint standard code format, develop good coding habits, check lodash, and try to implement it with simple code. I don't want people who have read my answers to meet the following situations, because I know the interviewer in this question (
Web Fundamentals , Treasure website, web development advanced must read
3. JavaScript framework
This part is more free. Everyone points to a different skill tree. The development of the front end is explosive, changing tools is faster than turning a book, so it is mainly based on reading documents.
At present, React, Angular and Vue are often mentioned as mainstream frameworks. There are quite a few excellent answers in Zhihu Search.
Proficiently master at least one framework, and it will take about one and a half months to clear IFE2016. I personally recommend React, which is very helpful to improve the foundation of JavaScript. Vue is more like a new language. Newcomers usually don't have to worry about the quality of the framework. It's not difficult to learn it after a long time.
Advanced:
The surrounding ecology of the framework, such as countless Redux packages, countless CSS in JS schemes, etc., create wheels to read the source code Node.js with questions, and the Backend for Frontend... In this sense, I have a clear idea of what to learn
4. Basic computer knowledge
It is found that there are too many non discipline players in the front end, so I hereby add a section that the ceiling will be very low if I do not understand the basics. Because I have OI experience, I have a slight advantage.
Operating system:
《 Deep understanding of computer system 》(CSAPP), an entry-level book, look at the key points《 Modern operating system 》The translation is poor. Students with conditions can read the original English version, or use Operating Systems: Three Easy Pieces instead of The Linux Programming Interface. A good book on system programming has little direct relationship with the front end, but if you don't understand it, you can't say it. Don't narrow the path Advanced Programming in the UNIX Environment (3rd Edition) (Chinese version《 Advanced programming in UNIX environment 》）, can be seen together with the above
Computer network:
《 Top down method of computer network 》An introductory network book. At least the front end must understand the HTTP protocol TCP/IP Illustrated. It is a very detailed classic with a lot of content. Read UNIX Network Programming on demand《 UNIX network programming 》）, read with the above system programming book
Algorithm and data structure:
Algorithms (Fourth Edition), which is implemented in Java, is not difficult《 Introduction to Algorithms 》It is relatively academic. If it is mainly practical, you can skim and brush the questions, and strengthen the coding level. The LeetCode level is enough for most interviews《 Classic Training Guide for Introduction to Algorithm Competition 》A copy of the basic people who are engaged in the competition. Those who have not contacted but are interested in it can have a look
Compilation principle:
Compilation Principles, commonly known as Dragon Book 。 There are so many things related to compilation in the project that it's no harm to learn the skill of killing dragons. It's actually fun
In the comments, I felt that I was misleading, that it was impossible, and even said that I pretended to be forced. I must clarify that what is mentioned in the article is 100% real experience. I don't lack contacts, money, or training courses. Besides, I am anonymous and pretend to be a force
However, this answer still prohibits reprinting in any form, including but not limited to copying, expanding, rewriting, etc.
End.
