Intro to

Web Development

- Christian Sakai -

Presentation Plan

HTML - the content -
CSS - the presentation -
JavaScript - the behavior -
NodeJS - server side JavaScript -

Example Project

HTML

- the content -

<a href="http://google.com">Click here to go to Google</a>

formula

example

<tag-name tag-attr-one="tag-value-one" tag-attr-two="tag-value-two">tag-content</tag-name>

Top Level HTML Tags

<!-- this is a comment -->

<!DOCTYPE html> <!-- defines the document type -->

<html></html> <!-- the root of our HTML document -->

<head></head> <!-- the head section -->

<body></body> <!-- the body section -->

Inside <head> Section

<meta></meta> <!-- metadata about an HTML document, can be more than one -->

<title></title> <!-- title of an HTML document -->

<!-- link to an external resource (most used to link to style sheets) and fonts -->
<link></link>

<!DOCTYPE html> <!-- denotes that this is an HTML document -->
<html>

  <head>
    <meta charset="utf-8"> <!-- the encoding attribute with utf-8 as the value -->
    <meta name="viewport" content="width=device-width"> <!-- responsive configuration -->
    <title>Intro to Web Development</title>

    <!-- font styles -->
    <link href='https://fonts.googleapis.com/css?family=Orbitron' 
          rel='stylesheet' 
          type='text/css'>
    
    <!-- local css styles -->
    <link href="css/style.css" rel="stylesheet" type="text/css">

  </head>

  <body>

    <!-- later the content of the website is here -->

  </body>

</html>

How does that look?

Inside <body> Section

<div><div> 

<h1>Heading 1</h1> <!-- heading tags from 1 to 6 (largest to smallest) -->

<p>This is a paragraph</p>

<a href="https://www.facebook.com">Click here to go to Facebook</a> 

<img src="image/cat.jpg"></img>

<input type="text"></input>

<button>Click me</button> 

<!-- connect your JavaScript here, can also code it inside -->
<script src="js/app.js"> 
  console.log("hello world")

  // bunch of other JavaScript code
</script>

<!DOCTYPE html> <!-- denotes that this is an HTML document -->
<html>

  <head>
    <meta charset="utf-8"> <!-- the encoding attribute with utf-8 as the value -->
    <meta name="viewport" content="width=device-width"> <!-- responsive configuration -->
    <title>Intro to Web Development</title>

    <!-- font styles -->
    <link href='https://fonts.googleapis.com/css?family=Orbitron' 
          rel='stylesheet' 
          type='text/css'>
    
    <!-- local css styles -->
    <link href="css/style.css" rel="stylesheet" type="text/css">

  </head>

  <body>

    <div>

      <!-- game intro -->
      <div>
        <h3>Guess a Number!</h3>
        <p>
          This is a guessing number game.  Please type a number between 1-100 and click Guess!
        </p>
      <div>
      <!-- end game intro -->

      <!-- game summary -->
      <div>
        <h1>Are you going to win?</h1>
      <div>
      <!-- end summary -->

      <!-- game input -->
      <div>
        <input type="text">
        <button type="button">Guess!</button>
      </div>
      <!-- end game input -->

    </div>

    <!-- JavaScript that does the magic -->
    <script src="js/app.js"></script>

  </body>

</html>

How does that look?

More Details

http://www.w3schools.com/tags/default.asp

Exercise

// Create this folder structure below

guessing-game
| css/style.css
| js/app.js
| index.html

// Copy the code from previous slide to index.html

HTML Preprocessors

Jade
ERB
Twig
Nunjucks
etc

CSS

- the presentation -

formula

example

selector {
  attribute-one: value-one;
  attribute-two: value-two;  
}

.h1 {
  color: red;
  font-size: 20px;
}

CSS Selectors

h1, h2, h3, h4, h5, h6, p {
  color: black;
}

.awesome-section {
  padding: 10px;
  background-color: pink;
}

#click-button {
  font-weight: bold;
}

Can be a HTML tag
Can select multiple

Can select HTML class or id attribute

<div class="awesome-section"></div>

<button id="click-button"></button>

CSS Selectors

p {
 color: pink;
}

div p {
  color: black;  
}

Select descendant

Select direct descendant

<p>This will be pink</p>

<div>
  <article>
    <p>But this will be black</p>
  </article>
</div>

p {
 color: pink;
}

div p {
  color: black;  
}

div > p {
  color: red;
}

<p>This will be pink</p>

<div>
  <article>
    <p>But this will be black</p>
  </article>
</div>

<div>
  <p>And this will be red</p>
</div>

CSS Selectors

Many other, such as selecting siblings, pseudo element, nth element, etc

CSS is Cascading

h1, h2, h3, h4, h5, h6, p {
  color: black;
}


h1 {
 color: pink;
}

