General Assembly

Web development: breaking it down

By Chen Hui Jing / @hj_chen

General Assembly

Internet basics

What is the internet?

The entire network of networks that connect all the world's devices to each other

Undersea fibre-optic cable
Internet exchange point
Cell tower
Ethernet cables
End-user devices

How does the internet work?

Server Server Client Internet Service Provider Every device has a unique IP address Websites have domain names, like google.com DNS servers map IP addresses to domain names
nielsen.com facebook.com ISP Data is broken up into packets Routers direct packets around the internet

Internet ≠ World wide web

Internet World wide web
Estimated year of origin 1969 1993
Name of first version ARPAnet NSFnet
Comprises Network of devices, copper wires, fibre-optic cables and wireless networks Files, folders & documents stored in various computers
Governed by Internet Protocol (IP) Hypertext Transfer Protocol (HTTP)
Dependency None, everything else depends on it The internet
Nature Hardware Software
Source: Diffen

Protocols

A protocol is an agreed set of rules and standards that allow devices to communicate with each other.

Internet Protocol (IP) To route information to the proper address
Hypertext Transfer Protocol (HTTP) For the transmission of web pages over the internet
Transmission Control Protocol (TCP) To create packets, reassemble them, make sure none were lost in transmission
Simple Mail Transfer Protocol (SMTP) For computers to send email
Post Office Protocol (POP) For computers to receive email
File Transfer Protocol (FTP) For copying files over a network from one computer to another

General Assembly

About web development

What is web development?

The process of building websites

How to get started?

Your computer

  • This image is pure CSS.

A clear mind

A clear mind

Code is numbers, letters and symbols

Regardless of what programming language you use, all code can be read in any text editor.

Javascript

close: function () {
  this.ul.setAttribute("hidden", "");
  this.index = -1;

  $.fire(this.input, "awesomplete-close");
},

Code credit: Lea Verou

C

#include "8cc.h"
static int count_leading_ones(char c) {
  for (int i = 7; i >= 0; i--)
      if ((c & (1 << i)) == 0)
          return 7 - i;
  return 8;
}

Code credit: Rui Ueyama

Assembly

ctable	 segment para public 'DATA
  db	9 dup(' ')
  db	9,10,' ',12,13
  db	13 dup(' ')
  db	27
  db	4 dup(' ')
  db	' !"#$%&',39,'()*+,-./0123456789:;<=>?@'
  db	'ABCDEFGHIJKLMNOPQRSTUVWXYZ[\]^_`'

Code credit: Happy codings

General Assembly

Programming for the web

Front-end

Client-side

Back-end

Server-side

Feeling overwhelmed?

HTML and CSS are the foundation of the web

Basic technology stack

For structuring and presenting content For formatting the look of the web page For providing dyamic, interactive capabilities

General Assembly

Hypertext Mark-up Language (HTML)

Hypertext Mark-up Language (HTML)

  • Structures the document and tells browsers what a certain element's function is
  • Content is "marked-up" using tags
  • Tags usually (but not always) come in pairs,
    <p>This is an example of a paragraph element</p>
  • The opening tag, closing tag and everything in between is a HTML element

History of HTML

  • Invented by Tim Berners-Lee in 1989 as a means for easy linking of references in research papers using hypertext
  • Created the Hypertext Transfer Protocol (HTTP) for retrieving text from other documents via hypertext links
  • Specifications were introduced as a guide for standardisation among browser vendors

Structure of HTML document

<!DOCTYPE html>
<html>
  <head>
    <title>Example page</title>
  </head>
  <body>
    <h1>Hello world</h1>
  </body>
</html>

Document type element

<!DOCTYPE html>
  • Appears just above the <html> tag
  • Tells the browser to render the HTML in standards mode
  • Let's validation software know which version of HTML to validate against
  • Advised to use the HTML5 doctype

<html> element

<html lang="en">
// HTML code for web page
</html>
  • Represents the root of an HTML document
  • Encouraged to specify a language attribute
  • Language attribute aids speech synthesis (screen readers), translation tools and other language-related functionality

<head> element

<head>
  <meta charset="utf-8">
  <title>Your site title</title>
  <meta name="description" content="A short description of your website">
  <meta name="author" content="Your name">
  
  <link rel="stylesheet" href="css/styles.css?v=1.0">
</head>
  • Contains instructions for the browser and meta data for the website
  • Title and description are what shows up on search engine results
  • Stylesheets are also declared here

<body> element

<body>
  <header>
    <img src="img/logo.png" alt="Site logo">
    <nav>
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>
  </header>
  <main>
    <h1>Page header</h1>
    <p>Some content in a paragraph. Brownie tiramisu toffee sweet roll sesame snaps halvah. Fruitcake donut pie ice cream jujubes danish dragée. Bear claw jelly dessert lemon drops bonbon donut. Sugar plum sugar plum candy canes ice cream powder tootsie roll sweet. Sugar plum biscuit macaroon fruitcake cookie cupcake jelly-o cupcake. </p>
  <main>
</body>
  • Represents the main content of the document
  • Should only be one <body> element on a web page

