Information Technology

55320 Programming with HTML, CSS, and JavaScript

Instructor-Led 20 Agenda

Description

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 includes more than 30 exercises, 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. This material updates and replaces course Microsoft course 20480 which was previously published under the title Programming in HTML5 with JavaScript and CSS3.

Course Overview

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 includes more than 30 exercises, 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.
This material updates and replaces course Microsoft course 20480 which was previously published under the title Programming in HTML5 with JavaScript and CSS3.

Course Objective

After completing this course, you will be able to:
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.

Who Should Attend

This course is intended for students new to computer programming or experienced programmers who are new to client-side web development.

Module 1: A Quick Overview of Web Development Lesson Id 1

Module 1: A Quick Overview of Web Development

Module 2: Introduction to HTML Lesson Id 2

Module 2: Introduction to HTML

Module 3: Paragraphs, Headings, and Text Lesson Id 3

Module 3: Paragraphs, Headings, and Text

Module 4: HTML Links Lesson Id 4

Module 4: HTML Links

Module 5: HTML Images Lesson Id 5

Module 5: HTML Images

Module 6: HTML Lists Lesson Id 6

Module 6: HTML Lists

Module 7: Crash Course in CSS Lesson Id 7

Module 7: Crash Course in CSS

Module 8: CSS Fonts Lesson Id 8

Module 8: CSS Fonts

Module 9: Color and Opacity Lesson Id 9

Module 9: Color and Opacity

Module 10: CSS Text Lesson Id 10

Module 10: CSS Text

Module 11: JavaScript Basics Lesson Id 11

Module 11: JavaScript Basics

Module 12: Variables, Arrays, and Operators Lesson Id 12

Module 12: Variables, Arrays, and Operators

Module 13: JavaScript Functions Lesson Id 13

Module 13: JavaScript Functions

Module 14: Built-In JavaScript Objects Lesson Id 14

Module 14: Built-In JavaScript Objects

Module 15: Conditionals and Loops Lesson Id 15

Module 15: Conditionals and Loops

Module 16: Event Handlers and Listeners Lesson Id 16

Module 16: Event Handlers and Listeners

Module 17: The HTML Document Object Model Lesson Id 17

Module 17: The HTML Document Object Model

Module 18: HTML Forms Lesson Id 18

Module 18: HTML Forms

Module 19: JavaScript Form Validation Lesson Id 19

Module 19: JavaScript Form Validation

Module 20: Regular Expressions Lesson Id 20

Module 20: Regular Expressions

