1. 04 | Building a Front-end for your Express Web Apps Stacey Mulcahy | Technical Evangelist Rami Sayar | Technical Evangelist

2. Introduction to Jade Jade Templates Implementing Bootstrap Module Overview

3. 04 | Introduction to Jade Stacey Mulcahy | Technical Evangelist Rami Sayar | Technical Evangelist

4. Templating with Jade Jade is a templating language to simplify writing HTML. Jade syntax and keywords map directly to HTML. Jade adds the ability to separate and extend your HTML. –Helps prevent code repeat –Ensures clean HTML is generated. –Allows you to insert values into HTML through templates.

5. Simple Tags div address i strong Output Templating with Jade

6. Tags with Attributes h1(id="title") Welcome to Jade button(class="btn", data- action="bea"). Be Awesome Output Welcome to Jade Be Awesome Templating with Jade

7. The extends keyword allows a template to extend a layout or parent template. It can then override certain pre-defined blocks of content. The block keyword allows you to establish a block or replace the content of pre-defined blocks.

8. 04 | Using Jade Templates Stacey Mulcahy | Technical Evangelist Rami Sayar | Technical Evangelist

9. DEMO Using Jade Templates

10. 04 | Implementing Bootstrap Stacey Mulcahy | Technical Evangelist Rami Sayar | Technical Evangelist

11. What is Bootstrap? Framework for developing responsive sites including presentation and behavior (HTML/CSS/JS) Number 1 project on GitHub http://getbootstrap.com/ Accounts for common functionality and layout needs Customize it to the project needs : http://getbootstrap.com/customize/ http://getbootstrap.com/customize/

12. Implementing Bootstrap Download Bootstrap http://getbootstrap.com/getting- started/#downloadhttp://getbootstrap.com/getting- started/#download Add into the public folder and do some file management housekeeping in terms of names and pathing.

13. Bootstrap Resources Microsoft Virtual Academy: – http://aka.ms/bldUI-bootstrphttp://aka.ms/bldUI-bootstrp edX –https://www.edx.org/course/introduction-bootstrap-tutorial- microsoft-dev203x-0https://www.edx.org/course/introduction-bootstrap-tutorial- microsoft-dev203x-0

14. DEMO Implementing Bootstrap

15. ©2014 Microsoft Corporation. All rights reserved. Microsoft, Windows, Office, Azure, System Center, Dynamics and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.