I have received a private message before. Some friends asked me how to learn the front end. Say oneself is very confused on the road of self-study front end, do not know how to start? In view of this problem I give some suggestions, hope to help small partners.

Front-end development is hot right now. There are a lot of jobs, growth is fast, and salaries are very good. Let’s take a look at what web front-end development can do:

After learning the web front end, you can develop web pages, do H5 animation, do mobile app, can do their own blog website, can do wechat public number development, can develop small programs, can combine nw.js to do computer client software: such as wechat PC version, nail nail PC version are web front end to do.

First, comb the knowledge system

Clear the framework of knowledge system learning front, whether entry or advanced, must have the idea of knowledge system construction. Even if you are just beginning to learn, you must have this awareness.

As mentioned before, because the front-end knowledge points are too many and scattered, if you cannot build your own understanding of the front-end knowledge system framework, it is easy to be at a loss and lose direction. There are many brain maps of front-end knowledge systems on the Internet, but they are often too complex for beginners.

As a beginner, everyone should make a brain map of their own front-end knowledge system, first have a basic framework, and then gradually improve in the process of learning. By comparing your brain map to someone else’s, it’s easy to know what you need to add to your knowledge.

Here I give a simple template, in fact, as a beginner, such a big framework is enough, do not pursue the big and complete, the fear of learning will be much less, as you learn further, the brain map will gradually enrich.

Two, start learning

HTML, CSS, and Javascript are really important, really important, really important, and you don’t have to worry about fancy frameworks when you start, you have to get the basics right. Framework how to update iteration, the most basic things or these three, as long as you can master the basis, is equal to get the key to open the front world.

We should learn to use the free resources on the Internet. There are many free tutorials on the Internet.

Rookie tutorial: www.runoob.com/

W3school： www.w3school.com.cn/

You can quickly learn the basics of HTML, CSS, and Javascript on the site, and there will be some examples to practice on to reinforce the basics

For self-study is the most direct way is to see video learning, can be online video, such as mu class network, wheat institute, institute of geek, the north wind net, baidu front-end college are from entry to the proficient in the front end of the course, can also from B site search, choose an overall planning, a relatively complete curriculum system, the content involves the knowledge if the current mainstream.

Once you’ve found the video, if you don’t want to give up halfway, or, you know, waste too much time and it doesn’t work. Find a guide, guide is of course the stronger the better, find the purpose of guide is to make a study plan for you, control the quality of learning, correct the wrong learning direction in time, teach you the right way of learning.

After you have learned some basic knowledge, you can write static web pages in imitation of websites. Here I recommend the editor: VSCode suggests that beginners can turn off the code prompt.

Iii. Book recommendations

No matter what learning is the fastest video entry, in-depth words to read a book. Let me sort this out:

1, HTML&CSS

Head First HTML and CSS

The easiest primer ever, printed in full color, unlike complex, heavy technical books, Head First’s books are beginner friendly and allow you to learn as you search for knowledge.

The Definitive GUIDE to HTML5

The HTML5 Definitive Guide is the definitive reference book for systematically learning web design.

The book is divided into five parts: The first part introduces the preparation of the book and the latest progress of HTML, CSS and JavaScript; The second part discusses HTML elements and details new and modified elements in HTML5. The third section covers CSS, covering all the CSS selectors and properties that control content styling, with lots of code examples and diagrams. The fourth part introduces DOM and explains how to manipulate HTML content with JavaScript. Part 5 covers advanced HTML5 features such as Ajax, multimedia, and the Canvas element.

Aimed at beginners and mid-level Web developers, this book is a must-read for a solid grasp of HTML5, CSS3, and JavaScript.

The Definitive GUIDE to CSS

This book describes the implementation of CSS, in-depth analysis of the latest CSS specification; Veteran CSS expert Eric A.Meyer. Using his unique wisdom and rich experience, he has done in-depth research on attributes, tags, tag attributes and implementation, as well as unique insights on practical issues such as browser support and design principles. All you need is knowledge of HTML 4.0 to create concise and easy to maintain scripts for site layout and pagination with the aesthetics and controllability of a desktop system.

It can be regarded as a dictionary book, what do not understand the knowledge can be turned over.

— CSS Revealed

