diff --git a/1. HTML, CSS and JS/readme.md b/1. HTML, CSS and JS/readme.md index a9bfedb..bfe88e3 100644 --- a/1. HTML, CSS and JS/readme.md +++ b/1. HTML, CSS and JS/readme.md @@ -1,51 +1,60 @@ # 1. HTML, CSS and JS + ## Introduction -HTML is a markup language for describing web documents (web pages). +HTML is a markup language for describing web documents **(web pages)**. -* HTML stands for Hyper Text Markup Language -* A markup language is a set of markup tags -* HTML documents are described by HTML tags -* Each HTML tag describes different document content +- HTML stands for +- A markup language is a set of markup tags +- HTML documents are described by HTML tags +- Each HTML tag describes different document content What is CSS? -* CSS stands for Cascading Style Sheets -* CSS describes how HTML elements are to be displayed on screen, paper, or in other media -* CSS saves a lot of work. It can control the layout of multiple web pages all at once -* External stylesheets are stored in CSS files -You will also learn JavaScript. It is -a programming language of the web that helps add interactivity to +- CSS stands for . +- CSS describes how HTML elements are to be displayed on screen, paper, or in other media +- CSS saves a lot of work. It can control the layout of multiple web pages all at once +- External stylesheets are stored in CSS files + +You will also learn JavaScript. It is +a programming language of the web that helps add interactivity to your web pages. -It is useful since it is supported by all browsers and many web +It is useful since it is supported by all browsers and many web development tools like Node.js and frameworks like AngularJS or ReactJS utilise JavaScript. -## Learning Outcomes -* Know basic HTML and CSS constructs to get you started to make a one pager -* Become familiar with the use of the box model for web development -* Understand what JavaScript is and when to use it. -* Create and call JavaScript functions -* Use JavaScript to display output -* Understand how to create objects in JavaScript - -## Resources + +## Learning Outcomes:- + +- Know basic HTML and CSS constructs to get you started to make a one pager +- Become familiar with the use of the box model for web development +- Understand what JavaScript is and when to use it. +- Create and call JavaScript functions +- Use JavaScript to display output +- Understand how to create objects in JavaScript + +## Resources:- + ### Bootcamp Content -* [Slide Deck](https://1drv.ms/p/s!AhUTdgNym7JMjCWPOxc8FrH2PxKV) -* [Video](https://youtu.be/hDQB0Oum7L4) -### Tools -* [CodePen](http://codepen.io/pen/) - Experimenting with HTML, CSS and JS snippets. +- [Slide Deck](https://1drv.ms/p/s!AhUTdgNym7JMjCWPOxc8FrH2PxKV) +- [Video](https://youtu.be/hDQB0Oum7L4) + +### Tools:- +- [CodePen](http://codepen.io/pen/) - Experimenting with HTML, CSS and JS snippets. ### Extra Learning Resources -* [HTML (W3 Schools)](http://www.w3schools.com/html/html_intro.asp) -* [CSS (W3 Schools)](http://www.w3schools.com/css/css_intro.asp) -* [JS (W3 Schools)](http://www.w3schools.com/js/js_intro.asp) + +- [HTML (W3 Schools)](http://www.w3schools.com/html/html_intro.asp) +- [CSS (W3 Schools)](http://www.w3schools.com/css/css_intro.asp) +- [JS (W3 Schools)](http://www.w3schools.com/js/js_intro.asp) # Part 1 + ## 1. HTML Structure. First, let's create an empty HTML page. It will contain the head and the body. + ```html @@ -59,68 +68,75 @@ First, let's create an empty HTML page. It will contain the head and the body. ``` + ## 2. Setting the title of the page + Inside the head tags, we will type in the page title. If you run index.html in a browser, you will see that it's title is now "Page Title". + ```html - Page Title + Page Title ``` + ## 3. Adding a comment Inside the body,we will type in a comment. This will not be displayed on the web page. Comments may be useful for developers reading the code. + ```html - - - + ``` + ## 4. Adding a Heading. + Below the comment, we will add the heading "My First Heading". h1 is the most important heading. We can also use other headings like h2, h3, h4, h5, and h6, with h6 having the least importance. + ```html - -

My First Heading

