Tuesday Discount - Lifetime Access for $20!!!! - Click Here!

HTML5 Training Bundle

6 Amazing Tutorials

Technology Taught HTML5

HTML5 taught here...

HTML5 is the latest HTML standard. It was built to work hand-in-hand with CSS3, the latest CSS standard.

And a whole lot more...

Along with HTML5, this bundle teaches the latest web technologies, software and frameworks. You’ll learn CSS3, jQuery, Popcorn.js, ImpressJS, Oridomi, Dreamweaver, Blender, and PhoneGap.

Learn more about your instructor...

Every tutorial in this bundle is taught by Lawrence Turton, CartoonSmart’s resident HTML5-guru. Lawrence is an experienced programmer with HTML5, CSS3, jQuery, PhoneGap, and Dreamweaver. Lawrence has taught nearly 50 hours for CartoonSmart, most of which is included in this huge bundle.  For freelance inquiries, Lawrence can be found at Elite-WD.com.

HTML5 Basics tutorial. Seven hours.

Here at CartoonSmart we like to keep things project-based, so you can actually build something while you train. But their comes a time when the best approach to teaching something is to cover it like a book. So with this amazing seven hour course you can sit back and let our instructor guide you through all the new features of HTML5 without running the risk of falling asleep and drooling all over another boring training book. Time-stamped index cards for the topics below are included and like all our tutorials, source code is packaged up with the movies.

Learn about the topics taught in this course...

Buyers of this course will have a video reference library for:

  • HTML5 Changed / Removed Elements.
  • HTML5 Typography Elements.
  • New HTML Page Structure Elements.
  • New HTML5 Events.
  • HTML5 Storage.
  • HTML5 Forms.
  • HTML5 Video and Audio .
  • HTML5 Canvas & Drawing API.
  • HTML5 Drag and Drop API.

HTML5 Basics Video Tutorials

Enhance your site with the gifts of CSS3. Nine hours.

 

CSS3 Basics Video Tutorials

In this series, you will learn the best new features of CSS3. Our instructor will be using Dreamweaver, but you can work through the course using any text editor and test in the web browser of your choice. After a comprehensive look at what CSS3 offers, our instructor wraps up the final couple hours by building an example website which demonstrates how CSS3 can be used across multiple devices (desktops or mobile phones). You’ll learn how to support older browsers as well as new, so you progressively enhance your site.

Learn about the topics taught in this course...

  • Introduction to CSS3.
  • IE Conditional comments.
  • CSS3 New Color Formats.
  • @Font-face.
  • CSS3 border properties.
  • CSS3 Background properties.
  • CSS3 text effects.
  • CSS3 Multiple Columns.
  • CSS3 2D Transformations.
  • CSS3 3D Transformations.
  • CSS3 Animations.
  • CSS3 User Interface.
  • CSS3 Flexible Box Model.
  • CSS3 Selectors.
  • CSS3 Media Queries.

Learn the best of jQuery (ahem, Javascript). Four hours.

What the heck is jQuery? It’s just Javascript. To be a little more specific it is a fast, concise Javascript library that simplifies HTML events, animations, and interactions  And in this four hour course, you’ll learn how to work with this code library to do amazing things. Our instructor will be showing off some of the coolest things you can do with jQuery, while also giving you a well rounded education in the basics of Javascript, like creating variables, functions, if statements, and so on. This is a great course for old and new programmers alike.

Learn about the topics taught in this course...

  • Importing Jquery and why document order is important.
  • Writing your first statement.
  • Creating variables.
  • Make a simple fadeOut transition.
  • Making a click-able anchor.
  • Animation methods.
  • Editing CSS with Jquery.
  • Adding Classes using Jquery.
  • Learning all the Toggle methods.
  • Statement chaining and the .delay method.
  • Link events together.
  • Creating an element and using appendTo method.
  • Create animations using animate method.
  • Timing and callback on animate methods.
  • Using the load ajax method.
  • Using the .size and .length methods.
  • Look at advanced selectors.
  • Creating an alert box.
  • FancyBox, ScrollToPlugin, Inner-Fade Plugins.

jQuery Basics Video Tutorials

Build HTML5 and Dreamweaver Websites. Five hours.

HTML5 and Dreamweaver Video Tutorials

Build desktop and device-safe websites using all the latest technologies. Our instructor guides you step by step through creating a complete website using HTML5 and Dreamweaver. And for those of you dragging your feet on learning the most recent features of Dreamweaver CS5 , CS5.5, CS6, or CC you’ll see how the program integrates with all this emerging coolness taking over the web.

