Learn By Example: The Foundations of HTML, CSS & Javascript
4.7 (81 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
1,926 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Learn By Example: The Foundations of HTML, CSS & Javascript to your Wishlist.

Add to Wishlist

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

Closures, prototypes, JSON, the DOM, selectors, inheritance in CSS and in Javascript, and first class functions
4.7 (81 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
1,926 students enrolled
Created by Loony Corn
Last updated 1/2017
English
English
Current price: $10 Original price: $50 Discount: 80% off
5 hours left at this price!
30-Day Money-Back Guarantee
Includes:
  • 13 hours on-demand video
  • 176 Supplemental Resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
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
View Curriculum
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
Description

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 Included:

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


Using discussion forums

Please use the discussion forums on this course to engage with other students and to help each other out. Unfortunately, much as we would like to, it is not possible for us at Loonycorn to respond to individual questions from students:-(

We're super small and self-funded with only 2 people developing technical video content. Our mission is to make high-quality courses available at super low prices.

The only way to keep our prices this low is to *NOT offer additional technical support over email or in-person*. The truth is, direct support is hugely expensive and just does not scale.

We understand that this is not ideal and that a lot of students might benefit from this additional support. Hiring resources for additional support would make our offering much more expensive, thus defeating our original purpose.

It is a hard trade-off.

Thank you for your patience and understanding!

Who is the target audience?
  • 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
Students Who Viewed This Course Also Viewed
Curriculum For This Course
94 Lectures
13:11:28
+
Welcome to HTML, CSS and Javascript!
1 Lecture 02:18

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

Preview 02:18
+
HTML
11 Lectures 01:24:21

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

Preview 09:15

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

Preview 12:33

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.

Preview 06:43

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.

The A Tag
08:18

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.

Paths
05:39

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.

Preview 06:33

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

Lists - Ordered and Unordered
07:52

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

Other Miscellaneous HTML Tags
02:32

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.

URL and Domain Names
11:01

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.

The img Tag
10:38

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!

The HTML Standard
03:17
+
CSS
16 Lectures 02:23:30

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.

Cascading Stylesheets reintroduced
08:23

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.

Preview 07:28

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.

CSS Selectors
09:59

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

Fonts
10:08

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

Colors
03:38

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 Box Model
11:54

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

Preview 07:55

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

What is the exact style applied?
08:21

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

The <span> Element
02:55

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.

Preview 02:59


The CSS float and clear properties.

The CSS float and clear properties
09:42

Understand the CSS position attribute and how it works.

Experimenting with the position attribute
12:23

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.

Fluid And Fixed Layouts
08:58

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

The CSS display property
08:02

+
Javascript Basics
16 Lectures 02:18:42

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

Preview 15:36

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

Preview 05:58

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

Example 2: Basic programming constructs
07:30

You can link the <script> tags to standalone JS files. JS is usually separated out into a completely different file in production systems.
Example 3: Separating HTML and JS files
10:16

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.

Example 4: Using the console.log statement
06:21

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

Example 5: Local and global variables
16:08

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

Example 6: Undeclared variables in JS are global
07:46

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

Example 7: Local variables hide global variables of the same name
05:42

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

Example 8: Javascript is ephemeral, reloading a page resets everything
04:19

Arrays in JS are super easy to create and use.

Preview 14:39

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

Example 10: Copying an array
13:56

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

Example 11: Adding an element to an array
05:58

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

Example 12: Deleting elements from an array
08:08

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

Example 13: Arrays can contain different types
03:22

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

Example 14: Non-existent array elements are undefined
06:32

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

Preview 06:31
+
Objects in Javascript
13 Lectures 01:44:11

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

Preview 10:58

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

Example 15: Creating an object using JSON
08:12

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

Example 16: Creating an object using a constructor
15:51

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.

Example 17: Adding properties to objects dynamically
11:58

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

Example 18: Removing properties from objects dynamically
03:05

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

Example 19: Object properties can be functions
07:33

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

Example 20: Object constructors can have property functions
02:46

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

Preview 06:40

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

Example 22: Iterating over all properties in an object
04:54

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

Example 23: Calling a constructor without new
10:02

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

Example 24: Understanding the typeof operator
06:12

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.

Example 25: Paternity tests using instanceof
05:36

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.

Example 26: Faking public and private properties
10:24
+
First Class Functions - In Detail
4 Lectures 44:26

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

Example 27: Functions as arguments to functions
12:35

Example 28: Functions that return functions
08:38

Numbers and strings are pass by value, which means that any modifications to their values in the functions are not reflected in the calling code.

Preview 07:31

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.

Example 30: Arguments pass by reference
15:42
+
Javascript Quirks
8 Lectures 01:23:15
Introduction to Javascript Quirks
06:13

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

Preview 11:28

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

Example 32: Understanding null
13:58

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

Example 33: Understanding NaN
08:58

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

Example 34: Strings and numbers and conversions between them
10:40

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

Example 35: Strange comparison operators
10:51

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

Example 36: Truthy and falsy
06:58

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

Example 37: Simple string operations
14:09
+
Functions Yet Again
4 Lectures 45:09

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.

Example 38: Declared Functions, Function Literals and Hoisting
15:47

Example 39: Named And Anonymous Function Literals
07:23

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

Preview 15:05

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

Example 41: Nested functions can be declared
06:54
+
Closures
5 Lectures 49:21

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

Preview 18:42

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!

Example 42: Closure variables win over local variables
08:51

Example 43: Closures with declared functions and function literals
02:27

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

Example 44: Referencing environment with function parameters
05:43

Example 45: Closure variables cooler than global variables
13:38
+
Prototypes, Dynamic Prototyping and Inheritance
7 Lectures 39:40

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!

Preview 06:45

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

Preview 08:14

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

Example 47: Dynamic Prototyping
04:24

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

Example 48: Inheritance hierarchy using chained prototypes
05:44

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.

Example 49: Overriding properties using prototypes
06:58

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)

Example 50: The base object as the ultimate prototype
04:37

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

Example 51: Overriding properties of built-in objects
02:58
2 More Sections
About the Instructor
Loony Corn
4.3 Average rating
4,968 Reviews
38,895 Students
77 Courses
An ex-Google, Stanford and Flipkart team

Loonycorn is us, Janani Ravi and Vitthal Srinivasan. Between us, we have studied at Stanford, been admitted to IIM Ahmedabad and have spent years  working in tech, in the Bay Area, New York, Singapore and Bangalore.

Janani: 7 years at Google (New York, Singapore); Studied at Stanford; also worked at Flipkart and Microsoft

Vitthal: Also Google (Singapore) and studied at Stanford; Flipkart, Credit Suisse and INSEAD too

We think we might have hit upon a neat way of teaching complicated tech courses in a funny, practical, engaging way, which is why we are so excited to be here on Udemy!

We hope you will try our offerings, and think you'll like them :-)