Technology Fundamentals

David Dao @daviddao_

David Dao @daviddao_

Before we begin:

  • HTML, CSS and SVG examples are all in JS Bin, which you can click and edit to play with

  • You can also use the inspector (⌘⎇I in Chrome) to inspect examples

  • Also use Javascript console (⌘⎇J in Chrome) to try Javascript code examples.

David Dao @daviddao_

HTML

Hypertext Markup Language

David Dao @daviddao_

Hypertext Markup Language (HTML)


• Markup language, not a programming language.

• Provides instruction on how to render a page.

• HTML is consists of elements built with start tags and end tags.

• Start tag example: <head>
• End tag example: </head>
• Element example: <head> .... (stuff goes here) .... </head> 

David Dao @daviddao_

HTML 

Basics 
HTML is designed for marking up text by adding tags such as <p> to create HTML elements. HTML tags begin with < and end with >. Tags often occur in pairs of opening and closing tags. Some tags such as <img> always occur alone. Those tags usually (but not required to) have trailing slash. 

Tags can have attributes. For example, <a> tag has href attribute for defining link target. Similarly, <img> tag has src attribute for defining image source.

Plain Text

David Dao @daviddao_

Use HTML to Markup

html, body, h1, p, strong, em, a, img

David Dao @daviddao_

David Dao @daviddao_

Use HTML to Markup

<div> , <span>

David Dao @daviddao_

David Dao @daviddao_

David Dao @daviddao_

CSS

Cascading Style Sheets

David Dao @daviddao_

David Dao @daviddao_

David Dao @daviddao_

Query the DOM Tree

David Dao @daviddao_

CSS: Boxmodel

David Dao @daviddao_

CSS: Position

David Dao @daviddao_

David Dao @daviddao_

CSS is powerful

David Dao @daviddao_

SVG

Scalable Vector Graphics

David Dao @daviddao_

Basic SVG Elements (With CSS)

David Dao @daviddao_

SVG Polygone, PolylinE

David Dao @daviddao_

SVG Groups : Basic Transforms

translation, title

David Dao @daviddao_

SVG Groups : More Transforms

rotate, scale, skewX, skewY

David Dao @daviddao_

Learn more about SVG

SVG: No-Layer

Painter's Algorithm: any pixel-paint applied later obscure any earlier paint and therefore appear to be "in front".

Text, Gradient, Patterns, Clip Mask, Image

David Dao @daviddao_

JavaScript

David Dao @daviddao_

David Dao @daviddao_

Made with Slides.com