I used the front-end development tools-cutterman,mark Man,sublime Text,yeoman,gulp ...

Although only just began to practice the cut chart, but before still exposure to a lot of tools, decision one by one use, sure enough, a day to cut a PSD, for a rookie, still very happy.

I first downloaded a PSD from the Learning UI Web. Transduction must be used PS, here and we recommend a plug-in Cutterman, cut up not too convenient. Can be downloaded to their website http://www.cutterman.cn/

Tutorials can be seen here http://www.cnblogs.com/nifengs/p/5216013.html

In addition to transduction, we also need to know the location, size, and color of some elements on the design diagram. It is recommended to use Mark Man, which is quick to label and convenient. http://www.getmarkman.com/

Start code, I use the editor is sublime text editor, I went online loaded a lot of plug-ins, to get started can refer to the tutorial http://www.imooc.com/learn/40, and then to install some front-end plug-ins, and then a column, write static time, Left HTML, right CSS, just like this.

Before the code starts, there are some preparations to be done. First use Yeoman to generate a webapp, see 1190000002525359

What are the benefits of building a WebApp project with Yeoman?

Built-in gulp, to help us automate a lot of things, static page compression, image compression, JS merge, Sass Synchronous compilation and compression CSS.

The built-in jquery. Sass,bootstrap,modernizr Optional

At this point, I use the command line to enter Gulp-serve under the project folder

Gulp will monitor the file changes, as long as I save, the browser will automatically update the page (I want to buy a monitor, so definitely cool fly, La La).

OK, so you can start writing under the project's app folder.

I used the front-end development tools-cutterman,mark Man,sublime Text,yeoman,gulp ...