The latest update on this article was updated at 2021-10-09. There is no need to worry that this article will be outdated, as it will be updated as the front-end technology is updated.

The latest content of this article will also be updated live on GitHub. Follow me on GitHub to get started and get advanced.

I wrote an article before: “Two months of Naked resignation, One month of Overseas Investment, A Job search from Android to Web”. This article describes my personal experience and feelings in the process of transition. Many children’s private letters asked me how to get started, so this article came into being.

Self – study route of Web front – end entry

Novice front-end, need to learn a lot of basic content, as follows.

HTML, CSS, JavaScript syntax. After learning the basics, you can imitate e-commerce sites (such as JINGdong, Millet) to do the layout of the home page.

Second, JavaScript syntax advanced. Including: scopes and closures, this and object prototypes. Trust me, JS grammar is always the most important part of an interview.

JQuery, Ajax, etc. JQuery is not obsolete, it is still part of the front-end foundation.

ES6 grammar. This part belongs to JS new grammar, interview will ask. Among them, we should pay special attention to promise, async and other contents.

HTML5 and CSS3. Familiarize yourself with the new features.

Six, canvas. In an interview, some companies may not ask canvas, depending on luck. If you don’t have enough time, you can skip this part. But if you can, it’s definitely a plus.

7. Mobile Web development, Bootstrap, etc. Pay attention to fit and compatibility issues in mobile development.

8. Front-end frameworks: vue.js and React At least one of these frameworks has to work. Entry, it is recommended to learn vue. js first, relatively easy to get started. However, mastering both Vue and React is a qualified front end student.

UI framework: Ant Design, Element UI. When doing management background, these two UI frameworks are used more. Element UI is based on the vue.js technology stack. There are both Ant Design Vue based on the React stack and Vue.js stack.

Nine, Node. Js. If you don’t have enough time, you can skip it, but you should at least know the configuration of the Node environment and some basic knowledge of Node.

10. Front-end engineering: Build tool Webpack, build tool GULP, CSS preprocessor Sass, automated testing, continuous integration, etc. Note that Sass is used more than Less and gulp is used more than grunt.

Front-end integration: HTTP, cross-domain communication, security issues (CSRF, XSS), browser rendering mechanisms, asynchronous and single-threading, page performance optimization, debthrashing and Throtting, Lazyload, front-end error monitoring, virtual DOM, and so on.

12. Editor related. Visual Studio Code is the editor that everyone needs in preschool. In addition, there are two common front-end editors, ides: Sublime Text and WebStorm. WebStorm is good at everything but too slow; VS Code is much lighter, but takes up more memory. Personal summary: VS Code is being used more and more, WebStorm is being used less and less. See: Everything You Should Know The First Time you Use VS Code

TypeScript (TS for short). ES is JS standard, TS is JS superset. TS is an advanced content. It is recommended to learn TS after mastering the above basics.

Fourteen, small program development. Learn basic JS syntax, and then understand the small program unique API (refer to the official documentation of the small program), has mastered the small program development, not as difficult as you imagine, so easy. Applets are commercially successful, but I personally think they are a step backward for Web technology and do not represent the spirit of open source and openness at all. And small program development efficiency is low, IDE also card to the extreme, card burst.

Of course, I have to admit that small program development has allowed many people to find programming jobs. But remember along the way: Don’t be an applets developer, be a Web front-end developer.

15, summary — the framework is sometimes very empty; Master JavaScript foundation, core source code, is the key to walk rivers and lakes, galloping thousands of miles.

Recommended front-end graphics tutorial

I have a very detailed Web front-end tutorial on GitHub. The address is:

Github.com/qianguyihao…

Very detailed and thoughtful, you deserve star. This front-end tutorial serves three main purposes:

  • Most of the online introductory courses are not suitable for beginners, but this program strives to accommodate the empathy of every beginner.

  • Help front-end students to provide a high-quality learning route and resources, improve learning efficiency, less detours.

  • Can be used as a front-end dictionary, read at any time, check the gaps.

Recommended technology blog

  • Nguyen half-stretching

  • Zhang Xinxu

Recommended Books

1. Books related to basic knowledge

  • How the Web Is Connected

One of the most common questions programmers are asked in job interviews is, “What happens when you type the URL into the browser’s address bar and press Enter?”

To understand this problem, look at the book above, enough. This book is also a must read if you want to get started on computer networking. Very highly rated.

For this question, you can also see the following article: What happens when the browser enters the URL?

2. JS related books

  • JavaScript You Don’t Know

The above set of books has three, you can read. If you don’t have enough time, read the first book.

  • The Essence of JavaScript and Programming Practices

Zhou Aimin’s book, who can not love? This book not only fully parses the JavaScript language, but also dissects the programming practices and applications of these features in multiple open source projects.

  • JavaScript Advanced Programming

The little Red Book, everybody knows.

  • JavaScript Savvy

This book starts with an introduction to the basics of JavaScript: naming, values, booleans, strings, etc., and shows its flaws and limitations, but then shows how to solve them; We then continue to explore data structures and functions, explore the underlying mechanisms, and use higher-order functions to implement object-oriented programming.

The translation of this book is @Death Month,

3. CSS related books

  • CSS World

CSS books, the first recommended this book, I am around the big people say this book is good. Although I am not a big bull, I also think this book is very good.

If JS proficiency, that you are a technical depth of the front end; If you are proficient in CSS, you are experienced in the front end.

  • CSS New World

This is an advanced reading of CSS, focusing on the new features of CSS3 and later versions.

  • CSS Mastery

CSS advanced books.

4. Interview related books

  • Advanced Core Knowledge of Front-end Development: From laying a Solid Foundation to Breaking the Bottleneck

JS basics, ES6 syntax, Vue source code, React source code, front-end performance optimization, etc.

  • The Amazing JavaScript Engineer: Advanced Progression from front End to Full End

The author @Arisjudd is an MOOCs instructor, blogger and course writer. This book covers the key knowledge and concepts developers need to master in various Web development scenarios using JavaScript.

5, vue. js, React source code books

  • Vue. Js

This book tells the implementation principle of Vue. Js 2.0, very good. Not because the book is bad, but because you don’t understand it.

Recommended links

  • The front-end navigation: www.cnblogs.com/qianguyihao…

This navigation is an authoritative list of popular websites, blogs, tools, etc.

Learning is one aspect and the most important aspect; But it also serves a purpose, like, “You don’t even know about this front-end framework,” or “You’ve never heard of this great front-end.” This is where the list comes in handy. If you can understand everything on this list, the bar will be much higher.

  • MDN Official document: developer.mozilla.org/zh-CN/docs/…

If you want to see the API documentation for the front-end, go to MDN first. Very official, very formal.

Don’t go to w3school, rookie tutorial, it has a bunch of mistakes.

Front-end news feeds

Many technology blogs in China are relatively superficial secondary knowledge. Real bigwigs despise these things.

To understand the latest front-end technology trends, front-end information, but also have to look at foreign websites. The following two front-end information sites are highly recommended. They can all be subscribed by mail, which I think is a must for front-end developers:

  • Daily JS: Blog at medium.com/dailyjs – Medium.
  • JavaScript Weekly:javascriptweekly.com/ – a technology weekly for aggregative classes.

My official account

Want to learn more skills? You may wish to pay attention to my wechat official number: One Thousand Ancient.

You will discover a whole new world, and it will be a beautiful accident.