Web Visualization with HTML5, CSS3, and JavaScript

Watch Web Visualization with HTML5, CSS3, and JavaScript

  • 2015
  • 1 Season

Web Visualization with HTML5, CSS3, and JavaScript from Packt Publishing is an engaging and informative show that teaches viewers about creating and implementing attractive and interactive visualizations using the latest web technologies. Hosted by Ben Fhala, a highly skilled front-end web developer with years of experience in the industry, the show offers valuable insights into designing effective web visualizations, which is an essential skill for anyone involved in web development, data analysis, or data visualization.

Throughout the show, Fhala takes viewers on a journey through the core concepts of web visualization, providing hands-on guidance on using HTML5, CSS3, and JavaScript to design and create stunning and intuitive visualizations that can help audiences better understand complex data sets.

The show is divided into several episodes, each focusing on a specific visualization technique, tool, or concept. For example, in one episode, Fhala teaches viewers how to use HTML5's Canvas element to create engaging and interactive data visualizations, while in another episode, he covers D3.js, a powerful JavaScript library for data visualization.

What makes Web Visualization with HTML5, CSS3, and JavaScript such an engaging and informative show is the way Fhala presents the material. He brings a wealth of experience and knowledge to the table and presents the concepts in an approachable, easy-to-understand style that makes learning fun and enjoyable.

Whether you're a seasoned web developer or someone who's just starting out, web visualization is an important skill to have in today's data-driven world. With Fhala as your guide, you'll learn not only how to create stunning web visualizations with HTML5, CSS3, and JavaScript, but also gain valuable insights into best practices, common pitfalls, and how to optimize your visualizations for maximum impact and engagement.

In summary, if you're looking to expand your web development skills and learn how to create engaging and intuitive visualizations, Web Visualization with HTML5, CSS3, and JavaScript is definitely worth checking out. With its informative content, engaging host, and practical guidance, it's a show that's sure to inspire and educate anyone interested in web visualization.

Web Visualization with HTML5, CSS3, and JavaScript is a series that is currently running and has 1 seasons (28 episodes). The series first aired on November 22, 2015.

Filter by Source