Topics in this course include:

  • Interactive video with Popcorn.js (a free library for integrating the web and video).
  • Trigger events or content on the page based on what point your video is playing.
  • Compressing and optimizing files.
  • Integrating other API’s like Twitter, Flicker and Google Maps.
  • 3D Page transitions.
  • HTML5 Galleries that use the Canvas API to add effects to images dynamically (for example, make an image black and white without having to actually save a separate colored copy).
  • How to safely support all types of devices, be it table, smart phone or just older browsers that don’t understand CSS3 or Javascript.
  • Progressively enhancing your site with all this new stuff.
  • Tons of HTML5, Javascript / JQuery, and CSS3 code.

Bend space and time with CSS 3D. Five awesome hours.

Learn how to transform your site with all the cool 3D features of CSS, while keeping it safe for older browsers. If you’ve got some familiarity with the 2D properties of CSS, you’ll have no problem jumping head-first into exploring the 3D aspects. To get you comfortable with the 3D environment and terms like “z-axis, orthographic”, the course begins by using Blender, a free program, you can use to visually play around in a three-dimensional space (without having to tinker with CSS code). Once you get used to thinking in 3D space, our fantastic instructor Lawrence Turton will guide you through some amazing CSS projects.

You can watch a free preview in our Sample Pack.

CSS3 3D Video Tutorials

Course Outline

 

  1. Introduction to the course – 2 Minutes –
    • What this course entails?
    • Why should you be interested in this course as a web developer or designer?
  2. Quick Overview of Blender- 23 Minutes –
    • Workspace Areas
    • Navigating the Viewport
    • 3D cursor, Create and Duplicate Objects
    • Dimensions and Scaling
    • Object Relationships
    • Object Manipulation
    • Layers
  3. 3D terminology – 15 Minutes –
    • Understanding the Viewport
    • Orthographic and Perspective Modes
    • Perspective origin
    • Vertices, Faces and Objects
    • Local and Global Axises
  4. From Blender to the Browser -13 Minutes
    • Viewport
    • Orthographic or Perspective
    • Axises
    • Perspective Origin
  5. Setting up the Development Environment – 16 Minutes
    • Introduction to SASS
    • Lesson Structure
    • Setting up the 3D Environment
  6. Viewport & Creating Faces – 17 Minutes
    • DOM Viewport
    • Translating & Rotating the Face
  7. Creating Faces Part Two – 20 Minutes
    • Scaling the Face
    • Local Axises
    • Normal Side of the Face
    • Transform Origin
  8. Starting the Cube- 19 Minutes
    • Getting started creating a cube
    • Preserving 3D
  9. Completing Faces of the Cube – 24 Minutes
    • Finishing all faces
    • Perspective Origin
    • Objects Origin
  10. Extending & Animating the Cube – 18 Minutes
    • Extending the Cube
    • Animating the Cube
  11. Completing 3D Cube Animation – 16 Minutes
    • Finish Animating the Cube
    • Correcting Faces
  12. Cube Fallback Support – 13 Minutes
    • Using Modinizr
    • Apply CSS Fallback Styles
  13. Object Hierarchy Progressive Enhancement -15 Minutes
    • Setting up the 3D Environment Progressively
  14. Object Hierarchy Creating Objects – 16 Minutes
    • Building Objects
    • Understanding Hierarchies
  15. Object Hierarchy Animation – 17 Minutes
    • Animating a Two Step Hierarchies
  16. Finish Object Hierarchy Animation – 20 Minutes
    • Adding a Level
    • Using Preserve3D For Hierarchy Perspective
    • Animating Top Level
  17. Cool CSS 3D Projects – 26 Minutes
    • ImpressJS
    • Oridomi
  18. Overview & Conclusion- 5 Minutes
    • Overview of the Course
    • Conclusion

Extra Tutorial – SASS and SCSS – 34 Minutes

The ultimate reference guide for PhoneGap. Over 14 hours.

Phone Gap Video Tutorials

Easily create apps using the web technologies you know and love: HTML, CSS, and JavaScript. PhoneGap is a free and open source framework that allows you to create mobile apps using standardized web APIs for the platforms you care about. Imagine being able to build apps that run on Android, iOS, Windows Phones, Palm, or Blackberry, with a single framework. PhoneGap does just that!

Session 1 Overview:

PhoneGap Tutorials Image 1

PhoneGap is an amazing framework that will allow you to code in Dreamweaver (or other text editors) and deploy to multiple devices. Through most of the course, our instructor will be testing on a PC using his Android device but occasionally on a Mac using an iPhone.

If you have Dreamweaver CS5.5 (or higher) then you are nearly setup already, but we’ve included a separate setup video for both Mac and PC users. And here’s the real beauty of PhoneGap: throughout the entire multi-session series, we’ll be using the same code regardless of the device type to interact with things like the Accelerometer, Battery status, Location, Camera, Contact Book, and so on.

