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

HTML, CSS and Javascript are the 3 cornerstones of web programming.

HTML specifies the structure of a web page and CSS how the page looks i.e. the presentation.

Plunge right in, set up a simple page and get introduced to a whole bunch of HTML tags.

What's an HTML page without style? Get to know the HTML <style> tag and how it can be used to specify style properties to make your pages look good.

The internet is all about links. Who links to you and who do you link to? In this lecture we'll learn how we link to others using the <a> tag and its href attribute.

Paths in HTML can reference resources on our server as well as resources anywhere on the web. Relative paths are relative to the location of the HTML file and absolute paths can access resources on any server.

HTML provides a whole bunch of quote tags. Learn about the <q> and the <blockquote> tags and why we would use them over specifying quotes ("") in text.

Bulleted lists and numbered lists. HTML has special <ul> and <ol> tags to specify these. Each list item in an <li> tag should go with either an un-ordered list (<ul>) or an ordered list (<ol>).

The <em>, <time>, <strong> and <code> tags.

Understand the different parts of a domain name and what they represent. Revisit the <a> tag and learn some more about how we can open up a new web page in a new window, tab etc.

The <img> tag allows you to embed inline images in your page. You can also resize images using the height and width attribute of the <img> tag.

HTML is a living standard now. No more version numbers and everything will be backward compatible from here on in. This is a pretty big deal!

Get re-introduced to CSS and see how CSS files are set up separately from the HTML and linked to the HTML page. It's good practice to separate the CSS and HTML files so both can be worked on separately.

CSS styles inherit from the parent element, or do they? CSS inheritance is tricky and it's important to know how a certain style is applied on an element. This lecture should have the answers.

How do you apply styles to specific HTML elements? You select them. How do you select them? By specifying the tag, a CSS class or their unique identifier.

Understanding sans-serif fonts, fallback options on a webpage, using fonts from free services such as Google etc.

How to change text color, background colors and specify colors using their hex code.

Understand margins, padding and borders and where exactly they apply. They form the CSS box model which has tripped up many an aspiring web developer.

The <div> is a block element which is used to logically group HTML elements. The logical components can then be styled together.

Figure out why the "cascade" exists in Cascading Stylesheets.

The <span> allows logical grouping of inline elements and is a perfect partner to <div>.

CSS allows you to apply styles to not just HTML elements but also specific states of an element. The :hover, :focus, :link are all examples of states of a particular element.

Normal Rendering Flow Of The Browser

The CSS float and clear properties.

Understand the CSS position attribute and how it works.

Fluid layouts allow the elements of a page to move as the page resizes, but you might not want them to! Then you'd choose the fixed layout.

The display property can make block elements behave like inline elements, make elements disappear and whole bunch of other stuff.

Chrome Developer Tools

If HTML is the skeleton and CSS is the skin, then Javascript is the brain of web applications.

A simple Javascript example explained, take in user input and display it to the user in a pop up window.

You can link the <script> tags to standalone JS files. JS is usually separated out into a completely different file in production systems.

Chrome developer tools offers a very cool way to print out statements on the developer console. Use this to see the result of your JS code.

Javascript variables can be local to a scope or global to the entire program.

If you leave out the var keyword the variable is undeclared and undeclared variables default to global. Always declare your JS variables.

A local variable takes precedence over a global variable of the same name.

Javascript variables hold their value only as long as the current page is loaded. A page refresh re-initializes all global variables.

Arrays in JS are super easy to create and use.

Shallow copies and deep copies of an array, what they mean and how they work.

Use array.push() to append new elements to the end of an array.

Use array.splice() to remove elements from an array.

Javascript is not strongly typed, which means you can mix and match elements of different types in the same array.

Accessing non-existent elements in arrays is not an error in Javascript. It simply returns undefined.

Functions are first class citizens, they can be assigned to variables, returned from functions and passed as an argument into functions.

Where do you write Javascript code? In <script> tags on the HTML page.

Javascript objects are very different from C++ and Java objects! It's quite a paradigm change if you've programmed in other languages before.

JSON can be used as a textual representation of a JS object. You can construct an object using JSON notation.

