Programming with HTML, CSS and JavaScript (55320A)

Module 1: A Quick Overview of Web Development

Lessons

• HTML is Part of a Team

• Client-side Programming
• Server-side Programming
• Web Development Technologies

Lab 1: None

Module 2: Introduction to HTML

Lessons

• 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 1: Getting Started

• A Simple HTML Document

• After completing this module, students will be able to:
• Create a simple HTML page.
• Understand HTML elements and attributes.
• Understand how whitespace is treated in HTML.
• Add special characters to HTML pages.
• Explain the general history of HTML.

Module 3: Paragraphs, Headings, and Text

Lessons

• 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 1: Exercises included throughout lesson

• Creating an HTML Page

• Adding Inline Elements
• After completing this module, students will be able to:
• Add paragraphs to HTML pages.
• Add headings to HTML pages.
• Add breaks and horizontal rules.
• Add quoted text.
• Add preformatted text.
• Add phrase elements to call out or identify textual elements on the page.
• Understand the meaning of semantic content.

Module 4: HTML Links

Lessons

• 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 1: Exercises included throughout lesson

• Adding Links
• After completing this module, students will be able to:
• Add basic text links.
• Understand the difference between absolute and relative paths.
• Add links that open in new tabs or windows.
• Add links that open up an email client.
• Add links to specific locations on the page.
Module 5: HTML Images

Lessons

• Inserting Images
• Image Links
• Adding Images to the Document
• Exercise: Adding Images to the Page
• Providing Alternative Images

Lab 1: Exercises included throughout lesson

• Adding Images to the Page

• After completing this module, students will be able to:
• Add images to an HTML page.
• Create image links.
• Make images accessible.

Module 6: HTML Lists

Lessons

• Unordered Lists
• Ordered Lists
• Definition Lists
• Exercise: Creating Lists

Lab 1: Exercises included throughout lesson

• Creating Lists
• After completing this module, students will be able to:
• Create unordered (bulleted) lists.
• Create ordered (numbered) lists.
• Create definition lists.

Module 7: Crash Course in CSS

Lessons

• 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 1: Exercises included throughout lesson

• Creating an External Stylesheet

• Creating an Embedded Stylesheet
• Adding Inline Styles
• Styling div and span Elements
• After completing this module, students will be able to:
• Understand the benefits of CSS.
• Redefine how elements are formatted.
• Create and use CSS selectors.
• Create and use CSS combinators.
• Understand the CSS cascade.
• Understand the role of CSS resets and normalizers.
• Create and use external and embedded stylesheets.
• Add inline styles to HTML elements.
• Use the div and span elements.
• Understand media types.
• Understand and use the viewport tag.
• Understand and select proper units of measurement.
• Understand inheritance in CSS.

Module 8: CSS Fonts

Lessons

• font-family
• @font-face
• font-size
• font-style
• font-variant
• font-weight
• line-height
• font shorthand
 • Exercise: Styling Fonts

Lab 1: Exercises included throughout lesson

• Styling Fonts
• After completing this module, students will be able to:
• Use the font-family property.
• Use the font-size property.
• Use the font-style property.
• Use the font-variant property.
• Use the font-weight property.
• Use the line-height property.
• Use shorthand properties, such as font.

Module 9: Color and Opacity

Lessons

• About Color and Opacity

• Color and Opacity Values
• color
• opacity
• Exercise: Adding Color and Opacity to Text

Lab 1: Exercises included throughout lesson

• Adding Color and Opacity to the Text

• After completing this module, students will be able to:
• Use the color property.
• Use the opacity property.

Module 10: CSS Text

Lessons

• letter-spacing
• text-align
• text-decoration
• text-indent
• text-shadow
• text-transform
• white-space
• word-break
• word-spacing
 • Exercise: Text Properties

Lab 1: Exercises included throughout lesson

