Since I graduated from junior college in 2013, I have stumbled along many detours, worked as a waiter in a restaurant, worked in a factory and worked on an assembly line, worked as a customer service officer, and worked in telephone sales. I can say that I have experienced a lot of “rich” experience.

Finally, by chance, I embarked on the road of front-end development. As a non-computer major with low educational background, it was not easy to learn programming by myself, but FORTUNATELY I persevered.

My current job is not bad, and my income is not high or low in my current city, and my life is ok. I will continue to work hard and hope to be better in the future.

From the second half of 2016, I really touched the front end, and now it has been more than two years. At the beginning, I didn’t have any language foundation, and I started from zero. I couldn’t even understand the “object”, let alone the enigmatic encapsulation, inheritance, polymorphism and so on.

I didn’t know where to start at that time. What should I do? Therefore, whenever I met with difficulties, I would shamelessly consult senior big bull, and then go to look up information. I felt embarrassed at most of the time, but now I find that people are ashamed to consult others for fear of losing face.

But as an experienced person, I want to tell you that it is really important to consult the elder Daniel, can let you take a lot of detours, don’t be afraid of losing face, face value how much money? The most important thing is to learn the real skill. No skill is really no face. Of course, when we ask others, we must master “degree”, do not disturb others’ work.

I am now very grateful to the predecessors for their advice, but also for those who write blogs on the Internet, articles to share the cattle, gave us a lot of information, experience, experience. It has benefited a lot.

I learned from excellent predecessors, so I also started to write a study summary blog, hoping to help students with poor grades like me, a group of like-minded people who started from scratch and like technology.

I knew I technology is not high, is still in the way to continue learning, is far away from Daniel also poor, I very fear of technology itself, also know their own small, only hope that this article “the road to learning” for those who study “from scratch” front-end classmates some guidance role, is not so blind as my first, even if have a little bit of help to you, That’s enough.

Having said so much, let’s go straight to the topic below. I usually study and collect some information, hoping to help you.

preface

  1. First of all, I have to tell you that self-study is a very hard thing, and learning itself is a process against humanity. Moreover, to struggle alone in a new field starting from scratch is not to beat you, but to think carefully and combine with your own environment and conditions. Otherwise, giving up halfway is not only a waste of time, but also energy, money.

  2. If you have decided to do it, then do not hesitate, stick to it and you can succeed, students like me with poor grades can, you have nothing to do, must believe in yourself.

  3. Interest is the best teacher, a lot of people on this sentence is very repugnant, forced by life, talk about interest is not ridiculous? Are you interested in, it isn’t. Ask yourself the technology do what you like and interested to go further and more, a lot of people don’t understand this, one day you will understand, I had to turn the front is also because he liked, and the most close to the user, are seen to be the things fun, that on the one hand is also think salary is quite high, So I feel in my heart to do a good front.

  4. Keep learning attitude, make continuous learning, to tell the truth now society, the development of science and technology is very fast, technology updates, if you think that learning a foreign technology can eat to the old, I advise you still hold on, may take an examination of civil service is more suitable for you (don’t bar fine, I’m not saying that civil servants don’t learn, myself feel good).

  5. Never think it is too late, just take action and stick to it, you kill 80% of the people, there are many self-taught people, but few stick to it. Like guo degang said, I don’t how great the crosstalk “I survived. Famous marketers” pony song “burned for boiler when graduation, but their interested in advertising and marketing, so leave starting from scratch, it is very famous marketing guru. Interested can look at his name under the public,” the pony song “.

  6. Instead of spending time on learning and not learning, it is better to put this time on action. If you find that you are not suitable and cannot stick to it, then change the track and focus on one thing, which will improve your probability of success.

Tool post

To do a good job, we must first sharpen its tools, so before starting to choose a suitable editor is very important, tools are no longer many, is easy to use on the line, in addition to the editor, we also want to master some other tools, in order to make us more smooth on the way of learning.

1. WebStorm

Needless to say, the most powerful editor on the front end, especially with its unbeatable smart tips, has the downside of causing a lot of people to get stuck if the project is bigger than it is.

  • WebStorm: download from WebStorm website.
  • What are the strengths of WebStorm?
  • Activate WebStorm2018

2. Visual Studio Code

