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.
- 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
- 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
- Bootstrap for responsive front ends
- jQuery + plugins
- 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
documentation in progress
- What is it and why we need it
- Syntax (very similar to JS)
- Compiling TS to JS
- Debugging (linting & developer console)
documentation in progress
- What is it and why we need it
- Creating a Github account and installing Git
- Cloning + adding files
- Committing changes
documentation in progress
- Setting up Azure account
- Linking to source control via continuous deployment
- Monitoring via Application Insights
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
| 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 |
| 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 |