00:00:00

Web Development From Scratch

Notes

What is this course about?

  • Learn basic HTML5, CSS and Javascript from scratch
  • No pre-requisite necessary
  • Won't teach you everything there is about Web Dev, but enough so you can explore on your own after the course

Notes

1. HTML5

What is HTML5?

  • HTML5 is the latest version of HyperText Markup Language, or HTML
  • It is the language of the Web
  • It describes the structure and content of web pages
  • It is used together with CSS (Cascading StyleSheet) and Javascript to make web pages rich and interactive

By the end of this chapter

  • Make a self profile page

Notes

Starting very simply

1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html>
  <head>
    <title>Carl Fredricksen's Profile</title>
  </head>
  <body>
    Welcome to Carl Fredricksen's Profile page!
  </body>
</html>
  • HTML5 is made up of tags that usually come in nested pairs
  • ... like <X> <Y> ... </Y> </X>
  • The top-most tag is <html>, which has two child tags: <head> and <body>
  • <title> is a child tag of <head>
  • Content of the web page goes inside the <body> tag

Notes

A very simple web page

Notes

Images and links

1
2
3
4
5
6
<body>
  Welcome to Carl Fredricksen's Profile page!
  <img src='img/mugshot.jpg'>
  Click <a href='http://pixar.wikia.com/wiki/Carl_Fredricksen'>here</a> 
  to go to my wiki page.
</body>
  • Tags have attributes (or properties), specified like name='value'
  • Did you notice?
    • <img> has no closing tag
    • Browser ignores line breaks. How do we change that?

Notes

Images and links

Notes

Headings, paragraphs and text format

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
<body>
  <h1>Welcome to Carl Fredricksen's Profile page!</h1> 
  <p><img src='img/mugshot.jpg'></p>
  <h3>Links</h3>
  <p>Click <a href='http://pixar.wikia.com/wiki/Carl_Fredricksen'>here</a> 
     to go to my wiki page.
  </p>
  <h3>Hobbies</h3>
  <p>I <strong>love</strong> travelling, 
     <em>especially</em> by balloons.
  </p>
</body>
  • 5 levels of headings: from <h1> to <h5>
  • <p> organizes text into paragraphs
  • <em> (emphasis) is for italics, <strong> is for bold

Notes

Headings, paragraphs and text format

Notes

Tables

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
<table>
    <tr> <td>Name</td> <td>Carl Fredricksen</td> </tr>
    <tr> <td>Age</td> <td>78</td> </tr>
    <tr> <td>Occupation</td> <td>Retiree</td> </tr>            
    <tr> <td>Email</td> 
         <td><a href='mailto:carl@paradisefalls.org'>
                carl@paradisefalls.org
             </a>
         </td>
    </tr>
</table>

Notes

Tables

Notes

Lists, ordered and unordered

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<h3>Friends</h3>
<ul>
  <li>Russell</li>
  <li>Dug</li>
  <li>Kevin</li>
</ul>
<h3>Countries travelled</h3>
<ol>
  <li>Venezuela</li>
</ol>
  • <ul> is unordered list - bullets are not numbered
  • <ol> is ordered list - bullets are numbered
  • <li> is list item, can be used in either <ol> or <ul>
  • A list can be nested inside another one

Notes

Lists, ordered and unordered

Notes

2. CSS

Notes

What is CSS?

  • Cascading StyleSheet
  • It describes the format, style and layout of web pages

By the end of this chapter

  • Format the self profile page like this

Notes

What is CSS?

Notes

Directory structure

Use the following structure to keep things neat and allow for future expansion

my_profile_dir
 |
 |-- css
 |    |
 |    |-- main.css
 |
 |-- img
 |    |
 |    |-- mugshot.jpg
 |
 |-- index.html

Notes

Embedding CSS in web page

1
2
3
4
<head>
  <title>Carl Fredricksen's Profile</title>
  <link rel='stylesheet' type='text/css' href='css/main.css'>
</head>

Notes

Introducing the <div> HTML element

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
<body>
  <div id='container'>
    <div id='header'>
    </div>
    <div id='overview'>
    </div>
    <div id='mugshot'>
    </div>
    <div id='detail'>
    </div>
    <div id='footer'>
    </div>
  </div>
