Recently, many small partners will leave a message to ask, zero basis to learn the front-end need to know what knowledge, white people to learn Web front-end development is easy? In response to everyone's questions, the following, Shang Xue Tang Front-end College to introduce to you.

First of all, first of all, to introduce you to the front-end engineers in the end what do.

Their main job is to make the UI design drawings into html pages according to the w3c standard, and use the javascript scripting language to realize the front-end interaction on the page. Interactive effects include, popup layer, tab switching, image scrolling, ajax asynchronous interaction.

Senior front-end engineers also need to take on the front-end optimization work, optimization knowledge will be more, such as file expires Expires, caching, asynchronous caching, js and css and image compression.

Front-end development is a very special job, the front-end engineer's work is said to be light to send, seemingly light, but do it is definitely not so simple. In the development process covers a very wide range of things, both from the technical point of view to think about the realization of the page, to avoid the dead ends of technology, but also from the user's point of view to think about how to better accept the technology presented by the boring data, better presentation of information. Simply put, its main function will be the site's data and the user's acceptance of a better combination of together, for the user to present a friendly data interface.

Front-end engineers are a very new profession, which has really started to be taken seriously in the country and even internationally in less than 5 years. The rapid pace of development of the Internet, web page WEB1.0 to WEB2.0, and then to the newborn HTML5, CSS3, to the current cell phone, 3G network and other new technologies, the web page is also by the most original graphic-based, to a variety of applications based on the implementation of the decay of the front-end technology, interactive and rich-media presentations, more information, richer content, a more friendly experience, have become the requirements of the front-end development of websites. Website front-end development requirements, the front-end development of the website has undergone a sea change. The development of websites is becoming more and more important for the need of front-end, but the current need of front-end engineers is becoming more and more important, but the current demand for front-end engineers is greater than the supply, and front-end talent is in short supply. So high-quality front-end development engineers will be a very popular career in the next five years, the prospects for development are very considerable.

So, what do you need to know to learn Web front-end from a zero-based white?

If you are a zero-basic white just started, then you must first master the basics of front-end development, the relevant programming languages; HTML, CSS, JauaScript, in the layout of the page, HTML will be the definition of the elements, CSS on the display of the elements of the positioning, and then through the JavaScript to achieve the corresponding effects and interactions. All of this knowledge is fundamental and must be mastered in order to write fluently.

Learn the programming language, of course, is complementary with the tools, learn the language at the same time, the need to master is the use of development tools, for the novice, the beginning of the use of a few more common tools:

1, Dreamweaver:, set of web pages and management of web sites in one of the WYSIWYG web code editor.

2, Sublime, known as Sublime Text, is a major features include spell checking, bookmarks, the full Python API, Goto function, instant project switching, multi-select, multi-window code editor

3, HBuilder: is the DCloud, launched a support for HTML5 Web

Familiar with these tools, you must have a certain understanding of the basic development work, this time to enhance their ability to learn more tools to use, such as Bootstrap can give you a more stylish layout of Web development, forms, buttons, tables, network systems, etc. Secureheaders The ability to automatically implement security-related header rules to prevent XSS, HSTS, and other attacks

The road to front-end development is not set in stone, may be based on the development of the times, the software updates, the content of the learning has changed, but, build a good foundation, no matter what aspects of learning, are handy.

After a brief understanding, it is the main event!

How does a front-end novice learn web front-end?

The front-end self-learner there are learning misunderstandings:

The things learned may have been out of date

The things that are regarded as classics have become obsolete, or there has been a better alternative, and you get limited access to information, news lagging behind, resulting in the content of the learning is also relatively lagging behind.

2. Learning method blind

To read the book can not understand to find video tutorials to learn, think tutorials with their own tastes do not match to find another way, because of their own lack of resources to identify the ability to always be in the absence of a clear planning of the learning route on the case of blind learning, resulting in ineffective learning time is too long and gain very little.

3, only theory, lack of real project exercise

The understanding of technology stays at the theoretical level, and lack of real enterprise project experience, if there is no relevant internship or work experience, the front-end position of the specific division of responsibilities and the workflow of the understanding of the insufficient.

How to self-study front-end knowledge:

Self-study method:

As a beginner, you must be clear about the systematic learning program, I suggest that there must be a guide to the person, all on their own to learn, the chances of giving up is very large, in your web front-end does not have any concept of the need for a person to lead the door, and after that, they are all relying on their own drill, the first step is to determine the web front-end are required. The first step is to determine what content is needed for the web front-end, and in how much time to finish learning, the recommended time 6 months guaranteed.

2. Video-based, book-based. Many beginners in the learning front-end very like to go to buy books, but the final result is what? Look at what will not write, so here to remind you, the book can read, but is established with a knowledge point you have a specific operation of the implementation of the book to consolidate the concept, which is more conducive to your understanding of the knowledge.

3. For learning technology, mastering a learning method is very important, in fact, for the web front-end, learning method is indeed a lot of the same, once the learning method is not right, may result in the "method is not right, efforts in vain. In fact, there are still a lot of this, I will simply say an example, some people listen to the class while following the knock code, so it is not right, listen to the class on the time to concentrate on listening, do the questions on the time to concentrate on doing the questions, this is the experience of the past, must be listened to. According to each person's different, may study method will also be out of the way, find suitable for your own learning method is the premise of learning.

