Home | Courses | Web Development Training Courses | CSS Training Courses | HTML5 CSS3 and JavaScript Training

HTML5 CSS3 and JavaScript Training

Course Duration: 5 Days

This Course Covers Version(s):

HTML5, CSS3 and JavaScript. PC or Mac.

  • Live Class with Instructor
  • Digital Course Manual
  • Hands-on Labs
  • One Year Access to Recorded Course

In this HTML5 CSS3 and JavaScript Training course, students will quickly get up to speed on the latest standards for developing web applications for both browsers and touch-enabled devices. This course provides a quick introduction to the basics of HTML and then dives deep into new HTML5 tags and attributes. From there, students will learn the latest in CSS3 techniques to create unique and compelling interfaces for their web pages and applications. The course concludes by introducing JavaScript and showing students how to use it for client-side operations, storing data, manipulating graphics and validating user form input. The course also introduces debugging your web pages and applications and deploying them to various end-points.

After successful completion of this course, students 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.

Students should have a familiarity and comfort level using a computer and a basic understanding of directories, file locations, use of a web browser, URL’s, and basic networking concepts such as the difference between a client and a server.

This course is designed for students who either have some experience using HTML/HTML5 or CSS/CSS3 or those who are new to web development. The course provides an intensive introduction to the core technologies used in web development today.

  1. A Quick Overview of Web Development
    • HTML is Part of a Team
    • Client-side Programming
    • Server-side Programming
    • Web Development Technologies
  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. 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. 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. HTML Images
    • Inserting Images
    • Image Links
    • Adding Images to the Document
    • Exercise: Adding Images to the Page
    • Providing Alternative Images
  6. HTML Lists
    • Unordered Lists
    • Ordered Lists
    • Definition Lists
    • Exercise: Creating Lists
  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. CSS Fonts
    • Font-family
    • Font-face
    • Font-size
    • Font-style
    • Font-variant
    • Font-weight
    • Line-height
    • Font shorthand
    • Exercise: Styling Fonts
  9. Color and Opacity
    • About Color and Opacity
    • Color and Opacity Values
    • Color
    • Opacity
    • Exercise: Adding Color and Opacity to Text
  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. 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. 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. JavaScript Functions
    • Global Objects and Functions
    • Exercise: Working with Global Functions
    • User-defined Functions
    • Exercise: Writing a JavaScript Function
    • Returning Values from Functions
  14. Built-In JavaScript Objects
    • Strings
    • Math
    • Date
    • Helper Functions
    • Exercise: Returning the Day of the Week as a String
  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. 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. 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. 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. 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. 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

This course does not align to a specific exam or certification.

Live Instructor-Led Virtual Class
Click here to load this Caspio Online Database.
Questions? View Our Live, Instructor-Led Virtual Class FAQs
Virtual or In-Person Group Training

  • For Private Groups as small as 2 people.
  • Live, Instructor-led Online or Onsite Class for your group.
  • Customizable to your needs.
Click here to load this Caspio Online Database.

Questions? Contact Us
Click here to load this Caspio Online Database.