Formatting your web page

  • <address>
  • <article>
  • <footer>
  • <header>
  • <h1>
  • <h2>
  • <h3>
  • <h4>
  • <h5>
  • <h6>
  • <hgroup>
  • <nav>
  • <section>
  • <dd>
  • <div>
  • <dl>
  • <dt>
  • <figcaption>
  • <figure>
  • <hr>
  • <li>
  • <main>
  • <ol>
  • <p>
  • <pre>
  • <ul>
  • <caption>
  • <col>
  • <colgroup>
  • <table>
  • <tbody>
  • <td>
  • <tfoot>
  • <th>
  • <thead>
  • <tr>
  • <button>
  • <datalist>
  • <fieldset>
  • <form>
  • <input>
  • <keygen>
  • <label>
  • <legend>
  • <meter>
  • <optgroup>
  • <option>
  • <output>
  • <progress>
  • <select>
  • <details>
  • <dialog>
  • <menu>
  • <menuitem>
  • <summary>
  • <abbr>
  • <b>
  • <bdi>
  • <bdo>
  • <br>
  • <cite>
  • <code>
  • <data>
  • <dfn>
  • <em>
  • <i>
  • <kbd>
  • <mark>
  • <q>
  • <rp>
  • <rt>
  • <rtc>
  • <ruby>
  • <s>
  • <samp>
  • <small>
  • <span>
  • <strong>
  • <sub>
  • <sup>
  • <time>
  • <u>
  • <var>
  • <wbr>
  • <area>
  • <audio>
  • <map>
  • <track>
  • <video>
  • <embed>
  • <object>
  • <param>
  • <source>
  • <canvas>
  • <noscript>
  • <script>
  • <del>
  • <ins>

Semantics and accessibility

  • To make the web easier to use and access, and available to everyone
  • Encompasses all disabilities, including visual, auditory, physical, speech, cognitive and neurological disabilities
  • Benefits people without disabilities as well
  • Accessible websites benefit from search engine optimisation (SEO)

Basic accessibility checklist (1/2)

  • Page title: To adequately and briefly describe the content of the page
  • Image text alternatives: To make visual information accessible
  • Headings: To provide meaningful hierarchy for facilitation of navigation
  • Contrast ratio: To have sufficient luminance contrast ratio, for people with different requirements
  • Resize text: To ensure visibility and usability as text size increases

Basic accessibility checklist (2/2)

  • Keyboard access & visual focus: To provide full functionality through a keyboard, and visible focus with logical order
  • Forms, labels & errors: To have proper labels, keyboard access, clear instructions, and effective error handling
  • Multimedia alternatives: To have alternative formats for audio and visual impaired

Visit Web Accessibility Initiative (WAI) to understand more about this important aspect of the web

General Assembly

Cascading Style Sheets (CSS)

Cascading Style Sheets (CSS)

  • Tells the browser how to display a certain element
  • Follows the general ruleset:
    1. Select the HTML element to be styled
    2. Specify the properties of the element to be styled
    3. Give the values we want each property to have

Structure of a CSS rule

selector {
  property1: value;
  property2: value;
  property3: value;
}
  • The selector identifies which HTML elements the rule will be applied to
  • The curly braces contain the property-value pairs, separated with semi-colons
  • The properties define the style of the selected element
  • The values are dependent on the property, and indicate the value of the properties to be set

Types of CSS selectors

  • Element: matches all the elements of that name on the page
    p {}
  • Class: matches all the elements with the specified class attribute, e.g. <div class="example">
    .example {}
  • ID: matches the element with the specified id attribute, e.g. <div id="example">
    #example {}

CSS Specificity

0-∞

Inline styles

0-∞

IDs

0-∞

Classes, attributes and pseudo-classes

0-∞

Elements and pseudo-elements

ul {
  // CSS properties
}

0, 0, 0, 1

.class-1 .class-2 p {
  // CSS properties
}

0, 0, 2, 1

#id-1 .class-3 div {
  // CSS properties
}

0, 1, 1, 1

General Assembly

Javascript

Javascript

  • A cross-platform, object-oriented scripting language
  • Can run directly in the browser, does not need to be compiled first
  • Allows greater control of web page behaviour
  • Is a full-fledged programming language, with operators, control structures and statements

Brief history of Javascript

  • Invented in 10 days by Brendan Eich of Netscape
  • Was taken to the European Computer Manufacturers Association (ECMA) for standardisation in 1996
  • Currently on the 6th edition, known as ECMAScript 2015, or ES6

Client-side vs Server-side

Client-side Javascript

  • Provides a means of controlling the browser and its Document Object Model
  • Examples are form validation, load more buttons, image galleries and so on

Server-side Javascript

  • Usually refers to node.js
  • Provides a customised response based on user (client) requests
  • For example, displaying your profile information after you logged in

What is an API?

  • Stands for Application Programming Interface
  • A means for your web page to access data from another source
  • Usually a URL, that when accessed, returns data in a standardised format (often, JSON)

Example weather API

// 20160211134054
// http://api.openweathermap.org/data/2.5/weather?id=1880251&appid=44db6a862fba0b067b1930da0d769e98

{
  "coord": {
    "lon": 103.8,
    "lat": 1.37
  },
  "weather": [
    {
      "id": 803,
      "main": "Clouds",
      "description": "broken clouds",
      "icon": "04d"
    }
  ],
  "base": "stations",
  "main": {
    "temp": 302.15,
    "pressure": 1010,
    "humidity": 74,
    "temp_min": 302.15,
    "temp_max": 302.15
  },
  "visibility": 10000,
  "wind": {
    "speed": 5.1,
    "deg": 30
  },
  "clouds": {
    "all": 75
  },
  "dt": 1455166800,
  "sys": {
    "type": 1,
    "id": 8145,
    "message": 0.0091,
    "country": "SG",
    "sunrise": 1455146219,
    "sunset": 1455189666
  },
  "id": 1880251,
  "name": "Republic of Singapore",
  "cod": 200
}

Web APIs

  • Give the browser and server the ability to perform many tasks
  • DOM is actually an API that allows access and modification of the web page
  • Device APIs let web developers access hardware features
  • Communication APIs let devices, applications and web pages talk to each other, e.g. web notifications, push etc.

General Assembly

Resources

To find out more...

Sign up for GA courses

General Assembly

THE END

Websitehttps://www.chenhuijing.com

Twitter@hj_chen

Medium@hj_chen

Codepen@huijing