Lesson Id	Title	Description
1	Module 1: A Quick Overview of Web Development	HTML is Part of a Team<br />Client-side Programming<br />Server-side Programming<br />Web Development Technologies
2	Module 2: Introduction to HTML	Exercise: A Simple HTML Document<br />Getting Started with a Simple HTML Document<br />HTML Elements, Attributes, and Comments<br />The HTML Skeleton<br />Viewing the Page Source<br />Special Characters<br />HTML Elements and Special Characters<br />History of HTML<br />The lang Attribute
3	Module 3: Paragraphs, Headings, and Text	Paragraphs<br />Heading Levels<br />Breaks and Horizontal Rules<br />Exercise: Paragraphs, Headings, and Text<br />The div Tag<br />Creating an HTML Page<br />Quoted Text<br />Preformatted Text<br />Inline Semantic Elements<br />Exercise: Adding Inline Elements
4	Module 4: HTML Links	Links Introduction<br />Text Links<br />Absolute vs. Relative Paths<br />Targeting New Tabs<br />Email Links<br />Exercise: Adding Links<br />Lorem Ipsum<br />The title Attribute<br />Linking to a Specific Location on the Page<br />Targeting a Specific Location on the Page
5	Module 5: HTML Images	Inserting Images<br />Image Links<br />Adding Images to the Document<br />Exercise: Adding Images to the Page<br />Providing Alternative Images
6	Module 6: HTML Lists	Unordered Lists<br />Ordered Lists<br />Definition Lists<br />Exercise: Creating Lists
7	Module 7: Crash Course in CSS	Benefits of Cascading Style Sheets<br />CSS Rules<br />Selectors<br />Combinators<br />Precedence of Selectors<br />How Browsers Style Pages<br />CSS Resets<br />CSS Normalizers<br />External Stylesheets, Embedded Stylesheets, and Inline Styles<br />Exercise: Creating an External Stylesheet<br />Exercise: Creating an Embedded Stylesheet<br />Exercise: Adding Inline Styles<br />div and span<br />Exercise: Styling div and span<br />Media Types<br />Units of Measurement<br />Inheritance
8	Module 8: CSS Fonts	font-family<br />@font-face<br />font-size<br />font-style<br />font-variant<br />font-weight<br />line-height<br />font shorthand<br />Exercise: Styling Fonts
9	Module 9: Color and Opacity	About Color and Opacity<br />Color and Opacity Values<br />Color<br />Opacity<br />Exercise: Adding Color and Opacity to Text
10	Module 10: CSS Text	letter-spacing<br />text-align<br />text-decoration<br />text-indent<br />text-shadow<br />text-transform<br />white-space<br />word-break<br />word-spacing<br />Exercise: Text Properties
11	Module 11: JavaScript Basics	JavaScript vs. EcmaScript<br />The HTML DOM<br />JavaScript Syntax<br />Accessing Elements<br />Where Is JavaScript Code Written?<br />JavaScript Objects, Methods, and Properties<br />Exercise: Alerts, Writing, and Changing Background Color
12	Module 12: Variables, Arrays, and Operators	JavaScript Variables<br />A Loosely Typed Language<br />Google Chrome DevTools<br />Storing User-Entered Data<br />Exercise: Using Variables<br />Constants<br />Arrays<br />Exercise: Working with Arrays<br />Associative Arrays<br />Playing with Array Methods<br />JavaScript Operators<br />The Modulus Operator<br />Playing with Operators<br />The Default Operator<br />Exercise: Working with Operators
13	Module 13: JavaScript Functions	Global Objects and Functions<br />Exercise: Working with Global Functions<br />User-defined Functions<br />Exercise: Writing a JavaScript Function<br />Returning Values from Functions
14	Module 14: Built-In JavaScript Objects	Strings<br />Math<br />Date<br />Helper Functions<br />Exercise: Returning the Day of the Week as a String
15	Module 15: Conditionals and Loops	Conditionals<br />Short-circuiting<br />Switch / Case<br />Ternary Operator<br />Truthy and Falsy<br />Exercise: Conditional Processing<br />Loops<br />while and do…while Loops<br />for Loops<br />break and continue<br />Exercise: Working with Loops<br />Array: forEach()
16	Module 16: Event Handlers and Listeners	On-event Handlers<br />Exercise: Using On-event Handlers<br />The addEventListener() Method<br />Anonymous Functions<br />Capturing Key Events<br />Exercise: Adding Event Listeners<br />Benefits of Event Listeners<br />Timers<br />Typing Test
17	Module 17: The HTML Document Object Model	CSS Selectors<br />The innerHTML Property<br />Nodes, NodeLists, and HTMLCollections<br />Accessing Element Nodes<br />Exercise: Accessing Elements<br />Dot Notation and Square Bracket Notation<br />Accessing Elements Hierarchically<br />Exercise: Working with Hierarchical Elements<br />Accessing Attributes<br />Creating New Nodes<br />Focusing on a Field<br />Shopping List Application<br />Exercise: Logging<br />Exercise: Adding EventListeners<br />Exercise: Adding Items to the List<br />Exercise: Dynamically Adding Remove Buttons to the List Items<br />Exercise: Removing List Items<br />Exercise: Preventing Duplicates and Zero-length Product Names<br />Manipulating Tables
18	Module 18: HTML Forms	How HTML Forms Work<br />The form Element<br />Form Elements<br />Buttons<br />Exercise: Creating a Registration Form<br />Checkboxes<br />Radio Buttons<br />Exercise: Adding Checkboxes and Radio Buttons<br />Fieldsets<br />Select Menus<br />Textareas<br />Exercise: Adding a Select Menu and a Textarea<br />HTML Forms and CSS
19	Module 19: JavaScript Form Validation	Server-side Form Validation<br />HTML Form Validation<br />Accessing Form Data<br />Form Validation with JavaScript<br />Exercise: Checking the Validity of the Email and URL Fields<br />Checking Validity on Input and Submit Events<br />Adding Error Messages<br />Validating Textareas<br />Validating Checkboxes<br />Validating Radio Buttons<br />Validating Select Menus<br />Exercise: Validating the Ice Cream Order Form<br />Giving the User a Chance
20	Module 20: Regular Expressions	Getting Started<br />Regular Expression Syntax<br />Backreferences<br />Form Validation with Regular Expressions<br />Cleaning Up Form Entries<br />Exercise: Cleaning Up Form Entries<br />A Slightly More Complex Example