Still confused about how to get started and progress on the front end? The Swastika guide lets you no longer confused!

I often see that many students are confused when learning the front end, and do not know exactly how to learn the way to get started and advance the front end. I will share my learning experience every time I encounter this kind of question, but I find it is a common question that is asked a lot.

As a programmer, certainly can’t tolerate repetitive and tasteless labor, so I will systematically summarize and share my front-end learning route, hope to be helpful to you.

preface

Front-end learning is a spiral process, not only to read repeatedly, but also to seize the time for actual combat. You read and you forget, so you have to combine reading and coding. As long as you learn seriously, the entry front-end word about three months can be. Then I gave you the front end progression route to help you improve your front end skills. I divided the front-end introduction and front-end progression into six stages, and marked the approximate learning time required for the corresponding stages.

Introduction to the front

Introduction front-end development mainly needs to learn HTML, CSS and JavaScript. After that, I learned how to use the mainstream framework and developed a small project based on what I learned. Once you’ve learned and understood all of this, you’re really at the front end.

Stage 1: HTML + CSS

The front end is fairly beginner friendly, as you only need one browser to get started. Chrome is recommended. HTML and CSS can run directly in the browser, which is their runtime environment. You can also use an editor. I recommend VSCode, which is the most used editor for front-end development.

HTML (HyperText Markup Language) and CSS (Cascading Style Sheets) are not really programming languages. The Chinese name for HTML is hypertext Markup Language, which is just a bunch of tags. CSS is called Cascading Style Sheets, and it’s just a configuration of styles.

First, learn HTML. It’s very simple. HTML has so many tags, don’t get caught up in memorizing them when you’re starting out, you won’t. All you need to do is go through the whole thing, know which tags are there, what they do, and get an impression of the whole thing. I recommend following the MDN HTML learning path. I also read two books when I was learning HTML, you can also read them if you are interested, these are very good books on this subject:

Head First HTML and CSS
HTML5 and CSS3 Basics

After reading, you can check yourself, for example, what are the commonly used tags,
, which tags are inline tags, which are block-level tags, what is new HTML5 features, etc. Don’t spend too much time here, just go through it, don’t remember it all, just come back later if you need to.

Next, learn CSS, directly recommend the most suitable CSS introduction book:

CSS Mastery (3rd edition)

At the beginning, you don’t need to read the entire book word for word, you just need to grasp a few core pieces, such as selectors, cascading, inheritance, box models, Flex page layout, and grids. Just go through it quickly, don’t remember anything too detailed, and come back later when you need to. The above content took about 6 days, including 2 days for HTML and 4 days for CSS.

With this basic knowledge, you’re ready to fight. Baidu front-end technology institute platform is recommended here, they are open source free front-end title, should be in order to cultivate front-end talent, so that they can recruit more suitable people to create. Their course runs for four years:

2015: IFE github.com/baidu-ife/i…
2016: IFE ife.baidu.com/2016/static…
IFE 2017: ife.baidu.com/2017
IFE 2018: ife.baidu.com/

Now open question 5 in IFE2018 and start writing static pages. And then you realize, you can’t write it. This is very normal, so you look at other people’s code, read a little bit of your understanding, you know how to write. If you forget the property, go back to MDN or look up the book I recommend, and you’ll remember it.

Don’t rush to the next page after you’ve finished it. The first page you write is bound to have a lot of problems, such as incorrect use of attributes, code indenting and so on. At this time you should find a code specification, such as Baidu front-end code specification, according to the specification rewrite your code. This specification IS just an example. If you search the Internet, a good large company has its own specification. It is not a rule, but a uniform and readable one.

After rewriting the code, you go to see the code submitted by others, how the page is written, if there is a good technology around the front end, you can ask him to help you guide. At this point you should know how to write a page, and how to write a good page. Then you can find a few more topics, write a few pages to practice.

This is phase I, which takes about 10 days.

Advanced CSS: It doesn’t take much time to learn the core content of CSS, but in fact CSS is a very detailed technology. Don’t get caught up in the early stages, so you ask how do you learn CSS in depth? I recommend a few good authoritative books, but these are basically enough.

“CSS World” : Zhang Xinxu daishen’s book, more than 10 years of CSS experience sharing, must buy books.
“CSS selector world” : Zhang Xinxu dashen another force, in-depth explanation of CSS selectors.
“In-depth analysis of CSS” : a new book in 2020, translated by Engineers of Qihoo Group, quality guaranteed.
“CSS Revealed” : a variety of CSS tricks, mainly to broaden the horizon.
“CSS authoritative guide” : belong to the XINHUA dictionary of CSS, very comprehensive, belong to a reference book.

Phase two: JavaScript

