HTML5, CSS3, and JavaScript for Modern Web Development

Course Outline

HTML5, CSS3 and JavaScript are the fundamental Web technologies that all web developers must know. This HTML5, CSS3 and JavaScript Training course is designed to review the basics and leverage modern features to enhance user experience across all devices, from desktop browsers to the latest smartphones and tablets.  

Throughout the course, participants will learn how to apply best practices for HTML markup, CSS styling, and JavaScript programming to create modern, feature-rich sites and use semantics to improve Search Engine Optimization (SEO). This course covers a range of topics, including web standards, semantics, form validation, site design enhancements, fonts and animation and responsive design. After receiving a JavaScript primer and an introduction to JQuery, you’ll leverage browser storage and JSON. Next, you’ll leverage caching, geolocation, file I/O, drag-drag, messaging and web workers in programming. Draw images with Scalable Vector Graphics. Engage users with audio and video features. 

Programming experience with an object-oriented language is recommended for this course, and some familiarity with HTML and CSS is helpful. 

HTML5, CSS3, and JavaScript for Modern Web Development Benefits

  • In this training, you will learn how to:

    • Review the fundamental Web technologies: HTML5, CSS3, JavaScript.
    • Explore the newest HTML5 frameworks to create modern, feature-rich sites.
    • Improve SEO with semantic elements.
    • Perfect data entry forms with new types, validation, autocomplete and pickers.
    • Design eye-catching presentations with CSS3 borders, animation and fonts.
    • Program rich internet applications with JavaScript APIs and JQuery.
    • Enhance the user experience with drag-and-drop, SVG graphics, audio, and video.
    • Continue learning and face new challenges with after-course one-on-one instructor coaching.
  • Prerequisites

    Programming experience is recommended and experience with some HTML and CSS is helpful.

HTML5, CSS3 & JavaScript Training Outline

Module 1: Modern Web Standards

  • Enhancing a Web site with HTML5 
  • Exploring HTML5 standards and classes 

Module 2: HTML5: Markup, Semantics and SEO 

  • Getting up to speed with HTML Markup
  • Sectioning content with structural elements
  • Optimize pages for SEO ranking
  • Enhance accessibility for users of assistive technologies 

Module 3: Perfecting User Input with new Form controls 

  • Review of data entry forms and input elements
  • Guiding input with autofocus and placeholder
  • Validating textbox entry without scripting
  • Preventing errors with patterns, Constraint API and custom error messages
  • Easing choices with combo-box, color, date, number and range pickers 

Module 4: Enriching Site Design with CSS3 

  • Focusing on the basics with CSS Primer
  • Enhancing borders and backgrounds
  • Creating floating text and boxes with shadows and opacity
  • Increasing engagement with animation and @keyframes
  • Installing downloadable fonts with @font–face
  • Hiding values in custom data–* attributes
  • Adapting mobile layout with media queries
  • Saving bandwidth with image source sets

Module 5: Developing HTML5 Applications with Javascript 

  • Boosting your abilities with a Javascript Primer
  • Selecting and manipulating HTML with JQuery
  • Processing events with JQuery
  • Persisting data with the Web Storage API
  • Storing Complex data in JSON format 

Module 6: Providing Relevant Content Offline and with Geolocation  

  • Registering a Service Worker to Manage Resources
  • Cache pages for offline use using Fetch and Promises
  • Obtaining user latitude and longitude with Geolocation
  • Determine distance with the Haversine Formula
  • Generate location specific content
  • Leveraging anonymous functions 

Module 7: Providing Relevant Content Offline and with Geolocation 

  • Simplifying content formatting with WYSIWYG editors
  • Apply formatting with execCommand()
  • Handling events on draggable and drop targets
  • Enabling drag–and–drop file upload with HTML5 programming interfaces

Module 8: Exchanging Data Between Windows and Processes 

  • Posting messages across windows
  • Accessing external providers with XHR
  • Pushing data with WebSockets
  • Improving responsiveness with Web Workers

Module 9: Drawing Vector Images 

  • Creating scalable images with SVG XML markup
  • Substituting vector images for larger raster PNG files 

Module 10: Engaging Users with Audio and Video 

  • Embedding audio in a web page without plugins
  • Entertaining users with natively-supported video
  • Captioning video with Web Video Text Tracks (WebVTT) 
Course Dates - North America
Course Dates - Europe
Attendance Method
Additional Details (optional)