Mobile Development with HTML5, CSS3, and JavaScript

Mobile Development with HTML5, CSS3, and JavaScript

Bascom Bridge’s Mobile Web Development with HTML5/CSS3 and JavaScript training class teaches students how to produce dynamic, cross-browser compatible mobile sites using HTML5, CSS3, and JavaScript.

 

MOBILE DEVELOPMENT TRAINING OBJECTIVES

  • Create a website that can respond to the specific needs of the environment on which it is being viewed, presenting a layout that is equally – and differently – appropriate for mobile, tablet, and desktop devices
  • Learn to leverage the capabilities of HTML5 to present mobile-friendly sites, and understand the varying levels of support for some features among different devices
  • Understand how to use CSS Media Queries to display content modified to fit the client device
  • Understand the GeoLocation API and use it to integrate the user’s location into websites
  • Integrate video and other media appropriately for mobile devices
  • Learn how to use the jQuery Mobile framework to add support effects and animation

MOBILE DEVELOPMENT TRAINING PREREQUISITES

All attendees would ideally have some experience with HTML prior to the training. Prior programming/scripting experience is helpful but not required.

MOBILE DEVELOPMENT TRAINING MATERIALS

All attendees receive comprehensive courseware and a related textbook.

SOFTWARE NEEDED FOR EACH PC:

  • Web or text editor of your choice
  • Web browsers – a recent version of one or more of the following:
    • Google Chrome
    • Mozilla Firefox
    • Internet Explorer (9 or later)
    • Safari (5 or later)
    • Opera
  • If space on a web server is available, students may also wish to bring their mobile devices so they can test how pages appear on these devices; otherwise, we will recommend an emulator.
  • Please contact us for comprehensive setup details
  • For classes delivered online, all participants need either dual monitors or a separate device logged into the online session so that they can do their work on one screen and watch the instructor on the other. A separate computer connected to a projector or large screen TV would be another way for students to see the instructor’s screen simultaneously with working on their own.