Now that you’ve learned HTML and CSS, you’re ready to learn JavaScript. This is also a crucial stage. JavaScript consists of three parts: ECMAScript, DOM, and BOM. If you’re a beginner, you’ll be wondering what the hell is this? Then start learning, and you’ll know it’s not that hard.

To learn this part, be sure to start with a modern JavaScript tutorial:

Modern JavaScript Tutorial is a recommended JavaScript tutorial in the React official documentation along with MDN. This tutorial addresses the biggest pain point of any existing JavaScript book: timeliness. Technology books have always had a real time problem, and this tutorial solves that problem. And it sets up a good path for the reader to follow, from the simplest to the most detailed and comprehensive, as you follow the tutorial sequence. In addition, each section is followed by high quality exercises and analysis. You can test your learning and reinforce your new knowledge by doing problems.

Tutorial address: zh.javascript.info/

By the end of this tutorial, you will have learned JavaScript. You may also have heard of ES5/ES6/ES7/ES8… In fact, you have already learned it, and have done a lot of practical examples through this tutorial. The tutorial also links the technical points to practical applications so that you know how the knowledge is used in real development and what problems it solves.

As well as taking modern JavaScript tutorials, I recommend you buy the basic authority books, most of which are covered in the tutorials, but they complement each other and solidify your understanding of JavaScript:

Advanced Programming in JavaScript (3rd Edition) : The Little Red Book is a bit old, but the fourth edition is expected in the second half of 2020, so keep an eye on it. The first seven chapters of the book deal with language features that must be mastered. If you have programming background in another language, it will be faster to understand. Chapters 8, 10-14, 20, 21, 23, and 24 should also be focused, as well as the first section of chapter 25. The other chapters not mentioned are non-focused expansions, so read them at your leisure. Don’t bother with the XML stuff. There’s a lot of API chapters in the book, so you don’t have to memorize them, just skim through them, and then come back. Make sure you read Modern JavaScript Tutorials before you read the Little Red Book, because it’s all in the tutorial, and it’s up to date, and the Little Red Book is just for review and consolidation.
“JavaScript Authoritative Guide” : commonly known as the Rhino book, and “CSS authoritative guide” similar, are large and complete reference books.
Introduction to ES6 Standards: You may have heard of ES6 or ES2015, but it actually refers to the ECMAScript specification, which was released in 2015. This book is written by Mr. Ruan Yifeng. It is a must-buy book to learn ES6. Of course, it also contains some personal understanding of the author.
Understanding ES6: A must-buy book by Nicholas Bigshot! The presentation is very detailed and in-depth.
Understanding JavaScript Features: Nicholas’ latest book, translated by Li Songfeng, is also about ES6.
“JavaScript DOM Programming Art” : DOM essential books, this book is mainly about the DOM knowledge, but also will take you through the actual combat in-depth understanding of knowledge, very helpful. The Essence of the JavaScript language: commonly known as the butterfly book, a very thin book, which is all about the core part of the JavaScript language. Half a day can see it again, you can buy repeatedly.
Head First JavaScript Programming: This book is novices friendly and relatively simple for people with no programming experience.

Phase two takes about a month and a half. If you have programming experience, it’s easier to learn. Instead of reading all of the books on the list, pick key points and complement each other. For API related content do not rote, probably browse, use the time to look up, more code will naturally remember.

Stage 3: Getting started with the front-end framework

Once you’ve learned the front three pieces and laid the foundation of the tree, you can begin to expand the skill tree and learn the front frame. The main front-end frameworks are currently React, Vue, and Angular. Which framework to choose? You can search zhihu or other websites and choose according to your personal preferences. It’s usually a choice between React and Vue. The React experience is more akin to writing native JavaScript and requires you to have a good JavaScript base. Vue introduces templates, which encapsulate many implementations into apis that you need to remember and call to develop, and because many of them are encapsulated, it’s easier to learn, but the programming experience is slightly weaker.

Both of these are excellent frameworks, and newcomers don’t have to struggle with which one to choose. Learning one is easy enough to learn the other. If you don’t know which to choose, I recommend you learn React first. Recommended study routes:

Read the React documents: learn the core concepts in the documents, and then write the tic-tac-toe in the documents. And then write your own Todo App.
Then learn moocs Dell teacher React16.4 quick start and React16.4 development brief book project course.
You can also continue to choose some classic topics in baidu front-end technology institute to consolidate the basic knowledge and use of JavaScript.

In this process, you will learn a lot of knowledge. You will use the advanced knowledge of React, so you will complete the high-level guidelines, API references, Hooks and other parts of the React official documents. You’ll also learn React Router, Redux and so on. You’ll learn the full process of developing a complete project from scratch, from project configuration to component splitting to project packaging and rollout, as well as some underlying source-level knowledge of the React framework.

