The learning route (with Mind Map) that beginners must follow when developing web Front-end applications.

The learning route (with Mind Map) that beginners must follow when developing web Front-end applications.

Many students want to learn WEB front-end development. Although there are many tutorials, websites, and books on the Internet, they do not know where to choose from. After reading this article titled "front-end learning routes for colleagues", I believe you will gain some benefits.

Front-end development basics include HTML, CSS, and JavaScript (JS for short. Therefore, before learning, we need to clarify three concepts:
HTML-content layer, which indicates the role of an HTML tag on the page.
CSS-style layer, which indicates the style (font, size, color, width, etc.) of a piece of content.
JS-behavior layer, which is used to change the content and style when a user triggers certain behaviors.

I. HTML and CSS

HTML/CSS for beginners, just follow the instructions,
After getting started, I learned the essence of CSS, that is, layout. I recommend Li Yanhui's teaching video. layout this chapter: Layout. Note: At this time, the teacher must talk about a piece of code and implement it as needed. Do not just read it.
Another essential part of CSS is its naming rules. Find several famous websites (such as Douban and Netease News) and study their naming rules. Here, there is a ready-made Naming Convention available for learning (You need to log on to evernote to view): https://www.evernote.com/shard/s168/sh/7f89cc57-cab2-4712-b61b-9fde25e3ef51/d01c8e34ef05373ec06c3b2f7cfaba82/res/e0b9963b-ba7a-441a-8462-8f87c48e4cda.jpg? ResizeSmall & width = 832
After learning is a more skilled HTML/CSS users. At this time if you want to continue to study the relevant class library and framework, we recommend Sass and Compass, we recommend two Ruan Yifeng's blog: http://www.ruanyifeng.com/blog/2012/06/sass.htmlhttp://www.ruanyifeng.com/blog/2012/11/compass.html

And this book: Sass and Compass in Action http://book.douban.com/subject/6732187/

Ii. JavaScript

Videos recommended for beginners: Attention (important, but can be viewed several times), closure, prototype chain, and asynchronous programming (secondary focus). The former is used to write projects, the latter involves the essential features of the Javascript language.
Then you need to learn JS and HTML/CSS debugging method in the browser, it is recommended to use Google Chrome chrome developer tools debugging, you can watch this video learning: http://happycasts.net/episodes/40

After watching the video and practice, you can see the Javascript good parts (http://book.douban.com/subject/2994925/) This book, do not have to look at it, read its ideas. It is used to consolidate and improve JS programming ideas. (Web Front-end learning and communication group: 328058344 chat prohibited, not welcome !)

Iii. web Front-end learning route Mind Map

Web Front-end learning route Mind Map

Figure is too big not good to show, can not see clearly can enter the following link to view-web Front-end learning route mind map online version: https://www.processon.com/view/link/57d28d0ee4b0942d7a89c9dd