Microsoft open source free products, by the love of many technical personnel, basically become the front-end developers of the necessary editor, powerful plug-in extension, can be flexible to create their own favorite style. I’ll send you a list of common plugins to take away.

  • Visual Studio Code:
  • VSCode extension recommended
  • Use top-level VSCode extensions to speed up JavaScript development
  • The VScode plug-in is recommended

3. atom

Is also a free open source editor, by a lot of people’s love, but I use less, so the plug-in is not recommended, we can according to their own hobbies to find.

4. Surf the Internet scientifically

Every programmer should have the tools and ability, otherwise a lot of things can not do, as for how to do, you can consult the information, here is not more said. And many of the resources recommended below are required to access science after the Internet, so must learn, must learn, must learn.

5. Google

Before using “Google” must learn science online, otherwise don’t have access to, learn to use the search can help us solve many problems, a person’s knowledge is limited, grasp the search skills to should be in constant change, many times repetitive results of baidu is very big, the most important thing is that a lot of spam, in baidu can not find the answer, It’s easy to find here. Google is my must-have search.

6. Github

The world’s largest “same sex” open source communication community, no account register quickly, there are many excellent resource projects, all kinds of god. Looking at good code is a great way to learn. In addition, during the development process, many tasks are heavy and time is tight, so you should avoid repeating the wheel. Here you can find the tools or code you need.

7. Stack Overflow

Foreign famous technical question and answer exchange community, the development of a lot of problems encountered here can find the answer.

8. SegmentFault

Corresponding domestic version of the technical question and answer exchange community, if your English is not good, you can also find the answer here.

9. Markdown

Markdown’s lightweight markup language, concise syntax, and ability to focus on content rather than complex formatting requirements are something I think everyone should learn, especially frequent bloggers. If you think about world, you’ll have to spend a lot of time formatting your articles after you’ve written them.

  • Markdown Chinese document
  • Youdao Cloud Note: An online Markdown editor I’ve been using myself.

HTML report

With a few things in place, let’s start with HTML.

HTML, called Hypertext Markup Language (HTML), is the structural basis of the entire page, and it hosts the content of our pages.

1. The basic

  • W3school online tutorial: the content is very basic, suitable for young white to learn, to have a basic understanding of HTML.
  • FreeCodeCamp: a very good entry to learning website, using the mode of the game, like a monster upgrade, very fun, ready to learn friends can try.

2. Advanced

  • MDN HTML: The content here is better quality, less error, and more comprehensive.
  • HTML and CSS coding conventions: Learn some coding techniques to write better, higher-quality code.

CSS article

HTML carries the content of the page, but sometimes it will be slightly monotonous and “ugly”, the role of CSS is to add style to these content, just like a beauty should have a beautiful coat to modify will be more beautiful, “people depend on clothes and horses saddle”, the content of the web page also need to wear a beautiful coat to attract users. CSS completes the decoration.

1. The basic

  • Learn CSS layout: Take you step by step through CSS learning.
  • CSS Reference Manual: A comprehensive introduction to CSS.
  • W3school CSS Reference manual: same as above is also very basic knowledge, suitable for entry.

2. Advanced

Books:

CSS Secrets: A highly recommended CSS book for learning many little-known techniques.

Online series:

  • MDN CSS: and HTML are MDN community documents, quality assurance.
  • HTML and CSS coding conventions: Learn some coding techniques to write better, higher-quality code.
  • Da Mo teacher CSS series: Da Mo teacher has a very in-depth understanding of CSS and rich practical experience, “Illustrated CSS3: Core Technology and case combat” author.
  • Desert Teacher’s SASS Series: Desert Teacher’s SASS article series.
  • SASS Chinese: mature, stable and powerful CSS extension language parser, it allows you to write CSS using variables, conditional statements, etc.
  • Stylus is also a CSS precompiler, but it dispenses with symbols for a cleaner CSS style.
  • HTML5 and CSS3: Detail HTML5 and CSS3.

Knowledge:

  • Don’t say you know CSS relative units: Dig into the differences between REM and EM relative units of CSS.
  • 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, the author of “CSS World”, series of CSS articles.
  • 40 shapes and graphics drawn by CSS: 40 shapes drawn by CSS.
  • CSS- Big Front End: Some CSS knowledge points.

JavaScript article

With HTML and CSS, web pages have content and style, but lack interaction with the user, and all content just sits there dead. It’s like a beautiful woman in a beautiful dress standing still in front of you doesn’t seem very attractive, but if she’s singing, dancing and making eyes at you, it’s really hard to resist. JavaScript adds this “behavior” to web pages.