</body>
  • Used like containers to group content to sections
  • Works together with CSS to format web pages
  • Give them unique names using the id attribute

Notes

Moving content inside <div>s

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
<div id='container'>
  <div id='header'>
    <h1>Welcome to Carl Fredricksen's Profile page</h1>
  </div>
  <div id='overview'>
    <table>
        <tr><td>Name</td> <td>Carl Fredricksen</td></tr>
        <tr><td>Age </td> <td>78</td></tr>
        <tr><td>Occupation</td> <td>Retiree</td></tr>            
        <tr><td>Email</td> 
            <td><a href='mailto:carl@paradisefalls.org'>
            carl@paradisefalls.org</a></td>
        </tr>
    </table>
  </div>
  ...
</div>

Notes

Changing colors

CSS

1
2
3
4
5
body 
{
    color: #333333;
    background-color: #a7a09a;
}
  • body is called the selector
  • {...} contains properties and values being set
  • #333333 and #a7a09a are RGB color codes

Notes

Changing colors

Notes

The RGB color code

The RGB color model

  • Uses a mixture of Red, Green and Blue components to represent colors
  • A number from 0 to 255 represents the 'intensity' of the component, written in base-16, i.e. from 00 to ff. Quiz: how many colors can RGB represent?
  • For example: #ff0000 is red, #ffff00 is yellow
  • The RBG calculator: https://www.w3schools.com/colors/colors_rgb.asp

Notes

The selector - 1

  • "Selects" the HTML element(s) whose properties are to be modified
  • 3 basic kinds:
    • by element type, e.g. body { ... }
    • by element id, e.g. #header { ... }
    • by element class, e.g. .someclass { ... } (will see it in chapter 3)
  • Mix-and-match
    • example 1: div#header { ... }
    • example 2: div h1 { ... }
    • example 3: #header h1, #header h2 { ... }

Can you guess what each of selectors in the above examples do?

Notes

The selector - 2

  • example 1: div#header { ... }
    • The <div id='header'> element is selected
  • example 2: div h1 { ... }
    • All <h1> elements that are inside any <div> element are selected
  • example 3: #header h1, #footer h2 { ... }
    • All <h1> elements that are inside any HTML elements with id='header', plus all <h2> elements that are inside any HTML elements with id='footer' are selected
  • Selector syntax is complex

Notes

What are the properties I can change?

Notes

Before we go further ...

Let's give each <div> a different background color. This will help our eyes when we re-arrange them.

Notes

Changing background color of all divs

Notes

Changing fonts

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
#header h1
{
    font-family: 'Impact';
}
#overview
{
    ...
    font-family: 'Helvetica';
    font-size: 20pt;
}
#detail
{
    ...
    font-family: 'Helvetica';
    font-size: 16pt;
}
#footer
{  
    font-family: 'Courier New';
    font-size: 12pt;
}

Notes

Changing fonts

Notes

The Box Model

The Box Model

Notes

Centering the page

1
2
3
4
5
6
7
8
9
#container
{
    max-width: 750px;
    margin-top:    0;
    margin-bottom: 0; 
    margin-left:   auto;
    margin-right:  auto;
    background-color: #99c;
}
  • max-width
    • when browser is larger, element's width is set to 750px; when browser is smaller, the element will be automatically resized
  • auto for margin
    • Browser will automatically determine the margin size using any space left.
    • This has a centering effect when used for left and right margins.

Notes

Centering the page

Notes

Putting <div>s side-by-side

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
#overview
{
    float: left;
    width: 550px;
}
#mugshot
{
    float: right;
    width: 200px;
}
#mugshot img
{
    display: block; /* what does this line do??? ;-) */
    max-width: 100%;
    max-height: 100%;
}
  • float allows elements to be side by side, instead of one after another
  • Remove display: block and see what happens. Explanation

Notes

Putting divs side by side

Notes

Staying clear of floated elements

1
2
3
4
5
#detail
{
    ...
    clear: both;
}
  • Did you notice the 'detail' section went under the mugshot?
    • This happens to elements next to floated ones
    • Solution: clear: both;

Notes

Staying clear of floated elements

Notes

