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

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

English | MP4 | AVC 1280×720 | AAC 44KHz 2ch | 13h 03m | 2.99 GB

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

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.

That “quick-and-dirty” way of learning and doing leads to problems over time, because Javascript and CSS are actually quite complex, so it is easy to do things the wrong wayThis course will help, because it has 75 examples, 20 in HTML/CSS and 55 in Javascript. Each is self-contained, has its source code attached, and gets across a simple, specific use-case. Each example is simple, but not simplistic.

What You Will Learn

  • Understand HTML – its structure, and the commonly used tags
  • Utilise CSS, including inheritance, selectors, the box model – the very topics that make CSS hard to use
  • Master the fundamentals of JavaScript
  • Use closures, dynamic prototyping, JSON, and the Document-Object-Model with confidence
Table of Contents

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