HTML, CSS & JavaScript Foundations

$25.00

Learn the language used behind every website! ’The Foundations of HTML, CSS & JavaScript’ training course teaches you about closures, prototypes, JSON, the DOM, selectors, inheritance in CSS and in Javascript, and first class functions. This is not a course on JavaScript frameworks – it’s 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.

Length: 13 hrs 11 min

This title is available in the
Total Training All-Access library.

Subscribe Now

Description

Get started writing code and creating your own websites today! This HTML, CSS & JavaScript Foundations course gives you the skills you need to write code efficiently. Designed for the inexperienced, this course provides a great background in a range of popular web coding frameworks that will facilitate the learning of other languages in the future. This course is a perfect prerequisite to our  jQuery: Learn by Example course.

With HTML, CSS & JavaScript Foundations, you’ll learn:

  • Understand HTML – its structure, and the commonly used tags
  • Utilize 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
  • Gain an understanding of HTML, its structure, and the tags that are commonly used

Who is This Course For?

  • 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

Sample clip

 

CHAPTER 01: WELCOME TO HTML, CSS, AND JAVASCRIPT!
1.     Introduction

CHAPTER 02: HTML
1.     Introducing HTML and CSS
2.     Introduction to HTML
3.     Introduction to CSS
4.     The A Tag
5.     Paths
6.     Quotes
7.     Lists – Ordered and Unordered
8.     Other Miscellaneous HTML Tags
9.     URL and Domain Names
10.  The img Tag
11.  The HTML Standard

CHAPTER 03: CSS
1.     Cascading Stylesheets reintroduced
2.     Inheritance in CSS
3.     CSS Selectors
4.     Fonts
5.     Colors
6.     The Box Model
7.     The <div> element
8.     What is the exact style applied?
9.     The <span> Element
10.  HTML States and Pseudo-classes
11.  Normal Rendering Flow of The Browser
12.  The CSS float and clear properties
13.  Experimenting with the position attribute
14.  Fluid and Fixed Layouts
15.  The CSS display property
16.  Chrome Developer Tools

CHAPTER 04: JAVASCRIPT BASICS
1.     Introducing JavaScript
2.     Example 1: Executing JavaScript code
3.     Example 2: Basic programming constructs
4.     Example 3: Separating HTML and JS files
5.     Example 4: Using the console.log statement
6.     Example 5: Local and global variables
7.     Example 6: Undeclared variables in JS are global
8.     Example 7: Local variables hide global variables of the same name
9.     Example 8: JavaScript is ephemeral, reloading a page resets everything
10.  Example 9: Creating and using arrays
11.  Example 10: Copying an array
12.  Example 11: Adding an element to an array
13.  Example 12: Deleting elements from an array
14.  Example 13: Arrays can contain different types
15.  Example 14: Non-existent array elements are undefined
16.  First class functions

CHAPTER 05: OBJECTS IN JAVASCRIPT
1.     Introduction to JavaScript objects
2.     Example 15: Creating an object using JSON
3.     Example 16: Creating an object using a constructor
4.     Example 17: Adding properties to objects dynamically
5.     Example 18: Removing properties from objects dynamically
6.     Example 19: Object properties can be functions
7.     Example 20: Object constructors can have property functions
8.     Example 21: Two ways of accessing object properties
9.     Example 22: Iterating over all properties in an object
10.  Example 23: Calling a constructor without new
11.  Example 24: Understanding the typeof operator
12.  Example 25: Paternity tests using instanceof
13.  Example 26: Faking public and private properties

CHAPTER 06: FIRST CLASS FUNCTIONS – IN DETAIL
1.     Example 27: Functions as arguments to functions
2.     Example 28: Functions that return functions
3.     Example 29: Arguments pass by value to functions
4.     Example 30: Arguments pass by reference

CHAPTER 07: JAVASCRIPT QUIRKS
1.     Example 31: Understanding undefined
2.     Example 32: Understanding null
3.     Example 33: Understanding NaN
4.     Example 34: Strings and numbers and conversions between them
5.     Example 35: Strange comparison operators
6.     Example 36: Truthy and falsey
7.     Example 37: Simple string operations

CHAPTER 08: FUNCTIONS YET AGAIN
1.     Example 38: Declared Functions, Function Literals and Hoisting
2.     Example 39: Named and Anonymous Function Literals
3.     Example 40: Nested Functions
4.     Example 41: Nested functions can be declared

CHAPTER 09: CLOSURES
1.     Introduction to closures
2.     Example 42: Closure variables win over local variables
3.     Example 43: Closures with declared functions and function literals
4.     Example 44: Referencing environment with function parameters
5.     Example 45: Closure variables cooler than global variables

CHAPTER 10: PROTOTYPES, DYNAMIC PROTOTYPING, AND INHERITANCE
1.     Introduction to prototypes
2.     Example 46: Prototypical Inheritance In Action
3.     Example 47: Dynamic Prototyping
4.     Example 48: Inheritance hierarchy using chained prototypes
5.     Example 49: Overriding properties using prototypes
6.     Example 50: The base object as the ultimate prototype
7.     Example 51: Overriding properties of built-in objects

CHAPTER 11: THE DOCUMENT OBJECT MODEL AND EVENT HANDLING
1.     Introduction to the Document Object Model
2.     Example 52: Modifying the HTML of a page using the DOM
3.     Example 53: Event Handling
4.     Example 54: Adding Multiple Event Handlers on the Same Event
5.     Example 55: Setting Arbitrary HTML Attributes
6.     Example 56: The window object

CHAPTER 12: JSON
1.     Introduction To JSON
2.     Example 57: Simple JSON Use Cases
3.     Example 58: Creating meaningful objects with JSON

Janani Ravi, Vitthal Srinivasan, Swetha Kolalapudi, and Navdeep Singh have honed their tech expertise at Google and Flipkart. Together, they have created dozens of training courses and are excited to be sharing their content with eager students. The team believes it has distilled the instruction of complicated tech concepts into enjoyable, practical, and engaging courses.

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

Swetha: Early Flipkart employee, IIM Ahmedabad and IIT Madras alum

Navdeep: Longtime Flipkart employee too, and IIT Guwahati alum

You may also like…