Getting Started

// Use HTML5 Boilerplate

1. Choosing a Front End Library

• Foundation
• Bootstrap
• BassCSS - http://www.basscss.com/

2. Set up my Jade Starting a index.jade Create my mixins

   • Document Head
   • Header
   • Footer
   • Scripts

3. Set up my SASS Make my SASS partials Import a Global stylesheet

4. Coffeescript Import my javascript libraries Write my own code underneath

5. Other things Codekit

   • Tell the files where to compile to
   • Optimise images
   • Prepend files Set up other folders
   • PDF's
   • etc.

JADE mixins which go hand in hand with include parameters flow control (if, else, switch)

SASS Variables Compass

COFFEESCRIPT js2coffee.org The Little Book on Coffeescript coffeescript.org

CODEKIT image optimisation compilation live previews server prepending files

GENERAL

• awwwards.com
• http://webfieldmanual.com/

For HTML and CSS

• http://validator.w3.org/ to validate

CSS / SASS

• http://cssguidelin.es/
• codepen.io
• css-tricks.com
• Front End Masters
• codeschool
• zurb.foundation.com
• http://getbootstrap.com/
• http://www.basscss.com/ -- THIS IS THE BEST ONE

JAVASCRIPT

• Before publishing a project

  • jshint first - http://jshint.com/
  • then JSlint - http://jslint.com/

• jsdb.io - A forum for the best javascript libraries

• https://webdesign.tutsplus.com/courses/essential-js-libraries-for-web-design?utm_source=Tuts+&utm_medium=email&utm_campaign=Monthly&utm_content=Monthly-20141027&WT.mc_id=Tuts+_email_Monthly-20141027

• cdnjs.com

  • CDN's are very important
    • Chances are the file is already cached
    • More secure and faster than your server anyway

• Code libraries folder

  • Animation - Greensocks TweenMax ( http://www.codepen.io/GreenSock/ )
  • Image Sliders - Slick Carousel, Royal Carousel
  • Parallax - skrollr or stellar
  • MV's on the Front End - Backbone, Ember and Angular are really good