Using Chrome to troubleshoot

  • What is this gap? Let's use Chrome's Developer Tool to find out

What is this?

Notes

Use Chrome to troubleshoot

Notes

Margin collapsing

  • "The top and bottom margins of blocks are sometimes combined (collapsed) into a single margin whose size is the largest of the individual margins (or just one of them, if they are equal), a behavior known as margin collapsing." - MDN
  • Occurs when parent has no margin or padding to separate itself from its first or last child
  • The collapsed margin ends up outside the parent

Notes

Margin collapsing - the fix

1
2
3
4
5
div
{
    padding-top: 0.1px;
    padding-bottom: 0.1px;
}

Notes

Margin collapsing the fix

Notes

Final touches - 1

Add paddings to make things look less crammed

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
#overview
{
    padding-top:    5px;
    padding-bottom: 5px;
    padding-left:  15px;
    padding-right: 15px;
}
#detail
{
    padding: 5px 15px;       
}
#footer
{
    padding: 5px 15px;        
}

Notes

Final touches 1

Notes

Final touches - 1 what's wrong?

Need to subtract left and right padding from width

1
2
3
4
5
6
7
8
#overview
{
    width: 520px;         /* was 550px */
    padding-top:    5px;
    padding-bottom: 5px;
    padding-left:  15px;
    padding-right: 15px;        
}

Notes

Final touches 1 what's wrong

Notes

Final touches - 2

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
body
{
    margin: 0;
}
#header h1
{
    text-align: center; 
}
td#fieldname
{
    width: 40%;
}
#overview
{
    background-color: #9cc;
}

Notes

Final touches 2

Notes

3. Javascript

Notes

What is Javascript, and why?

  • The scripting language for the web, often used in browsers (called front-end scripting).

  • We can use Javascript to do many things

    • add/change/remove content
    • validate user input
    • show/hide content with CSS
    • create a game using HTML5 Canvas

Notes

Directory structure

Use the following structure to keep things neat and allow for future expansion

my_site_dir
 |
 |-- css
 |    |
 |    |-- main.css
 |
 |-- js
 |    |
 |    |-- main.js
 |
 |-- img
 |    |
 |    |-- mugshot.jpg
 |
 |-- index.html

Notes

Embedding Javascript

Use the <script> tag (usually add it after the </body> tag)

1
2
3
4
5
6
7
<html>
  ...
  <body>
  ...
  </body>
  <script src='js/main.js'></script>
</html>

Notes

Puppy face /(^.^)\

index.html

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<!DOCTYPE html>
<html>
  <head>
    <title>My Javascript sandbox</title>
  </head>
  <body>
    <div id='myDiv'></div>
  </body>
  <script src='js/main.js'></script>
</html>

js/main.js

1
2
3
4
var myDiv = document.getElementById('myDiv');
var myP = document.createElement('p');
myP.innerText = '/(^.^)\\';
myDiv.appendChild(myP);

Notes

Puppy face

Notes

Puppy face /(^.^)\ what's going on?

  1. In HTML, create an empty <div> and give it an unique ID 'myDiv'
  2. In Javascript, retrieve (aka getting a handle of) this <div> using document.getElementByID()
  3. Create a new <p> element using document.createElement()
  4. Set this <p>'s innerText property to puppy face
  5. Add this <p> to myDiv as a child using myDiv.appendChild()

Javascript syntax

  • Use var to declare a variable
  • Use = to assign value to an variable or its property
  • Use single quote ' (or double quote ") to enclose a string of characters

Notes

Lots of puppies

1
2
3
4
5
6
7
var myDiv = document.getElementById('myDiv');
for (var i = 0; i < 10; i++)
{
  var myP = document.createElement('p');
  myP.innerText = i + ': ' + '/(^.^)\\';
  myDiv.appendChild(myP);
}

Javascript syntax

  • The for-loop:

for ( [Initial Expression]; [Condition]; [Step Expression]) { ACTION }

  • i++ is a shorthand for i = i + 1
  • + does addition when both operands are numbers; when any of them is a string, it does string concatenation

Notes

Many puppies

Notes

