Flash & Photoshop

• Layer (space)
• Frame (time)
• Animation

If a programmer loves Art

Be a

Front-end

Developer

Communicate with

People

Design is not just what it looks like and feels like.

Design is how it works.

—Steve Jobs

Coverage

• User Interface
• User Experience
• Cross platform/browser
• Performance
• Programming

Layout

• Table layout
• Fixed layout (in *px)
• Fluid layout (in *%, flexbox)
• Responsive design (media query)
• Grid Layout (W3C Draft)

Frameworks

• Bootstrap http://getbootstrap.com/
• Foundation http://foundation.zurb.com/
• Semantic http://semantic-ui.com/
• Skeleton http://getskeleton.com
• Amaze http://amazeui.org/

JavaScript

• <script>...</script>
• Namespace - window.foo
• MVC/MVVM - BackboneJS/VueJS
• AMD - RequireJS
• ​Promise/A+ - When
• Component Orientation

Frameworks

• jQuery https://jquery.com/
• Underscore http://underscorejs.org/
• Q https://github.com/kriskowal/q
• RequireJS http://requirejs.org/
• Backbone http://backbonejs.org/
• TroopJS http://troopjs.com/
• AngularJS https://angularjs.org/
• React http://facebook.github.io/react/

Forefront

• Polymer (Web Components) https://www.polymer-project.org/0.5/
• Meteor (DDP) https://www.meteor.com/
• Famo.us (Rendering) https://famo.us/
• Your contribution

Mobile

• Native app
  • Titanium
• Hybrid app
  • PhoneGap
• Web app
  • ​...

Develop once,

Deploy everywhere

Welcome

Join

Web Front-end

Q&A

Thanks！

Welcome

Join

Web Front-end