Most bottom style wins

Inherits value from parent

body {
 color: blue;
}

/* no rule for <p> here */

<body>

  <p>I will be blue</p>

</body>

<h1>I am pink!</h1> 

<h4>but I am black</h4>

CSS Specificity Level

Inline Styling > ID > Classes > Tags

p {
 color: black;
}

#red-id {
 color: red;
}

.blue-class {
  color: blue;  
}

<p class="blue-class" id="red-id">
  Will I be blue or red or black?
</p>

<p class="blue-class" id="red-id" style="color: yellow;">
  How about me? Will I be blue or red or black or yellow?
</p>

Lets style this!

<body>

  <div>

    <!-- game intro -->
    <div>
      <h3>Guess a Number!</h3>
      <p>
        This is a guessing number game.  Please type a number between 1-100 and click Guess!
      </p>
    <div>
    <!-- end game intro -->

    <!-- game summary -->
    <div>
      <h1>Are you going to win?</h1>
    <div>
    <!-- end game summary -->

    <!-- game input -->
    <div>
      <input type="number">
      <button type="button">Guess!</button>
    </div>
    <!-- end game input -->

  </div>

  <!-- JavaScript that does the magic -->
  <script src="js/app.js"></script>

</body>

Lets style this!

<!-- font styles -->
<link href='https://fonts.googleapis.com/css?family=Orbitron' 
      rel='stylesheet' 
      type='text/css'>
    
<!-- local css styles -->
<link href="css/style.css" rel="stylesheet" type="text/css">

// Remember this folder structure?

guessing-game
| css/style.css
| js/app.js
| index.html

// Put your css code in css/style.css

Put classes and ids

<body>

  <div class="game-board">

    <!-- game intro -->
    <div class="game-intro">
      <h3>Guess a Number!</h3>
      <p>
        This is a guessing number game.  Please type a number between 1-100 and click Guess!
      </p>
    <div>
    <!-- end game intro -->

    <!-- game summary -->
    <div class="game-summary">
      <h1 id="result">Are you going to win?</h1>
    <div>
    <!-- end game summary -->

    <!-- game input -->
    <div class="game-input">
      <input type="number" id="user-input">
      <button type="button" id="guess-button">Guess!</button>
    </div>
    <!-- end game input -->

  </div>

  <!-- JavaScript that does the magic -->
  <script src="js/app.js"></script>

</body>

Code the style.css

body {
  font-family: Orbitron;
  color: green;
}

.game-board {
  border: 3px solid green;
  padding: 10px;
  border-radius: 5px;
}

.game-intro h3 {
  text-align: center;
}

.game-intro p {
  text-align: center;
}

.game-summary h1 {
  text-align: center;
}

.game-input {
  text-align: center;
}

.game-input input {
  width: 50px;
  border-radius: 5px;
  font-size: 30px;
}

.game-input button {
  font-size: 30px;
  border-radius: 5px;
  background-color: white;
  border: 3px solid green;
  color: green;
}

<body>

  <div class="game-board">

    <!-- game intro -->
    <div class="game-intro">
      <h3>Guess a Number!</h3>
      <p>
        This is a guessing number game.  Please type a number between 1-100 and click Guess!
      </p>
    <div>
    <!-- end game intro -->

    <!-- game summary -->
    <div class="game-summary">
      <h1 id="result">Are you going to win?</h1>
    <div>
    <!-- end game summary -->

    <!-- game input -->
    <div class="game-input">
      <input type="number" id="user-input">
      <button type="button" id="guess-button">Guess!</button>
    </div>
    <!-- end game input -->

  </div>

  <!-- JavaScript that does the magic -->
  <script src="js/app.js"></script>

</body>

Exercise

Put the CSS code from the previous slide and to your code and play around with it

More Details

http://www.w3schools.com/css/default.asp

Responsive Example

https://www.responsivefieldday.com/

http://roxik.com/cat/
http://scienceaddict.herokuapp.com/
http://codepen.io/fbrz/pen/whxbF

Behavior or Presentation?

Amazing CSS Example

CSS Problems

SASS
LESS
Stylus
PostCSS

CSS Preprocessors

Very hard to organize
- Inheritance
- Duplication
- Cascading

JavaScript

- the behavior -

JavaScript

C family syntax
The only language for the web
- It is here to stay
- Attempts in the past to move away from JavaScript failed
- Remove JavaScript = break the internet
- You can make browser extension
High-level, dynamic and interpreted
Multi-paradigm (functional, oop, imperative)
Easy to start, hard to master
No standard/convention
Many non-quality packages

Variable

var hello = "hello";
var world = "world";

console.log(hello + " " + world + "!"); // "hello world!"

var a = 3;
var b = 2;

var multiply = a * b;

console.log(multiply); // 6

Try it in your browser console

