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.
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.
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.
Enhance your site with the gifts of CSS3. Nine hours.
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.
- Introduction to CSS3.
- IE Conditional comments.
- CSS3 New Color Formats.
- 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.
- 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.
Build HTML5 and Dreamweaver Websites. Five hours.
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.
- 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).
- Progressively enhancing your site with all this new stuff.
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.
- Introduction to the course – 2 Minutes –
- What this course entails?
- Why should you be interested in this course as a web developer or designer?
- Quick Overview of Blender- 23 Minutes –
- Workspace Areas
- Navigating the Viewport
- 3D cursor, Create and Duplicate Objects
- Dimensions and Scaling
- Object Relationships
- Object Manipulation
- 3D terminology – 15 Minutes –
- Understanding the Viewport
- Orthographic and Perspective Modes
- Perspective origin
- Vertices, Faces and Objects
- Local and Global Axises
- From Blender to the Browser -13 Minutes
- Orthographic or Perspective
- Perspective Origin
- Setting up the Development Environment – 16 Minutes
- Introduction to SASS
- Lesson Structure
- Setting up the 3D Environment
- Viewport & Creating Faces – 17 Minutes
- DOM Viewport
- Translating & Rotating the Face
- Creating Faces Part Two – 20 Minutes
- Scaling the Face
- Local Axises
- Normal Side of the Face
- Transform Origin
- Starting the Cube- 19 Minutes
- Getting started creating a cube
- Preserving 3D
- Completing Faces of the Cube – 24 Minutes
- Finishing all faces
- Perspective Origin
- Objects Origin
- Extending & Animating the Cube – 18 Minutes
- Extending the Cube
- Animating the Cube
- Completing 3D Cube Animation – 16 Minutes
- Finish Animating the Cube
- Correcting Faces
- Cube Fallback Support – 13 Minutes
- Using Modinizr
- Apply CSS Fallback Styles
- Object Hierarchy Progressive Enhancement -15 Minutes
- Setting up the 3D Environment Progressively
- Object Hierarchy Creating Objects – 16 Minutes
- Building Objects
- Understanding Hierarchies
- Object Hierarchy Animation – 17 Minutes
- Animating a Two Step Hierarchies
- Finish Object Hierarchy Animation – 20 Minutes
- Adding a Level
- Using Preserve3D For Hierarchy Perspective
- Animating Top Level
- Cool CSS 3D Projects – 26 Minutes
- Overview & Conclusion- 5 Minutes
- Overview of the Course
Extra Tutorial – SASS and SCSS – 34 Minutes
The ultimate reference guide for PhoneGap. Over 14 hours.
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.
- 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 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.
- Compile applications in the “Cloud” with the PhoneGap Build Service. You’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 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 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!
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.
Buy All Six Packages in a Bundle and Save!
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