Rapid Introduction to HTML, CSS & JavaScript

Overview

In this 3-day class, students get a rapid hands-on introduction to client-side programming with HTML, CSS, and JavaScript. The course focuses on using HTML/CSS/JavaScript to implement programming logic, define and use variables, perform looping and branching, develop user interfaces, capture and validate user input, store data, and create well-structured applications. Students should be prepared to cover a lot in three days and to be ready to spend some time afterward reviewing the content on their own to solidify and build upon the skills taught in class.

Audience

Students who want to get a jump start on all three technologies.

Prerequisites

Programming experience would be beneficial and a basic understanding of how the web works

Course duration

3 Days

Course outline

1. A Quick Overview of WebDevelopment

Client-side Programming

HTML

Cascading Style Sheets

JavaScript

Dynamic HTML

Ajax

Adobe Flash

Server-side Programming

Perl

ColdFusion

Active Server Pages

Java EE

ASP.NET

PHP

Ruby on Rails

2. Introduction to HTML

Getting Started
The HTML Skeleton
HTML Elements
Whitespace
HTML Elements
Attributes
Special Characters
The HTML/XHTML
Closing Tags
Case Sensitivity
Quotes
Nesting
Some XML Stuff
Lang and xml:lang

3. Paragraphs, Headings and Text

Paragraphs
Breaks and Horizontal Rules
Creating an HTML Page
Quoted Text
Preformatted Text
Phrase Elements
Formatting Elements
Documenting Changes

4. HTML Links

Text Links
Absolute vs. Relative Paths
Targeting New Windows
Email Links
Adding Links
Anchors
The title Attribute

5. HTML Links

Inserting Images
Making Images Accessible
Alternative Text
Long Descriptions
Height and Width Attributes
Image Links

6. HTML Lists

Unordered Lists
Nesting Unordered Lists
Ordered Lists
Nesting Ordered Lists
Start Attribute
Definition Lists

7. HTML Tables

Creating Tables
Adding a Caption
Attributes
Merging Cells

8. HTML Forms

How HTML Forms Work
The <form> Tag
Get vs. Post
Form Elements
Id and Name Attributes
Labels
Text Fields
Submit and Reset Buttons
Hidden Fields
Checkboxes and Radio Buttons
Adding a Select Menu and a Textarea

9. Crash Course in CSS

Benefits of Cascading Style Sheets
CSS Rules
Selectors
Type of Selectors
Precedence of Selectors
The Cascade
Embedded Style Sheets
External Style Sheets
Inline Styles
Media Types
<div> and <span>
Units of Measurement
The Inherit Value
@import

10. CSS Fonts

Font - the old way
Font-family
Font-size
Font Family and Font Size
Font-style
Font-variant
Font-weight
Font Style, Font Variant and Font Weight

11. CSS Text

Letter-spacing
Word-spacing
Line-height
Text-align
Text-decoration
Text-indent
Text-transform
Vertical-align
White-space

12. Colors and Backgrounds

About Color Values
Color Names
Hexadecimal Color Values
Short Hexadecimal Color Values
Functional Notation
Recommendation
Color
Background-color
Background-image
Background-repeat
Background-attachment
Background-position

13. JavaScript Basics

The Name "JavaScript"
The HTML DOM
JavaScript Syntax
Basic Rules
Accessing Elements
Dot Notation
Square Bracket Notation
Where Is JavaScript Code Written?
JavaScript Objects, Methods and Properties
Methods
Properties
The Implicit window Object
Event Handlers
The getElementById() Method

14. Variables, Arrays and Operators

JavaScript Variables
A Loosely-typed Language
Variable Naming
Storing User-Entered Data
Arrays
Associative Arrays
Array Properties and Methods
JavaScript Operators

15. JavaScript Functions

Built-in Functions
Number(object)
String(object)
isNaN(object)
parseFloat() and parseInt()
Built-in Functions vs. Methods
User-defined Functions
Function Syntax
Passing Values to Functions
A Note on Variable Scope
Returning Values from Functions

16. Conditionals and Loops

Conditionals
If - else if - else Conditions
Switch / Case
Loops
While Loop Syntax
Do...while Loop Syntax
for Loop Syntax
for...in Loop Syntax