With the in-depth development of the Internet, front-end development engineers have become very sought-after talents in the market. Many students, including those who used to do UI, Java, or those who have no basic knowledge of IT, want to learn the front-end. The picture below is a front-end learning mind map that is widely circulated on the Internet. Many beginners say that they are already dizzy when they see these dense knowledge points. Indeed, the front end is a broad subject. But if you want to learn the front-end, you don't have to panic. Although there are many content, there are traces to follow. As long as you make a step-by-step process, you are not afraid to learn the front-end!
So how should a student with zero foundation learn the front-end?
1. Tools If you
want to do well, you must first sharpen your tools , so it is very important to choose a suitable and easy-to-use editor before you start. There are no more tools, just because it is easy to use. In addition to the editor, we also have to Mastering some other tools will enable us to learn more smoothly.
1. WebStorm
needless to say, the most powerful front-end editor, especially the invincible smart prompt, but its disadvantage is that if the project is more than large, the stuttering will make many people distressed.
2.
Google must learn to *** before using "Google", otherwise it will not be able to access. Learning to use search can help us solve many problems. A person’s knowledge is limited. Only by mastering the search skills can we cope with all changes. In many cases, Baidu's things are very repetitive. The most important thing is that there is a lot of spam. The answers that cannot be found on Baidu are easy to find here. Google is my essential search.
3. Github is the
world's largest "same-sex" open source communication community. If you don't have an account, register as soon as possible . There are many excellent resource projects and various gods here. Observing good code is a good way for us to learn. In addition, in the development process, many times the task is heavy and time is tight, and you should avoid recreating the wheel. You can find the tools or code you need here. 4. Stack Overflow is a
well-known foreign technical Q&A communication community, and many questions encountered during development can be answered here.
5.SegmentFault
The corresponding domestic version of the technical Q&A communication community, if you are not good at English, you can also find answers here.
6. Markdown Markdown is a
lightweight markup language with a concise syntax that allows authors to focus on content rather than complex format requirements. I think everyone should master it, especially those who write blogs frequently. Think about the scene when you are using the world. Every time you finish writing an article, you have to spend a lot of time formatting the format. You can avoid these troubles by using it. ·
Markdown Chinese documents ·
Youdao Cloud Notes: The online Markdown editor that I have been using myself.
I am an old web front-end programmer who has been engaged in development for many years. Some time ago, I spent a month sorting out a web front-end learning dry product that is most suitable for learning. Various frameworks are organized and sent to every front-end small Partners, if you want to get it, you can add the following QQ group to get it for free .
Second, HTML articles After
some preparations are ready, we begin our learning journey. First, let's start with HTML. HTML is called "Hypertext Markup Language", which is the structural basis of the entire page, and it carries the content of our page.
1. Basic
w3school online tutorial: The content is very basic, suitable for beginners to learn, and have an introductory understanding of HTML.
freeCodeCamp: A very good introductory learning website, using the mode of breaking through levels, just like the upgrade of the game, it is very fun, and those who are ready to learn on their own may wish to try it.
2. Advanced
MDN HTML: The quality of the content here is better, there are fewer errors, and the content is more comprehensive.
HTML and CSS coding standards: master some coding skills, write better, higher-quality code.
3. The CSS
HTML carries the content of the page, but sometimes it is slightly monotonous and "ugly". The function of CSS is to style these content, just like a beautiful woman needs to be decorated with a beautiful coat to make it more beautiful , "People rely on clothes, horses and saddles." The content of the webpage also needs to wear a beautiful coat to attract users. And CSS completes this decoration.
1. Basics
Learning CSS layout: Take you step by step to complete the CSS learning.
CSS Reference Manual: You can have a comprehensive introductory study of CSS.
w3school CSS Reference Manual: Ditto is also very basic knowledge, suitable for getting started.
2. Advanced
Books:
"CSS Revealed": A very recommended CSS book, you can learn a lot of little-known skills.
Online series: · MDN CSS: and HTML are MDN community documents, quality assurance.
HTML and CSS coding standards: master some coding skills, write better, higher-quality code.
Mr. Damo’s CSS series: Mr. Damo has a very in-depth understanding of CSS and rich practical experience, author of "Illustrated CSS3: Core Technology and Case Practical Combat".
Da Mo teacher's SASS series: Da Mo teacher's sass article series.
SASS Chinese website: Mature, stable, and powerful CSS extension language parser, which allows you to write CSS using variables, conditional statements, etc.
Stylus official website: It is also a CSS pre-compiler, but it saves some symbols, making CSS more concise and refreshing to write.
HTML5 and CSS3: Explain HTML5 and CSS3 in detail.
Knowledge points: Don’t say you understand the relative units of CSS: in-depth understanding of the relative units of CSS rem, em difference
CSS Advanced content: in-depth understanding of common knowledge points.
Flex layout tutorial: grammar: teacher Ruan Yifeng's flex explanation.
Flex layout tutorial: Examples: Teacher Ruan Yifeng's flex explanation.
"CSS-related" directory archive: Zhang Xinxu's CSS series articles, easy to understand, author of "CSS World".
· 40 kinds of shapes and graphics drawn by CSS: 40 kinds of shapes drawn by CSS.
CSS-big front end: some knowledge points of CSS.
3. Advanced
JavaScript language essence: reveal the essence of JavaScript.
JavaScript Secret Garden: sort out and explain some of the core knowledge points of JS, such as this, closure/scope, constructor, prototype, etc., which are all required knowledge points for interviews.
Introduction to ECMA 6: Teacher Ruan Yifeng's ES6 introductory book provides a comprehensive introduction to the newly introduced grammatical features of ECMA 6.
JavaScript usage skills: You can recognize some tips that you haven't touched before.
In-depth understanding · JavaScript Prototypes and Closures Series: Explains the prototypes and closures in detail. After reading them, you will thoroughly understand the prototypes and closures.
Teacher Da Mo's JavaScript series: Teacher Da Mo's JavaScript series articles.
JavaScript algorithm and data structure: based on · JavaScript algorithm and data structure, let you learn happily.
Regular expressions in JavaScript: An article of my own regular expressions, I hope it will be helpful to you.
Master the core content of ES6/ES2015 in
30 minutes (top) Master the core content of ES6/ES2015 in 30 minutes (bottom): Explains some commonly used ES6 knowledge points.
Learn to use JavaScript design patterns: Explain the classic and modern design patterns in the JavaScript programming language.
You don't understand JS (series of books) · InterviewMap: Gather a lot of knowledge points, including JS, browser, performance, etc.
JavaScript code snippets that can be understood in 30 seconds: Let you better understand some useful JS code snippets.
4. Type is
a superset extension of ES6, strict data types, better maintenance, suitable for the development of large-scale projects, some people say that it is the future development trend, do you want to know?
Type Chinese manual: translated version of the official website.
Type Handbook (Chinese version): Chinese version.
RxJS Chinese document: Chinese official website.
Mastering RxJS in 30 Days (01): Knowing RxJS: Traditional Chinese characters may not read so smoothly. Although the Jquery article is now in the era of single-page applications, there are powerful frameworks such as React and Vue that can be used, but there is no shortage of old projects that need to be maintained, and at the beginning of learning, you can use it for two simple applications or Good, you can understand the basic usage relatively, it allows you to operate the DOM better and more conveniently. But deep learning is not recommended.
"Sharp jQuery (2nd Edition)": A very good Jquery learning book. · JQuery API Chinese document: JQuery Chinese tutorial. When you have mastered HTML, CSS, and Java in the Ajax chapter, you can try to do some projects yourself at this time, and there will definitely be data interaction in the project. This time is where Ajax comes in.
Liao Xuefeng AJAX: Liao Xuefeng's blog knowledge. · Target: AJAX detailed explanation of teacher Ruan Yifeng.
JSON style guide: The interaction data between the front and back ends is usually in JSON format, so it is necessary to understand JSON. The emergence of NodeJS and modular NodeJs has brought front-end development into a new field, and has spawned professional Node engineers. Not only that, Node plays an important role in front-end modularization and engineering, so understanding is necessary. Those who are interested can learn in depth and develop to full-stack engineers.
JavaScript Modular Programming (1): How to write modules · JavaScript Modular Programming (2): AMD Specification · JavaScript Modular Programming (3): The usage of require.js · The history of front-end modular development: Understand, front-end modules Development.
Official Node.js · Uncle Wolf: How to learn Node.js correctly: Uncle Wolf has a high status and the author of "Greater Node.js".
The Road of Full Stack Engineer-Node.js
V. Framework
With the increasing complexity of user needs and the increasing complexity of the system, the traditional development model is becoming increasingly difficult to meet. At this time, the three major frameworks were born, allowing developers to be more efficient, reusable, and focus on The operation in the data layer eliminates those tedious and repetitive view operations.
The ability of frameworks is now one of the necessary skills for front-end developers and is a trend. The "ultimate goals" of the three frameworks are all the same. I don’t think developers need to worry about which one they should choose to learn. They can choose two of them. One is the best. For those who are just getting started, it is recommended to start with Vue, which is relatively simple and flexible.
Illustrations of MVC, MVP and MVVM: Before learning the framework, you should understand the design ideas of MVVM.
Framework principles: understand the basic principles of some frameworks.
1.
Angular Angular: Angular official community.
Angular Developer: A site maintained by Teacher Da Mo Qiuqiu, an Angular Chinese evangelist.
NG-ZORRO: Angular UI component library, produced by Alibaba.
2.
Vue Vue: official website, the best learning materials.
My road to Vue advancement: I posted it cheeky, some of my own learning summary, I hope I can gain something for you, even a little bit.
Use the vue family bucket to make a blog site · Element: a high-quality Vue UI component library. Are you hungry? Produced by the front-end team.
The problems and solutions for your pain points in the Vue project (update): It is inevitable to go back to the pit when working on the project, and you may find the answer here.
3.
I don't know much about React React, so there is nothing to recommend. You can learn by yourself.
React official website