Introduction
  • Before starting! please read me.
  • Welcome and overview of the technologies we'll deal with
  • Chrome, the browser we'll use during this course
  • Development tools: the Editor
  • Installing Sublime Text 3 (Mac)
  • Installing Sublime Text 3 (Windows)
  • Installing Sublime Text 3 (Linux)
  • Advanced Topic: Running Sublime from the command line (Mac OSX)
  • Advanced Topic: Sublime: Adding support for external plugins
HTML Foundations
  • Prologue: how a webserver works
  • What is HTML
  • Structure of a HTML page
  • Structure of a HTML tag
  • HTML and Tags: got it ?
  • Let's start coding! our first html file!!
  • Let's move it to the cloud with jsBin!
  • The Html page, the Head and the Body
  • Page Title, Headers and paragraphs
  • Div and Span, block and inline elements
  • Quick recap and an introduction to the DOM
  • Inline and Block level Elements
Semantic HTML
  • More semantic tags: section, article, header and footer
  • Navigating relationships with the anchor tag
  • Form tags
  • Form tags - continued
  • Presenting a list of elements: the list tags
  • Working with tabular data
  • Displaying Images
  • More semantic with Nav and Aside
  • HTML Workshop: mini website
  • Semantic tags
CSS
  • What is CSS
  • Inline, internal or external styles
  • CSS properties and measures
  • The ID and Class attributes
  • Id and class selectors
  • The element selector
  • The attribute selector
  • Why do we need more selectors ?
  • Relationship selectors
  • Pseudo-class selectors
  • CSS Box positioning
  • The specificity rule
  • Tree proximity ignorance
  • An !important exception to the rule
  • Text and Font properties
  • Color properties
  • A note on inheritance
  • Element boundaries: borders, margins, padding and corners
  • The CSS Box Model
  • How inline and block level elements deal with dimensions
  • Quick recap on box positioning
  • Floating elements
  • Clearing floats
  • Quick recap on floating and clearing
HTML and CSS Workshop: From a PSD to HTML/CSS!
  • Resources for this section
  • Start and custom Fonts
  • Header
  • Header (part 2)
  • Footer
  • Main visual
  • Claims
  • Portfolio
  • Addendum: Fixing errata in Porfolio lecture
  • A few final touches
Javascript quickstart
  • A programming language for the Web
  • A note about Javascript and HTML rendering in the browser
  • Our first running code
  • Variables: a place to put things in
  • Variable declaration and value
  • Basic data types and operators
  • The type of a variable
  • Functions
  • Functions in practice
  • Library and API
  • The Return statement
  • Variable scope
  • Let's talk about Objects
  • The Object context
  • Assignments by value or reference
  • Another way to create an Object (or to skin a cat)
  • The function Prototype
  • The function Prototype workshop
  • Strings.. revisited
  • Function Callbacks
  • Arrays and implicit iteration
  • Conditional statements
  • Explicit iteration with the for loop
The browser environment: the DOM
  • Javascript and the DOM
  • Let's create some HTML using Javascript!
  • DOM Events
  • DOM Event handling exercise (part 1)
  • DOM Event handling exercise (part 2)