• Text Properties
• After completing this module, students will be able to:
• Use the letter-spacing property.
• Use the text-align property.
• Use the text-decoration property.
• Use the text-indent property.
• Use the text-shadow property.
• Use the text-transform property.
• Use the white-space property.
• Use the word-break property.
• Use the word-spacing property.

Module 11: JavaScript Basics

Lessons

• 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 1: Exercises included throughout lesson

• Alerts, Writing, and Changing Background Color

• After completing this module, students will be able to:
• Understand the HTML Document Object Model
• Understand the JavaScript syntax rules.
• Write inline JavaScript.
• Write JavaScript within script blocks.
• Create external JavaScript files.
• Work with JavaScript objects, methods, and properties.
• Reference HTML elements with JavaScript.

Module 12: Variables, Arrays, and Operators

Lessons

• 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 1: Exercises included throughout lesson

• Working with Arrays

• Working with Operators
• After completing this module, students will be able to:
• Create, read, and modify variables in JavaScript.
• Create JavaScript arrays.
• Use JavaScript operators.

Module 13: JavaScript Functions

Lessons

• Global Objects and Functions

• Exercise: Working with Global Functions
• User-defined Functions
• Exercise: Writing a JavaScript Function
• Returning Values from Functions

Lab 1: Exercises included throughout lesson

• Working with Global Functions

• Writing a JavaScript Function
• After completing this module, students will be able to:
• Understand JavaScripts global functions and objects.
• Create custom JavaScript functions.
• Return values from functions.
Module 14: Built-In JavaScript Objects

• Lessons
• Strings
• Math
• Date
• Helper Functions
• Exercise: Returning the Day of the Week as a String

Lab 1: Exercises included throughout lesson

• Returning the Day of the Week as a String

• After completing this module, students will be able to:
• Work with JavaScript’s built-in String object.
• Work with JavaScript’s built-in Math object.
• Work with JavaScript’s built-in Date object.

Module 15: Conditionals and Loops

Lessons

• Conditionals
• Short-circuiting
• Switch / Case
• Ternary Operator
• Truthy and Falsy
• Exercise: Conditional Processing
• Loops
• while and do…while Loops
• for Loops
• break and continue
• Exercise: Working with Loops
• Array: forEach()

Lab 1: Exercises included throughout lesson

• Conditional Processing
• Working with Loops
• After completing this module, students will be able to:
• Write if / else if / else conditions.
• Write switch / case statements.
• Create for and while loops.

Module 16: Event Handlers and Listeners

Lessons
 • On-event Handlers
• Exercise: Using On-event Handlers
• The addEventListener() Method
• Anonymous Functions
• Capturing Key Events
• Exercise: Adding Event Listeners
• Benefits of Event Listeners
• Timers
• Typing Test

Lab 1: Exercises included throughout lesson

• Using On-event Handlers

• Adding Event Listeners
• Creating a Typing Test
• After completing this module, students will be able to:
• Understand on-event handlers.
• Identify and use commonly-used on-event handlers.
• Create eventListeners.

Module 17: The HTML Document Object Model

Lessons

• 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
• Exercise: Dynamically Adding Remove Buttons to the 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.

Module 18: HTML Forms

Lessons

• 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 1: Exercises included throughout lesson

• Creating a Registration Form

• Adding Checkboxes and Radio Buttons
• Adding a Select Menu and a Textarea

Module 19: JavaScript Form Validation

Lessons

• 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 1: Exercises included throughout lesson

• Checking the Validity of the Email and URL Fields

• Validating the Ice Cream Order Form
• After completing this module, students will be able to:
• Access data entered by users in forms.
• Validate text fields, textareas, radio buttons, checkboxes, and select menus.
• Write clean, reusable validation functions.

Module 20: Regular Expressions

Lessons

• 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 1: Exercises included throughout lesson

• Cleaning up Form Entries

• After completing this module, students will be able to:
• Use regular expressions for advanced form validation.
• Use backreferences to clean up form entries.