1
00:00:00,000 --> 00:00:02,000
[? Music ?]

2
00:00:02,000 --> 00:00:06,000
[Code Racer] [Introduction to Code Racer]

3
00:00:06,000 --> 00:00:08,000
Hi, I'm Nick Pettit from Treehouse.

4
00:00:08,000 --> 00:00:10,000
[Nick Pettit] [Treehouse Teacher] Every once in a while, our company gets together

5
00:00:10,000 --> 00:00:14,000
for an idea week where we build something completely awesome

6
00:00:14,000 --> 00:00:17,000
and totally different from what we normally get to work on.

7
00:00:17,000 --> 00:00:20,000
When we were kicking around ideas for our latest idea week,

8
00:00:20,000 --> 00:00:22,000
we knew that we wanted to create a fresh brand,

9
00:00:22,000 --> 00:00:26,000
something for the real-time Web and something that would help people learn,

10
00:00:26,000 --> 00:00:29,000
and that is when we came up with the idea for Code Racer.

11
00:00:29,000 --> 00:00:31,000
[? Music ?] [Code Racer] [Battle It Out and Learn to Code] [Treehouse]

12
00:00:31,000 --> 00:00:34,000
Code Racer is a game where people learn how to make

13
00:00:34,000 --> 00:00:37,000
a basic HTML webpage, and then they compete against one another

14
00:00:37,000 --> 00:00:39,000
to see who can do it the fastest.

15
00:00:39,000 --> 00:00:42,000
You can see what your opponents are typing in real time

16
00:00:42,000 --> 00:00:45,000
using various weapons against each other like cats,

17
00:00:45,000 --> 00:00:47,000
and when you're all done, you have a cool webpage

18
00:00:47,000 --> 00:00:50,000
that you built all by yourself.

19
00:00:50,000 --> 00:00:52,000
This idea sounds simple enough, but put another way,

20
00:00:52,000 --> 00:00:56,000
we wanted to build a multi-player game based around meta programming,

21
00:00:56,000 --> 00:00:58,000
and we wanted to do it all in the web browser.

22
00:00:58,000 --> 00:01:00,000
It doesn't sound so simple anymore, does it?

23
00:01:00,000 --> 00:01:02,000
That's because it's not.

24
00:01:02,000 --> 00:01:05,000
Code Racer was made using the latest and greatest JavaScript technologies,

25
00:01:05,000 --> 00:01:07,000
and the user-facing side of Code Racer

26
00:01:07,000 --> 00:01:10,000
has an amazing illustrative brand to boot.

27
00:01:10,000 --> 00:01:12,000
This took a lot of work from about 20 people 

28
00:01:12,000 --> 00:01:14,000
over the course of 4 very long days.

29
00:01:14,000 --> 00:01:18,000
We made it, but it wasn't easy.

30
00:01:18,000 --> 00:01:20,000
In this series of project videos, we're going to highlight

31
00:01:20,000 --> 00:01:22,000
some of the most interesting parts of Code Racer

32
00:01:22,000 --> 00:01:24,000
and show you how we used some of the most advanced technologies

33
00:01:24,000 --> 00:01:29,000
and techniques that are currently available to web designers and developers.

34
00:01:29,000 --> 00:01:32,000
Go Code Racer!

35
00:01:32,000 --> 00:01:35,000
On day 1 of Code Racer, we already  had a pretty good idea

36
00:01:35,000 --> 00:01:37,000
of what we wanted to build, however,

37
00:01:37,000 --> 00:01:39,000
there was still a lot of conceptualization to happen 

38
00:01:39,000 --> 00:01:42,000
on both the design and the development side.

39
00:01:42,000 --> 00:01:44,000
Mat was working on developing the illustrative style

40
00:01:44,000 --> 00:01:47,000
for our brand, our logo, and our homepage.

41
00:01:47,000 --> 00:01:50,000
Meanwhile, Jim was working with the development team

42
00:01:50,000 --> 00:01:52,000
to build the real-time parts of the web app.

43
00:01:52,000 --> 00:01:57,000
Specifically, Jim was working with Node.js.