A brief history of Javascript: A brief history of Javascript.

1. The basic

books

  • “JavaScript Authority Guide (6th edition)” : commonly known as “rhino book”, JS classic, improve JS skills necessary books, MY JS basic knowledge is all gnaw down this book, at the beginning of reading may have some difficulty, but as long as stick to it, full of results.
  • JavaScript Advanced Programming (Version 3) : Commonly known as the “little Red Book”, JavaScript super bestseller, the book describes the JavaScript language implementation of each component, ECMAScript, DOM, BOM, events, object-oriented and so on, take out at any time to turn over, more in-depth learning JS.

Online series

In addition to books, there are also many excellent online tutorials to help us learn better.

  • Modern Javascript Tutorials: Very comprehensive Javascript learning tutorials, from basic to advanced, very detailed, I believe you will love it.
  • JavaScript Tutorials by Liao Xuefeng: A series of tutorials by Liao Xuefeng.
  • JavaScript Standard Reference Tutorial (Alpha) : a series of tutorials by Ruan Yifeng, easy to understand, rich case studies.

2. Advanced

  • The essence of the JavaScript language: Reveal the essence of JavaScript.
  • JavaScript Secret Garden: Explain some core knowledge of JS, such as: this, closure/scope, constructor, prototype, etc., are required for interview knowledge.
  • Introduction to ECMAScript 6: Ruan Yifeng’s introduction to ES6 provides a comprehensive introduction to the new syntax features of ECMAScript 6.
  • JavaScript Tips: Learn a few tricks that you might not normally learn.
  • An in-depth understanding of javascript prototypes and closures: this article explains prototypes and closures in detail, leaving you with a thorough understanding of them.
  • Teacher of The Desert JavaScript series: Teacher of the Desert JavaScript series articles.
  • JavaScript algorithms and data structures: Based on JavaScript algorithms and data structures, let you have fun learning.
  • Forcings: an exercise platform for algorithms and data structures.
  • Regular expressions in JavaScript: A regular expression article of my own, I hope to help you.
  • 30 minutes to master the core content of ES6/ES2015 (I)
  • 30 minutes ES6/ES2015 Core Content (Part 2) : Explain some common ES6 knowledge points.
  • Learn JavaScript Design Patterns: Explain classic and modern design patterns in the JavaScript programming language.
  • You don’t understand JS
  • InterviewMap: Brings together a lot of knowledge, including JS, browser, performance, etc.
  • JavaScript snippets that can be understood in 30 seconds: This gives you a better understanding of some useful JavaScript snippets.

TypeScript article

ES6 superset extension, strict data type, better maintenance, suitable for large project development work, some people say it is the future of the development trend, do you want to know?

  • TypeScript: TypeScript TypeScript
  • TypeScript Handbook: Chinese edition.
  • RxJS Chinese document: Chinese official website.
  • RxJS mastery (01) : Understanding RxJS: Traditional Chinese characters may not be that smooth to read.

Jquery article

Although now a single page application time, React, Vue this powerful framework can be used, but also no shortage of some old project needs to be maintained, and at the beginning of the study, it can be used to do two simple application is good, can understand the relative basic usage, it can make you a better, more convenient operation of DOM. But no more deep learning is recommended.

  • Sharp jQuery(2nd edition) : a great jQuery learning book.
  • How to use the jQuery API

Ajax article

Once you’ve mastered HTML, CSS, and JavaScript, you can try to do some projects of your own, and there will be data interaction in the projects, which is where Ajax comes in.

  • Liao Xuefeng AJAX: Liao Xuefeng’s blog knowledge.
  • XMLHttpRequest object: Ruan Yifeng teacher AJAX details.
  • JSON Style Guide: Interaction data on the front and back ends is usually in JSON format, so understanding JSON is essential.

NodeJS and modularity

NodeJs makes front-end development enter a new field, and breeds professional Node engineers. Moreover, Node plays an important role in front-end modularization and engineering, so it is necessary to understand. If you are interested in it, you can learn more and develop into full-stack engineer.

  • Javascript modular programming (I) : module writing
  • Javascript modular programming (II) : AMD specification
  • Javascript modular programming (iii) : require.js usage
  • Front-end modular development that bit of history: learn about the development of front-end modular development.
  • Node. Js official
  • Coyotes: How to Learn Node.js Correctly: Coyotes is the very high profile author of The Better Node.js.
  • Full stack Engineer’s Path -Node.js

