0
Hours
This course is intended for IT professionals interested in becoming client-side web developers. who need to get a jump start on all three technologies. The course providing a rapid hands-on introduction to the three major client-side languages: HTML, CSS, and JavaScript. Students should be prepared to cover a lot of ground quickly.
Learning Objectives
- Describe the technologies involved in web development
- Create HTML pages with links and images
- Explain the benefits of CSS
- Style HTML pages with CSS
- Explain the concepts of objects, methods, and properties
- Work with JavaScript variables
- Create their own custom functions in JavaScript
- Write flow control logic in JavaScript
- Write JavaScript code that listens for and handles events, such as mouse clicks and page loads
- Create forms with HTML and validate them with JavaScript
- Use regular expressions in JavaScript for advanced form validation
Quick Overview of Web Development
- HTML is Part of a Team
- Client-side Programming
- Server-side Programming
- Web Development Technologies
Introduction to HTML
- Getting Started with a Simple HTML Document
- HTML Elements, Attributes, and Comments
- The HTML Skeleton
- Viewing the Page Source
- Special Characters
- HTML Elements and Special Characters
- History of HTML
- The lang Attribute
- Lab: A Simple HTML Document
Paragraphs, Headings, and Text
- Paragraphs
- Heading Levels
- Breaks and Horizontal Rules
- The div Tag
- Creating an HTML Page
- Quoted Text
- Preformatted Text
- Inline Semantic Elements
- Lab: Creating an HTML Page
- Lab: Adding Inline Elements
HTML Links
- Links Introduction
- Text Links
- Absolute vs. Relative Paths
- Targeting New Tabs
- Email Links
- The title Attribute
- Linking to a Specific Location on the Page
- Targeting a Specific Location on the Page
- Lab: Adding Links
HTML Images
- Inserting Images
- Image Links
- Adding Images to the Document
- Providing Alternative Images
- Lab: Adding Images to the Page
HTML Lists
- Unordered Lists
- Ordered Lists
- Definition Lists
- Lab: Creating Lists
Crash Course in CSS
- Benefits of Cascading Style Sheets
- CSS Rules
- Selectors
- Combinators
- Precedence of Selectors
- How Browsers Style Pages
- CSS Resets
- CSS Normalizers
- External Stylesheets, Embedded Stylesheets, and Inline Styles
- div and span
- Media Types
- Units of Measurement
- Inheritance
- Lab: Creating an External Stylesheet
- Lab: Creating an Embedded Stylesheet
- Lab: Adding Inline Styles
- Lab: Styling div and span Elements
CSS Fonts
- font-family
- font-face
- font-size
- font-style
- font-variant
- font-weight
- line-height
- font shorthand
- Lab: Styling Fonts
Color and Opacity
- About Color and Opacity
- Color and Opacity Values
- Color
- Opacity
- Lab: Adding Color and Opacity to Text
CSS Text
- letter-spacing
- text-align
- text-decoration
- text-indent
- text-shadow
- text-transform
- white-space
- word-break
- word-spacing
- Lab: Text Properties
JavaScript Basics
- JavaScript vs. EcmaScript
- The HTML DOM
- JavaScript Syntax
- Accessing Elements
- Where Is JavaScript Code Written?
- JavaScript Objects, Methods, and Properties
- Lab: Alerts, Writing, and Changing Background Color
Variables, Arrays, and Operators
- JavaScript Variables
- A Loosely Typed Language
- Google Chrome DevTools
- Storing User-Entered Data
- Constants
- Arrays
- Associative Arrays
- Playing with Array Methods
- JavaScript Operators
- The Modulus Operator
- Playing with Operators
- The Default Operator
- Lab: Working with Arrays
- Lab: Working with Operators
JavaScript Functions
- Global Objects and Functions
- User-defined Functions
- Returning Values from Functions
- Lab: Working with Global Functions
- Lab: Writing a JavaScript Function
Built-In JavaScript Objects
- Strings
- Math
- Date
- Helper Functions
- Lab: Returning the Day of the Week as a String
Conditionals and Loops
- Conditionals
- Short-circuiting
- Switch / Case
- Ternary Operator
- Truthy and Falsy
- Loops
- while and do…while Loops
- for Loops
- break and continue
- Array: forEach()
- Lab: Conditional Processing
- Lab: Working with Loops
Event Handlers and Listeners
- On-event Handlers
- The addEventListener() Method
- Anonymous Functions
- Capturing Key Events
- Benefits of Event Listeners
- Timers
- Typing Test
- Lab: Using On-event Handlers
- Lab: Adding Event Listeners
- Lab: Creating a Typing Test
The HTML Document Object Model
- CSS Selectors
- The innerHTML Property
- Nodes, NodeLists, and HTMLCollections
- Accessing Element Nodes
- Dot Notation and Square Bracket Notation
- Accessing Elements Hierarchically
- Accessing Attributes
- Creating New Nodes
- Focusing on a Field
- Shopping List Application
- Manipulating Tables
- Lab: Accessing Elements
- Lab: Working with Hierarchical Elements
- Lab: Logging
- Lab: Adding EventListerners
- Lab: Adding Items to the List
- Lab: Dynamically Adding Remove Buttons to the List Items
- Lab: Removing List Items
- Lab: Preventing Duplicates and Zero-length Product Names
HTML Forms
- How HTML Forms Work
- The form Element
- Form Elements
- Buttons
- Checkboxes
- Radio Buttons
- Fieldsets
- Select Menus
- Textareas
- HTML Forms and CSS
- Lab: Creating a Registration Form
- Lab: Adding Checkboxes and Radio Buttons
- Lab: Adding a Select Menu and a Textarea
JavaScript Form Validation
- Server-side Form Validation
- HTML Form Validation
- Accessing Form Data
- Form Validation with JavaScript
- Checking Validity on Input and Submit Events
- Adding Error Messages
- Validating Textareas
- Validating Checkboxes
- Validating Radio Buttons
- Validating Select Menus
- Giving the User a Chance
- Lab: Checking the Validity of the Email and URL Fields
- Lab: Validating the Ice Cream Order Form
Regular Expressions
- Getting Started
- Regular Expression Syntax
- Backreferences
- Form Validation with Regular Expressions
- Cleaning Up Form Entries
- A Slightly More Complex Example
- Lab: Cleaning up Form Entries
- Experienced programmers
- Web-Developer