Arrays & Objects (Maps)

var myArray = [1, 2, 3, "hello", "world"];

console.log(myArray[0]); // 1
console.log(myArray[4]); // "hello"


var myObject = {
  name: "Christian",
  gender: "male"
};

console.log(myObject); // { name: "Christian", gender: "male" }
console.log(myObject.gender); // "male"

Try it in your browser console

Functions

var add = function(a, b) {
  return a + b;
};

console.log(add(1, 2)); // 3

Try it in your browser console

Pass function into functions

var adder = function(a, b) {
  return a + b;
};

var calculate = function(a, b, calculatingFunction) {
  var result = calculatingFunction(a, b);
   
  return result;  
};



console.log(calculate(1, 2, adder)); // 3

Function Scope

var x = 2;
var y = 3;


var changeValueOfXAndY = function() {
  x = 5;
  var y = 4;
};

changeValueOfXandY();

console.log(x); // 5
console.log(y); // 3

Try it in your browser console

Function Closure

var makeAdder = function(num) {
  var adderNumber = num;

  var add = function(numToBeAdded) {
    return adderNumber + numToBeAdded;
  };

  return add;
};

var adderFunc = makeAdder(2);

console.log(adderFunc(3)); // 5

Try it in your browser console

Accessing DOM

DOM (Document Object Model) a.k.a the HTML node

<p id="paragraph">This is a paragraph</p>

// Get the element with id="paragraph"
var paragraphNode = document.getElementById("paragraph");   

// change the style color to red
paragraphNode.style.color = "red";

We can change styles, attribute values, content, etc

We can also attach event handler

Accessing DOM

<input type="text" id="user-input">

// Get the element with id="user-input"
var userInputNode = document.getElementById("user-input");   

// get the value of the user input
userInputNode.value;

Getting content from an input field

Attach event handler to a button

<button type="button" id="guess-button">Guess!</button>

// Get the element with id="guess-button"
var guessButtonNode = document.getElementById("guess-button");   

// Attach a click event handler to the element
guessButtonNode.onclick = function() {
  // something to be executed
};

Lets give behavior to this

<!-- game summary -->
<div class="game-summary">
  <h1 id="result">Are you going to win?</h1>
</div>
<!-- end game summary -->

<!-- game input -->
<div class="game-input">
  <input type="number" id="user-input">
  <button type="button" id="guess-button">Guess!</button>
</div>
<!-- end game input -->

// Remember this folder structure?

guessing-game
| css/style.css
| js/app.js
| index.html

// Put your js code in js/app.js

When the use clicks the button, we want to get the input. If the user is correct, render "WIN" to the result, "LOSE" otherwise.

Lets give behavior to this

<!-- game summary -->
<div class="game-summary">
  <h1 id="result">Are you going to win?</h1>
</div>
<!-- end game summary -->

<!-- game input -->
<div class="game-input">
  <input type="number" id="user-input">
  <button type="button" id="guess-button">Guess!</button>
</div>
<!-- end game input -->

var resultNode = document.getElementById("result");
var userInputNode = document.getElementById("user-input");
var guessButtonNode = document.getElementById("guess-button");

var getRandomInt = function(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
};

var randomNumber = getRandomNumber(1, 100);

console.log("Secret random number for debugging purposes: ", randomNumber);

guessButtonNode.onclick = function() {
  var userInputValue = userInputNode.value;

  if (randomNumber === parseInt(userInputValue)) {
    resultNode.textContent = "WIN";
  } else {
    resultNode.textContent = "LOSE";
  }
};

More Details

http://www.w3schools.com/js/default.asp

JavaScript Preprocessors

Babel/ES6
CoffeScript
TypeScript

Amazing JavaScript Libraries

http://threejs.org/
https://d3js.org/
http://ionicframework.com/
https://facebook.github.io/react-native/

NodeJS

JavaScript on the Server

With NodeJS

Call 3rd party APIs
Make your own APIs
Connect to a database
Do other programming stuffs in your terminal
Program the Internet of Things platforms

NPM

Stands for Node Package Manager
Packages from Node community for you to use

Every Software Developer

should learn Web Development

It is challenging
- Forced to work with servers and distributed systems
- Ever changing environment, constantly puts you out of your comfort zone
- Impressive engineering feats with limited technology
  - MS Office 365
  - Online IDEs
Easiest one to express yourself and reach out to other people globally
- Install an app? Install a desktop app?
- Or just go to www.mycoolsite.com?
Can code native apps using web technology, e.g, Electron, React Native, Cordova/Ionic, ExtJS, etc with familiar technology and fewer code base. Reach out to your market even more
CSS makes amazingly beautiful styles

Thank You

questions?

Join our QC ACM Slack Channel #web-dev

https://github.com/christiansakai

christianmsakai@gmail.com