The Foundations of HTML, CSS & Javascript : Learn by example

About Course

•  

  Closures, prototypes, JSON, the DOM, selectors, inheritance in CSS and in Javascript, and first class functions - that's what this course is about.

   

  What do we mean by that?

  • Relatively few folks formally learn HTML, CSS or Javascript, because its quite easy to get stuff done in these technologies in a "quick-and-dirty way".

  • 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 way

  • This 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.

Topics covered in this course

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

What you will get from this course?

• • 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

Who should buy this course?

• • Folks who are absolutely new to web programming, and wish to learn HTML and CSS from scratch
  • Folks who are seeking to learn Javascript the right way - including folks who may done some Javascript programming, but are not quite confident using advanced features such as closures or dynamic prototyping
  • Java, C#, Python or C++ programmers who are looking to master Javascript
  • This class is not right for you if you are looking to learn Javascript frameworks such as JQuery, Angular or Node.js

  What are the requirements?

  • Any modern browser and a simple text editor are all that will be needed for the code examples
  • Some prior programming experience will definitely help in the advanced Javascript portions - if you are entirely new to programming, the second half of the Javascript section will seem very challenging