Introducing Dart
4.5 (5 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.
40 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Introducing Dart to your Wishlist.

Add to Wishlist

Introducing Dart

An exciting and immersive introduction to learning client side Dart programming
4.5 (5 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.
40 students enrolled
Created by Packt Publishing
Last updated 9/2015
Price: $50
30-Day Money-Back Guarantee
  • 1 hour on-demand video
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • Get up and running with the Dart development environment and Dart Editor
  • Produce clean and reliable codes using classes to organize ideas
  • Handle user events like keyboard presses and mouse movements to change the behaviour of your application.
  • Become more fluent with the core Dart tools such as Pub and Dart2js
  • Combine the power of CSS with Dart to create stunning effects and animations.
  • Use the dartlang API resource to expand on the classes, methods, and functions discussed.
  • Create and deploy visually attractive, interactive, and immersive web applications
View Curriculum
  • No experience with other programming languages is necessary, although it may help.

As the internet becomes more of an application platform, the need to develop more feature-rich and immersive applications grows! Dart is a fantastic class-based, object-oriented language that pushes back on the idea that JavaScript should have a monopoly on web application development. It can be used both server side (dartVM) and client side (web browser) to build any application from a simple script to a full-blown 3D web game.

Introducing Dart is a joyride of game programming where the user harnesses the power of the Dart programming language. The techniques shown in these videos can easily be applied and expanded upon to create any kind of interactive web application.

We begin by learning how to install the Dart development environment, and how to get started using the Dart Editor. We then walk through building our game step-by-step until we are left with a fully functional game called “Dart Worm”.

At the first step you will be introduced to the Dart SDK and the Dart editor software. This will provide the environment where we will design and develop our main project. Then you will learn how to use Dart to access the elements on a web page (called the DOM). Once these elements are accessed you will be shown how to manipulate them by calling methods, and how to add and remove elements from the DOM dynamically.

As we move on we will be covering specific Dart classes that will help us bring the different components of our game to life. We will learn how to animate our game, keep score, and present the user with controls. Eventually, we will be putting everything we learned together and building our final game.

When you have completed these videos, you will have all of the tools necessary to build and deploy a fully functional web application using the Dart programming language.

About The Author

James Slocum is a Software Developer for TelVue, and an adjunct Computer Science professor at Mercer County Community College. He studied Computer Engineering and Computer Science at the New Jersey Institute of Technology, graduating in 2008. His first article about Dart was featured in the March 2013 (#227) issue of Linux Journal.

Who is the target audience?
  • You will get the most from this video course if you are already familiar with web development technologies such as HTML5 and CSS3.
Compare to Other Web Development Courses
Curriculum For This Course
21 Lectures
Getting Started with the Dart Editor
5 Lectures 16:03

This video will offer the overview of the course.

The Course Overview

We want to start programming in Dart. We first need to install the Dart SDK and editor software so that we can begin programming. We can find this software at

Installing the Dart SDK and Editor

Now that we have the editor installed, you need to learn how to start a new project. We will choose file|new project. Then we add a new file to our project, and finally we run our project.

Jumping in with Our First Dart Program

Now that we know how to make a new project, we want to start our Worm project, where we will be doing our work for the rest of the videos.

Setting Up Our Worm Project

Before we can start creating a web application, we need to lay out the template HTML and CSS. We will add HTML and CSS to our project so that we can begin adding worms and food on the screen.

Getting the HTML and CSS for the Game in Place
Interacting with the DOM Using Dart
3 Lectures 08:16

We need some way to access the HTML objects laid out in the DOM so that we can manipulate them.

Preview 03:02

Now that we have accessed an element, what are the things we can do with it? How do we change its properties?

Calling Methods on DOM Elements

We need some way of adding new elements to the DOM, and taking some away. We will explore how we can do this.

Dynamically Adding and Removing Elements from the DOM
Putting Some Boogie in the Worm
4 Lectures 12:51

In our game, the worm needs some food objects on the screen to eat and grow longer. We will be implementing the basic style for our worm's food and testing it with static HTML.

Preview 04:20

It is not very interesting for the player if the food objects always appear in the same place. So, we will use the dart:math:Random class to generate random positions for our food objects.

The Dart Random Number Generator

As of now, we don't really have a game because nothing is moving. To get things moving, we will be using the Timer class in the dart:async library to trigger periodic events.

Using Timers to Create Simple Animations

Our project is starting to grow, in both size and complexity, and we don't want it to get out of hand. We need to start breaking our parts into classes and utilizing the OOP facilities that are provided by Dart.

Creating and Implementing a Proper Worm Class
Reacting to Key Press Events
3 Lectures 07:16

Right now, we have no way for the user to control the game. We will use the onKeyPress() method provided by the dart:html:Document object to handle key press events and make the DOM react.

Preview 02:05

Now that we can react to any key being pressed, we need a way to figure out which key was pressed and react differently, depending on the result. To do this, we will expand our callback and use the KeyboardEvent.charcode property to figure out which key was pressed.

Figuring Which Key Was Pressed by the User

Now that we are getting the game controls in place and functional, it is a good time to implement the pause, resume, and reset functionality. We are presenting this here because we will be using these functions when wrapping up the development process in the next section.

Implementing the Game Logic for Pause, Resume, and Reset
Putting the Game Together
3 Lectures 08:25

So far, we have created the individual parts of the game and gotten them animated and under the control of the user. Now we must program the interactions between all the elements.

Preview 02:59

Now that we know whether the worm intersects with food objects, we need to know whether it goes out of bounds, or runs into itself. We can also set a score that means that the user has won if they achieve it.

Implementing the Win and Game Over Scenarios

Now that our base game is complete and playable, how do we release it to players all over the world? We can compile our game to JavaScript and it can be played on other browsers.

Testing Our Gameplay and Cross-compiling to JavaScript
Adding Some Flair
3 Lectures 11:11

We now have our complete basic game, but we want to add some more flair to the game. We can expand our CSS to make our game more presentable.

Preview 03:04

We have our game over and game winning scenarios, but they are boring. We can use CSS animations to help make these announcements more presentable.

Dart and CSS Animations

Our game is now complete, but is it really? What else can we do to make it better?

Conclusion and Further Expansions of the Game
About the Instructor
Packt Publishing
3.9 Average rating
8,249 Reviews
59,067 Students
687 Courses
Tech Knowledge in Motion

Packt has been committed to developer learning since 2004. A lot has changed in software since then - but Packt has remained responsive to these changes, continuing to look forward at the trends and tools defining the way we work and live. And how to put them to work.

With an extensive library of content - more than 4000 books and video courses -Packt's mission is to help developers stay relevant in a rapidly changing world. From new web frameworks and programming languages, to cutting edge data analytics, and DevOps, Packt takes software professionals in every field to what's important to them now.

From skills that will help you to develop and future proof your career to immediate solutions to every day tech challenges, Packt is a go-to resource to make you a better, smarter developer.

Packt Udemy courses continue this tradition, bringing you comprehensive yet concise video courses straight from the experts.