The framework paper

With increasingly complex user needs and system complexity, traditional development mode is increasingly difficult to meet. At this time, three frameworks were born to make developers more efficient and reusable, focusing on the operation of the data layer, and avoiding those tedious and repetitive view operations.

Now that the capabilities of frameworks are one of the must-have skills and trends for front-end developers, the “end goal” of all three frameworks is the same, and I don’t think developers need to be obsessed with which one to learn. For beginners, it is recommended to start with Vue, which is relatively simple and flexible.

  • MVC, MVP, and MVVM diagrams: Before learning about frameworks, you should understand the design philosophy of MVVM.
  • Framework principles: Learn some basic framework principles.

1. Angular

  • Angular: The official Angular community.
  • Angular developer: a site maintained by The teacher, Angular China Evangelist.
  • Ng-zorro: Angular UI component library, produced by Alibaba

2. Vue

  • Vue: the official website, the best learning materials.
  • My Vue advanced road: shamelessly paste out, some of their own learning summary, I hope to have a harvest for you, even if a little.
  • Use vue bucket to create a blog site
  • Element: A high-quality Vue UI component library. Hungry? From the front end team.
  • Vue project issues and solutions (update) : When you are working on a project, it is inevitable to go back to the pit, here you may find the answer.

3. React

React I don’t know much about React, so there’s nothing to recommend.

  • The React website

Video course

Most of the time, when we are learning some knowledge points are hard to understand or think impassability, if Daniel can ask or we couldn’t be better, and the video learning resources is your best choice, to be able to record video are some giant senior bosses, technical attainments also deep enough, I can recommend some video website, I often see It’s your choice.

  • Netease Open Courses
  • Mooc: High quality online learning platform.
  • Geek Academy.
  • Netease Cloud Classroom
  • Tencent’s class
  • 51 cto college

Graphic visualization

Along with the increasing of data, how to use the efficient use of data, is the problem that every enterprise to consider, but the eyes to see things better to the problem of reading, as the saying goes, “one picture is worth thousand words”, that is the reason why so data visualization will be particularly important, the following is I often see some of the techniques, books, and focus on visualization of open source libraries.

  • HTML5 Canvas Core Technology: a good book to learn Canvas.
  • Canvas Series: Canvas series of Da Mo Teacher.
  • Echarts
  • D3
  • Highcharts
  • AntV
  • Mapv

Engineering and version control

1. Git

Git and Github are two very different things, so make sure you tell them apart.

  • Git tutorial: Liao Xuefeng’s tutorial.
  • Find an interesting way to Learn About Git.
  • The Hitchhiker’s Guide to GitHub: The author is a geek.
  • Git – An easy guide

2. Gulp

Automatic build tools, project packaging before deployment of compression merge, save time, improve development efficiency.

  • Gulp Chinese: Official tutorial.
  • Gulp detailed introduction tutorial: very detailed implementation steps.

3. Webpack

Webpack is currently the most popular front-end resource modular management and packaging tool. It can package many loose modules according to dependencies and rules into front-end resources suitable for production deployment.

  • Webpack Chinese document
  • Webpack principle
  • Webpack Unravelling – The path to the advanced front end
  • Webpack HMR principle analysis – Webpack hot loading principle exploration

4. Babel

A JavaScript code compiler that allows ES6 syntax and above to be translated into browser-supported syntax is typically self-configured in the scaffolding of the framework.

  • Babel: Tutorials on the official website.

5. Code quality

  • ESLint: Javascript code detection tools help us write more formal code.

