O'Reilly logo

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Learn By Example: The Foundations of HTML, CSS & Javascript

Video Description

Closures, prototypes, JSON, the DOM, selectors, inheritance in CSS and in Javascript, and first-class functions

About This Video

  • This is a very good and productive course. The theoretical explanations of the topics are deep, useful and well-placed.
  • This is a great starter course for beginners. Also a good course to have in your library to come back from to freshen up on the latest HTML, CSS and JavaScript as is used in today’s modern websites.

In Detail

Closures, prototypes, JSON, the DOM, selectors, inheritance in CSS and in JavaScript, and first class functions - that's what this course is about. This is not a course on JavaScript frameworks - its about solid, fundamental HTML, CSS and JavaScript. You'll be surprised by how much more you can get done on your web pages once you learn these technologies the right way. Basic HTML: Folks stopped counting HTML as a language worth formally learning sometime in the 90s, but this is only partially justified. It always helps to have strong basics. CSS: Cascading Stylesheets are incredibly powerful, and incredibly hard to use - until you know how they really work. Once you understand inheritance and selection in CSS, it will all make a lot more sense. JavaScript is a full-fledged, powerful and complicated language. Its really important to learn JavaScript formally, because it is just so different from most other languages you would have encountered. For instance - JavaScript has objects and inheritance but no classes. Closures in JavaScript are a rather mind-bending concept - functions that "remember" how the world looked when they were created. Prototypes are JavaScript's way of doing inheritance, and its very different from the C++/Java way of doing it. JSON is not conceptually difficult to use, but it is incredibly important, and you should understand why - because its the glue between backends written in Java or other traditional languages, and front-ends written in JavaScript. The Document-Object-Model is what ties JavaScript back to HTML and CSS. Together with JSON, the DOM ties it all together from server to skin.

