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.

starstarstarstarstar

* Actual course outline may vary depending on offering center. Contact your sales representative for more information.

Learning Objectives

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.

1

  • MODULE 1: A QUICK OVERVIEW OF WEB DEVELOPMENT

  • HTML is Part of a Team

    Client-side Programming

    Server-side Programming

    Web Development Technologies

2

  • MODULE 2: 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

3

  • MODULE 3: 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

4

  • MODULE 4: 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

5

  • MODULE 5: HTML IMAGES

  • Inserting Images

    Image Links

    Adding Images to the Document

    Exercise: Adding Images to the Page

    Providing Alternative Images

6

  • MODULE 6: HTML LISTS

  • Unordered Lists

    Ordered Lists

    Definition Lists

    Exercise: Creating Lists

7

  • MODULE 7: 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

8

  • MODULE 8: CSS FONTS

  • font-family

    @font-face

    font-size

    font-style

    font-variant

    font-weight

    line-height

    font shorthand

    Exercise: Styling Fonts

9

  • MODULE 9: COLOR AND OPACITY

  • About Color and Opacity

    Color and Opacity Values

    Color

    Opacity

    Exercise: Adding Color and Opacity to Text

10

  • MODULE 10: CSS TEXT

  • letter-spacing

    text-align

    text-decoration

    text-indent

    text-shadow

    text-transform

    white-space

    word-break

    word-spacing

    Exercise: Text Properties

11

  • MODULE 11: 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

12

  • MODULE 12: 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

13

  • MODULE 13: JAVASCRIPT FUNCTIONS

  • Global Objects and Functions

    Exercise: Working with Global Functions

    User-defined Functions

    Exercise: Writing a JavaScript Function

    Returning Values from Functions

14

  • MODULE 14: BUILT-IN JAVASCRIPT OBJECTS

  • Strings

    Math

    Date

    Helper Functions

    Exercise: Returning the Day of the Week as a String

15

  • MODULE 15: CONDITIONALS AND LOOPS

  • 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()

16

  • MODULE 16: EVENT HANDLERS AND LISTENERS

  • 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

17

  • MODULE 17: THE HTML DOCUMENT OBJECT MODEL

  • 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

18

  • MODULE 18: 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

19

  • MODULE 19: 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

20

  • MODULE 20: 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

Audience

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

Language

English

Prerequisites

Basic computer and typing skills.

$3,275

Length: 5.0 days (40 hours)

Level:

Not Your Location? Change

Course Schedule:

To request a custom delivery, please chat with an expert.

Loading...