HTML5 taught here...
And a whole lot more...
Learn more about your instructor...
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...
- 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.
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.
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.
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.
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.
Course Outline
- 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
- Layers
- 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
- Viewport
- Orthographic or Perspective
- Axises
- 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
- ImpressJS
- Oridomi
- Overview & Conclusion- 5 Minutes
- Overview of the Course
- Conclusion
The ultimate reference guide for PhoneGap. Over 14 hours.
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:
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.
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.
Session 4 Topics:
- 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.
Session 5 Topics
Session 6 Topics:
Bonus Add-on. Final example project:
- 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!