Browsers and HTTP

  • Common knowledge of the browser: Common knowledge we need to know.
  • Website security: Several common security issues.
  • The same-origin restrictions
  • What happens when you go from URL input to page presentation?
  • Have an in-depth understanding of the browser caching mechanism
  • Page performance management details
  • Here’s what you need to know about the Http protocol
  • The HTTP protocol
  • HTTP2 agreement
  • Browser same origin policy and its circumvention method
  • Cross-domain resource sharing (CORS
  • XSS and CSRF XSS attacks are summarized

Performance optimization

  • Performance optimization: Common performance optimization.
  • Seven tools for front-end performance optimization
  • There are three ways to implement Lazyload
  • Detail lazy loading and preloading
  • Front-end optimization brings thinking, talking about front-end engineering
  • Several books on Web performance optimization are recommended
  • Vue + Webpack front-end performance optimization

SEO

  • SEO optimization combat

Blog series

1. Personal

Now is an era of information explosion, there are a lot of excellent blog articles on the Internet, everyone’s energy is limited, it is impossible to pay attention to all the blogs, everyone’s focus may not be the same, so the focus of personal blogs will be different, these recommended a few I often read a few high-quality blogs. And it’s constantly updated.

  • Ruan Yifeng’s personal website: Ruan Yifeng teacher’s position in all corners of the country need not say more, blog more than technology, ali now hold office.
  • Liao Xuefeng’s official website: Liao Xuefeng has written many excellent series of tutorials, which are worth studying.
  • Zhang Xinxu: one of the pioneers of front-end technology, published the book CSS World.
  • W3cplus: Teachers in the desert have rich experience in CSS and HTML.
  • Front-end entry and advanced study notes: self-study from scratch, and then enter jingdong, recording the author along the way study notes.
  • Six small dengdeng: MY own personal blog, record some of their own learning summary, personal growth, understanding thinking, although he is still a rookie, but has been on the road.

2. Team

  • Strange dance weekly: collect weekly front-end elite articles.
  • Meituan technical team: Share some technical routes of Meituan.
  • JavaScript Weekly: We share some great JavaScript content every week.
  • Zhimin Chinese Weekly: if you have trouble reading English, zhimin will help you translate.
  • Bump Lab: Jingdong team.
  • FED: The Taobao front end team, needless to say.
  • FEG front-end team: The front-end team of netease, and the products of netease have always been my favorite.
  • IMWeb front-end blog: Tencent company front-end team, responsible for QQ related business you know, are hundreds of millions of levels.
  • Tutorialzine: Library of high quality tutorials and articles.

High quality community

  • Nuggets: a community to help developers grow, a lot of high quality articles, I will brush articles every day to learn technology, their own articles will be synchronized up.
  • InfoQ: Community sites that technical people must know about.
  • CSDN: The largest technology exchange community in China.
  • Blogosphere: a tech-focused community.
  • V2ex: V2EX is a place for sharing and exploration, a place for programmers.
  • The front-end stew
  • Medium: High-quality communities abroad need scientific Internet access.
  • Front-end Nine – Beginner’s Manual 2019: “Web front-end Development Primer” written by alipay front-end team.

Project resources

  • Front-end Skills Summary: Skill points and learning materials that a front-end engineer needs.
  • You-need-to-know- CSS: a quality CSS project, pure CSS implementation of our project many commonly used, not commonly used styles.
  • JavaScript Libraries: Some excellent JavaScript open source libraries.
  • Awesome-web-dev-books: Front end classic learning books list.
  • Front-end TOP 100: Basically covers all front-end open source projects in use, I think this collection is enough.

Commonly used tools

  • CSS Sprites Generator: An online tool for creating Sprite images.
  • Lorem Picsum: A great temporary placeholder for images.
  • Md2All: Excellent now Markdown editor.
  • Ubo design: excellent design navigation site, help you find information better.
  • Bookrunner: Book search and download.
  • Slime navigation: Resource search.
  • CodePen: Online code editing tool.
  • Iconfont: Alibaba’s library of font ICONS, supports multiple formats, download images, use them online, SVG and more.
  • Can I use: You Can view the CSS compatibility of the browser.
  • Online tools: Tool resource navigation.

The last

  1. The above are some materials I have collected in the past two years. It took me several days to sort out this material. I hope it can help you on the road of self-study.
  2. Again, I am not a great god, I think the technology has not reached this level, but I will continue to learn, in addition, do not misunderstand that I know all the knowledge here, these are some of the information I learned to sort out, to avoid some white do not know how to look up the information.
  3. The resources may not be right for everyone, you may not need them all, just pick and choose what you want, more is not always better.
  4. I will update this resource continuously, welcome everyone to communicate together, if you feel good, you can give a star.
  5. I have also created a public account, where I will publish new articles and materials at the first time. In addition to sharing technologies, I will also share my actions, new understandings, feelings and experiences. In short, it is not only technologies, come and let us grow together.
  6. Scan the code to follow the wechat public account, you can get a full set of learning resources along the way.
  7. Finally, if you think the article is good and enlightening to you, “like” is a kind of attitude and recognition.
  8. Welcome to pay attention to wechat public number: Six small dengdeng, more dry goods articles, here are a lot of my stories, welcome to exchange.