Seasons
Using an Animation Library
26. Using an Animation Library
November 22, 2015
So far, we have created all the animations on our own without the help of an external library. Although we used jQuery, we ignored the fact that jQuery provides a few very helpful animation methods. We will learn the foundations of good animation and see it in action by using the jQuery library animations.
Creating a Callback and Activating the Queue
25. Creating a Callback and Activating the Queue
November 22, 2015
In the last video, we started to store animations that were not yet ready to trigger. In this video, we will continue going down that path by going into the current animation logic and asking it to update us when it's done using a callback. Once we have this logic in place, we have everything that we need to create an animation engine.
Animations Need Order - Creating a Queue
24. Animations Need Order - Creating a Queue
November 22, 2015
Let's start converting the structure to queue content.
Creating a Typewriter Effect
23. Creating a Typewriter Effect
November 22, 2015
Animations lie at the heart of modern web. Creating smooth and engaging animations uplift every design. Let's learn how to create a simple and cool animation, namely a typewriter effect. We will do this on the main text title.
Dynamic Visualization
22. Dynamic Visualization
November 22, 2015
One of the powers of JavaScript when it comes to visualization is the capability of improving user experience based on variables and changes, even in user environment. In this section, we will test to see the time of the day and based on it, change the CSS to create a darker or lighter background based on whether it's day or night.
Animating Canvas
21. Animating Canvas
November 22, 2015
Although there is much more to cover in canvas, we are ready to wrap up things by creating an animation in canvas.
Drawing a Grid in Canvas
20. Drawing a Grid in Canvas
November 22, 2015
Although we don't have time to go over all the features available in canvas, we will go ahead and jump right in by drawing a grid that will cover the entire visible area of the stage. In the process, we will learn about shapes, strokes, fills, and arcs.
Starting to Draw
19. Starting to Draw
November 22, 2015
Now that we know whether users have canvas available on their browsers, it's time for us to choose the API that we will be working with. We will choose the 2D API. Once we do so, we will go ahead and pick a color and start drawing the first shape-a rectangle.
Browser Support and Canvas
18. Browser Support and Canvas
November 22, 2015
Canvas is new, and with it, some older browsers will not support the full features. Although we won't worry about the overall experience of browsers that don't support canvas in this title, we want to show you the steps involved in figuring out whether the browser supports a feature or not.
Animating SVG
17. Animating SVG
November 22, 2015
There is no better way to wrap up this section on SVG by exploring how we can animate the art that we created so far. We will know how to work with the animate and animateTransform nodes of SVG.
Animating SVG
17. Animating SVG
November 22, 2015
There is no better way to wrap up this section on SVG by exploring how we can animate the art that we created so far. We will know how to work with the animate and animateTransform nodes of SVG.
Creating a Polygon
16. Creating a Polygon
November 22, 2015
Until now, all the shapes that we created in SVG were ready-made shapes. Let's learn how to create a polygon by defining as many points as we want into it.
Integrating SVG into HTML5
15. Integrating SVG into HTML5
November 22, 2015
The process of creating SVG within HTML is very simple. Let's have a look at the relationship between styling and rules and position the SVG exactly where we want it to be.
Integrating SVG into HTML5
15. Integrating SVG into HTML5
November 22, 2015
The process of creating SVG within HTML is very simple. Let's have a look at the relationship between styling and rules and position the SVG exactly where we want it to be.
Drawing a Circle in SVG
14. Drawing a Circle in SVG
November 22, 2015
Let's learn how to add more elements into the stage, starting with a circle. Through this sample, you will learn how to stack works in SVG, position elements, and work with SVG styles.
Drawing a Circle in SVG
14. Drawing a Circle in SVG
November 22, 2015
Let's learn how to add more elements into the stage, starting with a circle. Through this sample, you will learn how to stack works in SVG, position elements, and work with SVG styles.
Creating a Basic SVG Image
13. Creating a Basic SVG Image
November 22, 2015
Before we learn how to integrate SVG into an HTML document, we need to know the basics of how to work with SVG.
It's Time to Animate It All with CSS Transitions
12. It's Time to Animate It All with CSS Transitions
November 22, 2015
CSS3 introduced a powerful capability of animating without the use of JavaScript. In this video, let's have a look at how we can animate the new 3D object that we created.
Getting a Perspective of Things - 3D Things
11. Getting a Perspective of Things - 3D Things
November 22, 2015
Now that we have 3D elements, it's time for us to turn our attention to 3D space itself. We will have a look at the perspective and tweak the code just a bit more to change our perspective.
3D Transformations with CSS3
10. 3D Transformations with CSS3
November 22, 2015
Learn how to create 3D elements in CSS using CSS3 properties. We will create an object that has a front and a back, and when we rotate it, it will show us its back.
Creating 3D Elements
9. Creating 3D Elements
November 22, 2015
Before we can start drawing 3D elements, we need to prepare them. Let's create a design plan and draw our elements.
Life Is More Colorful with Alpha Channels
7. Life Is More Colorful with Alpha Channels
November 22, 2015
Until CSS3, colors were represented by RGB values. Computers have evolved and the need for more color combinations has grown. Let's shift our focus on a new color channel-the alpha channel.
There Is a Shadow Between Us
6. There Is a Shadow Between Us
November 22, 2015
One of the coolest effects that are around is shadows. Until CSS3, it was really hard to integrate shadows, as they involved using images and/or third-party tools such as Adobe Flash. With the help of CSS3, it is really easy for us to integrate shadows quickly and efficiently.
Creating Patterns with Gradients
5. Creating Patterns with Gradients
November 22, 2015
One of the cool new additions of gradients in CSS3 is the capability to create patterns using gradients. Let's learn how to create radial gradients, explore the logic behind its properties, and even see how to create a pattern with it.
Leveraging Stunning Gradients
4. Leveraging Stunning Gradients
November 22, 2015
Most people don't know how to integrate gradients into their designs. Now that gradients are around and are a part of the CSS3 library, let us talk about how to use this new feature in the most effective way.
Gentle Roundness
3. Gentle Roundness
November 22, 2015
Modern designs demand gentle touches to make the design cleaner. We help create designs that are cleaner and more modern. Until CSS3, this was done using images, which bloated up the site with extra images and scripts. In CSS3, we have a new property called border-radius that enables us to do exactly this with ease.
Sprucing Up Your Design with Custom Fonts
2. Sprucing Up Your Design with Custom Fonts
November 22, 2015
Web fonts have been introduced in CSS3 and are a must in modern web design. Let's learn how to integrate web fonts into your existing web design.
The Course Overview
1. The Course Overview
November 22, 2015
This video will offer an overview of the course.
Description
Where to Watch Web Visualization with HTML5, CSS3, and JavaScript
Web Visualization with HTML5, CSS3, and JavaScript is available for streaming on the Packt Publishing website, both individual episodes and full seasons. You can also watch Web Visualization with HTML5, CSS3, and JavaScript on demand at Amazon.
  • Premiere Date
    November 22, 2015