4. Do not suggest that one person blindly learn, in my understanding of these people to learn programming, from a zero base to start learning and finally succeeded in doing the job in fact there are not a few, I think most of the reasons are because they do not understand what web front-end is doing, learning what, blindly buy books to see, looking around for video to see, and finally looked at looked at to give up, so I suggest that the beginner! In the absence of specific concepts before, or to find experienced people to ask for advice, after chatting you will know what the web front-end specifically what to do, how to learn, this is my personal advice, can not be adopted.

Must-read front-end book information:

1, "JavaScript DOM Programming Art"

Super front-end bestseller, as a front-end programmer must be read more than two times the book, this book is particularly suitable for newcomers to learn the front-end, the front-end of the core technology is JavaScript, and at the same time is the front-end of the difficult. And this book is perfect for getting started, easy to understand, vivid cases can make beginners better understanding. Many of the programming ideas mentioned, however, are suitable for low-intermediate level front-end developers to learn.

2, "The Definitive Guide to JavaScript"

Also front-end programmers must read a book, not only for beginners, but also for those who have been doing front-end programmers to read at any time. It covers everything about JavaScript and the JavaScript APIs implemented by web browsers, and is useful for understanding the basics of js, such as objects, arrays, syntax, scopes, closures, and more.

3, "JavaScript Advanced Programming"

If you want to JavaScript very completely systematic learning again, I highly recommend this book, this book can always keep, in the process of using this book can also draw down the key points, can be used as a reference in the future, it is a very strong work in the helper. Interviews can also be a good application, we commonly known as the "red book".

4, "you do not know the JavaScript"

This book is not suitable for front-end beginners, want to understand the principles of JavaScript in depth, this is a front-end programmer must study a book. It is going to make the undemanding JavaScript developer rise to the challenge of getting inside the language and figuring out what every part of JavaScript is used for. If you can get through this book, then understanding anything in the future can be understood and grasped very quickly.

5, "The Definitive Guide to Vue.js"

Vue as the mainstream front-end framework now, the most widely used in the country, so understand the principles of Vue must nibble on a Vue book. The reason why I recommend this book is that this book has a qualitative improvement in guiding the developers who use Vue for the first time. From the basics to mainstream packaging and source code analysis, there are many practical cases, are a good practical book. The main content includes data binding, directives, form control binding, filters, components, form validation, service communication, routing and views, vue-cli, test development and debugging, source code analysis and mainstream packaging and building tools. With comprehensive content, detailed explanations, and rich examples, the book is suitable for developers at all levels.

6, "the beauty of programming"

Whatever the position of the programmer, a must-read book, did not read the book programmer is almost always a fake programmer. The book has 60 algorithms and programming questions, most of which have appeared in written exams, interviews, or have been hotly debated by Microsoft employees in recent years. The author tries to guide the readers to identify problems, analyze them, solve them and find better solutions from various interesting problems in the book. You can drastically improve your programming thinking and in-depth thinking about this industry, and eventually turn into a technical bull.

Learning Route:

Phase 1: Front-end Page Refactoring (4 weeks)

Contents include: (PC website layout project, HTML5+CSS3 basic project, WebApp page layout project)

Phase 2: JavaScript Advanced Programming (5 weeks)

Contents include: (native JavaScript interactive function development projects, object-oriented advanced and ES5/ES6 application projects, JavaScript tool library independent research and development projects)

Stage 3: PC full-stack project development (3 weeks)

Contents include: (jQuery classic interactive effects development, HTTP protocol, Ajax advanced and PHP/JAVA development projects, front-end engineering and modular application projects, PC website development projects, PC management information system front-end development projects)

Phase 4: mobile project development (6 weeks)

Contents include: (Touch project, WeChat scenario project, the application of Angular + Ionic development WebApp project, the application of Vue. Vue.js development WebApp project, application of React.js development WebApp project)

Phase 5: Hybrid (Hybrid, ReactNative) development (1 week)

Contents include: (WeChat small program development, ReactNative, all kinds of hybrid application development)

Stage 6: NodeJS full-stack development (1 week)

Contents include: (WebApp back-end system development, I, NodeJS foundation and NodeJS core module II, Express III, noSQL database)

Video tutorials:

Above is the Shangxue front-end academy for you to briefly introduce about the web front-end Learning journey of a white person.

In a nutshell, zero basic white learning Web front-end in addition to understanding the dynamics and development of the entire front-end industry, you should also learn HTML, CSS, JavaScript and other knowledge, is a large and complex technical system.

If you are interested in learning front-end technology, want to learn a new technology, I give you a very good front-end learning exchange qun: one four one eight four nine three one. There are questions to ask me in it, so you can take many fewer detours, do it efficiently, remember to communicate with more experienced people, do not close the door. If there is no better tutorial, you can also pipe me to.

This article was originally published by ShangXueTang Front-end Institute, welcome to pay attention to, and bring you together to learn Web front-end knowledge!