Data PRO or Pay-Per-Course

Pick a plan that right's for you!

Pay per course or a flat monthly subscription with no contracts. Become a Data PRO and get access to all data engineering, analytics and data science courses.
Explore Data PRO

Course curriculum

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

Course Description

What will I 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


About the course

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.

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.

What's Covered

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


Who should take the course?

  • Yep! Folks who are absolutely new to web programming, and wish to learn HTML and CSS from scratch
  • Yep! 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
  • Yep! Java, C#, Python or C++ programmers who are looking to master Javascript
  • Nope! This class is not right for you if you are looking to learn Javascript frameworks such as JQuery, Angular or Node.js


Pre-requisites & 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

Become a Data PRO

Subscribe to Data PRO plan and get access to all the courses.

Get started now