Table of Contents

  1. Chapter 1 : Welcome to HTML, CSS and Javascript!
    1. Welcome to HTML, CSS and JavaScript! 00:02:19
  2. Chapter 2 : Introducing HTML and CSS
    1. Introducing HTML and CSS 00:09:07
    2. Introduction to HTML 00:12:25
    3. Introduction to CSS 00:06:35
    4. The A Tag 00:08:09
    5. Paths 00:05:31
    6. Quotes 00:06:24
    7. Lists - Ordered and Unordered 00:07:44
    8. Other Miscellaneous HTML Tags 00:02:24
    9. URL and Domain Names 00:10:53
    10. The img Tag 00:10:30
    11. The HTML Standard 00:03:09
  3. Chapter 3 : CSS
    1. Cascading Stylesheets reintroduced 00:08:15
    2. Inheritance in CSS 00:07:20
    3. CSS Selectors 00:09:51
    4. Fonts 00:10:00
    5. Colors 00:03:30
    6. The Box Model 00:11:46
    7. The <div> Element 00:07:47
    8. What is the exact style applied? 00:08:13
    9. The <span> Element 00:02:47
    10. HTML States and Pseudo-classes 00:02:50
    11. Normal Rendering Flow Of The Browser 00:15:00
    12. The CSS float and clear properties 00:09:42
    13. Experimenting with the position attribute 00:12:24
    14. Fluid And Fixed Layouts 00:08:58
    15. The CSS display property 00:07:59
    16. Chrome Developer Tools 00:15:46
  4. Chapter 4 : JavaScript Basics
    1. Introducing JavaScript 00:15:37
    2. Example 1: Executing JavaScript code 00:04:14
    3. Example 2: Basic programming constructs 00:07:30
    4. Example 3: Separating HTML and JS files 00:10:17
    5. Example 4: Using the console.log statement 00:06:21
    6. Example 5: Local and global variables 00:16:08
    7. Example 6: Undeclared variables in JS are global 00:07:47
    8. Example 7: Local variables hide global variables of the same name 00:05:43
    9. Example 8: JavaScript is ephemeral, reloading a page resets everything 00:04:19
    10. Example 9: Creating and using arrays 00:14:39
    11. Example 10: Copying an array 00:13:56
    12. Example 11: Adding an element to an array 00:05:59
    13. Example 12: Deleting elements from an array 00:08:09
    14. Example 13: Arrays can contain different types 00:00:57
    15. Example 14: Non-existent array elements are undefined 00:06:32
    16. First class functions 00:06:32
  5. Chapter 5 : Objects in Javascript
    1. Introduction to JavaScript objects 00:10:58
    2. Example 15: Creating an object using JSON 00:08:13
    3. Example 16: Creating an object using a constructor 00:15:51
    4. Example 17: Adding properties to objects dynamically 00:11:58
    5. Example 18: Removing properties from objects dynamically 00:03:05
    6. Example 19: Object properties can be functions 00:07:34
    7. Example 20: Object constructors can have property functions 00:02:46
    8. Example 21: Two ways of accessing object properties 00:06:41
    9. Example 22: Iterating over all properties in an object 00:04:55
    10. Example 23: Calling a constructor without new 00:10:02
    11. Example 24: Understanding the typeof operator 00:06:12
    12. Example 25: Paternity tests using instanceof 00:05:37
    13. Example 26: Faking public and private properties 00:10:25
  6. Chapter 6 : First Class Functions - In Detail
    1. Example 27: Functions as arguments to functions 00:12:36
    2. Example 28: Functions that return functions 00:08:39
    3. Example 29: Arguments pass by value to functions 00:07:32
    4. Example 30: Arguments pass by reference 00:15:43
  7. Chapter 7 : Javascript Quirks
    1. Introduction to JavaScript Quirks 00:06:13
    2. Example 31: Understanding undefined 00:11:28
    3. Example 32: Understanding null 00:13:58
    4. Example 33: Understanding NaN 00:08:59
    5. Example 34: Strings and numbers and conversions between them 00:10:41
    6. Example 35: Strange comparison operators 00:10:51
    7. Example 36: Truthy and falsy 00:06:59
    8. Example 37: Simple string operations 00:14:09
  8. Chapter 8 : Functions Yet Again
    1. Example 38: Declared Functions, Function Literals and Hoisting 00:15:47
    2. Example 39: Named And Anonymous Function Literals 00:07:24
    3. Example 40: Nested Functions 00:15:05
    4. Example 41: Nested functions can be declared 00:06:54
  9. Chapter 9 : Closures
    1. Introduction to closures 00:18:42
    2. Example 42: Closure variables win over local variables 00:08:51
    3. Example 43: Closures with declared functions and function literals 00:02:28
    4. Example 44: Referencing environment with function parameters 00:05:43
    5. Example 45: Closure variables cooler than global variables 00:13:38
  10. Chapter 10 : Prototypes, Dynamic Prototyping and Inheritance
    1. Introduction to prototypes 00:06:41
    2. Example 46: Prototypical Inheritance In Action 00:08:10
    3. Example 47: Dynamic Prototyping 00:04:20
    4. Example 48: Inheritance hierarchy using chained prototypes 00:05:40
    5. Example 49: Overriding properties using prototypes 00:06:53
    6. Example 50: The base object as the ultimate prototype 00:04:33
    7. Example 51: Overriding properties of built-in objects 00:02:54
  11. Chapter 11 : The Document Object Model & Event Handling
    1. Introduction to the Document Object Model 00:12:31
    2. Example 52: Modifying the HTML of a page using the DOM 00:04:07
    3. Example 53: Event Handling 00:05:45
    4. Example 54: Adding Multiple Event Handlers on the Same Event 00:03:38
    5. Example 55: Setting Arbitrary HTML Attributes 00:04:29
    6. Example 56: The window object 00:04:48
  12. Chapter 12 : JSON
    1. Introduction To JSON 00:14:31
    2. Example 57: Simple JSON Use Cases 00:03:01
    3. Example 58: Creating meaningful objects with JSON 00:03:10