MOBILE DEVELOPMENT TRAINING OUTLINE

  • Introduction
  • The Languages
    • The Languages of Modern Web Development
    • What is HTML5?
      • The Role of HTML5
      • HTML5 Basic (boilerplate) code
      • Writing Basic HTML
    • What is CSS3?
      • The Role of CSS
      • CSS Frameworks, Libraries and Preprocessors
      • CSS Fundamentals
    • What is JavaScript?
      • The Role of JavaScript
      • Where JavaScript is written
      • JavaScript Libraries and Frameworks
    • What is jQuery?
      • jQuery vs. standard JavaScript
    • Getting Started with jQuery
      • Locating and using the jQuery library
      • The jQuery Wrapper
      • The jQuery document.ready() function
  • The Development Environment
    • Introduction to the Development Environment: Tools every developer will need
      • Installing a Wireframe Tool
      • Installing a Text/Code Editor
    • Integrated Development Environment’s (IDEs)
      • Installing an Eclipse IDE and Test
      • Installing Titanium Studio/Aptana IDE
      • Installing other IDE’s (NetBeans, Dreamweaver)
    • Debuggers
      • Browser development tools
      • Online Code Validators
      • IDE Debuggers
    • Simulators and Emulators
      • Runtimes
      • Device Pairing Solutions
  • Designing for the Mobile Web
    • Types of Mobile Applications
    • Native Apps
      • Hybrid Apps
      • Dedicated Web App
      • Generic Mobile App
    • How do you decide which App type to build?
      • Qualities of a dedicated Web App:
      • Qualities of a native Web App:
      • Qualities of a Hybrid App
    • Overview of Mobile Best Practices
      • Design Best Practices
      • Markup Best Practices
      • Architecture Best Practices
  • Introduction to HTML5
    • Introduction to HTML5 for Mobile Development
    • HTML5 Syntax
      • HTML5 Page Structure
      • Writing initial HTML5 code
    • HTML5 Content Models
      • HTML5 Deprecated Elements
      • HTML5 Elements with New Meanings
      • HTML5 Deprecated Attributes
    • Structural and Semantic Elements
      • Building a Desktop/Mobile Web Page
      • Using the ViewPort meta tag
      • Preparing the file for CSS
      • Using the Modernizr JavaScript library
      • Examining a template-based HTML page
    • New HTML5 Elements
      • What are the new Elements?
      • How do I use the new Elements?
      • Checking for Browser Support
    • New HTML5 Media Elements
      • When do I use these new elements?
      • The Video and Audio API
      • Using the video elements attributes
    • New HTML5 Form Elements and Attributes
      • New Form Input Types
      • HTML5 Form Validation
      • Form Fallback solutions
    • New HTML5 Canvas Element
      • What are the new elements?
      • Detecting browser support for <canvas>
      • Using the <canvas> element
      • Drawing Rectangles on <canvas>
      • Drawing Arcs on the <canvas>
      • Drawing Quadratic Curves
      • Drawing Bezier Curves on the <canvas>
      • Creating a Linear Gradient
      • Creating a Pattern on the <canvas>
      • Canvas API Properties
      • Canvas Fallback solutions
    • Web Storage
      • What is Web Storage?
      • The Web Storage API
      • When NOT to use Web Storage
      • Detecting browser support for Web Storage
      • Cookies vs. Session Storage vs. LocalStorage
      • Storing and Retrieving client-side data
      • Using sessionStorage
      • Responding to the storage event
      • Storage Fallback solutions
    • Geolocation
      • What is Geolocation
      • What is Geolocation Used for?
      • The Geolocation Object
      • Checking for geolocation support
      • Finding the users location
      • Using Unobtrusive JavaScript and jQuery
      • Display location with Google Map
      • Obtaining position information
      • Geolocation Fallback solutions
    • Web Messaging
      • What is Web Messaging
      • Messaging’s postMessage Method
      • Establishing Trust between Domains
      • What is Cross Origin Resource Sharing (CORS)
      • Ports and Channel Messaging
      • The Message Event Object Properties
      • Checking for WebStorage Browser Support
      • Sending Cross-Document Messages
      • WebStorage Fallback solutions
    • Web Workers
      • What are Web Workers
      • Why use Web Workers
      • The Worker Object
      • Types of Web Workers
      • Checking for Web Worker Support
      • Creating a Web Worker
      • Controlling Web Workers using JavaScript
      • Terminating a Web Worker
      • Web Worker Error Event
      • Creating Shared Workers
    • Drag and Drop
      • What is Drag and Drop
      • What is Drag and Drop Used for?
      • Browser Support for Drag and Drop
      • Understanding Drag and Drop
      • The draggable attribute
      • Drag and Drop with a Data “payload”
      • Drag Events
      • Drop Event
      • Responding to the Drop Event
      • Drag and Drop with jQuery
    • Offline Applications
      • What is an Offline Application?
      • Why do we need offline Applications?
      • Understanding Browser Cache
      • Understanding applicationCache
      • Checking browser support
      • Understanding the Cache Manifest File
      • Associating the Cache Manifest with a Web Page
      • Understanding Cache Events
    • XMLHTTPRequest Level 2
      • What is XMLHttpRequest (XHR)?
      • The XHR Object
      • Checking for Browser Support
      • Understanding the onprogress Event
      • Understanding the onload event
      • Displaying XML returned from XHR
    • Web Sockets
      • HTTP and the request/response Model
      • Communicating with the Server
      • What is a Web Socket
      • Using a WebSocket Server with the WebSocket API
    • Server-Sent Events
      • What are Server Sent Events?
      • Creating an EventSource
      • The Advantages of Server-Sent Events
      • The Disadvantages of Server-Sent Events
      • Using Server Sent Events
  • Cascading Style Sheets
    • CSS Syntax
    • CSS Selectors
      • ID Selectors:
      • Class Selectors:
      • Compound Selectors:
      • Using CSS Selectors
      • More CSS Selectors
    • Getting Started with CSS
      • The CSS Reset
      • Examine a CSS Boilerplate file
      • Basic CSS Design Best Practices
    • CSS Layout
      • CSS Layout Properties
      • Getting Started with CSS Layout
    • CSS Typography
      • Type considerations
      • Sizing Fonts
      • CSS Typographic Properties
      • Getting Started with CSS Typography
      • Embedding Fonts in your Website/Web Application
    • CSS Backgrounds and Color Properties
      • Expressing Color Values with CSS
      • Background properties
    • Object-Oriented CSS
    • Minifying CSS
    • CSS3 New Features
      • What is CSS3?
      • CSS3 Backgrounds and Shadows
      • CSS3 Transforms
      • CSS Transforms: Properties and Methods
      • CSS3 Transitions
      • CSS3 Animations
      • CSS3 3D Animations
      • 3D Transformations
      • CSS3 Animation
      • CSS Preprocessors
  • Introduction to jQuery Fundamentals
    • Selecting Elements with jQuery
    • Generating HTML
  • Intermediate jQuery
    • The jQuery Wrapped Set
    • The jQuery Event Model
    • Working with jQuery Effects
    • Working with jQuery Animation
  • Conclusion

Send a Comment

Your email address will not be published.

CONTACT US

+91 9376007676  

INQUIRY NOW


,

Mobile Development with HTML5, CSS3, and JavaScript

1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)
Loading...
  • Course No : MBL-200
  •  Theory : 40%
  •  Lab : 60%
  • Duration : 30 (hours)
Scroll Up
Skip to toolbar