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

Intro to Web Development

By Christian Sakai

Made with Slides.com

Intro to Web Development

  • 342

More from Christian Sakai