The author reveals 47 little-known CSS tricks, including backgrounds and borders, shapes, visuals, typography, user experience, structure and layout, transitions and animations. This book will take you step-by-step through more elegant solutions to the web style challenges you encounter every day.

CSS Secrets is a must-have book for front-end engineers and web developers.

2, JavaScript,

“JavaScript advanced programming” the latest edition is the fourth edition, this book is the front-end personnel entry essential red book, as JavaScript technology classics, “JavaScript advanced programming” can be said to be JavaScript the most authoritative entry book.

The book starts from the various components of JavaScript language implementation — language core, DOM, BOM, event model, and discusses object-oriented programming, Ajax and Comet server-side communication in a simple way. New APIS such as HTML5 forms, media, Canvas (including WebGL) and Web Workers, geolocation, messaging across documents, client storage (including IndexedDB), and offline applications and best development practices related to maintenance, performance, and deployment are introduced.

This book covers most of the basics, step-by-step, basic and comprehensive, and must be read over and over again.

DOM Programming Art

The book runs these concepts through all of the code examples in the book to present scripts to create gallery pages, scripts to create animation effects, scripts to enrich the rendering of page elements, and finally to create an actual web site with the content described.

This book takes a web page as a case, can according to the code in the book to type again, there will be a lot of harvest.

JavaScript You Don’t Know

Many people have the impression that JavaScript is simple and easy to learn.

The “JavaScript You Don’t Know” series is designed to get the unsophisticated JavaScript developer to dive deep into the language and understand the purpose of every single component of JavaScript. This book introduces two topics in the series: “scopes and closures” and “This and object prototypes.” With this knowledge, no matter what technology, framework, or buzzword, you can easily understand it. It is divided into three volumes.

3, other

Illustrated HTTP

Through this book, you can quickly understand and master the basics of HTTP. Front-end engineers analyze captured packet data, and back-end engineers implement REST APIS and implement their own HTTP servers.

This book is for Web development engineers and readers of all levels interested in the HTTP protocol.

Node.js

It introduces the inherent characteristics and structure of Node from different perspectives. Node is introduced as an index in the first chapter, covering all aspects of Node. This book is a must-read for those who want to learn more about Node.

Vue. Js

This book analyzes vue.js from the source code level. First of all, vue.js is briefly introduced. Then explained in detail its internal core technology “change detection”, here lead you from 0 to 1 to achieve a simple “change detection” system; Then virtual DOM technology is introduced in detail, including the principle of virtual DOM and its patching algorithm. Then the template compilation technology is discussed in detail, including the implementation principle of template parser, optimizer and code generator. In the end, the overall architecture and the internal principles of various apis provided for us to use are introduced in detail, as well as the principle of life cycle, error handling, instruction system and template filter functions.

This book is for front-end developers.

Four,

As a front-end development, there are really a lot of technology stacks to learn, in addition to the most basic HTML/CSS/JavaScript, but also HTML5, CSS3, ES6, but also to learn the current popular JavaScript framework, MY suggestion is to start from Vue, easy to get started, The stack to master includes vue + vue-Router + vuex + VUe-CLI + AXIos + sass + webpack, as well as Node.js.

Finally, regarding front-end learning, front-end learning is complicated and complicated, and technology iteration is too fast, so it is difficult to find the corresponding good resources to learn. English students must be more scientific Internet, and as programmers want to catch up with new technology only through English.

Internet technology is developing at a fast pace. Keep learning new technology, or you will be eliminated. This means that every learner will have to work harder, and the survival of the fittest will continue and intensify. In addition, I suggest that in terms of the breadth and depth of knowledge, you’d better choose one or two fields that you are most good at and most interested in, rather than too many.

It’s easy to feel lost and powerless learning the front end. For example, after reading the material for a long time, I found that it was outdated. Some new articles applied to old articles led to old technology, and I could not find appropriate learning resources. When learning HTML, I would feel very simple, but later found that it was a bottomless pit. Stick to it, learn the basis and then try to practice, see more practice, do more projects, there will be harvest.

To repeat: Good programmers = interest + right approach + hard work.

This is the end of my sharing. If you have some good learning methods, books and tutorials, you can find them in the comments. We can learn and communicate together.