+ +

My First Heading

``` ## 5. Adding a surrounding div tag Below the heading, write the following div: -```html -
- -
+```html +
``` + We use this div to create the box model. In CSS, the term "box model" is used when talking about design and layout. The CSS box model is essentially a box that wraps around every HTML element. It consists of: margins, borders, padding, and the actual content. + ## 6. Adding a Paragraph Below the division, write the following paragraphs: + ```html -

My first paragraph.

+

My first paragraph.

-

This is
a para
graph with line breaks

+

+ This is
+ a para
graph with line breaks +

``` The first paragraph is displayed as one paragraph it also has a class name firstParagraph. The second paragraph contains line breaks because "br" tells the browser to start on a new line. ## 7. Whitespace is ignored. + Add the following below the paragraphs: + ```html - This - Is - All - Displayed - On - One - Line +This Is All Displayed On One Line ``` + The text are all displayed on one line since HTML ignores whitespace. ## 8. Making a Hyperlink. @@ -144,16 +160,19 @@ The text inside the li tags is displayed as the text for each list element. Since this is an ordered list, the list elements are automatically formatted with numbers. Below the hyperlink add the following: -```html -

Ordered List

- -
    -
  1. Item 1
    2. -
  2. Item 2
    3. -
  3. Item 3
    4. -
+ +```html +

Ordered List

+ +
    +
  1. Item 1
    2. +
  2. Item 2
    3. +
  3. Item 3
    4. +
``` + ## 10. Unordered Lists + Unordered lists are look like ordered lists and are coded like ordered lists as well. The difference is that instead of formatting the list with numbers to show order, the list is formatted using bullet points by default. @@ -161,21 +180,25 @@ The difference is that instead of formatting the list with numbers to show order In terms of coding, we use ul instead of ol. The rest of the code remains the same. Below the ordered list, add the following: + ```html -

Unordered List

+

Unordered List

