Web Visualization with HTML5, CSS3, and JavaScript

Become an ace at creating stunning web designs and animations using HTML5, CSS3, and JavaScript
4.6 (11 ratings)
Instead of using a simple lifetime average, Udemy calculates a
course's star rating by considering a number of different factors
such as the number of ratings, the age of ratings, and the
likelihood of fraudulent ratings.
133 students enrolled
$19
$75
75% off
Take This Course
  • Lectures 26
  • Length 2.5 hours
  • Skill Level Beginner Level
  • Languages English
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
    Certificate of Completion
Wishlisted Wishlist

How taking a course works

Discover

Find online courses made by experts from around the world.

Learn

Take your courses with you and learn anywhere, anytime.

Master

Learn and practice real-world skills and achieve your goals.

About This Course

Published 12/2015 English

Course Description

Web development techniques are rapidly changing to adapt to new advancements in technologies each day. To keep up with these changes, developers need to be able to create websites with brilliant visualizations. HTML5 makes it possible to build interactive visualizations right in the web browser, written in JavaScript. It provides an integrated approach to speed up the process of creating live visualizations. The birth of CSS3 brings with it many updates that make designing in HTML easier and more stunning.

Web Visualization with HTML5, CSS3, and JavaScript is a comprehensive video course that covers everything you need to know about the cutting-edge techniques introduced in HTML5, CSS3, and JavaScript.

The course starts off by getting you up to date with the most recent advancements in CSS3 visualization techniques. From there you’ll keep building your knowledge base by shifting your focus to animating and transforming elements without JavaScript using CSS. Moving ahead, you’ll discover how to draw in SVG and animate these elements without the use of JavaScript. Then, we’ll change gears to cover bitmap/raster art as you learn to draw in HTML5 Canvas and how to animate the drawn elements. We’ll wind up the course with a foray into animation libraries and pure JavaScript animations.

By the end of the course, you will be fully armed to create stunning web visualizations to integrate it into your workflow.

About The Author

Ben Fhala discovered his passion for data visualization while he was working at Parsons in New York, in their data visualization department, PIIM. He is the owner of the online video training school, 02geekcom, and an Adobe ACP. He enjoys spending most of his time learning and teaching, and has a love for visual programming and visualization in general. Ben has had the honor of developing applications for members of the US Congress, Prime Ministers, and Presidents around the world.

He has built many interactive experiences for companies such as Target, AT&T, Crayola, Marriott, Neutrogena, and Nokia. He has technically directed many award-winning projects and has been part of teams that have won three Agency of the Year awards.

Among Ben's publications are HTML5 Graphing and Data Visualization Cookbook, and three video courses jQuery UI Development, Learning Object-Oriented JavaScript, Mastering JavaScript, and JavaScript Design Patterns, all for Packt Publishing.

What are the requirements?

  • You should be familiar with HTML, CSS, and JavaScript at the foundation level to follow the examples covered in this course.

What am I going to get from this course?

  • Make your web designs stand out by learning the most important visual aspects of CSS3
  • Leverage CSS3 libraries to integrate gradients and patterns into your designs
  • Control and manipulate transformations of elements from 2D to 3D using scale, rotate, and the translate methods
  • Create, integrate, deploy, and animate SVG into our HTML5 application to enhance its look
  • Work with the Canvas 2D API to create and animate the created elements with Canvas
  • Enhance the user experience using dynamic visualizations
  • Get to grips with animation using the jQuery and JavaScript library animations

What is the target audience?

  • If you are a web developer who wants to keep up with the fast-paced modern web and improve your web designing skills to create stunning animations, this course is a must!

What you get with this course?

Not for you? No problem.
30 day money back guarantee.

Forever yours.
Lifetime access.

Learn on the go.
Desktop, iOS and Android.

Get rewarded.
Certificate of completion.

Curriculum

Section 1: CSS3 Visualization Techniques
01:52

This video will offer an overview of the course.

07:02

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.

07:31

Modern designs demand gentle touches to make the design cleaner. Historically, this was often found in the corners of elements instead of sharp corners that were created by controlling the softness of the corners. 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.

07:05

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.

05:54

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.

09:09

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.

04:47

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.

Section 2: CSS3 Transformations and Animations
04:43

Transforms in CSS are really easy. All that you need to really know about is the transform command and the methods that you can use to control and manipulate the transformation.

08:23

Before we can start drawing 3D elements, we need to prepare them. Let's create a design plan and draw our elements.

04:47

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.

03:13

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.

02:55

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.

Section 3: Drawing and Animating with SVG
07:53

Before we learn how to integrate SVG into an HTML document, we need to know the basics of how to work with SVG.


05:50

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.

04:41

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.

06:14

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.

05:20

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.

Section 4: HTML5 Canvas
06:20

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.

07:41

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.

08:24

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.

03:44

Although there is much more to cover in canvas, we are ready to wrap up things by creating an animation in canvas.

Section 5: JavaScript and jQuery
09:25

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.

07:29

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.

06:15

Let's start converting the structure to queue content.

06:32

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.

07:39

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.

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Packt Publishing, Tech Knowledge in Motion

Over the past ten years Packt Publishing has developed an extensive catalogue of over 2000 books, e-books and video courses aimed at keeping IT professionals ahead of the technology curve. From new takes on established technologies through to the latest guides on emerging platforms, topics and trends – Packt's focus has always been on giving our customers the working knowledge they need to get the job done. Our Udemy courses continue this tradition, bringing you comprehensive yet concise video courses straight from the experts.

Ready to start learning?
Take This Course