##Prerequirements
Before you get started to use yeoman, you got have it installed on your machine. Make sure you have [Node.js](http://nodejs.org/) and [Git](http://git-scm.com/) installed before installing yeoman.
- - -
 
## Installation
Once you have Node.js run on your machine, use the following command to install yeoman:
```html
npm install -g yo grunt-cli bower
```
The command above will install 3 tools on your machine:
1. yo
2. grunt-cli (grunt command line interface)
3. bower
## Step into your first web app
Make a new directory for your web applicaiton, then use the following command to create it:
```html
yo webapp
```
After execue the `yo webapp` command, it tells you to run both `npm install` & `bower install` to install the related dependencies:
Just follow the notification and run both the commands seperately.
```html
npm install
```
```html
bower install
```
While complete all the steps above, you might get these files and folders under your root directory (the directory you run 'yo webapp' command.)
Where we are going to edit the files are all located in the __app__ directory.
## Architecture of app folder
The image below display the architecture of the app directory while you first create it.
## Files & Folders
* 404.html : Returned HTML to users when 'File not Found'
* index.html : The entry page of the website
* robots.txt : Avoid the search engine to index sensitive page for your site
* images : Put all your images here
* scripts : JavaScripts located here
* styles : CSS (Cascading Style Sheet) files located here
* favicon.ico : Icon displayed for bookmark
## Traditional 404 page
The traditonal HTTP 404 response will lead you to a page looks like:
### It sucks!
## Modern 404 page
You can make a better UI/UX for users by design your 404 page like:
### Better!
## robots.txt
A __robots.txt__ restricts access to your site by search engine robots that crawl the web. These bots are automated, and before they access pages of a site, they check to see if a robots.txt file exists that prevents them from accessing certain pages. Check [this page](http://support.google.com/webmasters/bin/answer.py?hl=zh-Hant&answer=156449) for more detail information.
## Images in one place
Put all your images in one place for easy management and later image optimization step.
## 3rd-party library installation
For you guys who want to use other libraries which yeoman did not include them by default, you could install them through _bower_.
For example, we use a parallax scrolling library called [Skrollr](https://github.com/Prinzhorn/skrollr) for our official website. We could install it through bower by following steps:
```html
bower search skrollr
```
Once bower found this package, you can easily installed it by:
```html
bower install skrollr
```
## Build production version of your site
Before uploading & releasing you site, there are some optimization steps that makes your website get better performance so better UX.
* Optimize images by removing useless headers.
* Minify the CSS, javaScript, HTML files by removing useless spaces, replacing long variable names.
* Concatenate CSS, javaScript files into single one file to minimize the HTTP request number.
* ...etc
## Grunt do these tasks for you
Grunt do the repeatitive tasks for you automatically, so that will save lots of time for you to do the real code work. To create the final, optimized website, just use the following grunt command:
```html
grunt build
```
Yeoman defined a __build__ task of Grunt for you by default. Sweet!
## Detail of Libraries
1. Grunt : [http://gruntjs.com](http://gruntjs.com)
2. bower : [https://github.com/twitter/bower/](https://github.com/twitter/bower/)
4. Skrollr : [https://github.com/Prinzhorn/skrollr](https://github.com/Prinzhorn/skrollr)
3. solid intro to _bower_ : [http://goo.gl/bOuwi](http://goo.gl/bOuwi)
THE END
BY Cloud (Shih-Chnag) Chen