- + ``` + ## 11. Adding an image Below the unordered list, add the following: -``` + +``` W3Schools.com ``` + The src attribute tells the browser which image to use. The alt attribute tells the browser what text to display in case the image isn't found. # Part 2 @@ -189,9 +212,11 @@ To do this, right click on an empty space, click New > Text Document. Then name ## 2. Add an external stylesheet. Inside the head tags of index.html, add the following line. + ```css ``` + The rel attribute specifies the relationship between the HTML page and the CSS page. The href contains the location of the CSS file. In this case, it is stored locally, in the same folder as index.html, and is named "styles.css". @@ -200,13 +225,15 @@ There will be no noticeable change seen in the HTML file, since we have not yet ## 3. Add styles to the CSS file. Open styles.css in your text editor. Then add the following line: + ```css -h1{ - Color:yellow; - Font-size: 60px; - background-color:#b0c4de; +h1 { + color: yellow; + font-size: 60px; + background-color: #b0c4de; } ``` + Refresh your site. The h1 heading at the very top should now have a font color of yellow and a font size of 60px with a blue background colour represented by the hex value "#b0c4de". ## 4. Changing colour of text @@ -214,11 +241,11 @@ Refresh your site. The h1 heading at the very top should now have a font color o Add this code below step 3 in styles.css Changes the colour of the text in the first paragraph to red + ```css -p.firstParagraph{ - color:Red; +p.firstParagraph { + color: Red; } - ``` ## 5. Selectors @@ -226,11 +253,11 @@ p.firstParagraph{ Add this code below step 4 in styles.css Changes the colour of the link to hotpink when the cursor hovers over it + ```css -a:hover{ -Color: hotpink; +a:hover { + color: hotpink; } - ``` ## 6. Box Model @@ -238,44 +265,45 @@ Color: hotpink; Add this code below step 5 in styles.css Demonstrates the use of the box model structure + ```css -#boxModel{ - background-color: lightgrey; - width: 300px; - border: 25px solid purple; - padding: 25px; - margin: 25px; +#boxModel { + background-color: lightgrey; + width: 300px; + border: 25px solid purple; + padding: 25px; + margin: 25px; } - ``` Explanation of the different parts: -* Content - The content of the box, where text and images appear -* Padding - Clears an area around the content. The padding is transparent -* Border - A border that goes around the padding and content -* Margin - Clears an area outside the border. The margin is transparent +- Content - The content of the box, where text and images appear +- Padding - Clears an area around the content. The padding is transparent +- Border - A border that goes around the padding and content +- Margin - Clears an area outside the border. The margin is transparent -The box model allows us to add a border around elements, and to define space between elements. +The box model allows us to add a border around elements, and to define space between elements. ## 7. Background -Add this code below step 6 in styles.css +Add this code below step 6 in styles.css Specifies an image to use as the background + ```css -body{ +body { background-image: url("http://allpicts.in/download/1396/light_blue_wallpaper_pattern_for_background.jpg/"); } - ``` # Part 3 + ### JavaScript Code #### 1. Displaying output -Since we are using CodePen, we simply need to add the JavaScript +Since we are using CodePen, we simply need to add the JavaScript code inside the "JS" area. Type in the following JS code: ```js @@ -283,34 +311,43 @@ document.write("Hello World"); ``` This line of code will add the text "hello world" directly on the HTML page. -Since CodePen adds our JavaScript code at the bottom of the HTML page, we see -the text "hello world" at the bottom of the page. +Since CodePen adds our JavaScript code at the bottom of the HTML page, we see +the text "hello world" at the bottom of the page. #### Other Ways to Display Output: -There are many other ways to display output. Feel free to replace the above +There are many other ways to display output. Feel free to replace the above code with the following code to see them in action. -* Alerts display a message box with a message of your choice. This output -method may be obtrusive for the user so use alerts modestly. + +- Alerts display a message box with a message of your choice. This output + method may be obtrusive for the user so use alerts modestly. + ```js alert("Hello World"); ``` + In this case, the message was "Hello World". -* We can also select an element and change the contents between its tags. + +- We can also select an element and change the contents between its tags. + ```js document.getElementById("boxModel").innerHTML = "Hello World"; ``` -In this case, we are getting the element with the Id of "boxModel". -Then we are changing the HTML code inside its tags, so it displays "Hello + +In this case, we are getting the element with the Id of "boxModel". +Then we are changing the HTML code inside its tags, so it displays "Hello World". -* We can also display output to the console + +- We can also display output to the console + ```js console.log("Hello World"); ``` -After typing this, click on the "console" button on the buttom-left part -of the screen to see the output. -You can also press F12 and click on the "Console" tab to open +After typing this, click on the "console" button on the buttom-left part +of the screen to see the output. + +You can also press F12 and click on the "Console" tab to open the console. #### 2. Creating Functions @@ -318,40 +355,46 @@ the console. A JavaScript function is a block of code designed to perform a particular task. The syntax for a function in JavaScript is as follows: + ```js function name(parameter1, parameter2) {     code to be executed - } + } ``` We call the function a certain name, and give it 2 inputs named parameter1 and parameter2. We can add more parameters if needed. And then, it -executes the code inside the curly braces. A value may be returned by +executes the code inside the curly braces. A value may be returned by the function. For our webpage, we will create a function that shows the date when a button is clicked. Here is the code for the function: + ```js -function show() { - document.getElementById("demoButton").innerHTML=Date(); -} +function show() { + document.getElementById("demoButton").innerHTML = Date(); +} ``` -When the show function is called, it sets the content of the element +When the show function is called, it sets the content of the element with the id of "demoButton", to the current date. #### 3. Calling Functions -Once you are finished typing the show() function, you will notice that +Once you are finished typing the show() function, you will notice that nothing changes on your page. This is because you haven't called it. -We will call the show function when a button is clicked, so we need to +We will call the show function when a button is clicked, so we need to create this button. In the HTML area, type in the following code: + ```js - + ``` + Here, we created a button element. We typed in the show() -function as the value of the onclick attribute. This means that when the +function as the value of the onclick attribute. This means that when the onclick event is triggered, which means when the button is clicked, the show() function is called. diff --git a/readme.md b/readme.md index 5c2cdb5..bee5630 100644 --- a/readme.md +++ b/readme.md @@ -1,104 +1,91 @@ # MSA Module 2 -Module two is designed to help you get some practical experience with web development – + +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. +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. +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. +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. +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. +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 +### [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)