Log In
Join
 for free
Back To Course Home
Web Development: Unraveling HTML, CSS, and JavaScript
0% completed
Commencing the Journey: Introductions and Conventions
Introduction
Who is This Course For?
What This Course Covers
Conventions
A Short Tour of HTML, CSS, and JavaScript
Getting Started with Live Coding!
Hands-On: Diving into HTML Basics
How it Works: Creating a Basic HTML Page
Hands-On: Formatting the HTML Page
How It Works: Formatting Our HTML Page
Inline Styling Our HTML Page
Hands On: Using an Embedded Style Sheet
How It Works: Using an Embedded Style Sheet
Hands On: Moving Styles into a Separate File
How It Works: Moving Styles into a Separate File
Hands On: Defining Visual Behavior with CSS
How It Works: Defining Visual Behavior with CSS
Hands On: Adding Actions to the Web Page with JavaScript
How It Works: Adding Actions to the Web Page with JS
Meeting the DOM
Leveraging Page Inspector
Hands On: Using jQuery
How jQuery Works
Debugging JavaScript
Summary
HTML5: First Impressions and Beyond
The Unordinary Story of HTML5
What's Behind the Term HTML5?
HTML5 Markup Basics
Using HTML <head>
Defining HTML Content
Exercises: Content and Structure
Enriching Web Pages: Rendering Text
Rendering Text: Code Along Exercises
Using Reserved Characters and Symbols in HTML
Adding Paragraphs and Text Breaks in HTML
Enriching Web Pages: Adding Headings
Enriching Web Pages: Adding Lists
Enriching Web Pages: Adding Links
Enriching Web Pages: Adding Images
Lists, Links, and Images: Bonus Fun Exercise!
Summary
Achieving Richer User Experience with HTML
What it's All About
Old Style: The Omnipotent <div>
Structure and Semantics
Headers
HTML Footers
Sections
Figures in the Page
Sidebars
Navigation
Other Semantic Elements
World of HTML Tables
Defining a Simple Table in HTML
Spanning Rows and Columns
Markup for Table Headers
Defining Styles for Tables
Table Captions
Compound Tables
Hands On: Scrolling the Table Body
How It Works: Scrolling the Table Body
Making Things Exciting With Multimedia
New HTML5 Markup
How It Works: Using the Video Tag
Hands On: Using the Video Tag
Video Formats
Hands On: Supporting Multiple Video Formats
How It Works: Supporting Multiple Video Formats
Video Resilient Web Pages and the Audio Tag
What You Cannot Do with <video> and <audio>
Summary
Forms and Controls
Web Forms Basics
Hands On: Representing Web Forms in HTML
Controls Overview
Hands On: Using Controls to Build Web Forms
How It Works: Using Controls to Build Web Forms
Hands On: Using Controls that Allow Specifying Options
Hands On: Sending and Processing Form Data
How it Works: Sending and Processing Form Data
Hands On: Catching Data at the Server
How it Works: Catching Data at the Server
Using GET and POST
Hands On: Making Use of More Controls
How it Works: Making Use of More Controls
Using Hidden Fields
Using <optgroup> in Dropdown Lists
Using Buttons
Form Validation
Validation Attributes
Validation and JavaScript
Summary
A Few More Things On HTML
Other HTML Elements
Thematic Breaks
Quotes
Images and Mappings
Visualizing Progress
Refining Markup Details
Inline Frames
Custom Attributes
Hands On: Painting the Canvas
How it Works: Painting the Canvas
Hands On: Vivifying the Canvas
How it Works: Vivifying the Canvas
Hands On: Drawing the Trajectory
How it Works: Drawing the Trajectory
What Else You Can Do with a Canvas
Facing the Past and Future of HTML5
Issues with New HTML5 Tags
HTML5 Tools and Validation
Checking HTML5 Compatibility
Summary
Delving into the Document Object Model
DOM Basics
Ubiquitous Language of Page Representation
Cornerstone of Interactions
The DOM Application Programming Interface
What the DOM Covers
Hands On: Querying the Document
How it Works: Querying the Document
Hands On: Changing the DOM
How it Works: Changing the DOM
Hands On: Completing Event Handling
Navigating in the Document Tree
Node Navigation Basics
Accessing Element Content
A Brief Navigation Reference
Element Specific Properties
Changing the Document Tree
Adding New Child Elements to the Document
Adding Adjacent Elements
Removing and Replacing Elements
Changing Attributes and Element Style
Using Event Parameters
Going Global: Global Attributes
Going Global: Global Events
Summary
Entering the Realm of JavaScript
A Couple of JavaScript Peculiarities
A Brief History of JavaScript
Objects and Dynamism
Functions are First Class Citizens
Regular Expression Literals
Placing JavaScript in HTML
JavaScript Syntax Basics
Variables
Types
Argument Passing
Understanding Scopes
Working With the Boolean Type
Working With the Number Type
Converting to the Number Type
Number Methods
Working With the String Type
Converting to Strings
String Properties and Functions
Working With the Date Type
Working With the Object Type
A Quick Overview of Function Prototypes
Instance Properties and Methods
Working With the Array Type
Array Conversions
Array Operations: Creating Stacks and Queues
Array Methods to Manipulate Strings
Array Methods to Change Element Ordering
Advanced Array Operations
Unary Operators
Arithmetic Operators
Equality Operators
Relational and Boolean Operators
Bitwise Operators
Assignment Operators
Conditional, Comma, typeof, and instanceof Operators
Operator Precedence
The if, while, and do-while Statements
The for and for-in loops
The switch and with Statements
Summary
Advanced JavaScript Programming
The JavaScript Object Notation
Serializing and Parsing JSON
Functions
Specifying Function Expressions
Recursive Functions
Closures
Programming with Objects
Object Properties
Removing Object Properties
Instantiating Objects
Using Object Prototypes
Object Inheritance
Modularity
The Browser Object Model
Methods of the Windows Object
The History Object
The Location Object
The Navigator Object
The Screen Object
Error Handling
The onerror Event
Managing Errors
Summary
Introducing CSS in Style
Styles and Cascading Style Sheets
Styling Page Elements
CSS At-Rules
The Concept of Cascading
Selectors
Attribute selectors
Group Selectors and the Universal Selector
Pseudo-Element and Pseudo-Class Selectors
Descendent Selectors
Child Selectors
Sibling Selectors
Other Selectors
Style Properties
Colors
Length, Size Types and URL Values
Baseline Style Sheet
The Cascading Order
Selector Group Priorities
Calculating Selectivity
Location Priorities
Media-Dependent Style Sheets
Adding Media Style Sheets
Media Queries
Summary
Basic Style Patterns
Text Formatting
Font Type, Size, and Color
Text Styles
Paragraphs
Styling Lists
Using Web Fonts
The Box Model
Margins and Paddings
Special Behavior of Margins
Setting Up Borders
Height and Width of the Box
Boxing Inline Elements
Using Floating Elements
Using Background Images
Positioning Background Images
Aligning Background Images with Borders and Paddings
Sizing Background Images
The Background Shorthand Notation
Styling Tables
Basic Font and Colors
Adjusting Text
Setting Up Table-Specific Properties
Styling Tips for Forms
Summary
The Voyage Ahead
Career Paths After This Course
Learning Paths After This Course
Defining Styles for Tables
In this lesson, we'll define our tables in style.
We'll cover the following
The style explained
Listing: Define alternating row colors for a table in CSS
Listing: Using the <colgroup> and <col> tags
Get hands-on with 1400+ tech skills courses.
Start Free Trial