If you choose the Vue framework, the learning route is similar: read the official documentation and write some simple demos. Then I learned the introduction of Vue 2.5 and Vue 2.5 -> 2.6 -> 3.0 of MOOCs from Dell teacher and developed qunar App from zero foundation to actual project development courses, interluding with some typical topics of Baidu front-end Technology Institute to consolidate the basic knowledge of JavaScript.

This phase takes about a month. So far you have successfully started front-end development, congratulations 🎉🎉🎉

Phases one through three took three months.

The front-end advanced

After the successful introduction of front-end development, it is necessary to start the advanced part, mainly to deepen the understanding of each knowledge, to strengthen the basic knowledge of the computer field, to expand the skill tree, to improve the project development and macro understanding and control ability. Front-end progression requires lifelong learning, and it is never too late to learn.

Stage 4: Advanced language foundation

This is the stage to deepen your understanding of the programming language. Read more advanced books, and the ECMAScript specification is recommended if you are able: ecma-international.org/ecma-262/

Advanced must-read books:

“What you Don’t know about JavaScript” : A must-buy book that covers all the hard questions and details of JavaScript. The original is an open source ebook on GitHub. Those with high English proficiency can read the original English version.
JavaScript Ninja Secrets: Get to the heart of JavaScript, a must-buy book.
The Great JavaScript Engineer: Recommended reading for a macro look at the JavaScript language and some of the skills that front-end engineers need to master.
JavaScript’s Guide to Functional Programming: Learning functional programming ideas
JavaScript Functional Programming: Also a good book on functional programming ideas
JavaScript Design Patterns: A recommended read for learning JavaScript Design patterns
JavaScript Design Patterns and Development Practices: Another design patterns book of equal weight, recommended reading
Sharp jQuery: jQuery is rarely used nowadays, except for very old projects or writing small things. However, this book is worth buying. Learn the good ideas of jQuery, and also learn the source code, which will help you advance.

Advanced selected Reading books:

High Performance JavaScript
JavaScript Web Application Development
Understanding JavaScript in Depth
JavaScript Classic Examples
JavaScript Object-oriented Programming Guide
The Essentials of JavaScript Programming

Learning the TypeScript. JavaScript is a weakly typed language. You can declare a variable, assign strings to it, copy numbers to it, etc. This is easy to bug in large projects because of data types. For all of these reasons, TypeScript comes into being. It’s easy to learn TypeScript once you’ve got the basics of JavaScript. It’s just a syntactic sugar, just another way to write JavaScript. Recommended books:

Understanding TypeScript
The Actual TypeScript Guide
Actual TypeScript

Stage 5: Framework and learning boundary progression

By phase three, you have mastered the basic use of the front-end framework and the process of developing a complete project. Then in the framework and learning boundary progression, you can:

Learn about the ecology around the framework, the excellent components that the community has identified, and a variety of useful tool libraries.
Build your own wheels and build your own open source projects using frameworks
Learn the use, ideas and principles of Webpack, Gulp, Babel, ESLint and other tools
Read the framework source code with questions and learn about performance optimization
Develop good programming habits
Expand the boundaries of technology and learn backend skills such as Node.js
…

Stage 6: Advanced basic computer knowledge

Programming programming, it is the basic knowledge of computer, algorithm, data structure, computer principles, network and other content. I only recommend the best books here. Every one of them is a must read. Learn these things well, dafang is your choice.

Data structures and algorithms:

“Sword Of Offer”
The Programmer Interview Guide (6th Edition)
The Beauty of Programming
Comic Book Algorithm
Algorithm Diagram
The Code Interview Guide for Programmers
Big Talk Data Structures
The Algorithm of Interestlearning
Learning JavaScript Data Structures and Algorithms
Data Structures and Algorithms: descriptions in JavaScript
Algorithms (4th edition)
Introduction to Algorithms
Introduction to Algorithm Racing classic (2nd edition)
The Classic Training Guide to Algorithm Racing

Computer network:

HTTP/2 Basics
HTTPS Authoritative Guide
Computer Networking: a Top-down approach
Illustrated HTTP
Illustrated TCP/IP
TCP/IP In Detail
Network Programming for UNIX

Operating system:

Understanding Computer Systems in Depth
Modern Operating Systems
Advanced Programming for UNIX Environments
The Linux Programming Interface

Programming ideas:

Complete Code

Compilation principle:

Principles of Compilation

Product Idea:

Web Fundamentals: developers.google.com/web/fundame…

conclusion

At this point, you’ve progressed from the beginning to the end of front-end development, become a giant, and know what to learn from there. Hope my share is helpful to you, if you find it useful, you can bookmark this article, and share it with your friends in need. Let’s study together and make progress together!

Wechat scan code to follow the public account “Technology Talk”, subscribe to more exciting content:

LeetCode algorithm problem solution
JavaScript beginner to advanced
Front-end projects from zero to a combat
Front-end learning method route sharing
…