Kitty in puppies

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
var myDiv = document.getElementById('myDiv');
for (var i = 0; i < 10; i++)
{
  var myP = document.createElement('p');
  if (i === 5)
  {
    myP.innerText = i + ': ' + '=(^.^)=';
  }
  else
  {
    myP.innerText = i + ': ' + '/(^.^)\\';
  }
  myDiv.appendChild(myP);
}

Javascript syntax

  • The if-else-branches: if ( [Condition] ) { Action A } else { Action B }
  • i++ is a shorthand for i = i + 1

Notes

Kitty in puppies

Notes

Introducing booleans

  • A boolean is either true or false
    • Real world example: light switch (on or off), yes/no question (yes or no)
  • [Condition] used in for-loop or if-else-branches must evaluate to a boolean
  • How to write a boolean expression?
    • use comparison operators
      OperatorMeaning
      a === bIs a equal b?
      a != bIs a NOT equal b?
      a > bIs a greater than b?
      a >= bIs a greater than or equal to b?
      a < bIs a less than b?
      a <= bIs a less than or equal to b?
    • true and false themselves are booleans

Notes

Boolean operators

  • Boolean operators work on booleans just like + or - work on numbers
    NameOperatorMeaning
    ANDa && b true if both a and b are true, false otherwise
    ORa || b true if either a or b is true, false otherwise
    NOT! atrue if a is false, false if a is true
  • Quiz: Evaluate the following boolean expressions, given a=5 and b=7
    • a > 6 && b > 6
    • a != 7 || b === 7
    • (a + b) <= 12
    • !((a - b) > 0)
    • a < 8 && b < 8 && (a + b) <= 12

Notes

Creating functions

Why? To reuse code, and to reduce code complexity.

A function has 3 parts: a name, a list of parameters and a body.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
function drawPuppiesAndKitty(where, howMany)
{
  var myDiv = document.getElementById(where);

  for (var i = 0; i < howMany; i++)
  {
    var myP = document.createElement('p');
    if (i === 5)
    {
      myP.innerText = i + ': ' + '=(^.^)=';
    }
    else
    {
      myP.innerText = i + ': ' + '/(^.^)\\';
    }
    myDiv.appendChild(myP);
  }
}

Notes

It's a Pawdemonium!

HTML

1
2
3
4
5
6
...
  <body>
    <div id='myDiv'><p>Here are some furry friends</p></div>
    <div id='myDiv2'><p>Another bunch of furry friends</p></div>
  </body>
...

Javascript

1
2
3
4
5
6
7
function drawPuppiesAndKitty(where, howMany)
{
  ...
}

drawPuppiesAndKitty('myDiv', 7);
drawPuppiesAndKitty('myDiv2', 6);

Notes

It's a Pawdemonium

Notes

Introducing arrays

Think of an array as a row of chairs with numbers (starting from 0) on them

A row of red chairs

Let's create an array of pets:

1
var pets = ['P', 'K', 'P', 'P', 'K', 'K']; // P for Puppy, K for Kitty

You can access each pet by specifying its index, like var secondPet = pets[1];

Can you write a function to draw an array of pets? Hint: use a for-loop

Notes

Puppy or kitty, it's your call - 1

Create a new <div> for this exercise

1
<div id='myDiv3'><p>An array of pets</p></div>

We will declare and call our new function this way

1
2
3
4
5
6
function drawPets(where, arrayOfPets)
{
  ...
}

drawPets('myDiv3', pets);

Notes

Puppy or kitty, it's your call - 2

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
function drawPets(where, arrayOfPets)
{
  var myDiv = document.getElementById(where);
  for (var i = 0; i < arrayOfPets.length; i ++)
  {
    var pet = arrayOfPets[i];
    var myP = document.createElement('p');
    switch (pet)
    {
      case 'P':
        myP.innerText = i + ': ' + '/(^.^)\\';
        break;
      case 'K':
        myP.innerText = i + ': ' + '=(^.^)=';
        break;
      default:
        myP.innerText = i + ': ' + '???';
        break;
    }
    myDiv.appendChild(myP);
  }
}

Notes

Puppy or kitty, it's your call

Notes

A puppy, kitty, or something else???

