MOC 55320 Programming with HTML, CSS, and JavaScript

Seminarinformationen

Seminar - Ziel

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.

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.

Teilnehmer - Zielgruppe

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

Kurs - Voraussetzungen

Basic computer and typing skills.

Seminardauer

• 5 Tage
• 09:00 Uhr bis 17:00 Uhr

Schulungsunterlagen

• nach Absprache

Seminar-Inhalt / Agenda

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

Weitere Schulungen zu Thema JavaScript