Learn By Example: The Foundations of HTML, CSS & Javascript [Video]
-
Free ChapterWelcome to HTML, CSS and Javascript!
-
Introducing HTML and CSS
-
CSS
- Cascading Stylesheets reintroduced
- Inheritance in CSS
- CSS Selectors
- Fonts
- Colors
- The Box Model
- The <div> Element
- What is the exact style applied?
- The <span> 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
-
JavaScript Basics
- Introducing JavaScript
- Example 1: Executing JavaScript code
- Example 2: Basic programming constructs
- 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
-
Objects in Javascript
- 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 typeof operator
- Example 25: Paternity tests using instanceof
- Example 26: Faking public and private properties
-
First Class Functions - In Detail
-
Javascript Quirks
-
Functions Yet Again
-
Closures
-
Prototypes, Dynamic Prototyping and Inheritance
- 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
-
The Document Object Model & Event Handling
-
JSON
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.
Style and Approach
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.
- Publication date:
- February 2018
- Publisher
- Packt
- Duration
- 13 hours 03 minutes
- ISBN
- 9781789132052