Session 2 Topics:

  • PhoneGap Camera API Tutorial – Learn how to take a picture or use a picture from the camera library. Explore options like save-quality, allow simple editing before selection, encode as PNG or JPG, desired width or height, and more.
  • PhoneGap Events API Tutorial – We’ll look at event types, such as what to do when the device is ready, an app is paused, app is resumed, the network has gone on or offline, the user presses the back, menu, or search buttons (doesn’t apply to iOS), a call has ended, the battery hits a critical or low level, or the battery status has changed.
  • PhoneGap GeoLocation API Tutorial – Explore how to get the current location of the phone, and look at properties like latitude, longitude, altitude, accuracy, heading, speed, and more. Also learn how to watch for changes in the current location.You can view the API’s in this session as needed.

PhoneGap Tutorials Session 2

Session 3 Topics:

  • PhoneGap Contacts API Tutorial – Learn how to create, clone, update, remove and find contacts in the devices contact database. Access properties of a contact, like name (first, last, nickname), phone number, email, address, IMS, organization, birthday, note, photo, category, and URL’s associated with a contact.
  • PhoneGap Compass API Tutorial – Learn how to use the compass to detects the direction or heading that the device is pointed. Options to look at are the magnetic heading, true heading (relative to geographic North), heading accuracy, and time stamp when a reading occurred.You can view the API’s in this session as needed.

PhoneGap Tutorials course 3

Session 4 Topics:

  • Compile applications in the “Cloud” with the PhoneGap Build ServiceYou’ll also learn how to get started with QR Codes (Quick Reference Codes) to find and install your app from the PhoneGap servers. Also discussed are many details about publishing your app for iOS, Android, Blackberry and other devices.
  • PhoneGap Storage API Tutorial – The Storage API gives you the ability to create a database on the client side rather than on a remote server. Learn how to populate a database, retrieve data, delete data, and everything else related to managing your information.

PhoneGap Tutorials course 4

Session 5 Topics

PhoneGap Capture API Tutorial – This API allows you to capture an image, video, or audio. You’ll learn all the parameters involved with capturing these types of media (max duration, various modes, etc). You’ll learn how to store and retrieve the media. With these tools you could program your own voice or video recorder. Also discussed are the quirks between capturing media on different devices.

PhoneGap Media API Tutorial – The Media API allows smooth playback of audio without slowing down your application. This is a better option than using HTML5 based audio which could slow down your app, or Flash Player based audio, which isn’t available on the iOS devices. You’ll learn how to control your media with Play, Seek, Pause, Resume and Stop options.

PhoneGap Tutorials course 5

Session 6 Topics:

PhoneGap File API Tutorial – We’ve saved one of the longest tutorials for last. While most of the lessons you can watch in any order you like, our instructor requests you watch most of the previous ones first because he combines many different API’s in this final lesson. With the File API you can access the device’s file directory. So you can search, read, write, upload and transfer files with this API, making it one of the most interesting ones. And worthy of an almost 4 hour lesson!

Bonus Add-on. Final example project:

As a final example, your instructor has combined many of the PhoneGap API’s into one amazing iPhone application. The app has five menu buttons which navigate to:

  • Contact Window: with buttons to trigger a text, phone call or email.
  • Voice Recorder: Playback a sound file you’ve recorded through the app.
  • YouTube Video Playlist / Player: Create a playlist of your favorite YouTube Videos.
  • Image Capture App: Take a picture from the device’s camera and insert it within another image. This could be the foundation of an amazing application. Perhaps a kid’s book featuring the child reading the book.
  • Compass: Get the magnetic heading of your device.

Phone Gap Tutorials Session 7

Buy All Six Packages in a Bundle and Save!

HTML5 Development Bundle of Training Videos

Two affordable purchasing options…

Purchase Option 1 - Lifetime Access

Get Lifetime Access to this course for a one-time purchase price. You can download (or stream) the movie files and download any source projects.

Already have Lifetime Access? You can get started watching the course from right here.

Purchase Option 2 - Subscription Access

Both Monthly and Yearly Subscribers can stream every video tutorial on the site. Yearly subscribers get access to the latest version of every starter kit whenever they want, plus access to hundreds of dollars worth of royalty free game art (yes, it’s an amazing deal). You can cancel your Monthly or Yearly subscription anytime directly through Paypal.

Browse All Courses 

  • Billed once per month until cancelled

  • Billed once per year, 2 times

Buy Now

Already a Subscriber? Get started on the course from right here.




Know what an affiliate program is? You make money just by sharing links to our site! Win. Win.

Earn when you refer any buyer here! 30 day tracking. Commissions are 33%-50% and recur on subscription products!