O'Reilly logo

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Learning Path: Master Web Visualization

Video Description

Create visualizations using HTML, CSS, and JavaScript

In Detail

The look and feel of a website is the most important element of user experience. If you’re a web developer looking to develop websites with brilliant visualizations, this Learning Path is for you. You will start by mastering HTML5 Canvas, learn CSS, master JavaScript and then use these skills to create stunning websites. You’ll be fully armed to take your web design skills to greater levels.

Prerequisites: Basic understanding of HTML5

Resources: Code downloads and errata:

  • Mastering HTML5 Canvas

  • Learning CSS

  • Mastering JavaScript

  • Web Visualization with HTML5, CSS3, and JavaScript

  • PATH PRODUCTS

    This path navigates across the following products (in sequential order):

  • Mastering HTML5 Canvas (3h 23m)

  • Learning CSS (3h 55m)

  • Mastering JavaScript (4h 10m)

  • Web Visualization with HTML5, CSS3, and JavaScript (2h 41m)

  • Table of Contents

    1. Chapter 1 : Mastering HTML5 Canvas
      1. The Course Overview 00:02:26
      2. Preparing Our JavaScript for Canvas 00:09:34
      3. Canvas Hello World 00:06:20
      4. The Palau Flag and the Perfect Circle 00:05:04
      5. Creating Canvas Elements Dynamically 00:06:12
      6. Drawing Our First Canvas Lines 00:09:43
      7. Meeting Canvas Paths 00:05:30
      8. Drawing Triangles with Paths 00:07:57
      9. Creating the Flag of Guyana 00:12:20
      10. Creating Multipoint Shapes 00:08:46
      11. Working with Sine, Cosine, and Radians 00:11:31
      12. Creating an Animated Clock 00:09:47
      13. Creating Complex Shapes 00:10:26
      14. Adding More Vertices 00:11:49
      15. Overlapping Shapes to Create Other Shapes 00:07:22
      16. Drawing Arcs 00:07:00
      17. Drawing with Quadratic Curves 00:07:23
      18. Drawing with Bezier Curves 00:04:31
      19. Drawing Images into Canvas 00:07:11
      20. Creating an Interactive Linear Gradient 00:09:06
      21. Working with Interactive Radial Gradient 00:06:07
      22. Working with Text 00:08:18
      23. Pixel Manipulation 00:07:23
      24. The Art of Clipping 00:09:17
      25. Transforming the Canvas 00:05:53
      26. Scale, Rotate, and Translate 00:06:30
    2. Chapter 2 : Learning CSS
      1. The Course Overview 00:03:37
      2. Getting to Know Our Project 00:02:47
      3. Setting Our First Style 00:04:48
      4. Adding Multiple Rules to an Element 00:03:39
      5. Converting Our Style into a Rule 00:03:14
      6. Moving Our CSS Logic into a Separate File 00:04:07
      7. Inspecting Any CSS on the Fly 00:04:18
      8. Taking a Deeper Look into the CSS Selector Rule 00:04:59
      9. Introducing CSS Classes 00:03:36
      10. Talking to HTML Items with IDs 00:04:46
      11. Traveling Through a Document with CSS Rules 00:03:26
      12. Defining a Few Items at the Same Time 00:02:27
      13. Best Practices When It Comes to CSS Rules 00:05:22
      14. Defining Backgrounds 00:12:52
      15. Working with the Background Property 00:03:56
      16. Understanding How Colors Work in CSS 00:07:20
      17. Working with Advanced Color Systems 00:12:31
      18. Defining Opacity Levels 00:06:41
      19. Adding Outlines to Shapes 00:05:41
      20. Sticking to Our Borders 00:04:01
      21. Talking to One Line at a Time 00:04:19
      22. Controlling the Width and Height of Elements 00:08:29
      23. Defining Margins of HTML Elements 00:06:51
      24. Sizing Things in Different Ways 00:07:05
      25. Working with Padding 00:03:35
      26. Making Things Float 00:03:31
      27. Displaying Elements as Block or Inline Elements 00:08:25
      28. Avoiding Scrolls 00:05:02
      29. Types of Position Layout 00:06:03
      30. Dealing with Bi-directional Paragraphs 00:10:43
      31. Aligning and Text Direction 00:06:58
      32. Defining Fonts 00:08:24
      33. Types of Fonts 00:07:50
      34. Decorating and Indenting Text 00:05:29
      35. Paragraph Level Formatting 00:07:18
      36. Working with Windows and Orphans 00:03:11
      37. Cutting Things Out 00:06:02
      38. Adding Content Before and after Elements Dynamically 00:05:35
      39. Dynamically Counting 00:07:51
      40. Changing How the Cursor Looks Like 00:08:57
    3. Chapter 3 : Mastering JavaScript
      1. The Course Overview 00:02:58
      2. Using White Space for Readability 00:05:20
      3. Declaring Variables 00:07:52
      4. Declaring Complex Data Types and Functions 00:04:22
      5. OOP Naming Conventions 00:04:14
      6. Creating a Global Namespace 00:04:46
      7. Constants (and Pseudo constants) 00:03:49
      8. Smart Coercion of Data Fields 00:04:23
      9. Targeting at JavaScript Versions or Features 00:04:53
      10. Creating an onload Method That Always Works 00:03:39
      11. OnReady – Our First Cross-browser Script 00:06:51
      12. Using Modernizr to Detect Features 00:04:23
      13. Building a Conditional Logic Flow 00:04:51
      14. Selecting DOM Elements Natively in HTML5 00:06:25
      15. Creating a Cross-browser Script Loader 00:05:37
      16. Using Sizzle to Select DOM Elements 00:07:14
      17. Defining a Namespace 00:05:43
      18. Creating Private Variables in JavaScript 00:05:45
      19. The JavaScript Module Design Pattern 00:06:30
      20. Version Controlling Our Library 00:07:08
      21. Building Out Our Library 00:11:26
      22. Thinking with Interfaces 00:07:21
      23. Creating an Adapter Design Pattern 00:05:30
      24. Building a jQuery Adapter 00:06:41
      25. Adding a Functionality Method 00:03:47
      26. Mimicking the jQuery Wrapper 00:09:07
      27. Introducing the Facade Design Pattern 00:03:56
      28. Creating a Facade Creator 00:04:34
      29. Creating a New Global Function Through the Facade 00:04:00
      30. Creating an Advanced Facade Pattern 00:05:19
      31. Creating a Singleton 00:11:33
      32. Building the Constructor for Our Ticker 00:10:37
      33. Connecting Time with Our Ticker 00:11:10
      34. Processing Interval groups 00:09:46
      35. Exposing Our Ticker to the World 00:02:46
      36. Creating an Event Dispatcher 00:13:35
      37. Integrating the Event Dispatcher into Our Library 00:08:12
      38. Removing Events from the Dispatcher 00:05:21
      39. Building Test Units 00:08:48
    4. Chapter 4 : Web Visualization with HTML5, CSS3, and JavaScript
      1. The Course Overview 00:01:53
      2. Sprucing Up Your Design with Custom Fonts 00:07:02
      3. Gentle Roundness 00:07:32
      4. Leveraging Stunning Gradients 00:07:06
      5. Creating Patterns with Gradients 00:05:55
      6. There Is a Shadow Between Us 00:09:10
      7. Life Is More Colorful with Alpha Channels 00:04:48
      8. 2D Transformations with CSS3 00:04:44
      9. Creating 3D Elements 00:08:23
      10. 3D Transformations with CSS3 00:04:47
      11. Getting a Perspective of Things – 3D Things 00:03:14
      12. It's Time to Animate It All with CSS Transitions 00:02:55
      13. Creating a Basic SVG Image 00:07:53
      14. Drawing a Circle in SVG 00:05:50
      15. Integrating SVG into HTML5 00:04:41
      16. Creating a Polygon 00:06:15
      17. Animating SVG 00:05:20
      18. Browser Support and Canvas 00:06:20
      19. Starting to Draw 00:07:41
      20. Drawing a Grid in Canvas 00:08:24
      21. Animating Canvas 00:03:44
      22. Dynamic Visualization 00:09:26
      23. Creating a Typewriter Effect 00:07:30
      24. Animations Need Order – Creating a Queue 00:06:15
      25. Creating a Callback and Activating the Queue 00:06:33
      26. Using an Animation Library 00:07:40