Skip to content
This repository was archived by the owner on Nov 28, 2020. It is now read-only.

.Add files via upload #6

Open
ceogouravsingh wants to merge 1 commit into
base: master
Choose a base branch
from
Open

.Add files via upload #6

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
276 changes: 172 additions & 104 deletions readme.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,104 +1,172 @@
# 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
# 2. Development Environment

## Introduction

Before beginning any development, you need to set up your environment with the appropriate tools and software. In frontend web development, there is a huge range to choose from. For this course, we will be using the following:

### Visual Studio Code

Visual Studio Code is an open source, lightweight text editor with support for a wide variety of programming languages and frameworks. Popular alternatives you may have heard of are Sublime and Atom.

### Node.js

Node.js is a javascript runtime environment. Although we won't be doing any Node.js development, it does include a very popular package manager called **npm**. We will be using npm to install packages, including BrowserSync and TypeScript.

### BrowserSync

To test your website, you will need a web server to host your files. Fortunately, you do not require a full-blown Apache web server for development and testing. BrowserSync allows you to create a web server quickly to test your website locally. Additionally, it supports live reloading. In other words, when you change something, it will instantly reload the browser to reflect the changes. Live reloading is useful for testing different styles, layouts, etc.

## Learning Outcomes

- Setup a web development environment
- Install packages using Node.js
- Test website using BrowserSync

## Bootcamp Resources

- Slide Deck: [Download](https://1drv.ms/p/s!AhUTdgNym7JMjCRPvv07X8jIGAV6)
- Video: [YouTube Link](https://www.youtube.com/watch?v=lVXLAiEiqc8)

## Tutorial 1: Installation

### Setting up Visual Studio Code

Download and install Visual Studio Code on your machine here [Download Link](https://code.visualstudio.com/).

If you are having trouble installing it, the guide can be found [here](https://code.visualstudio.com/docs/setup/setup-overview).

### Setting up Node.js

Download and install Node.js from here [Download Link](https://nodejs.org/en/download/).

Once the installation is complete, open up Command Line (Windows) or Terminal (Mac) and run the following command:

```
npm
```

If everything was successful, you should get an output similar to this. Note that if you are on Windows, you may need to restart your computer for this to work.

![Succesful Node.js install](img/npm_command.png)

### Setting up BrowserSync

To setup BrowserSync, simply run the following command in Command Line (Windows):

```
npm install -g browser-sync
```

`npm install` calls the node package manager to install a package, `-g` tells it to install it globally so you can
run it in any directory, and `browser-sync` is the name of the package.

If you are using Mac, you may need to add `sudo` to the front of the command if you are getting permission errors:

```
sudo npm install -g browser-sync
```

If the installation was successful, you should be able to run the following command:

```
browser-sync
```

and get the following output:

![Succesful BrowserSync install](img/browser_sync.png)

### Setting up TypeScript

The process is almost the same as installing BrowserSync.
To setup TypeScript on Windows, run the following command in Command Line:

```
npm install -g typescript
```

Again if you are using Mac, you will need to add `sudo`:

```
sudo npm install -g typescript
```

If the installation was successful, you should be able to run the following command:

```
tsc
```

and get the following output:
![Succesful TypeScript install](img/tsc.png)

## Tutorial 2: Testing your first project

We are going to run a simple website using our newly setup environment.

1. Open Visual Studio Code
2. Expand the explorer tab on the side and click "Open Folder" ![](img/vsc_1.png)
3. Create a new folder and select the folder to open
4. Create a new file in the folder and name it index.html ![](img/vsc_2.png)
5. Paste in the following HTML code to the new file

```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Setup Succesful</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>

<body>
<h1>Congratulations</h1>
<p>
You have succesfully setup your development environment! Go forth and
build.
</p>
</body>
</html>
```

6. Save the file.
7. Open up the integrated terminal by going to View -> Integrated Terminal
![](img/vsc_3.png)
8. Run the following command:

```
browser-sync start --server --files "*"
```

`browser-sync start` starts BrowserSync, `--server` runs a local server using your current directory as the root and `--files '*'` tells BrowserSync the files it should watch for changes ('\*' denotes watching all files).

9. Your browser should open up, and the page should show. Try making a change to the html file, save it, and the page should reload automatically.

![](img/vsc_4.png)

10. To stop the server, go to the console, and press `ctrl+c`.

For more information about the avaiable commands, please see the documentation [here](https://www.browsersync.io/docs/command-line).

### Extra for Experts

#### sudo on Mac

If you are using Mac, it is not recommended that you use `sudo` to install global packages. It was used here for the purpose of simplicity.

To fix this once and for all, follow this [tutorial](https://docs.npmjs.com/getting-started/fixing-npm-permissions).

#### BrowserSync options

If your files are contained in a different directory, specify the relative path after `--server` and files after `--files`, for example:

```
browser-sync start --server 'app' --files '[app\*.html, app\styles\*.css]'
```

This command will serve files from the app\ folder, and watch all html files in the app\ folder and css files in the app\styles\ folder

### Extra Learning Resources

- [What is npm?](https://docs.npmjs.com/getting-started/what-is-npm)
- [BrowserSync documentation](https://www.browsersync.io/docs/command-line)