55320
Programming with HTML, CSS, and JavaScript Training
Programming with HTML, CSS, and JavaScript is the Community Courseware equivalent of retired MOC 20480C Programming in HTML5 with JavaScript and CSS3. This course focuses on using HTML, CSS, and JavaScript to develop web pages, implement programming logic, define and use variables, perform looping and branching, capture and validate user input, store data, and create well-structured applications. This course does not cover the HTML5 APIs covered in 20480.
Course Details
Duration
5 days
Prerequisites
Basic computer and typing skills.
Target Audience
- Anyone new to computer programming
- Experienced programmers who are new to client-side web development
Skills Gained
- 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.
Course Outline
- A Quick Overview of Web Development
- HTML is Part of a Team
- Client-side Programming
- Server-side Programming
- Web Development Technologies
- Introduction to HTML
- 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
- Paragraphs, Headings, and Text
- Paragraphs
- Heading Levels
- Breaks and Horizontal Rules
- The div Tag
- Creating an HTML Page
- Quoted Text
- Preformatted Text
- Inline Semantic Elements
- HTML Links
- Links Introduction
- Text Links
- Absolute vs. Relative Paths
- Targeting New Tabs
- Email Links
- Lorem Ipsum
- The title Attribute
- Linking to a Specific Location on the Page
- Targeting a Specific Location on the Page
- HTML Images
- Inserting Images
- Image Links
- Adding Images to the Document
- Providing Alternative Images
- HTML Lists
- Unordered Lists
- Ordered Lists
- Definition Lists
- 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
- div and span
- Media Types
- Units of Measurement
- Inheritance
- CSS Fonts
- font-family
- @font-face
- font-size
- font-style
- font-variant
- font-weight
- line-height
- font shorthand
- Color and Opacity
- About Color and Opacity
- Color and Opacity Values
- color
- opacity
- CSS Text
- letter-spacing
- text-align
- text-decoration
- text-indent
- text-shadow
- text-transform
- white-space
- word-break
- word-spacing
- JavaScript Basics
- JavaScript vs. EcmaScript
- The HTML DOM
- JavaScript Syntax
- Accessing Elements
- Where Is JavaScript Code Written?
- JavaScript Objects, Methods, and Properties
- Variables, Arrays, and Operators
- JavaScript Variables
- A Loosely Typed Language
- Google Chrome DevTools
- Storing User-Entered Data
- Exercise: Using Variables
- Constants
- Arrays
- Associative Arrays
- Playing with Array Methods
- JavaScript Operators
- The Modulus Operator
- Playing with Operators
- The Default Operator
- JavaScript Functions
- Global Objects and Functions
- User-defined Functions
- Returning Values from Functions
- Built-In JavaScript Objects
- Strings
- Math
- Date
- Helper Functions
- Conditionals and Loops
- Conditionals
- Short-circuiting
- Switch / Case
- Ternary Operator
- Truthy and Falsy
- Loops
- while and dowhile Loops
- for Loops
- break and continue
- Array: forEach()
- Event Handlers and Listeners
- On-event Handlers
- The addEventListener() Method
- Anonymous Functions
- Capturing Key Events
- Benefits of Event Listeners
- Timers
- Typing Test
- The HTML Document Object Model
- CSS Selectors
- The innerHTML Property
- Nodes, NodeLists, and HTMLCollections
- Accessing Element Nodes
- Dot Notation and Square Bracket Notation
- Accessing Elements Hierarchically
- Accessing Attributes
- Creating New Nodes
- Focusing on a Field
- Shopping List Application
- Manipulating Tables
- HTML Forms
- How HTML Forms Work
- The form Element
- Form Elements
- Buttons
- Checkboxes
- Radio Buttons
- Fieldsets
- Select Menus
- Textareas
- HTML Forms and CSS
- JavaScript Form Validation
- Server-side Form Validation
- HTML Form Validation
- Accessing Form Data
- Form Validation with JavaScript
- Checking Validity on Input and Submit Events
- Adding Error Messages
- Validating Textareas
- Validating Checkboxes
- Validating Radio Buttons
- Validating Select Menus
- Giving the User a Chance
- Regular Expressions
- Getting Started
- Regular Expression Syntax
- Backreferences
- Form Validation with Regular Expressions
- Cleaning Up Form Entries
- A Slightly More Complex Example