Object constructors are just functions with two specific differences. The use of the magical keyword "this" within the constructor and the use of the magical keyword "new" to create an object from the constructor

You can add properties to an object after it's been constructed on the fly! Pretty mind-bending for programmers from other object oriented languages.

You can also remove properties from objects after they have been constructed. Again not allowed in traditional object oriented languages!

Functions are first class citizens in Javascript which means that object properties can be function as well.

Object properties defined in constructors can be functions as well! Again because functions are first class citizens.

Properties of objects can be accessed using the dot "." notation as well as the square brackets "[]" notation. They are essentially the same.

A special for loop exists to loop over object properties. Every object supports this thanks to the base Object class!

Bad things happen when you call an object constructor without the new keyword.

The typeof operator tells you whether a variable is a number, string, object or undefined. It cannot differentiate between different types of objects though.

Use the instanceof operator to figure out what constructor was used to create an object. This only recognizes where the object came from, it does not know what changes were made to the object after it was constructed.

Properties are public by default, however it's often useful to have private properties. These are not natively supported in JS but we can fake them.

First class functions mean that we can pass them as arguments to functions.

Arrays and objects are pass by reference, this means that modifications within functions are reflected in the calling code. But not reassignments! What's the difference? This lecture explains it all.

Functions that return functions

Arguments pass by value to functions

Introduction to Javascript Quirks

Ahh finally - what exact is undefined? It means an absence of a value.

Null unlike undefined is a special value with a type object.

This weird JS quirk causes many headaches, if it's NaN it's not a number.

The == causes conversions between numbers and strings with strange results. These can trip up even the most experienced programmer.

The == is the quality operator and === is the strict equality operator. Knowing the difference can save you trouble down the road.

Cute names to describe strings or numbers which are evaluated to true or false using the equality (==) operator.

Strings are actually objects and are immutable. What does that mean? This lecture explains it all.

Two types of function declarations in JS, declared functions and function literals. The names are intimidating but the concepts simple. They behave the same way except for one teeny tiny thing.

Named And Anonymous Function Literals

Functions declared within another are nested functions, these form the foundation of closures.

Nested functions need not only be function literals, they can be declared as well.

Closures are mind-bendingly awesome. Each function carries around with it the context in which it was created!

Closure variables have precedence over local as well as global variables. You can't control the value of a variable that a nested functions sees!

Closures with declared functions and function literals

The function parameters of the outer function also form part of the referencing environment in the closure.

Closure variables cooler than global variables

Javascript supports inheritance, but it does so in a very different way - using prototypes. The key is the prototype property that all object constructors possess. How can a function have a property? Why, because functions are objects of course!

Let's plunge into our first example of prototypical inheritance, and understand the prototype keyword.

An object's prototype can change on the fly - this is called Dynamic Prototyping, and this can lead to some pretty surprising effects in Javascript

A chain of inheritance can be implemented via prototypes - the Javascript interpreter will walk up the hierarchy until it can resolve a property.

You can use the prototype keyword to override a property of all objects! Its a lot more powerful than simply overriding a property on a single object.

Javascript has a prototype Object, from which all objects derive. In this sense its exactly like Java (of course the mechanism of inheritance is very different in Javascript)

Did you know that its possible to override properties even of built-in object types, such as strings? Do so with care!

The browser parses the HTML of a page, and builds a nice tree, called the DOM. This DOM can be used from within your javascript code to access HTML elements via Javascript objects. Its super-cool!

The power of the DOM lies in how Javascript utilises it to modify the HTML of a webpage.

Not only can Javascript modify the HTML using the DOM - it can also react to user actions, such as button clicks, via event handlers!

There is an easy way to have specify multiple event listeners on the same event.

Let's check out how to set the src attribute of an image tag

You can always access the browser via the window object - but be careful what you do with it! The window object is carefully circumscribed by browser security rules, but you can use it to open new browser windows or redirect to a new page (do so with care, its poor ettiquette!)

JSON is a simple way to create an object from a string. Its full power lies in its simplicity, and in the fact that server-side code, which maybe in Java or C++, can communicate with a client in Javascript. This is huge.

JSON can be used to create virtually anything - strings, numbers, booleans, empty objects, arrays.

JSON can be used to create arbitrarily complex objects - see how.