Frontend development and learning route (Douban): xiqiao hutong and xiqiao hutong

Frontend development and learning route (Douban): xiqiao hutong and xiqiao hutong

The first core point to be mastered at the front-end of learning is "learning with life and practice with life", that is, toughness. Otherwise, it is difficult to learn. You can only learn it if you stick to it.
There are a lot of front-end learning and front-end tutorials. If you can "stick to it", you can start learning from simple front-end modules.

 

The front-end should learn three parts: HTML, CSS, and JavaScript (JS for short). Therefore, we should first define three concepts:
HTML is the content layer, which indicates the role of an HTML tag on the page.
CSS is the style layer, which is used to indicate the style (font, size, color, width, etc.) of a piece of content.
JS is the behavior layer. what it needs to do is what changes will be made to the content and style when users trigger certain behaviors.

1. HTML and CSS sections.
HTML/CSS beginner, just according to http://www.w3cschool.cn/experiment, http://www.w3cschool.cn/index-6.html and http://www.w3cschool.cn/index-7.html two sets of completed on the entry,

After entry, learning the essence of CSS, that is, layout, recommended Li Yanhui teaching video, layout of this chapter: http://edu.51cto.com/lesson/id-14895.html chapter 27th, if you think it is not enough, need to practice, then we will learn Chapter 28 and Chapter 29. 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 the completion of learning is a more skilled HTML/CSS users. At this time if you want to continue to study the relevant class library and framework, recommend Sass and Compass, recommend two Ruan Yifeng blog: http://www.ruanyifeng.com/blog/2012/06/sass.html http://www.ruanyifeng.com/blog/2012/11/compass.html
And this book: Sass and Compass in Action http://book.douban.com/subject/6732187/

2. JavaScript section.

Recommended for beginners to watch the video: http://edu.51cto.com/course/course_id-166-page-1.html, pay special attention to JavaScript OOP writing (Focus, can be seen several times), and closure, prototype chain, asynchronous programming part (secondary focus ), the former is used for writing projects, and the latter involves the essential features of the JS 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.

It is best to have a plan for yourself, such as how long it will take to learn or what level should be achieved, and then learn as planned.