A Quick Overview of Web Development
HTML is Part of a Team
Client-side Programming
Server-side Programming
Web Development Technologies
Introduction to HTML
Exercise: A Simple HTML Document
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: Getting Started
A Simple HTML Document
Paragraphs, Headings, and Text
Paragraphs
Heading Levels
Breaks and Horizontal Rules
Exercise: Paragraphs, Headings, and Text
The div Tag
Creating an HTML Page
Quoted Text
Preformatted Text
Inline Semantic Elements
Exercise: Adding Inline Elements
Lab: Exercises included throughout lesson
HTML Links
Links Introduction
Text Links
Absolute vs. Relative Paths
Targeting New Tabs
Email Links
Exercise: Adding Links
Lorem Ipsum
The title Attribute
Linking to a Specific Location on the Page
Targeting a Specific Location on the Page
Lab: Exercises included throughout lesson
HTML Images
Inserting Images
Image Links
Adding Images to the Document
Exercise: Adding Images to the Page
Providing Alternative Images
Lab: Exercises included throughout lesson
HTML Lists
Unordered Lists
Ordered Lists
Definition Lists
Exercise: Creating Lists
Lab : Exercises included throughout lesson
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
Exercise: Creating an External Stylesheet
Exercise: Creating an Embedded Stylesheet
Exercise: Adding Inline Styles
div and span
Exercise: Styling div and span
Media Types
Units of Measurement
Inheritance
Lab: Exercises included throughout lesson
CSS Fonts
font-family
@font-face
font-size
font-style
font-variant
font-weight
line-height
font shorthand
Exercise: Styling Fonts
Lab: Exercises included throughout lesson
Color and Opacity
About Color and Opacity
Color and Opacity Values
color
opacity
Exercise: Adding Color and Opacity to Text
Lab : Exercises included throughout lesson
CSS Text
letter-spacing
text-align
text-decoration
text-indent
text-shadow
text-transform
white-space
word-break
word-spacing
Exercise: Text Properties
Lab : Exercises included throughout lesson
JavaScript Basics
JavaScript vs. EcmaScript
The HTML DOM
JavaScript Syntax
Accessing Elements
Where Is JavaScript Code Written?
JavaScript Objects, Methods, and Properties
Exercise: Alerts, Writing, and Changing Background Color
Lab: Exercises included throughout lesson
Variables, Arrays, and Operators
JavaScript Variables
A Loosely Typed Language
Google Chrome DevTools
Storing User-Entered Data
Exercise: Using Variables
Constants
Arrays
Exercise: Working with Arrays
Associative Arrays
Playing with Array Methods
JavaScript Operators
The Modulus Operator
Playing with Operators
The Default Operator
Exercise: Working with Operators
Lab: Exercises included throughout lesson
JavaScript Functions
CSS Selectors
The innerHTML Property
Nodes, NodeLists, and HTMLCollections
Accessing Element Nodes
Exercise: Accessing Elements
Dot Notation and Square Bracket Notation
Accessing Elements Hierarchically
Exercise: Working with Hierarchical Elements
Accessing Attributes
Creating New Nodes
Focusing on a Field
Shopping List Application
Exercise: Logging
Exercise: Adding EventListeners
Exercise: Adding Items to the List
List Items
Exercise: Removing List Items
Exercise: Preventing Duplicates and Zero-length Product Names
Manipulating Tables
Lab 1: Exercises included throughout lesson
Accessing Elements
Working with Hierarchical Elements
Logging
Adding EventListerners
Adding Items to the List
Dynamically Adding Remove Buttons to the List Items
Removing List Items
Preventing Duplicates and Zero-length Product Names
After completing this module, students will be able to:
Access specific nodes within the HTML DOM.
Identify nodes by tag name, class name, and CSS selector.
Access nodes hierarchically.
Create and remove nodes.
Dynamically create an HTML page with JavaScript.
HTML Forms
How HTML Forms Work
The form Element
Form Elements
Buttons
Exercise: Creating a Registration Form
Checkboxes
Radio Buttons
Exercise: Adding Checkboxes and Radio Buttons
Fieldsets
Select Menus
Textareas
Exercise: Adding a Select Menu and a Textarea
HTML Forms and CSS
Lab: Exercises included throughout lesson
Creating a Registration Form
Adding Checkboxes and Radio Buttons
Adding a Select Menu and a Textarea
JavaScript Form Validation
Server-side Form Validation
HTML Form Validation
Accessing Form Data
Form Validation with JavaScript
Exercise: Checking the Validity of the Email and URL Fields
Checking Validity on Input and Submit Events
Adding Error Messages
Validating Textareas
Validating Checkboxes
Validating Radio Buttons
Validating Select Menus
Exercise: Validating the Ice Cream Order Form
Giving the User a Chance
Lab: Exercises included throughout lesson
Regular Expressions
Getting Started
Regular Expression Syntax
Backreferences
Form Validation with Regular Expressions
Cleaning Up Form Entries
Exercise: Cleaning Up Form Entries
A Slightly More Complex Example
Lab: Exercises included throughout lesson
