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