switch is handy when there are more than 2 branches

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
switch (VARIABLE)
{
  case VALUE_1:
    ACTION_1;
    break;
  case VALUE_2:
    ACTION_2;
    break;
  ...
  default:
    ACTION_DEFAULT;
    break;
}

Try drawing this array of pets: ['P', 'K', 'P', 'P', 'K', 'F']

Notes

Hide-and-Seek!

Allow user to play hide-and-seek with a chosen pet. You need the following:

  • a text box for user to enter the pet's number
  • a 'Hide-and-Seek` button

HTML

1
2
3
4
5
6
7
8
...
<div>
  <label>Which pet? 
    <input id='petNumber' type='text' placeholder='Enter pet number'>
  </label>
  <button onclick='hideAndSeek("myDiv3")'>Hide-and-Seek</button>
</div>
...

Notes

Hide-and-Seek

Notes

Introducing events and event handlers

  • Analogy: You are home watching TV. The door bell rings, and you run downstairs to answer the door.
    • Event: door bell rings
    • Event handler: you answer the door
  • For the complete list of events that you can respond to, see this page
  • Event handlers are written in Javascript

Notes

Naming the pets

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
...
  for (var i = 0; i < arrayOfPets.length; i ++)
  {
    var pet = arrayOfPets[i];
    var myP = document.createElement('p');
    myP.id = where + '_' + i;
    switch (pet)
    {
      case 'P':
...

Now, take a look in Chrome Developer Tools to inspect the generated content

Notes

Naming the pets

Notes

The CSS Invisibility Cloak

We will create a class in CSS called hidden. Any HTML element belong to this class will become invisible.

In CSS, the selector for a class is denoted by a . in front of its name.

CSS

1
2
3
4
.hidden
{
  visibility: hidden;
}

HTML

1
2
3
4
<head>
  <title>My Javascript sandbox</title>
  <link rel="stylesheet" type="text/css" href="css/checkpoint_03.css">  
</head>

Notes

Now you see me, now you don't

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
function hideAndSeek(where)
{
  var petNumberInput = document.getElementById('petNumber');
  var petID = where + "_" + petNumberInput.value;
  var petP = document.getElementById(petID);

  if (petP.className != 'hidden')
  {
    petP.className = 'hidden';
  }
  else
  {
    petP.className = '';
  }
}

Notes

Now you see me, now you don't

Notes

Validating input - 1

Check if user has entered a number

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
function hideAndSeek(where)
{
  var petNumberInput = document.getElementById('petNumber');
  if (isNaN(petNumberInput.value))
  {
    alert('Please enter a number!')
    return;
  }
  ...
}

Notes

Validating input - 1

Notes

Validating input - 2

Try pressing the button without entering anything. Can you fix it?

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
function hideAndSeek(where)
{
  var petNumberInput = document.getElementById('petNumber');
  if (isNaN(petNumberInput.value) || petNumberInput.value === '')
  {
    alert('Please enter a number!')
    return;
  }
  ...
}

Notes

Validating input - 2

Notes

Validating input - 3

Try entering a pet number that doesn't exist. How do you fix it?

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
function hideAndSeek(where)
{
  ...
  var petID = where + "_" + petNumberInput.value;
  var petP = document.getElementById(petID);

  if (petP === null)
  {
    alert("Pet number doesn't exist!");
    return;
  }
  ...
}

Notes

Validating input - 3

Notes

We are almost at the end

What did we learn in this course?

  • HTML
    • h1, p, em, strong, img, a, ul, ol, table, div, input, button
  • CSS
    • Embedding in HTML
    • Selector syntax
    • RGB color code
    • Box Model
    • Using float and clear to create multi-column layout
    • Changing fonts, width
    • Using visibility to hide/unhide content

Notes

We are almost at the end

What did we learn in this course?

  • Javascript
    • Embedding in HTML
    • Accessing HTML elements by ID
    • Creating HTML elements and attach to page
    • for-loop, if-else, switch
    • Booleans, comparison operators and boolean operators
    • Functions, creating and calling
    • Arrays, creating and accessing elements
    • Events and event handlers
    • Changing CSS class programmatically
    • Validating user input

Notes

What next?

Javascript/HTML5 Game Development

Web Development, Intermediate Level

Notes

The END

Notes

Notes