Since I taught myself front-end, and engaged in web front-end work. A big part comes from “interest” + “persistence”. I believe that there are still many friends in the front of self-learning road groping, next I share my learning route, learning methods and recommended books, I hope to help you self-learning ~

Basic front-end requirements

HTML5

Learn the basic HTML tag skeleton, HTML writing specification, understand the line element block level elements and the correct use of semantics. Another is to learn some new features, such as:

  • Canvas element for drawing

  • Video and Audio elements for media playback

  • Improved input form controls, etc



CSS3

This is mainly used for the style of the web page, but also an important part of the front end, although simple, in fact very important, personally feel more important several modules:

  • Selector, master and learn to use appropriately

  • Box model, understanding elastic box model & ordinary box model

  • Use of text effects, gradient colors, and shadows

  • 2D/3D animation conversion

  • Flex layout, adaptive layout, multi-column layout, etc

  • The emphasis is on dealing with style compatibility between browsers


Javascript

Focus on learning javascript, because the previous grasp of HTML + CSS is the basic production of static web pages, this time you need to let the page move up. It is best to learn native JS, beginners are not recommended to learn the framework directly. In my opinion, several important knowledge points in JS are as follows:

  • Master basic syntax, types, expressions, DOM advanced operations, etc

  • In-depth understanding of objects, functions, scopes, closures, function construction, this pointing, etc

  • Then learn jquery, using jquery plug-in, special effects, can be convenient and rapid development

  • Deep understanding of asynchronous processing of JS events, blocking concepts, design patterns, regular expressions

  • Learn ajax data interaction, JSON data processing, HTTP protocol, etc

Recommended books: advanced JavaScript Programming (3rd Edition), The Definitive JavaScript Guide, Sharp jquery

Painted painted painted painted on

After learning native JS, you can learn ES6 syntax, because many frameworks use ES6 syntax, so mastering ES6 is a must. There are a lot of new features in ES6.

  • Let, const variable declaration, and understand the difference with var

  • Template string

  • Arrow function

  • The basic syntax of class

  • Promise objects, handling asynchronous operations

  • Other ES6 knowledge points can be checked online


tool

  • Sublime Text 3 for starters, webStorm for later work, or even VS Code for later work. Therefore, it is necessary to familiarize yourself with multiple tools.

  • Photoshop cutting skills are also a must



Learning methods:

Learning the above three parts, in addition to do small examples to master and use, at the beginning of the imitating website, look at other people’s grammar norms, etc., try to do some more complete web pages, is conducive to their own skills to check gaps and fill in time! Later, I felt that it was more important to understand the concept and dig deep into its secrets. Beginners can look at the network of video tutorials to get started, and the essence of knowledge is the need to learn from the book.



Advanced skills

Node.js

Once I’ve mastered the basics, I can learn about Node, which is a JavaScript environment based on the Chrome V8 engine. Many frameworks currently work with Node.js, so this is a must.

Recommended book: Node.js in Plain English



Front-end industrialization

Basic skills: learn to use gulp, grunt, etc. to compress JS, CSS, HTML, less, Sass CSS

In-depth mastery: the use of webpack packaging tools


Web security and performance

  • Learning the Yahoo catch-22

  • This can learn XSS and CSRF principle and prevention, SQL anti-injection and so on.


Currently popular framework

It is essential to learn the Vue, React, Angular frameworks, and understand modularity and componentization. There is also an obvious difference between the three, you can find information on the Internet comparison summary.


Wechat applets

With the above foundation, combined with the current employment situation, master wechat small program, is very helpful to yourself. This aspect of learning, look at wechat official small program development documents, can be a good entry, and can try to do small cases ~


Get a job and gain experience

Then I successfully found a job in web front-end development and started my front-end career. My front-end learning route is about these, front-end broad and profound, with the continuous update of technology, we also need to follow the footsteps of technology, of course, sometimes is not the new the new, the most basic things master, the rest can be well understood.

I think this article is helpful to you and can be shared with more people

Focus on the [front-end system] and improve your skills together