In this 3-day class, students get a rapid hands-on introduction to client-side programming with HTML, CSS, and JavaScript. The course is meant for students who want to need to get a jump start on all three technologies. 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.
Objectives
Learn the basics of Web development
Learn the difference between HTML and XHTML
Learn to create links in HTML documents
Learn to add images to HTML documents
Learn to create HTML tables
See how forms are built in HTML (this will be covered very quickly)
Learn CSS syntax.
Learn to use <div> and <span> tags appropriately.
Learn most of the common properties and their values.
Learn how JavaScript is used
Learn to work with JavaScript variables
Learn to create your own functions in JavaScript
Detailed Outline
- A Quick Overview of Web Development
- Client-side Programming
- Server-side Programming
- Introduction to HTML
- Getting Started
- A Simple HTML Document
- The HTML Skeleton
- HTML Elements
- XHTML vs. HTML
- Special Characters
- lang and xml:lang
- Paragraphs, Headings and Text
- Paragraphs
- Breaks and Horizontal Rules
- Creating an HTML Page
- Quoted Text
- Preformatted Text
- Phrase Elements
- Formatting Elements
- Documenting Changes
- HTML Links
- Text Links
- Absolute vs. Relative Paths
- Targeting New Windows
- Email Links
- Adding Links
- Anchors
- The title Attribute
- A Quick Overview of Web Development
- Inserting Images
- Image Links
- Adding Images to the Page
- HTML Lists
- Unordered Lists
- Ordered Lists
- Definition Lists
- Creating Lists
- HTML Tables
- Creating Tables
- Attributes
- Merging Cells
- Creating Tables
- HTML Forms
- How HTML Forms Work
- The <form> Tag
- Form Elements
- Creating a Registration Form
- Adding Checkboxes and Radio Buttons
- Adding a Select Menu and a Textarea
- Crash Course in CSS
- Benefits of Cascading Style Sheets
- CSS Rules
- Selectors
- Precedence of Selectors
- The Cascade
- Creating an Embedded Style Sheet
- Creating an External Style Sheet
- Adding Inline Styles
- Media Types
- <div> and <span>
- Divs and Spans
- Units of Measurement
- The Inherit Value
- @import
- 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
- CSS Text
- Letter-spacing
- Word-spacing
- Line-height
- Text-align
- Text-decoration
- Text-indent
- Text-transform
- Vertical-align
- White-space
- Text Properties
- Colors and Backgrounds
- About Color Values
- Color
- Background-color
- Background-image
- Colors and Backgrounds
- JavaScript Basics
- The Name “JavaScript”
- The HTML DOM
- JavaScript Syntax
- Where Is JavaScript Code Written?
- JavaScript Objects, Methods and Properties
- Methods
- Properties
- The Implicit window Object
- The getElementById() Method
- Event Handlers
- Variables, Arrays and Operators
- JavaScript Variables
- Arrays
- JavaScript Operators
- JavaScript Functions
- Built-in Functions
- Built-in Functions vs. Methods
- User-defined Functions
- Conditionals and Loops
- Conditionals
- Loops