HTML5 learning a few simple techniques can not only learn new tags, HTML5 can now be said to be synonymous with all front-end technology. You need to learn the language and multi-tool not only for newcomers will feel new to their mess. In addition, a number of front-end development will subdivision development positions, different positions technology involved will be different, so first determine their own development orientation, to learn the contents of the collection, sorting the good order of learning. In many cases, in addition to the success of courage, perseverance, but also we need direction. Maybe we have a good direction to success faster than imagined. If you run in the wrong way, no matter how hard is no good. Learning Web front-end is true, first of all should choose a proper course of study. HTML5 learning circuit diagram shown in Figure 1.13:
figure 1
As shown, if you need to master all the front-end technology, can be divided into three stages of learning, their knowledge of the amount of reserves gradually step by step. Of course, it does not need to learn the entire contents of the work completed in order to participate, each stage has its own position, there is a corresponding jobs, but the more comprehensive learning content, the more extensive development space. This book covers the entire content of the first stage, second stage and third stage can refer to the book's companion books.
1.5.1 The first stage of learning web production
The first phase of the study is to start Web front-end technology, although to hand it to this part is the most simple technology, but for the novice in terms of the beginning is the hardest. A wide range of technology, I do not know of any place to start from, so there must be a good learning path. For planning book learning path can refer to the following steps:
1．学习前端技术一定是从HTML开始，同时也要了解一些UI方面的知识。HTML是为了将内容放到网页上，像文字、图片和表单等，是一个网页的骨架，无论是静态网页还是动态网页，最终返回到浏览器端的都是HTML代码，浏览器将HTML代码解释渲染后呈现给用户。因此，我们必须掌握HTML的基本结构和常用标记及属性。也可以通过HTML中一些标签和属性做一些简单的页面布局和样式处理，但这是CSS强项，所以这方面的内容仅作为了解即可。目前学习HTML可直接从HTML5入手，重点掌握最新一代HTML语言的语义化标签。HTML的学习是一个记忆和理解的过程，需要通过代码和效果进行对照学习的方法，去弥补单纯识记HTML标签和属性的枯燥乏味。
2．在学习了HTML之后，只是掌握了各种“原材料”的制作方法，要想盖一幢楼房就还需要把这些“原材料”按照我们设计的方案组合布局在一起并进行一些样式的美化，就需要开始学习CSS技术。CSS即层叠样式表，是专门为页面中的HTMl标记添加样式的语言，是能够真正做到网页表现与内容分离的一种样式设计语言。相对于传统HTML的表现而言其样式是可以复用的，这样就极大地提高了我们开发的速度，降低了维护的成本。当然也是像学习HTML一样，从基本的使用语法学起。然后掌握CSS和HTML配合使用的几种方式、CSS的样式选择器和常用的CSS样式属性。也是可以从CSS3直接开始学习，重点掌握CSS3中新增加的样式选择器和新的样式属性。由于样式属性比较多，所以划分成和外观相关的、与布局相关的，以及做盒子模型有关的几部分属性去学习。
3．其实学完HTML和CSS两门技术就可以编写页面了，但只能说你对HTML和CSS技术了解，对其中一些常用的知识没有完全掌握，也不能熟练在项目中去应用。要想达到技术使用成熟，下一步就必须学会HTML和CSS的结合使用，完成各种需求下的页面布局。像CSS中的盒子模型、相对布局、绝对布局等能够实现对网页中各对象的位置排版进行像素级的精确控制。当然和语言发展及应用场景不同，有很多种页面布局方法，像表格布局、浮动布局、定位布局、网格布局，以及响应式页面布局等。
4．虽然能布局页面就已经算一名合格的页面制作人员了，但由于CSS3有好多样式属性为了能兼容各种浏览器，同一个属性要不同的前缀写多次才能做到，特别是大型项目中CSS属性非常多。而SASS是一种CSS的开发工具，提供了许多便利的写法，大大节省了设计者的时间，使得CSS的开发，变得简单和可维护。所以建议读者学完CSS以后，掌握SASS语言的用法。
5．如果你掌握了SASS的一些基本入门知识点后，可以趁热打铁，工欲善其事，必先利其器，你最好再去学习一下SASS工具compass，compass是SASS团队成员开发的，compass是对SASS的一个封装，目的是为开发者提供一些丰富的组件以及一些实用的工具模块。由于浏览器对CSS3支持的差异性，我们很多时候需要写一堆针对不同浏览器前缀样式，着实很烦人，compass帮我们解决了这个问题，我们只需include相应样式定义即可，compass会自动为我们生成针对不同浏览器的样式定义。
6. If what has been mentioned above hold of all, and would be able to achieve their desired effect of. Can be developed as a cover page building like this every day, day after day, year after year Gailou, very tedious. Can the building inside each individual modular components, like when you need to levy the same accumulation of wood together. This idea is also in the Web front-end development for the reason that there have been a variety of front-end framework, here I give you recommend to everyone is Bootstrap. Bootstrap is an open source tool for Twitter launched a front-end development package, which is the most popular HTML, CSS, and JS framework for developing responsive layout, mobile devices WEB priority project for all developers, all scenarios and design. Let Bootstrap front-end development faster, simpler. All developers can quickly get started, all devices can be adapted, all items are applicable. In the project development process can help to quickly complete the page layout and style settings provided by Bootstrap CSS styles, components, JavaScript plug-ins, and then targeted fine-tuning styles, so based on the framework developed greatly shorten the development cycle. They are able to grasp a good front-end framework for you is very helpful.
7. Mastered the basics, the next step is proficient in the use of these technologies. To do so would only see how, write, and more practice. Gain experience through continuous development projects, enhance their ability to solve problems from actual combat, the accumulation of material development, and explore innovative ways. "The gentleman also born non-exclusive, good fake to things," in the process of development and learning even more browsing some excellent sites, analytical design ideas and learn from their layout methods, see the multi-wide can know, and then we can digest , take others long for my own use. But also good at using this tool Firebug, on the one hand can help us in our learning process debug their pages, on the other hand we can use Firebug to easily view, analyze others site's source code, "stealing" is a skill . Several projects will be able to become a page down with production experts.