MSA Module 2

Module two is designed to help you get some practical experience with web development – an important skill for any role in New Zealand’s tech industry.

Web development has evolved very rapidly over the last few years. Some of the most popular languages, tools and systems in use today did not exist three years ago. You may have done some HTML and CSS before at school or courses, but that only scratches the very surface of web development. As web applications get more complex (think Facebook), more tools become available to help you manage the complexity.

In this module, you will learn modern web development concepts using modern tools and frameworks. First, we will go through some basic HTML, CSS and Javascript concepts, the backbone of all web applications. Then, we will setup some of the basic tools useful for web development.

After having a grasp on these languages and a development environment setup, we will begin making use of third-party libraries, frameworks and APIs to build something useful very quickly.

Then, we will look into an extension of Javascript, called Type Script. This builds on the flexibility and ease of Javascript but adds better class support amongst other powerful features that make coding the website logic easier and cleaner.

Finally, we will talk about more advanced web development concepts such as web template engines, CSS extensions, and task runners.

Training

[1. HTML, CSS and JS](1. HTML, CSS and JS)

• HTML5 concepts (elements, controls, attributes, etc)
• CSS3 concepts (selectors, classes, inline styles, media queries)
• JS concepts (basic programming principals, syntax, conventions)

Note that this will be demo'd using codepen.io

[2. Development Environment](2. Development Environment)

• Visual Studio Code
• Installing Node.JS for npm (package manager)
• Installing browser-sync for quick testing
• Chrome/Edge developer console for logs and running commands or seeing variable contents

Note we won't actually be using NodeJS or doing any backend development - it is simply for their vastly popular package manager npm

[3. Libraries and Frameworks (Frontend)](3. Libraries and Frameworks)

• Bootstrap for responsive front ends
• jQuery + plugins

[4. REST APIs](4. REST APIs)

• What are REST APIs
• Demo some simple APIs (like currency conversion)
• Calling them using AJAX

We will do these demos using the environment setup in the last section

[5. Typescript](5. Typescript)

documentation in progress

• What is it and why we need it
• Syntax (very similar to JS)
• Compiling TS to JS
• Debugging (linting & developer console)

[6. Source Control](6. Source Control)

documentation in progress

• What is it and why we need it
• Creating a Github account and installing Git
• Cloning + adding files
• Committing changes

[7. Deployment to Azure](7. Deployment to Azure)

documentation in progress

• Setting up Azure account
• Linking to source control via continuous deployment
• Monitoring via Application Insights

[8. Advanced Tools](8. Advanced Tools)

documentation in progress

• Scaffolding (Yeoman)
• View render engines (Handlebars, Jade)
• CSS extensions (SASS)
• Task runners (Gulp)

Note we will introduce these for more advance students, but not mandatory you know this

Schedule

Day 1 (30 July 2016)

Time	Content
10:00 am	Introduction
10:15 am	HTML, CSS, JS
11:15 am	Development Environment
12:00 pm	Lunch
1:00 pm	Libraries, Frameworks
2:00 pm	APIs
3:00 pm	Wrap up

Day 2 (6 August 2016)

Time	Content
10:00 am	Introduction
10:15 am	Typescript
11:15 am	Source control
12:00 pm	Lunch
1:00 pm	Deploying to Azure
2:00 pm	Advanced Tools
2:30 pm	Q&A, Submission, Etc
3:00 pm	Wrapup